Skip to content
Snippets Groups Projects
Commit 0b7c1d52 authored by Jonas Leder's avatar Jonas Leder
Browse files

fixe ntp status page

parent 69a9c74e
Branches
No related tags found
No related merge requests found
import chart from 'chart.js' import chart from 'chart.js'
let graphIndexCounter = 0;
class NtpGraph extends HTMLElement { class NtpGraph extends HTMLElement {
constructor() { constructor() {
super(); super();
...@@ -9,15 +7,22 @@ class NtpGraph extends HTMLElement { ...@@ -9,15 +7,22 @@ class NtpGraph extends HTMLElement {
let ip = this.getAttribute("data-server-ip"); let ip = this.getAttribute("data-server-ip");
this.innerHTML = ` this.innerHTML = `
<span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span> <span class="ntpBanner">${ip}</span>
<span id="${graphIndexCounter}-Content" class="ntpContent"> <span class="ntpContent">
<a target="_blank" href="https://www.ntppool.org/scores/${ip}" class="linkToNtpPool">Server auf dem NTP Pool anzeigen</a> <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 class="graphDelay"></canvas>
<canvas id="${graphIndexCounter}-Score"></canvas> <canvas class="graphScore"></canvas>
</span> </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(); let xhr = new XMLHttpRequest();
...@@ -37,8 +42,8 @@ class NtpGraph extends HTMLElement { ...@@ -37,8 +42,8 @@ class NtpGraph extends HTMLElement {
yDelay.push(entry["offset"]); yDelay.push(entry["offset"]);
}); });
this.drawPlot(currentIndex + "-Delay", x, yDelay, "Delay"); this.drawPlot(".graphDelay", x, yDelay, "Delay");
this.drawPlot(currentIndex + "-Score", x, yScore, "Score"); this.drawPlot(".graphScore", x, yScore, "Score");
} }
...@@ -47,9 +52,10 @@ class NtpGraph extends HTMLElement { ...@@ -47,9 +52,10 @@ class NtpGraph extends HTMLElement {
xhr.send(); xhr.send();
} }
}
drawPlot(elementName, x, y, title) { drawPlot(elementName, x, y, title) {
let ctx = document.getElementById(elementName).getContext('2d'); let ctx = this.querySelector(elementName).getContext('2d');
new Chart(ctx, { new Chart(ctx, {
type: 'line', type: 'line',
......
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
...@@ -2,7 +2,6 @@ require("./burgerMenu"); ...@@ -2,7 +2,6 @@ require("./burgerMenu");
require("./error"); require("./error");
require("./imgPreview"); require("./imgPreview");
require("./includeHTML"); require("./includeHTML");
require("./ntpMenu");
require("./viewPost"); require("./viewPost");
require("./customElements/ntpGraph"); require("./customElements/ntpGraph");
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment