{% extends "base.html" %}

{% block content %}
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      margin-left: auto;
      margin-right: auto;
    }
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
    }
    #grid {
      display: grid;
      grid-template-columns: auto auto;
    }
  </style>
  <div id="grid">
    <div>
      <h4>SkyTraq Control</h4>
      <table>
        <tr>
          <td>Status</td>
          <td><span id="status"></span></td>
        </tr>
        <tr>
          <td>Time Syncd</td>
          <td><span id="time_syncd"></span></td>
        </tr>
      </table>
    </div>
    <div>
      <h4>SkyTraq Data</h4>
      <table>
        <tr>
          <td>Fix Mode</td>
          <td><span id="fix_mode"></span></td>
        </tr>
        <tr>
          <td>Number of SVs</td>
          <td><span id="number_of_sv"></span></td>
        </tr>
        <tr>
          <td>GPS Week</td>
          <td><span id="gps_week"></span></td>
        </tr>
        <tr>
          <td>TOW</td>
          <td><span id="tow"></span> s</td>
        </tr>
        <tr>
          <td>Latitude</td>
          <td><span id="latitude"></span> degrees</td>
        </tr>
        <tr>
          <td>Longitude</td>
          <td><span id="longitude"></span> degrees</td>
        </tr>
        <tr>
          <td>Ellipsoid Altitude</td>
          <td><span id="ellipsoid_alt"></span> m</td>
        </tr>
        <tr>
          <td>Mean Sea Level Altitude</td>
          <td><span id="mean_sea_lvl_alt"></span> m</td>
        </tr>
        <tr>
          <td>GDOP</td>
          <td><span id="gdop"></span></td>
        </tr>
        <tr>
          <td>PDOP</td>
          <td><span id="pdop"></span></td>
        </tr>
        <tr>
          <td>HDOP</td>
          <td><span id="hdop"></span></td>
        </tr>
        <tr>
          <td>VDOP</td>
          <td><span id="vdop"></span></td>
        </tr>
        <tr>
          <td>TDOP</td>
          <td><span id="tdop"></span></td>
        </tr>
        <tr>
          <td>ECEF X</td>
          <td><span id="ecef_x"></span> km</td>
        </tr>
        <tr>
          <td>EXEF Y</td>
          <td><span id="ecef_y"></span> km</td>
        </tr>
        <tr>
          <td>ECEF Z</td>
          <td><span id="ecef_z"></span> km</td>
        </tr>
        <tr>
          <td>ECEF VX</td>
          <td><span id="ecef_vx"></span> km / s</td>
        </tr>
          <tr>
          <td>ECEF VY</td>
          <td><span id="ecef_vy"></span> km / s</td>
        </tr>
        <tr>
          <td>ECEF VZ</td>
          <td><span id="ecef_vz"></span> km / s</td>
        </tr>
      </table>
    </div>
  </div>
  <script>
    const FIX_MODES = {
      0: "NO_FIX",
      1: "2D",
      2: "3D",
      3: "3D+DGPS",
    };

    const STATES = {
      0: "OFF",
      1: "SEARCHING",
      2: "LOCKED_ON",
      255: "FAILED",
    };

    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;

    async function updateAll() {
      let obj = await readValue("skytraq", null);
      for (const subindex in obj.subindexes) {
        let sub_obj = obj.subindexes[subindex];
        const tmp = document.getElementById(sub_obj.name);

        switch(sub_obj.name) {
        case "fix_mode":
          tmp.textContent = FIX_MODES[sub_obj.value];
          break;
        case "number_of_sv":
        case "gps_week":
          tmp.textContent = sub_obj.value;
          break;
        case "latitude":
        case "longitude":
          tmp.textContent = (sub_obj.value / 1e7).toFixed(3);
          break;
        case "tow":
        case "ellipsoid_alt":
        case "mean_sea_lvl_alt":
        case "gdop":
        case "pdop":
        case "hdop":
        case "vdop":
        case "tdop":
          tmp.textContent = (sub_obj.value * 0.01).toFixed(2);
          break;
        case "ecef_x":
        case "ecef_y":
        case "ecef_z":
        case "ecef_vx":
        case "ecef_vy":
        case "ecef_vz":
          tmp.textContent = (sub_obj.value / 100000).toFixed(3);
          break;
        default:
          continue;
        }
      }

      obj = await readValue("status", null);
      document.getElementById("status").textContent = STATES[obj.value];
      obj = await readValue("time_syncd", null);
      document.getElementById("time_syncd").textContent = obj.value;
    }

    updateAll();
    const interval = setInterval(function() {
      updateAll();
    }, 10000);
  </script>
{% endblock %}