fixe ntp status page

js/customElements/ntpGraph.js

 import chart from 'chart.js'
 
-let graphIndexCounter = 0;
-
 class NtpGraph extends HTMLElement {
     constructor() {
         super();
@@ -9,47 +7,55 @@ 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++;
 
-        let xhr = new XMLHttpRequest();
+        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();
 
-        xhr.onreadystatechange = () => {
-            if(xhr.status === 200 && xhr.readyState === 4){
-                let rawData = JSON.parse(xhr.responseText);
-                let x = [];
-                let yScore = [];
-                let yDelay = [];
-                rawData["history"].forEach((entry, index) => {
-                    let date = new Date(entry["ts"] * 1000).toLocaleDateString();
-                    if(index % 10 !== 0){
-                        date = "";
-                    }
-                    x.push(date);
-                    yScore.push(entry["score"]);
-                    yDelay.push(entry["offset"]);
-                });
+            xhr.onreadystatechange = () => {
+                if (xhr.status === 200 && xhr.readyState === 4) {
+                    let rawData = JSON.parse(xhr.responseText);
+                    let x = [];
+                    let yScore = [];
+                    let yDelay = [];
+                    rawData["history"].forEach((entry, index) => {
+                        let date = new Date(entry["ts"] * 1000).toLocaleDateString();
+                        if (index % 10 !== 0) {
+                            date = "";
+                        }
+                        x.push(date);
+                        yScore.push(entry["score"]);
+                        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");
 
 
+                }
             }
-        }
-        xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=800");
-        xhr.send();
+            xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=800");
+            xhr.send();
 
+        }
     }
 
-    drawPlot(elementName, x, y, title){
-        let ctx = document.getElementById(elementName).getContext('2d');
+    drawPlot(elementName, x, y, title) {
+        let ctx = this.querySelector(elementName).getContext('2d');
 
         new Chart(ctx, {
             type: 'line',

js/ntpMenu.js

-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");
-        }
-    }
-});
\ No newline at end of file

js/script.js

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