<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TripleJump Sender - TFstream</title>
  </head>
  <body>
    <div class="div">
      <h1>Triple Jump - Send Results</h1>

      <h2>Pettorale: <input type="number" name="Bib" id="bib"></h2>

      <h2>Misura: <input type="number" name="Res" id="res"></h2> <p>(0 se nullo, usa il "." (punto) per i decimali)</p>

      <h2>Next: <input type="number" name="nextBib" id="nextBib"></h2>

      <p id="alert" style="color: green; display: none;">Risultato inviato correttamente!</p>
      

      <button class="btn" id="resultsSHOWbtn">SEND</button>
    </div>

    <script>
      const socket = new WebSocket("ws://192.168.1.75:8880");
      const resultsSHOWbtn = document.getElementById("resultsSHOWbtn");

      resultsSHOWbtn.addEventListener("click", () => {
        if (socket.readyState === WebSocket.OPEN) {
          let bib = document.getElementById("bib").value;
          let res = document.getElementById("res").value;
          let nextBib = document.getElementById("nextBib").value;

          let jsonDATA = {
            command: "sendTJ",
            bib: bib,
            res: res,
            nextBib: nextBib,
          };

          document.getElementById("bib").value = "";
          document.getElementById("res").value = "";
          document.getElementById("nextBib").value = "";

          let jsonSEND = JSON.stringify(jsonDATA);
          socket.send(jsonSEND);
          var testo = document.getElementById('alert');
            testo.style.display = 'block'; // Mostra il testo
            setTimeout(function() {
                testo.style.display = 'none'; // Nascondi il testo dopo 5 secondi
            }, 5000);
        } else {
          alert("La connessione WebSocket non Ã¨ aperta.");
        }
      });
    </script>
  </body>
</html>
