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

74
js/customElements/ntpGraph.js
View file

@ -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 = `
<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();
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',

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("./imgPreview");
require("./includeHTML");
require("./ntpMenu");
require("./viewPost");
require("./customElements/ntpGraph");