large js refactor

javascript/logMonitor.js

@@ -15,22 +15,26 @@ async function logMonitor() {
     logMonitorEl.parentElement.style.display = 'block';
     const lines = await res.json();
     for (const line of lines) {
-      try {      
+      try {
         const l = JSON.parse(line);
-        const row = document.createElement("tr");
+        const row = document.createElement('tr');
         row.style = 'padding: 10px; margin: 0;';
         row.innerHTML = `<td>${new Date(1000 * l.created).toISOString()}</td><td>${l.level}</td><td>${l.facility}</td><td>${l.module}</td><td>${l.msg}</td>`;
         logMonitorEl.appendChild(row);
       } catch {}
     }
     while (logMonitorEl.childElementCount > 100) logMonitorEl.removeChild(logMonitorEl.firstChild);
-    logMonitorEl.scrollTop = logMonitorEl.scrollHeight
+    logMonitorEl.scrollTop = logMonitorEl.scrollHeight;
   }
 }
 
-async function logMonitorCreate() {
+let logMonitorInitialized = false;
+
+async function initLogMonitor() {
+  if (logMonitorInitialized) return;
   const el = document.getElementsByTagName('footer')[0];
   if (!el) return;
+  logMonitorInitialized = true;
   el.classList.add('log-monitor');
   el.innerHTML = `
     <table style="width: 100%;">
@@ -48,4 +52,7 @@ async function logMonitorCreate() {
     </table>
   `;
   logMonitor();
+  console.log('initLogMonitor');
 }
+
+onAfterUiUpdate(initLogMonitor);