jonasled2/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fixe ntp status page

Browse source
This commit is contained in:
Jonas Leder 2021-04-13 11:04:10 +02:00
parent 69a9c74eb7
commit 0b7c1d52a3
3 changed files with 40 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
js/customElements/ntpGraph.js
View file

@ -1,7 +1,5 @@
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,27 +7,34 @@ 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();
xhr.onreadystatechange = () => { xhr.onreadystatechange = () => {
if(xhr.status === 200 && xhr.readyState === 4){ if (xhr.status === 200 && xhr.readyState === 4) {
let rawData = JSON.parse(xhr.responseText); let rawData = JSON.parse(xhr.responseText);
let x = []; let x = [];
let yScore = []; let yScore = [];
let yDelay = []; let yDelay = [];
rawData["history"].forEach((entry, index) => { rawData["history"].forEach((entry, index) => {
let date = new Date(entry["ts"] * 1000).toLocaleDateString(); let date = new Date(entry["ts"] * 1000).toLocaleDateString();
if(index % 10 !== 0){ if (index % 10 !== 0) {
date = ""; date = "";
} }
x.push(date); x.push(date);
@ -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 {
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',

15
js/ntpMenu.js
View file

@ -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");
}
}
});

1
js/script.js
View file

@ -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");