fixe ntp status page

js/customElements/ntpGraph.js

@@ -1,7 +1,5 @@
 import chart from 'chart.js'
 
-let graphIndexCounter = 0;
-
 class NtpGraph extends HTMLElement {
     constructor() {
         super();
@@ -9,15 +7,22 @@ class NtpGraph extends HTMLElement {
         let ip = this.getAttribute("data-server-ip");
 
         this.innerHTML = `
-            <span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
-            <span id="${graphIndexCounter}-Content" class="ntpContent">
+            <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 id="${graphIndexCounter}-Delay"></canvas>
-                <canvas id="${graphIndexCounter}-Score"></canvas>
+                <canvas class="graphDelay"></canvas>
+                <canvas class="graphScore"></canvas>
             </span>
         `;
-        let currentIndex = graphIndexCounter;
-        graphIndexCounter++;
+
+        this.querySelector(".ntpBanner").onclick = () => {
+            let contentElement = this.querySelector(".ntpContent");
+
+            if (contentElement.classList.contains("visible")) {
+                contentElement.classList.remove("visible");
+            } else {
+                contentElement.classList.add("visible");
+            }
 
             let xhr = new XMLHttpRequest();
 
@@ -37,8 +42,8 @@ class NtpGraph extends HTMLElement {
                         yDelay.push(entry["offset"]);
                     });
 
-                this.drawPlot(currentIndex + "-Delay", x, yDelay, "Delay");
-                this.drawPlot(currentIndex + "-Score", x, yScore, "Score");
+                    this.drawPlot(".graphDelay", x, yDelay, "Delay");
+                    this.drawPlot(".graphScore", x, yScore, "Score");
 
 
                 }
@@ -47,9 +52,10 @@ class NtpGraph extends HTMLElement {
             xhr.send();
 
         }
+    }
 
     drawPlot(elementName, x, y, title) {
-        let ctx = document.getElementById(elementName).getContext('2d');
+        let ctx = this.querySelector(elementName).getContext('2d');
 
         new Chart(ctx, {
             type: 'line',

js/ntpMenu.js

@@ -1,15 +0,0 @@
-let ntpNav = document.querySelectorAll(".ntpBanner");
-
-ntpNav.forEach((element) => {
-        element.onclick = function (){
-        let index = element.getAttribute("data-index");
-        let contentID = index + "-Content";
-        let contentElement = document.getElementById(contentID);
-
-        if(contentElement.classList.contains("visible")){
-            contentElement.classList.remove("visible");
-        } else {
-            contentElement.classList.add("visible");
-        }
-    }
-});

js/script.js

@@ -2,7 +2,6 @@ require("./burgerMenu");
 require("./error");
 require("./imgPreview");
 require("./includeHTML");
-require("./ntpMenu");
 require("./viewPost");
 
 require("./customElements/ntpGraph");