diff --git a/js/customElements/ntpGraph.js b/js/customElements/ntpGraph.js index 5108f4e65ad6a8074c3f777fc59feedd0eae54d8..50fed87eec7ab3581118889ca9d6d2e6d5e8e08a 100644 --- a/js/customElements/ntpGraph.js +++ b/js/customElements/ntpGraph.js @@ -6,22 +6,36 @@ class NtpGraph extends HTMLElement { let ip = this.getAttribute("data-server-ip"); - this.innerHTML = ` - <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 class="graphDelay"></canvas> - <canvas class="graphScore"></canvas> - </span> - `; - - this.querySelector(".ntpBanner").onclick = () => { - let contentElement = this.querySelector(".ntpContent"); - - if (contentElement.classList.contains("visible")) { - contentElement.classList.remove("visible"); + const ntpBanner = document.createElement("span"); + ntpBanner.classList.add("ntpBanner"); + ntpBanner.innerText = ip; + this.appendChild(ntpBanner); + + const ntpContent = document.createElement("span"); + ntpContent.classList.add("ntpContent"); + this.appendChild(ntpContent); + + const ntpLink = document.createElement("a"); + ntpLink.target = "_blank"; + ntpLink.href = `https://www.ntppool.org/scores/${ip}`; + ntpLink.classList.add("linkToNtpPool"); + ntpLink.innerText = "Server auf dem NTP Pool anzeigen"; + ntpContent.appendChild(ntpLink); + + const ntpDelayCanvas = document.createElement("canvas"); + ntpDelayCanvas.classList.add("graphDelay"); + ntpContent.appendChild(ntpDelayCanvas); + + const ntpScoreCanvas = document.createElement("canvas"); + ntpScoreCanvas.classList.add("graphScore"); + ntpContent.appendChild(ntpScoreCanvas); + + ntpBanner.onclick = () => { + + if (ntpContent.classList.contains("visible")) { + ntpContent.classList.remove("visible"); } else { - contentElement.classList.add("visible"); + ntpContent.classList.add("visible"); } let xhr = new XMLHttpRequest();