Separated html, js and css, moved things to appropriate folders. Need to figure out how to use the same html template for two paths without copying
This commit is contained in:
parent
6833d9f4d2
commit
535a6f69e3
|
|
@ -0,0 +1,22 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<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">
|
||||||
|
<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>
|
||||||
|
</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>
|
||||||
|
|
@ -1,62 +0,0 @@
|
||||||
<!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>
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
.addr {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.val {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
#coils {
|
||||||
|
padding: 2pt;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
thead {
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
td {
|
||||||
|
padding: 2pt;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,42 @@
|
||||||
|
// TODO: JS check
|
||||||
|
// checkboxes for live/reserved
|
||||||
|
function zeroPad(number) {
|
||||||
|
return ("0" + number).slice(-2)
|
||||||
|
}
|
||||||
|
function getData() {
|
||||||
|
now = new Date()
|
||||||
|
Y = now.getFullYear()
|
||||||
|
m = now.getMonth()
|
||||||
|
d = now.getDate()
|
||||||
|
H = zeroPad(now.getHours())
|
||||||
|
M = zeroPad(now.getMinutes())
|
||||||
|
S = zeroPad(now.getSeconds())
|
||||||
|
document.getElementById('time').innerHTML = `${Y}-${m}-${d} ${H}:${M}:${S}`
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!error) setTimeout(getData, 5*1000);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue