From c29692ae3efcb4ed6cbf8f11d898cbc3952e2aba Mon Sep 17 00:00:00 2001
From: Jarno Rankinen <jarno@oranki.net>
Date: Thu, 2 Feb 2023 13:10:30 +0200
Subject: [PATCH] gh-5 Improved JS render performance

Dramatically improved web table render time by using dom
manipulation instead of string concatenation for generating the
data table
---
 enervent-ctrl-go/static/html/js/tabledata.js | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/enervent-ctrl-go/static/html/js/tabledata.js b/enervent-ctrl-go/static/html/js/tabledata.js
index 5a1e25d..13e5f02 100644
--- a/enervent-ctrl-go/static/html/js/tabledata.js
+++ b/enervent-ctrl-go/static/html/js/tabledata.js
@@ -26,16 +26,20 @@ function coils(data) {
 
 function registers(data) {
     console.log(`${timeStamp()} Filling register data...`)
-    document.getElementById('datatable').innerHTML = "";
+    datable = 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}">${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
-        if (data[n].type == "bitfield") {
-            document.getElementById(`value_${data[n].address}`).innerHTML = data[n].bitfield
+        tablerow = document.createElement("tr")
+        fields = ["address", "value", "symbol", "description"]
+
+        for (i=0; i<fields.length; i++) {
+            td = document.createElement("td")
+            value = document.createTextNode(data[n][fields[i]])
+            td.appendChild(value)
+            tablerow.appendChild(td)
         }
+
+        datatable.appendChild(tablerow)
     }
     console.log(`${timeStamp()} Done.`)
 }