104 lines
4.0 KiB
HTML
104 lines
4.0 KiB
HTML
<!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> |