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 | 44 +++++++++++++++++++++++------------
1 file changed, 29 insertions(+), 15 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>
- `;
-
- this.querySelector(".ntpBanner").onclick = () => {
- let contentElement = this.querySelector(".ntpContent");
-
- if (contentElement.classList.contains("visible")) {
- contentElement.classList.remove("visible");
+ const ntpBanner = document.createElement("span");
+ ntpBanner.classList.add("ntpBanner");
+ ntpBanner.innerText = ip;
+ this.appendChild(ntpBanner);
+
+ const ntpContent = document.createElement("span");
+ ntpContent.classList.add("ntpContent");
+ this.appendChild(ntpContent);
+
+ 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();
--
GitLab