templates/index.html

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="600" />
    <title>Security Lab - Informática UAI</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="{{ url_for('static', filename='styles.css') }}"
    />
    <script>
      // Obtener la lista de tutores desde el backend
      const tutors = {{ tutores | tojson }};

      function fetchEstudiantes() {
        fetch("/estudiantes")
          .then((response) => response.json())
          .then((data) => {
            const estudiantesList = document.getElementById("estudiantes-list");
            estudiantesList.innerHTML = "";

            if (data.estudiantes.length === 0) {
              const li = document.createElement("li");
              li.className = "no-estudiantes";
              li.textContent = "No hay estudiantes en el laboratorio";
              estudiantesList.appendChild(li);
            } else {
              data.estudiantes.forEach((estudiante) => {
                const li = document.createElement("li");
                // Usamos position relative para posicionar elementos internos de forma absoluta y text-align center para centrar el nombre
                li.style.position = "relative";
                li.style.padding = "0.5rem";
                li.style.textAlign = "center";

                // Creamos el span para el nombre, centrado por el text-align del li
                const nameSpan = document.createElement("span");
                nameSpan.textContent = estudiante;
                nameSpan.className = "name";

                li.appendChild(nameSpan);

                // Si es tutor, agregamos el texto "(Encargado)" alineado a la derecha usando posicionamiento absoluto
                if (tutors.includes(estudiante)) {
                  li.className = "tutor"; // aplicar clase para estilos adicionales si se desea
                  const encargadoSpan = document.createElement("span");
                  encargadoSpan.textContent = " (Encargado)";
                  encargadoSpan.className = "encargado";
                  encargadoSpan.style.position = "absolute";
                  encargadoSpan.style.right = "0";
                  encargadoSpan.style.top = "50%";
                  encargadoSpan.style.transform = "translateY(-50%)";
                  encargadoSpan.style.marginRight = "10px";  // márgen a la derecha
                  encargadoSpan.style.fontWeight = "bold";   // texto en negrita
                  li.appendChild(encargadoSpan);
                } else {
                  li.className = "student";
                }

                estudiantesList.appendChild(li);
              });
            }
          });
      }

      // Actualizar la lista de estudiantes cada 3 segundos
      setInterval(fetchEstudiantes, 3000);

      // Actualizar la lista de estudiantes cuando la página se carga
      window.onload = fetchEstudiantes;
    </script>
  </head>
  <body>
    <div id="particles-js"></div>
    <div class="content">
      <h1>Security Lab - Informática UAI</h1>
      <div class="container">
        <div class="left">
          <h2>Estudiantes en el Laboratorio</h2>
          <div class="table-container">
            <ul id="estudiantes-list">
              <!-- La lista de estudiantes se llenará aquí -->
            </ul>
          </div>
        </div>
        <div class="right">
          <h2>Formulario de Entrada/Salida</h2>
          <div class="qr-code">
            <img src="data:image/png;base64,{{ qr_code }}" alt="QR Code" />
          </div>
        </div>
      </div>
    </div>

    <div class="version">
      Versión 1.3.0
    </div>

    <script src="{{ url_for('static', filename='js/particles.min.js') }}"></script>
    <script>
      particlesJS.load(
        "particles-js",
        "{{ url_for('static', filename='js/particles-config.json') }}",
        function () {
          console.log("particles.js config loaded");
        }
      );
    </script>
    <script>
      function updateTime() {
        const now = new Date();
        const hours = String(now.getHours()).padStart(2, "0");
        const minutes = String(now.getMinutes()).padStart(2, "0");
        const seconds = String(now.getSeconds()).padStart(2, "0");
        const currentTime = `${hours}:${minutes}:${seconds}`;

        document.getElementById("current-time").textContent = currentTime;
      }

      // Update the time every second
      setInterval(updateTime, 1000);

      // Set the initial time
      updateTime();
    </script>
    <div id="current-time"></div>
  </body>
</html>