los campos, medio, ala, escuadron, servicio armado, base, actividad, salida, destino, y radar seran combos desplegables que no permitiran modificar la lista de datos del combo desplegable, los datos de cada combo se tomaran de un fichero CSV donde la cabesa de cada columna coincide con en nombre del combo desplegable, y los datos estaran en sus correspodikentes comlumnas
bbd7f38 verified | <html lang="es"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SkyLog - Registro de Vuelos</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/footer.js"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <custom-navbar></custom-navbar> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="max-w-4xl mx-auto bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="bg-blue-600 py-4 px-6"> | |
| <h1 class="text-2xl font-bold text-white">Registro de Operaciones Aéreas</h1> | |
| </div> | |
| <form id="flightForm" class="p-6 grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- Fecha y Hora --> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Fecha</label> | |
| <input type="date" name="fecha" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Hora</label> | |
| <input type="time" name="hora" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <!-- Identificación --> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Indicativo</label> | |
| <input type="text" name="indicativo" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Medio</label> | |
| <select name="medio" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" required> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <!-- Organización --> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Ala</label> | |
| <select name="ala" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Escuadrón</label> | |
| <select name="escuadron" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Servicio Armado</label> | |
| <select name="servicio_armado" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Base</label> | |
| <select name="base" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <!-- Detalles de vuelo --> | |
| <div class="space-y-2 md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700">Actividad</label> | |
| <select name="actividad" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Salida</label> | |
| <select name="salida" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Destino</label> | |
| <select name="destino" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Altura (pies)</label> | |
| <input type="number" name="altura" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Modo-S</label> | |
| <input type="text" name="modo_s" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Código</label> | |
| <input type="text" name="codigo" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="block text-sm font-medium text-gray-700">Radar</label> | |
| <select name="radar" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option value="">Seleccione...</option> | |
| </select> | |
| </div> | |
| <!-- Observaciones --> | |
| <div class="space-y-2 md:col-span-2"> | |
| <label class="block text-sm font-medium text-gray-700">Observaciones</label> | |
| <textarea name="observaciones" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <!-- Botones --> | |
| <div class="md:col-span-2 flex justify-end space-x-4"> | |
| <button type="reset" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| Limpiar | |
| </button> | |
| <button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i data-feather="save" class="inline mr-2"></i> Guardar | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </main> | |
| <custom-footer></custom-footer> | |
| <script> | |
| feather.replace(); | |
| document.getElementById('flightForm').addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const formData = new FormData(this); | |
| const data = Object.fromEntries(formData.entries()); | |
| try { | |
| // Aquí iría la conexión con tu backend | |
| const response = await fetch('/api/flights', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify(data), | |
| }); | |
| if (response.ok) { | |
| alert('Registro guardado con éxito'); | |
| this.reset(); | |
| } else { | |
| throw new Error('Error al guardar'); | |
| } | |
| } catch (error) { | |
| console.error('Error:', error); | |
| alert('Error al guardar el registro'); | |
| } | |
| }); | |
| </script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |