<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Dashboard - TFcross</title>
  </head>
  <body>
    <div class="div">
      <h1>Cronometro</h1>
      <button class="btn" id="chronoSTARTbtn">START</button>
    </div>

    <div class="div">
      <h1>Startlist</h1>
      <select name="Sartlist Code" class="select" id="startlistCODE">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      <button class="btn" id="startlistSHOWbtn">SHOW</button>
    </div>

    <div class="div">
      <h1>Results</h1>
      <select name="Results Code" class="select" id="resultsCODE">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
      </select>
      <button class="btn" id="resultsSHOWbtn">SHOW</button>
    </div>

    <style>

      h1 {
        font-family: "Ubuntu", sans-serif;
      }
      h2 {
        font-family: "Ubuntu", sans-serif;
      }
      .select{
        border-width: 5px;
        border-radius: 10px;
        font-size: 30px;
        height: 60px;
        width: 120px;
        margin-bottom: 20px;
      }

      .div {
        margin: auto;
        text-align: center;
        border-radius: 20px;
        border-color: black;
        border-width: 5px;
        border-style: solid;
        width: 20%;
        margin-bottom: 20px;
      }
      .btn {
        border-width: 5px;
        border-radius: 10px;
        font-size: 30px;
        height: 60px;
        width: 120px;
        margin-bottom: 20px;
      }
    </style>

    <script>
      const socket = new WebSocket("<%= websocketURL %>");
      const chronoSTARTbtn = document.getElementById("chronoSTARTbtn");
      const startlistSHOWbtn = document.getElementById("startlistSHOWbtn");
      const resultsSHOWbtn = document.getElementById("resultsSHOWbtn");

      chronoSTARTbtn.addEventListener("click", () => {
        if (socket.readyState === WebSocket.OPEN) {

          let jsonDATA = {
            command: "chrono"
          };

          let jsonSEND = JSON.stringify(jsonDATA);
          socket.send(jsonSEND);
        } else {
          alert("La connessione WebSocket non è aperta.");
        }
      });

      startlistSHOWbtn.addEventListener("click", () => {
        if (socket.readyState === WebSocket.OPEN) {
          let code = document.getElementById("startlistCODE").value;

          let jsonDATA = {
            command: "startlist",
            code: code,
          };

          let jsonSEND = JSON.stringify(jsonDATA);
          socket.send(jsonSEND);
        } else {
          alert("La connessione WebSocket non è aperta.");
        }
      });

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

          let jsonDATA = {
            command: "results",
            code: code,
          };

          let jsonSEND = JSON.stringify(jsonDATA);
          socket.send(jsonSEND);
        } else {
          alert("La connessione WebSocket non è aperta.");
        }
      });
    </script>
  </body>
</html>
