jarno
/
enervent-ctrl
1
0
Fork 0
Code Issues 4 Pull Requests Releases 1 Wiki Activity

gh-5 Use dom manipulation for coils as well

This commit is contained in:
Jarno Rankinen 2023-02-02 13:25:40 +02:00
parent c29692ae3e
commit 64e3a4811a
2 changed files with 29 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
enervent-ctrl-go/static/html/index.html
View File

@ -8,7 +8,7 @@
</head> </head>
<body onload="getData()"> <body onload="getData()">
<table id="data"> <table id="data">
<caption>Coil values at <span id="time"></span></caption> <caption><span id="caption">Holding register values at </span><span id="time"></span></caption>
<thead><th>Address</th><th>Value</th><th>Symbol</th><th>Description</th></thead> <thead><th>Address</th><th>Value</th><th>Symbol</th><th>Description</th></thead>
<tbody id="datatable"></tbody> <tbody id="datatable"></tbody>
</table> </table>

37
enervent-ctrl-go/static/html/js/tabledata.js
View File

@ -14,19 +14,37 @@ function timeStamp() {
} }
function coils(data) { function coils(data) {
document.getElementById('datatable').innerHTML = ""; datable = document.getElementById('datatable')
for (n=0; n<data.length; n++) {
tablerow = `<tr><td class="addr" id="addr_${data[n].address}">${data[n].address}</td>\ for (n=0; n<data.length; n++) {
<td class ="val" id="value_${data[n].address}">${Number(data[n].value)}</td>\ tablerow = document.createElement("tr")
<td class="symbol" id="symbol_${data[n].address}">${data[n].symbol}</td>\ fields = ["address", "value", "symbol", "description"]
<td class="desc" id="description_${data[n].address}">${data[n].description}</td></tr>`
document.getElementById('datatable').innerHTML += tablerow for (i=0; i<fields.length; i++) {
td = document.createElement("td")
value = document.createTextNode(data[n][fields[i]])
if (fields[i] == "value") {
value = document.createTextNode(Number(data[n][fields[i]]))
} }
td.appendChild(value)
tablerow.appendChild(td)
}
datatable.appendChild(tablerow)
}
// document.getElementById('datatable').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('datatable').innerHTML += tablerow
// }
} }
function registers(data) { function registers(data) {
console.log(`${timeStamp()} Filling register data...`) console.log(`${timeStamp()} Filling register data...`)
datable = document.getElementById('datatable').innerHTML datable = document.getElementById('datatable')
for (n=0; n<data.length; n++) { for (n=0; n<data.length; n++) {
tablerow = document.createElement("tr") tablerow = document.createElement("tr")
@ -54,6 +72,7 @@ function getData() {
if (document.location.pathname == "/coils/") { if (document.location.pathname == "/coils/") {
url = "/api/v1/coils" url = "/api/v1/coils"
document.getElementById("title").innerHTML = "Coils | Enervent Pingvin Kotilämpö" document.getElementById("title").innerHTML = "Coils | Enervent Pingvin Kotilämpö"
document.getElementById('caption').innerHTML = "Coil values at "
} }
else if (document.location.pathname == "/registers/") { else if (document.location.pathname == "/registers/") {
url = "/api/v1/registers" url = "/api/v1/registers"
@ -84,5 +103,5 @@ function getData() {
// Using setTimeout instead of setInterval to avoid possible connection issues // Using setTimeout instead of setInterval to avoid possible connection issues
// There's no need to update exactly every 5 seconds, the skew is fine // There's no need to update exactly every 5 seconds, the skew is fine
setTimeout(getData, 30*1000); setTimeout(getData, 5*1000);
} }