From 3fd6669687fc3c0672be272a5015fedde4356722 Mon Sep 17 00:00:00 2001
From: Jarno Rankinen <jarno@oranki.net>
Date: Tue, 17 Jan 2023 21:05:31 +0200
Subject: [PATCH] Renamed variables, clarified structure

---
 enervent-ctrl-python/html/index.html          |  6 +--
 .../html/static/tabledata.css                 |  2 +-
 enervent-ctrl-python/html/static/tabledata.js | 50 ++++++++++++-------
 3 files changed, 35 insertions(+), 23 deletions(-)
diff --git a/enervent-ctrl-python/html/index.html b/enervent-ctrl-python/html/index.html
index 9962088..0d613ff 100644
--- a/enervent-ctrl-python/html/index.html
+++ b/enervent-ctrl-python/html/index.html
@@ -1,13 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <link rel="stylesheet" href="../static/tabledata.css">
-    <script src="../static/tabledata.js"></script>
+    <link rel="stylesheet" href="/static/tabledata.css">
+    <script src="/static/tabledata.js"></script>
 <meta charset="UTF-8">
 <title>Enervent Pingvin Kotilämpö</title>
 </head>
 <body onload="getData()">
-    <table id="coils">
+    <table id="data">
         <caption>Coil values at <span id="time"></span></caption>
         <thead><th>Address</th><th>Value</th><th>Symbol</th><th>Description</th></thead>
         <tbody id="coildata"></tbody>
diff --git a/enervent-ctrl-python/html/static/tabledata.css b/enervent-ctrl-python/html/static/tabledata.css
index 2f03408..3f7a99f 100644
--- a/enervent-ctrl-python/html/static/tabledata.css
+++ b/enervent-ctrl-python/html/static/tabledata.css
@@ -4,7 +4,7 @@
 .val {
     text-align: center;
 }
-#coils {
+#data {
     padding: 2pt;
     border-collapse: collapse;
 }
diff --git a/enervent-ctrl-python/html/static/tabledata.js b/enervent-ctrl-python/html/static/tabledata.js
index 9cd8a95..8d25bb9 100644
--- a/enervent-ctrl-python/html/static/tabledata.js
+++ b/enervent-ctrl-python/html/static/tabledata.js
@@ -13,30 +13,42 @@ function getData() {
     S = zeroPad(now.getSeconds())
     document.getElementById('time').innerHTML = `${Y}-${m}-${d} ${H}:${M}:${S}`
     
+    error = false
+    // The same index.html is used for both coil and register data,
+    // change api url based on which we're looking at
     if (document.location.pathname == "/coils/") {
         url = "/api/v1/coils"
     }
     else if (document.location.pathname == "/registers/") {
         url = "/api/v1/registers"
     }
-    error = false
-    fetch(url)
-    .then((response) => {
-        if (!response.ok) {
-            throw new Error(`Error fetching data: ${response.status}`)
-        }
-        return response.json()
-    })
-    .then((coils) => {
-        document.getElementById('coildata').innerHTML = "";
-        for (n=0; n<coils.length; n++) {
-            tablerow = `<tr><td class="addr" id="addr_${coils[n].address}">${coils[n].address}</td>\
-                            <td class ="val" id="value_${coils[n].address}">${Number(coils[n].value)}</td>\
-                            <td class="symbol" id="symbol_${coils[n].address}">${coils[n].symbol}</td>\
-                            <td class="desc" id="description_${coils[n].address}">${coils[n].description}</td></tr>`
-            document.getElementById('coildata').innerHTML += tablerow
-        }
-    });
+    else {
+        document.getElementById("data").innerHTML = 'Page not found'
+        error = true
+    }
+    if (!error) {
+        // Fetch data from API
+        fetch(url)
+        .then((response) => {
+            if (!response.ok) {
+                throw new Error(`Error fetching data: ${response.status}`)
+            }
+            return response.json()
+        })
+        .then((data) => {
+            // Populate table
+            document.getElementById('coildata').innerHTML = "";
+            for (n=0; n<data.length; n++) {
+                tablerow = `<tr><td class="addr" id="addr_${data[n].address}">${data[n].address}</td>\
+                                <td class ="val" id="value_${data[n].address}">${Number(data[n].value)}</td>\
+                                <td class="symbol" id="symbol_${data[n].address}">${data[n].symbol}</td>\
+                                <td class="desc" id="description_${data[n].address}">${data[n].description}</td></tr>`
+                document.getElementById('coildata').innerHTML += tablerow
+            }
+        });
+    }
 
-    if (!error) setTimeout(getData, 5*1000);
+    // Using setTimeout instead of setInterval to avoid possible connection issues
+    // There's no need to update exactly every 5 seconds, the skew is fine
+    setTimeout(getData, 5*1000);
 }
\ No newline at end of file

Address	Value	Symbol	Description
${coils[n].address}	${Number(coils[n].value)}	${coils[n].symbol}	${coils[n].description}
${data[n].address}	${Number(data[n].value)}	${data[n].symbol}	${data[n].description}