adición mapa

2026-02-23 10:57:04 +01:00
parent e62e48f78d
commit a8c1d96b54
5 changed files with 277 additions and 578 deletions
--- a/editor_lineas.html
+++ b/editor_lineas.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <title>Bus Editor - EMTUSA Simulator</title>
+    <style>
+        body { font-family: sans-serif; background: #f0f0f0; padding: 20px; display: flex; gap: 20px; }
+        .panel { background: white; padding: 20px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); flex: 1; }
+        h2 { color: #004a99; margin-top: 0; }
+        label { display: block; margin: 10px 0 5px; font-weight: bold; }
+        input, select, textarea { width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; }
+        button { background: #004a99; color: white; border: none; padding: 10px 15px; border-radius: 4px; cursor: pointer; margin-top: 10px; }
+        button:hover { background: #003366; }
+        .output { background: #222; color: #0f0; padding: 15px; border-radius: 5px; font-family: 'Courier New', monospace; overflow-y: auto; max-height: 500px; white-space: pre-wrap; }
+        .parada-item { border: 1px solid #eee; padding: 10px; margin-bottom: 10px; border-radius: 4px; background: #fafafa; }
+    </style>
+</head>
+<body>
+
+<div class="panel">
+    <h2>Configuración de Línea</h2>
+    <label>ID de Línea (ej: L3):</label>
+    <input type="text" id="linea-id" placeholder="L3">
+    
+    <label>Nombre Completo:</label>
+    <input type="text" id="linea-nombre" placeholder="Línea 3: Zafra - Orden Baja">
+
+    <h3>Añadir Parada</h3>
+    <div id="form-parada" style="border-top: 1px solid #ccc; padding-top: 10px;">
+        <label>ID Parada (Audio):</label>
+        <input type="text" id="parada-id" placeholder="molino_vega">
+        
+        <label>Nombre Visual:</label>
+        <input type="text" id="parada-nombre" placeholder="Molino de la Vega">
+        
+        <label>Enlaces (separados por coma):</label>
+        <input type="text" id="parada-enlaces" placeholder="L2, L4">
+        
+        <button onclick="addParada()">Añadir a la lista</button>
+    </div>
+
+    <h3>Paradas Actuales</h3>
+    <div id="lista-paradas"></div>
+</div>
+
+<div class="panel">
+    <h2>JSON Resultante</h2>
+    <p>Copia este código y pégalo en tu archivo .json usando VIM:</p>
+    <button onclick="generarJSON()">Generar JSON</button>
+    <div id="json-output" class="output">El JSON aparecerá aquí...</div>
+</div>
+
+<script>
+    let paradas = [];
+
+    function addParada() {
+        const id = document.getElementById('parada-id').value;
+        const nombre = document.getElementById('parada-nombre').value;
+        const enlaces = document.getElementById('parada-enlaces').value.split(',').map(e => e.trim()).filter(e => e !== "");
+
+        if(!id || !nombre) return alert("Rellena ID y Nombre de parada");
+
+        paradas.push({ id, nombre, enlaces });
+        renderParadas();
+        
+        // Limpiar campos
+        document.getElementById('parada-id').value = "";
+        document.getElementById('parada-nombre').value = "";
+        document.getElementById('parada-enlaces').value = "";
+    }
+
+    function renderParadas() {
+        const div = document.getElementById('lista-paradas');
+        div.innerHTML = paradas.map((p, index) => `
+            <div class="parada-item">
+                <strong>${p.nombre}</strong> (${p.id}) 
+                <br><small>Enlaces: ${p.enlaces.join(', ') || 'Ninguno'}</small>
+                <button style="background:red; padding:2px 5px; font-size:10px;" onclick="eliminarParada(${index})">X</button>
+            </div>
+        `).join('');
+    }
+
+    function eliminarParada(index) {
+        paradas.splice(index, 1);
+        renderParadas();
+    }
+
+    function generarJSON() {
+        const lineaId = document.getElementById('linea-id').value || "LX";
+        const lineaNombre = document.getElementById('linea-nombre').value || "Nueva Línea";
+
+        const resultado = {
+            [lineaId]: {
+                nombre: lineaNombre,
+                paradas: paradas
+            }
+        };
+
+        document.getElementById('json-output').innerText = JSON.stringify(resultado, null, 2);
+    }
+</script>
+
+</body>
+</html>