diff --git a/js/customElements/ntpGraph.js b/js/customElements/ntpGraph.js index 177680e..5108f4e 100644 --- a/js/customElements/ntpGraph.js +++ b/js/customElements/ntpGraph.js @@ -1,7 +1,5 @@ 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 = ` - ${ip} - + ${ip} + Server auf dem NTP Pool anzeigen - - + + `; - let currentIndex = graphIndexCounter; - graphIndexCounter++; - - 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"]); - }); - - this.drawPlot(currentIndex + "-Delay", x, yDelay, "Delay"); - this.drawPlot(currentIndex + "-Score", x, yScore, "Score"); + this.querySelector(".ntpBanner").onclick = () => { + let contentElement = this.querySelector(".ntpContent"); + if (contentElement.classList.contains("visible")) { + contentElement.classList.remove("visible"); + } else { + contentElement.classList.add("visible"); } - } - xhr.open("GET", "https://www.ntppool.org/scores/" + ip + "/json?monitor=*&limit=800"); - xhr.send(); + 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"]); + }); + + 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(); + + } } - 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', diff --git a/js/ntpMenu.js b/js/ntpMenu.js deleted file mode 100644 index 4fe7141..0000000 --- a/js/ntpMenu.js +++ /dev/null @@ -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"); - } - } -}); \ No newline at end of file diff --git a/js/script.js b/js/script.js index 2f9ab3e..e11eca1 100644 --- a/js/script.js +++ b/js/script.js @@ -2,7 +2,6 @@ require("./burgerMenu"); require("./error"); require("./imgPreview"); require("./includeHTML"); -require("./ntpMenu"); require("./viewPost"); require("./customElements/ntpGraph");