From 8e990911c1e6022a8bc70adefe7d6a0241857bce Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Fri, 25 Mar 2022 10:23:52 +0100
Subject: [PATCH] remove raw html

---
 js/customElements/ntpGraph.js | 40 +++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/js/customElements/ntpGraph.js b/js/customElements/ntpGraph.js
index 5108f4e..50fed87 100644
--- a/js/customElements/ntpGraph.js
+++ b/js/customElements/ntpGraph.js
@@ -6,22 +6,36 @@ class NtpGraph extends HTMLElement {
 
         let ip = this.getAttribute("data-server-ip");
 
-        this.innerHTML = `
-            <span class="ntpBanner">${ip}</span>
-            <span class="ntpContent">
-                <a target="_blank" href="https://www.ntppool.org/scores/${ip}" class="linkToNtpPool">Server auf dem NTP Pool anzeigen</a>
-                <canvas class="graphDelay"></canvas>
-                <canvas class="graphScore"></canvas>
-            </span>
-        `;
+        const ntpBanner = document.createElement("span");
+        ntpBanner.classList.add("ntpBanner");
+        ntpBanner.innerText = ip;
+        this.appendChild(ntpBanner);
 
-        this.querySelector(".ntpBanner").onclick = () => {
-            let contentElement = this.querySelector(".ntpContent");
+        const ntpContent = document.createElement("span");
+        ntpContent.classList.add("ntpContent");
+        this.appendChild(ntpContent);
 
-            if (contentElement.classList.contains("visible")) {
-                contentElement.classList.remove("visible");
+        const ntpLink = document.createElement("a");
+        ntpLink.target = "_blank";
+        ntpLink.href = `https://www.ntppool.org/scores/${ip}`;
+        ntpLink.classList.add("linkToNtpPool");
+        ntpLink.innerText = "Server auf dem NTP Pool anzeigen";
+        ntpContent.appendChild(ntpLink);
+
+        const ntpDelayCanvas = document.createElement("canvas");
+        ntpDelayCanvas.classList.add("graphDelay");
+        ntpContent.appendChild(ntpDelayCanvas);
+        
+        const ntpScoreCanvas = document.createElement("canvas");
+        ntpScoreCanvas.classList.add("graphScore");
+        ntpContent.appendChild(ntpScoreCanvas);
+
+        ntpBanner.onclick = () => {
+
+            if (ntpContent.classList.contains("visible")) {
+                ntpContent.classList.remove("visible");
             } else {
-                contentElement.classList.add("visible");
+                ntpContent.classList.add("visible");
             }
 
             let xhr = new XMLHttpRequest();