From 81d22eaf71a7c4aadb2b22320383763a7c4413a3 Mon Sep 17 00:00:00 2001
From: Benjamin Braatz <bb@bbraatz.eu>
Date: Sun, 7 Mar 2021 22:03:55 +0100
Subject: [PATCH] Improve section layout (get rid of innerHTML)

---
 web/controlpi-debug.js | 42 +++++++++++++++++++++++++++---------------
 1 file changed, 27 insertions(+), 15 deletions(-)

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
 }
 
-- 
2.34.1