Añado archivos html, css, js para una primera prueba de funcionamiento de la app

2025-07-02 10:24:44 +02:00
parent a41320732d
commit 2dabd33130
9 changed files with 184 additions and 17 deletions
@@ -0,0 +1,65 @@
+const sonido = new Audio("/static/media/0457.wav");
+const estadoAnterior = {};
+
+function cargarTabla() {
+    fetch("/api/datos")
+        .then(res => res.json())
+        .then(filas => {
+            const tbody = document.getElementById("turnos");
+            tbody.innerHTML = "";
+            filas.forEach(fila => {
+                const id = fila[0];
+
+                const tr = document.createElement("tr");
+
+                const td1 = document.createElement("td");
+                td1.textContent = fila[0];
+                td1.className = "border px-4 py-2 bg-[#114b94] align-middle";
+                tr.appendChild(td1);
+
+                const td2 = document.createElement("td");
+
+                const estadoConsulta = fila[1];
+                const estadoTurno = fila[3];
+
+                if (estadoConsulta == 0) {
+                    td2.textContent = "-";
+                    td2.className = "border px-4 py-2 bg-[#a9a9a9] align-middle";
+                } else if (estadoConsulta == 1) {
+                    td2.textContent = fila[2];
+                    if (estadoTurno == 1) {
+                        sonido.play();
+                        td2.className = "border px-4 py-2 blink-yellow align-middle";
+                    } else {
+                        td2.className = "border px-4 py-2 bg-[#0a6eb2] align-middle";
+                    }
+                } else {
+                    td2.textContent = fila[2];
+                    td2.className = "border px-4 py-2 bg-[#a9a9a9] align-middle";
+                }
+
+                if (estadoAnterior[id] === 2 && estadoTurno === 1) {
+                    sonido.play();
+                }
+
+                estadoAnterior[id] = estadoTurno;
+
+                tr.appendChild(td2);
+                tbody.appendChild(tr);
+            });
+        });
+}
+
+function cargarFooter() {
+  fetch("/api/footer")
+    .then(res => res.text())
+    .then(data => {
+      const footerText = document.getElementById("footer-text");
+      footerText.textContent = data.mensaje;
+    });
+}
+
+cargarFooter();
+cargarTabla();
+setInterval(cargarTabla, 30000);
+setInterval(cargarFooter, 60000);
@@ -0,0 +1,39 @@
+document.addEventListener("DOMContentLoaded", () => {
+
+  function mostrarFecha() {
+    const hoy = new Date();
+
+    const opciones = {
+      weekday: 'long',
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric'
+    };
+
+    const fechaFormateada = hoy.toLocaleDateString('es-ES', opciones);
+
+    const divFecha = document.getElementById('fecha');
+    if (divFecha) {
+      divFecha.textContent = fechaFormateada;
+    }
+  }
+
+  function actualizarHora() {
+    const ahora = new Date();
+
+    const horas = String(ahora.getHours()).padStart(2, '0');
+    const minutos = String(ahora.getMinutes()).padStart(2, '0');
+    const segundos = String(ahora.getSeconds()).padStart(2, '0');
+
+    const horaFormateada = `${horas}:${minutos}:${segundos}`;
+
+    const divHora = document.getElementById('hora');
+    if (divHora) {
+      divHora.textContent = horaFormateada;
+    }
+  }
+
+  mostrarFecha();
+  actualizarHora();
+  setInterval(actualizarHora, 1000); 
+});