From: Benjamin Braatz <bb@bbraatz.eu>
Date: Sun, 7 Mar 2021 21:03:55 +0000 (+0100)
Subject: Improve section layout (get rid of innerHTML)
X-Git-Tag: v0.3.0~36
X-Git-Url: http://git.graph-it.com/?a=commitdiff_plain;h=81d22eaf71a7c4aadb2b22320383763a7c4413a3;p=graphit%2Fcontrolpi-wsserver.git

Improve section layout (get rid of innerHTML)
---

diff --git a/web/controlpi-debug.js b/web/controlpi-debug.js
index 9e8b53c..1105583 100644
--- a/web/controlpi-debug.js
+++ b/web/controlpi-debug.js
@@ -3,21 +3,33 @@ function createForClient(client) {
     const section = document.createElement('section')
     section.setAttribute('id', client)
     section.setAttribute('class', 'client')
-    section.innerHTML = `
-        <h2>${client}</h2>
-        <div class="interfacecontainer">
-            <h3>=&gt;</h3>
-            <div id="${client} Receives" class="templatecontainer">
-            </div>
-        </div>
-        <div class="interfacecontainer">
-            <h3>&lt;=</h3>
-            <div id="${client} Sends" class="templatecontainer">
-            </div>
-        </div>
-        <div id="${client} Last" class="lastcontainer">
-        </div>
-    `
+    const heading = document.createElement('h2')
+    heading.appendChild(document.createTextNode(client))
+    section.appendChild(heading)
+    const receiveOuter = document.createElement('div')
+    receiveOuter.setAttribute('class', 'interfacecontainer')
+    const receiveHeading = document.createElement('h3')
+    receiveHeading.appendChild(document.createTextNode('=>'))
+    receiveOuter.appendChild(receiveHeading)
+    const receiveInner = document.createElement('div')
+    receiveInner.setAttribute('id', client + ' Receives')
+    receiveInner.setAttribute('class', 'templatecontainer')
+    receiveOuter.appendChild(receiveInner)
+    section.appendChild(receiveOuter)
+    const sendOuter = document.createElement('div')
+    sendOuter.setAttribute('class', 'interfacecontainer')
+    const sendHeading = document.createElement('h3')
+    sendHeading.appendChild(document.createTextNode('<='))
+    sendOuter.appendChild(sendHeading)
+    const sendInner = document.createElement('div')
+    sendInner.setAttribute('id', client + ' Sends')
+    sendInner.setAttribute('class', 'templatecontainer')
+    sendOuter.appendChild(sendInner)
+    section.appendChild(sendOuter)
+    const last = document.createElement('div')
+    last.setAttribute('id', client + ' Last')
+    last.setAttribute('class', 'lastcontainer')
+    section.appendChild(last)
     return section
 }