From f90f45b40121b592717cd06f2557a6ff4ea84dfc Mon Sep 17 00:00:00 2001
From: huskee <huskee@selene>
Date: Tue, 19 Dec 2023 22:45:27 +0200
Subject: [PATCH] Fix interval selection

---
 data/index.html | 83 +++++++++++++++++++++++++++++++------------------
 data/script.js  | 11 ++++++-
 data/style.css  | 21 ++-----------
 3 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/data/index.html b/data/index.html
index 28d8088..5ece2ec 100644
--- a/data/index.html
+++ b/data/index.html
@@ -9,38 +9,61 @@
     <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
     <h1>/* therminator */</h1>
     <p>last sensor update: <span id="time"></span></p>
-    <p>chart update interval (ms): <select id="chartUpd" onchange="location.reload()">
-      <option>200</option>
-      <option selected>500</option>
-      <option>1000</option>
-    </select></p>
-    <p>data update interval (ms): <select id="upd" onload="getUpdateInterval()" onchange="setUpdateInterval()">
-      <option>10</option>
-      <option>20</option>
-      <option>50</option>
-      <option>100</option>
-      <option>200</option>
-      <option selected>500</option>
-      <option>1000</option>
-    </select></p>
+    <div id="du">
+      <p>current data update interval (ms): <span id="updInt"></span></p>
+      <p>
+        set data update interval (ms):
+        <select
+          id="upd"
+          onchange="setUpdateInterval();"
+          onfocus="this.selectedIndex = -1;"
+        >
+          <option>10</option>
+          <option>20</option>
+          <option>50</option>
+          <option>100</option>
+          <option>200</option>
+          <option selected>500</option>
+          <option>1000</option>
+        </select>
+      </p>
+    </div>
+    <div id="cu">
+      <p>current chart update interval (ms): <span id="cupdInt"></span></p>
+      <p>
+        set chart update interval (ms):
+        <select
+          id="chartUpd"
+          onchange="location.reload()"
+          onfocus="this.selectedIndex = -1;"
+        >
+          <option>200</option>
+          <option selected>500</option>
+          <option>1000</option>
+        </select>
+      </p>
+    </div>
+    <br />
     <button id="startRec" onclick="startRecording()">Start recording</button>
     <button id="stopRec" onclick="stopRecording()">Stop recording</button>
-      <table>
-        <tr>
-          <td class="chart-container">
-            <h2>Channel A:</h2> 
-            <label for="labelA">label: </label><input type="text" value="tempA" id="labelA">
-            <div id="error-tempA"></div>
-            <canvas id="chartA"></canvas>
-          </td>
-          <td class="chart-container">
-            <h2>Channel B:</h2>
-            <label for="labelB">label: </label><input type="text" value="tempB" id="labelB">
-            <div id="error-tempB"></div>
-            <canvas id="chartB"></canvas>
-          </td>
-        </tr>
-      </table>
+    <table>
+      <tr>
+        <td class="chart-container">
+          <h2>Channel A:</h2>
+          <label for="labelA">label: </label
+          ><input type="text" value="tempA" id="labelA" />
+          <div id="error-tempA"></div>
+          <canvas id="chartA"></canvas>
+        </td>
+        <td class="chart-container">
+          <h2>Channel B:</h2>
+          <label for="labelB">label: </label
+          ><input type="text" value="tempB" id="labelB" />
+          <div id="error-tempB"></div>
+          <canvas id="chartB"></canvas>
+        </td>
+      </tr>
+    </table>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/data/script.js b/data/script.js
index c7a8513..ab0c64b 100644
--- a/data/script.js
+++ b/data/script.js
@@ -1,3 +1,4 @@
+
 const canvasA = document.getElementById("chartA");
 const canvasB = document.getElementById("chartB");
 const chartUpdateInt = document.getElementById("chartUpd").value;
@@ -82,6 +83,14 @@ const options = {
   },
 };
 
+fetch("/int")
+  .then((res) => res.text())
+  .then((textResponse) => {
+    document.getElementById("updInt").innerText = textResponse;
+  });
+
+document.getElementById("cupdInt").innerText = chartUpdateInt;
+
 const chartA = new Chart(canvasA, {
   type: "line",
   data: {
@@ -253,7 +262,7 @@ function startRecording() {
   filename = "therminator-" + filedate + ".csv";
   labelA = document.getElementById("labelA").value;
   labelB = document.getElementById("labelB").value;
-  csvData = ["time,\"" + labelA + "\",\"" + labelB + "\""]
+  csvData = ['time,"' + labelA + '","' + labelB + '"'];
   record = 1;
   document.getElementById("startRec").disabled = true;
   document.getElementById("stopRec").disabled = false;
diff --git a/data/style.css b/data/style.css
index 9c52401..997c146 100644
--- a/data/style.css
+++ b/data/style.css
@@ -5,9 +5,10 @@ body {
   font-family: "IBM Plex Mono", monospace;
   padding: 1rem 2rem;
 }
-#mv,
-#ui {
+#du,
+#cu {
   display: inline-block;
+  padding-right: 3rem;
 }
 
 #error-tempA,
@@ -21,19 +22,3 @@ body {
   width: 40vw;
   padding: 1em;
 }
-#chart-small {
-  display: initial;
-}
-
-#chart-large {
-  display: none;
-}
-
-@media only screen and (min-width: 1480px) {
-  #chart-small {
-    display: none;
-  }
-  #chart-large {
-    display: initial;
-  }
-}