Fix Error: Solvento el problema del footer que no mostraba el contenido

app.py

@@ -1,8 +1,10 @@
-from flask import Flask, render_template, jsonify
+from flask import Flask, render_template, jsonify, Response
 from conexion import get_connection
 from dotenv import load_dotenv
+import os
 
 load_dotenv()
+monitor = os.getenv("MONITOR_ID")
 
 app = Flask(__name__)
 
@@ -12,7 +14,7 @@ def obtener_turnos():
         return []
     try:
         cursor = conn.cursor()
-        cursor.execute("SELECT CONS_ESTAD.CODIGO_IMPRESION CONSULTA, CONS_ESTAD.ESTADO_ID ESTADO_CONSULTA, TM.CODIGO_TURNO TURNO, TM.ESTADO_ID ESTADO_TURNO FROM CSMK_TURNO_MON TM, (SELECT ROW_NUMBER() OVER (PARTITION BY ESTADO.ESTANCIA_ID ORDER BY CONSULTA_ESTADO_ID DESC) AS RN, ESTADO.ESTADO_ID, ESTANCIA.* FROM CSMK_CONSULTA_ESTADO ESTADO, CSMK_ESTANCIA ESTANCIA WHERE ESTADO.FECHA = TRUNC (SYSDATE) AND ESTADO.ESTANCIA_ID = ESTANCIA.ESTANCIA_ID AND ESTANCIA.MONITOR_ID = 12 ORDER BY ESTADO.CONSULTA_ESTADO_ID DESC) CONS_ESTAD WHERE CONS_ESTAD.RN = 1 AND TM.ESTANCIA_ID = CONS_ESTAD.ESTANCIA_ID AND TM.MONITOR_ID = CONS_ESTAD.MONITOR_ID AND TM.ESTADO_ID IN (1,2) AND TM.FECHA = TRUNC(SYSDATE) ORDER BY CONSULTA ASC")
+        cursor.execute("SELECT CONS_ESTAD.CODIGO_IMPRESION CONSULTA, CONS_ESTAD.ESTADO_ID ESTADO_CONSULTA, TM.CODIGO_TURNO TURNO, TM.ESTADO_ID ESTADO_TURNO FROM CSMK_TURNO_MON TM, (SELECT ROW_NUMBER() OVER (PARTITION BY ESTADO.ESTANCIA_ID ORDER BY CONSULTA_ESTADO_ID DESC) AS RN, ESTADO.ESTADO_ID, ESTANCIA.* FROM CSMK_CONSULTA_ESTADO ESTADO, CSMK_ESTANCIA ESTANCIA WHERE ESTADO.FECHA = TRUNC (SYSDATE) AND ESTADO.ESTANCIA_ID = ESTANCIA.ESTANCIA_ID AND ESTANCIA.MONITOR_ID = :monitor ORDER BY ESTADO.CONSULTA_ESTADO_ID DESC) CONS_ESTAD WHERE CONS_ESTAD.RN = 1 AND TM.ESTANCIA_ID = CONS_ESTAD.ESTANCIA_ID AND TM.MONITOR_ID = CONS_ESTAD.MONITOR_ID AND TM.ESTADO_ID IN (1,2) AND TM.FECHA = TRUNC(SYSDATE) ORDER BY CONSULTA ASC",{'monitor':monitor})
         datos = cursor.fetchall()
         cursor.close()
         conn.close()
@@ -27,7 +29,7 @@ def obtener_pie():
         return []
     try:
         cursor = conn.cursor()
-        cursor.execute("SELECT MENSAJE FROM CSMK_MONITOR_PIE WHERE MONITOR_ID = 12 AND INACTIVO = 0 ORDER BY MONITOR_PIE_ID ASC")
+        cursor.execute("SELECT MENSAJE FROM CSMK_MONITOR_PIE WHERE MONITOR_ID = :monitor AND INACTIVO = 0 ORDER BY MONITOR_PIE_ID ASC",{'monitor':monitor})
         mensajes = [fila[0] for fila in cursor.fetchall()]
         mensaje_final = "          ".join(mensajes)
         cursor.close()
@@ -49,7 +51,7 @@ def api_datos():
 @app.route('/api/footer')
 def api_pie():
     mensaje = obtener_pie()
-    return jsonify(mensaje)
+    return Response(mensaje, mimetype='text/plain')
 
 if __name__ == '__main__':
     app.run(debug=True)

example.env

@@ -3,3 +3,4 @@ DB_PASSWORD=CSMKIOSCOS
 DB_HOST=192.168.1.76
 DB_PORT=1521
 DB_SID=REALRAC1
+MONITOR_ID=12

static/css/styles.css

@@ -1,15 +1,15 @@
 @keyframes scroll {
   0% {
-    transform: translateX(100%);
+    transform: translateX(0%);
   }
   100% {
-    transform: translateX(-100%);
+    transform: translateX(-50%);
   }
 }
 
 .animate-scroll {
   display: inline-block;
-  animation: scroll 20s linear infinite;
+  animation: scroll 45s linear infinite;
 }
 
 

static/js/scripts.js

@@ -1,6 +1,8 @@
 const sonido = new Audio("/static/media/0457.wav");
 const estadoAnterior = {};
 
+let ultimoFooter = "";
+
 function cargarTabla() {
     fetch("/api/datos")
         .then(res => res.json())
@@ -8,11 +10,11 @@ function cargarTabla() {
             const tbody = document.getElementById("turnos");
             tbody.innerHTML = "";
 
-            let sizeClass ="";
+            let sizeClass = "";
-            if (filas.length <= 7){
+            if (filas.length <= 7) {
-                sizeClass ="text-7xl px-4 py-2";
+                sizeClass = "text-7xl px-4 py-2";
             } else {
-                sizeClass ="text-5xl px-3 py-1"
+                sizeClass = "text-5xl px-3 py-1"
             }
 
             filas.forEach(fila => {
@@ -61,12 +63,19 @@ function cargarFooter() {
     fetch("/api/footer")
         .then(res => res.text())
         .then(data => {
+            if (data !== ultimoFooter) {
                 const footerText = document.getElementById("footer-text");
-      footerText.textContent = data.mensaje;
+                const footerTextDuplicate = document.getElementById("footer-text-duplicate");
+
+                footerText.innerHTML = data;
+                footerTextDuplicate.innerHTML = data;
+
+                ultimoFooter = data;
+            }
         });
 }
 
 cargarFooter();
 cargarTabla();
 setInterval(cargarTabla, 30000);
-setInterval(cargarFooter, 60000);
+setInterval(cargarFooter, 45000);

templates/index.html

@@ -32,8 +32,13 @@
             </table>
         </div>
     </div>
-    <footer class="w-full bg-[#008968] overflow-hidden h-14">
+    <footer class="w-full bg-[#008968] overflow-hidden h-14 flex items-center">
-        <div id="footer-text" class="text-4xl whitespace-nowrap animate-scroll px-4 text-white"></div>
+        <div class="scroll-wrapper whitespace-nowrap w-max animate-scroll">
+            <span id="footer-text" class="text-white text-3xl px-4"></span>
+            <span class="spacer w-14 inline-block"></span>
+            <span id="footer-text-duplicate" class="text-white text-3xl px-4"></span>
+        </div>
+        <div id="footer-text" class="whitespace-pre text-3xl animate-scroll whitespace-nowrap px-4 text-white"></div>
     </footer>
 </body>
 </html>