{% extends "base.html" %}

{% block content %}
  <style>
    table {
      font-family: arial, sans-serif;
      border-collapse: collapse;
      margin-left: auto;
      margin-right: auto;
      width: 80%;
    }
    td, th {
      border: 1px solid #dddddd;
      text-align: left;
      padding: 8px;
      width: 50%;
    }
    #grid {
      display: grid;
      grid-template-columns: 25% 50% 25%;
    }
    #gridColum {
      text-align: center;
    }
    #image {
      width: 90%;
    }
  </style>
  <div id="grid">
    <div id="gridColumn">
      <!--only here for spacing-->
    </div>
    <div id="gridColumn">
      <!--the "//:0" is a basically the way to make any empty img-->
      <img id="image" src="//:0" alt="camera"/>
      <br/>
      <button onclick="downloadRawImage()">Download Raw Image</button>
      <button onclick="downloadDisplayImage()">Download Display Image</button>
    </div>
    <div id="gridColumn">
      <h4>State Machine</h4>
      <table>
        <tr>
          <td>Status</td>
          <td><span id="cfcState">OFF</span></td>
        </tr>
        <tr>
          <td>Capture Delay</td>
          <td><span id="captureDelay">1000</span> ms</td>
        </tr>
        <tr>
          <td>Capture Amount</td>
          <td><span id="captureAmount">1</span></td>
        </tr>
        <tr>
          <td>Save Captures</td>
          <td><span id="saveCaptures">TRUE</span></td>
        </tr>
      </table>
      <br />
      <h4>Camera</h4>
      <table>
        <tr>
          <td>Enable Status</td>
          <td><span id="cameraStatus">DISABLED</span></td>
        </tr>
        <tr>
          <td>Integration Time</td>
          <td><span id="cameraIntegrationTime">0</span> us</td>
        </tr>
        <tr>
          <td>Current Temperature</td>
          <td><span id="cameraTemperature">0</span> °C</td>
        </tr>
      </table>
      <br />
      <h4>TEC (Thermoelectric Cooler) Controller</h4>
      <table>
        <tr>
          <td>Enable Status</td>
          <td><span id="tecStatus">DISABLED</span></td>
        </tr>
        <tr>
          <td>Saturation Status</td>
          <td><span id="tecSaturated">SATURATED</span></td>
        </tr>
        <tr>
          <td>Target Temperature</td>
          <td><span id="tecSetpoint">0</span> °C</td>
        </tr>
      </table>
      <br />
      <div>
        <button id="changeSettings">Change Settings</button>
      </div>
    </div>
  </div>
  <dialog id="favDialog">
    <form method="dialog">
      <p>
        <b>Change Settings</b>
        <br>
        <br>
        <b>State Machine</b>
        <br>
        <br>
        <label for="newState">State:</label>
        <select id="newState" name="newState">
          <option id="newStateOFF">OFF</option>
          <option id="newStateSTANDBY">STANDBY</option>
          <option id="newStateCAPTURE">CAPTURE</option>
        </select>
        <br>
        <br>
        <label for="newCapDelay">Capture Delay (ms):</label>
        <input id="newCapDelay" type="number" step="1">
        <br>
        <br>
        <label for="newCapAmount">Capture Amount:</label>
        <input id="newCapAmount" type="number" step="1">
        <br>
        <br>
        <label for="newCapSave">Save Captures:</label>
        <input id="newCapSave" type="checkbox">
        <br>
        <br>
        <b>Camera</b>
        <br>
        <br>
        <label for="newIntTime">Integration Time (us) [Max: 80000]:</label>
        <input id="newIntTime" type="number" min=1 max=80000>
        <br>
        <br>
        <b>TEC</b>
        <br>
        <br>
        <label for="newTecStatus">Enable:</label>
        <input id="newTecStatus" type="checkbox">
        <br>
        <br>
        <label for="newSetpoint">Target Temperature (°C):</label>
        <input id="newSetpoint" type="number" step="1">
      </p>
      <div>
        <button id="cancel" type="reset">Cancel</button>
        <button id="submit" type="submit">Set</button>
      </div>
    </form>
  </dialog>
  <script>
    let lastDisplayImage;
    const settingsButton = document.getElementById("changeSettings");
    const cancelButton = document.getElementById("cancel");
    const submitButton = document.getElementById("submit");
    const dialog = document.getElementById("favDialog");
    dialog.returnValue = "cancel";

    async function openCheck(dialog) {
      if (dialog.open) {
        const stateObj = await readValue("camera", "status");
        const capDelayObj = await readValue("camera", "capture_delay");
        const capAmountObj = await readValue("camera", "number_to_capture");
        const capSaveObj = await readValue("camera", "save_captures");
        const intTimeObj = await readValue("camera", "integration_time");
        const tecStatusObj = await readValue("tec", "status");
        const tecSetpointObj = await readValue("tec", "pid_setpoint");
        const state = stateObj.value;
        const stateStr = STATES[state];

        // change select options based off transistions
        if (stateStr === "OFF") {
          document.getElementById("newStateSTANDBY").disabled = false;
          document.getElementById("newStateCAPTURE").disabled = true;
          document.getElementById("newIntTime").disabled = true;
        } else if (stateStr === "STANDBY" || stateStr === "CAPTURE") {
          document.getElementById("newStateSTANDBY").disabled = false;
          document.getElementById("newStateCAPTURE").disabled = false;
          document.getElementById("newIntTime").disabled = false;
        } else {
          document.getElementById("newStateSTANDBY").disabled = true;
          document.getElementById("newStateCAPTURE").disabled = true;
          document.getElementById("newIntTime").disabled = true;
        }

        document.getElementById("newState").selectedIndex = state - 1;
        document.getElementById("newCapSave").checked = capSaveObj.value;
        document.getElementById("newCapDelay").value = capDelayObj.value;
        document.getElementById("newCapAmount").value = capAmountObj.value;
        document.getElementById("newIntTime").value = Math.round(intTimeObj.value);
        document.getElementById("newTecStatus").checked = tecStatusObj.value;
        document.getElementById("newSetpoint").value = tecSetpointObj.value;
      } else if (dialog.returnValue === "submit") {
        writeValue("camera", "capture_delay", parseInt(document.getElementById("newCapDelay").value));
        writeValue("camera", "number_to_capture", parseInt(document.getElementById("newCapAmount").value));
        writeValue("camera", "save_captures", document.getElementById("newCapSave").checked);
        if (parseFloat(document.getElementById("newIntTime").value) > 0) {
          writeValue("camera", "integration_time", parseInt(document.getElementById("newIntTime").value));
        }
        writeValue("tec", "status", document.getElementById("newTecStatus").checked);
        writeValue("tec", "pid_setpoint", document.getElementById("newSetpoint").value);
        writeValue("camera", "status", document.getElementById("newState").selectedIndex + 1);
      }
    }

    /** Update button opens a modal dialog */
    settingsButton.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
    });

    /** Form cancel button closes the dialog box */
    cancelButton.addEventListener("click", () => {
      dialog.close("cancel");
      openCheck(dialog);
    });

    /** Form submit button closes the dialog box */
    submitButton.addEventListener("click", () => {
      dialog.close("submit");
      openCheck(dialog);
    });

    /** Let the user download the raw image */
    async function downloadRawImage() {
      let obj = await readValue("camera", "last_capture");
      const unixTime = Math.floor(Date.now() / 1000);
      downloadFile(`cfc_capture_${unixTime}.raw`, obj.value);
    }

    /** Let the user download the display image */
    function downloadDisplayImage() {
      const unixTime = Math.floor(Date.now() / 1000);
      downloadFile(`cfc_capture_${unixTime}.jpg`, lastDisplayImage);
    }

    /** Let the user download a file */
    function downloadFile(filename, data) {
      const byteCharacters = atob(data);
      const byteArrays = [];
      const sliceSize = 512;

      for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        const slice = byteCharacters.slice(offset, offset + sliceSize);

        const byteNumbers = new Array(slice.length);
        for (let i = 0; i < slice.length; i++) {
          byteNumbers[i] = slice.charCodeAt(i);
        }

        const byteArray = new Uint8Array(byteNumbers);
        byteArrays.push(byteArray);
      }

      const blob = new Blob(byteArrays, {
        type: "application/octet-stream",
      });

      const a = document.createElement("a");
      a.download = filename;
      a.href = window.URL.createObjectURL(blob);
      a.click();
    }

    const STATES = {
      0x01: "OFF",
      0x02: "STANDBY",
      0x03: "CAPTURE",
      0xFF: "ERROR",
    };
    let lastCapture = 0;

    /** Update all info / data being displayed */
    async function update() {
      let obj;

      // get capture info
      obj = await readValue("camera", "status");
      let state = STATES[obj.value];
      document.getElementById("cfcState").innerHTML = state;
      obj = await readValue("camera", "capture_delay");
      document.getElementById("captureDelay").innerHTML = obj.value;
      obj = await readValue("camera", "number_to_capture");
      document.getElementById("captureAmount").innerHTML = obj.value;
      obj = await readValue("camera", "save_captures");
      if (obj.value === true) {
        document.getElementById("saveCaptures").innerHTML = "TRUE";
      } else {
        document.getElementById("saveCaptures").innerHTML = "FALSE";
      }

      // get last image capture for display
      obj = await readValue("camera", "last_capture_time");
      if (state != "OFF" && obj.value != lastCapture) {
        lastCapture = obj.value;
        obj = await readValue("camera", "last_display_image");
        lastDisplayImage = obj.value;
        document.getElementById("image").src = "data:image/jpg;base64, " + obj.value;
      }

      // get camera info
      obj = await readValue("camera", "enabled");
      if (obj.value === true) {
        document.getElementById("cameraStatus").innerHTML = "ENABLED";
      } else {
        document.getElementById("cameraStatus").innerHTML = "DISABLED";
      }
      obj = await readValue("camera", "temperature");
      document.getElementById("cameraTemperature").innerHTML = obj.value;
      obj = await readValue("camera", "integration_time");
      document.getElementById("cameraIntegrationTime").innerHTML = Math.round(obj.value);

      // update TEC info
      obj = await readValue("tec", "status");
      if (obj.value === true) {
        document.getElementById("tecStatus").innerHTML = "ENABLED";
      } else {
        document.getElementById("tecStatus").innerHTML = "DISABLED";
      }
      obj = await readValue("tec", "saturated");
      if (obj.value) {
        document.getElementById("tecSaturated").innerHTML = "SATURATED";
      } else {
        document.getElementById("tecSaturated").innerHTML = "NOT_SATURATED";
      }
      obj = await readValue("tec", "pid_setpoint");
      document.getElementById("tecSetpoint").innerHTML = obj.value;
    }

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