Added index.html, NGINX required

2023-01-16 23:55:02 +02:00 · 2023-01-16 23:55:02 +02:00 · 1d10a5bbb0
parent 52ff27b146
commit 1d10a5bbb0
1 changed files with 62 additions and 0 deletions
--- a/enervent-ctrl-python/html/index.html
+++ b/enervent-ctrl-python/html/index.html
@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<style>
+
+</style>
+<script>
+    // TODO:    JS check
+    //          checkboxes for live/reserved
+    function zeroPad(number) {
+        return ("0" + number).slice(-2)
+    }
+    function getCoils() {
+                now = new Date()
+                Y = now.getFullYear()
+                M = now.getMonth()
+                D = now.getDate()
+                H = zeroPad(now.getHours())
+                M = zeroPad(now.getHours())
+                S = zeroPad(now.getSeconds())
+                document.getElementById('time').innerHTML = `${Y}-${M}-${D} ${H}:${M}:${S}`
+
+                url = "/api/v1/coils" + window.location.search
+                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 id="addr_${coils[n].address}" align="center">${coils[n].address}</td>\
+                                        <td id="value_${coils[n].address}" align="center">${Number(coils[n].value)}</td>\
+                                        <td id="symbol_${coils[n].address}">${coils[n].symbol}</td>\
+                                        <td id="description_${coils[n].address}">${coils[n].description}</td></tr>`
+                        document.getElementById('coildata').innerHTML += tablerow
+                    }
+                });
+
+                if (!error) setTimeout(getCoils, 2*1000);
+            }
+</script>
+<meta charset="UTF-8">
+<title>Enervent Pingvin Kotilämpö</title>
+</head>
+<body onload="getCoils()">
+    <table id="coils" cellpadding="2pt" rules="groups">
+        <caption>Coil values at <span id="time"></span></caption>
+        <thead align="left"><th>Address</th><th>Value</th><th>Symbol</th><th>Description</th></thead>
+        <tbody id="coildata"></tbody>
+    </table>
+<script></script>
+
+<h2 id="temp" style="text-align: center;"></h2>
+<h1 id="clock" style="text-align: center;"></h1>
+<div class="buttonrow">
+</div>
+</body>
+</html>