switched from typescript to javascript

js/burgerMenu.js

@@ -0,0 +1,5 @@
+function handleBurger(){
+    document.getElementById("burgerMenu").classList.toggle("change");
+    document.getElementById("mainMenuContainer").classList.toggle("visible");
+
+}

js/cookie.js

@@ -3,7 +3,7 @@ function acceptCookie(){
     checkHide();
 }
 
-function getCookie(name:string){
+function getCookie(name){
     var nameEQ = name + "=";
     var ca = document.cookie.split(";");
     for (var i=0; i < ca.length; i++) {
@@ -15,7 +15,7 @@ function getCookie(name:string){
 }
 
 function checkHide(){
-    let cookieInfo: HTMLElement = <HTMLElement> document.getElementsByClassName("cookieinfo")[0];
+    let cookieInfo = document.getElementsByClassName("cookieinfo")[0];
     if (getCookie("cookieMessageHide") === "1"){
         cookieInfo.style.display = "none";
     } else {

js/dialog.js

@@ -1,8 +1,8 @@
-function createDialogImage(url:string) {
+function createDialogImage(url) {
     createDialogHTML(`<img src="${url}">`, "imageDialog");
 }
 
-function createDialogHTML(html:string, customClasses = "") {
+function createDialogHTML(html, customClasses = "") {
     let dialog = document.createElement("div");
     dialog.classList.add("dialog");
 
@@ -15,13 +15,13 @@ function createDialogHTML(html:string, customClasses = "") {
     document.body.appendChild(dialog);
     fade(dialog, 0.04);
 
-    (<HTMLElement> dialog.querySelector(".close")).onclick = function (){
+    dialog.querySelector(".close").onclick = function (){
         fade(dialog, -0.04, true);
     }
 }
 
-function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {
-    let opacity:number = +(element.style.opacity) + value;
+function fade(element, value = 0.1, deleteAfterwards = false) {
+    let opacity = +(element.style.opacity) + value;
 
     element.style.opacity = String(opacity);
 
@@ -31,7 +31,6 @@ function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {
         }, 10);
     } else if (deleteAfterwards) {
         setTimeout(function () {
-            // @ts-ignore
             element.parentNode.removeChild(element);
         }, 10);
     }

js/error.js

@@ -1,20 +1,17 @@
-import Timeout = NodeJS.Timeout;
-
 let intervalTime = 150;
 
 let dataIndex = 0;
 let stringPosition = 0;
-let printTask: Timeout;
+let printTask;
 
-let terminal:HTMLElement;
-let historyContainer:HTMLElement;
-let promptContainer:HTMLElement;
+let terminal;
+let historyContainer;
+let promptContainer;
 
 function writeOut() {
 
-   // @ts-ignore
-   let currentData: { [key: string]: string } = data[dataIndex];
-   let currentText: string = currentData["strings"];
+   let currentData = data[dataIndex];
+   let currentText = currentData["strings"];
    promptContainer.innerText = promptContainer.innerText + currentText.charAt(stringPosition);
    stringPosition++;
    if(stringPosition > currentText.length){
@@ -34,8 +31,8 @@ function writeOut() {
 
 function startNewTask() {
 
-   terminal = <HTMLElement> document.getElementsByClassName("terminal")[0];
-   historyContainer = <HTMLElement> terminal.getElementsByClassName("history")[0];
-   promptContainer = <HTMLElement> terminal.getElementsByClassName("prompt")[0];
+   terminal = document.getElementsByClassName("terminal")[0];
+   historyContainer = terminal.getElementsByClassName("history")[0];
+   promptContainer = terminal.getElementsByClassName("prompt")[0];
    printTask = setInterval(writeOut, intervalTime);
 }

js/imgPreview.js

@@ -1,6 +1,6 @@
-let images:HTMLCollectionOf<HTMLImageElement> = <HTMLCollectionOf<HTMLImageElement>> document.getElementsByTagName("img");
+let images = document.getElementsByTagName("img");
 for(let i = 0; i < images.length; i++){
-    let element:HTMLImageElement = images[i];
+    let element = images[i];
     if(!(element.getAttribute("data-noPreview") === "true")) {
         element.onclick = () => createDialogImage(element.src);
     }

js/includeHTML.js

@@ -1,10 +1,10 @@
-let z:HTMLCollectionOf<HTMLElement> = <HTMLCollectionOf<HTMLElement>> document.getElementsByTagName("*");
+let z = document.getElementsByTagName("*");
 
-for (let i:number = 0; i < z.length; i++) {
-    let element:HTMLElement = z[i];
-    let externalFileURL:string = <string> element.getAttribute("includeHTML");
+for (let i = 0; i < z.length; i++) {
+    let element = z[i];
+    let externalFileURL = element.getAttribute("includeHTML");
     if (externalFileURL) {
-        let xhr:XMLHttpRequest = new XMLHttpRequest();
+        let xhr = new XMLHttpRequest();
         xhr.onreadystatechange = function() {
             if (this.readyState == 4) {
                 if (this.status == 200) { element.innerHTML = this.responseText; }

js/ntpGraph.js

@@ -1,21 +1,10 @@
-interface ntppoolJSONHistory {
-    offset: number,
-    ts: number,
-    monitor_id: string,
-    score: number,
-    step: number
-}
-
-interface ntppoolJSON {
-    history: ntppoolJSONHistory[],
-    monitors: any,
-    server: any,
-}
+import Plotly from 'plotly.js-dist'
 
 let graphIndexCounter = 0;
 let graphElements = document.querySelectorAll("jl-ntp-graph");
+
 graphElements.forEach((elememt) => {
-    let ip:string = <string> elememt.getAttribute("data-server-ip");
+    let ip = elememt.getAttribute("data-server-ip");
 
     elememt.innerHTML = `
     <span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
@@ -32,10 +21,10 @@ graphElements.forEach((elememt) => {
 
     xhr.onreadystatechange = function (){
         if(xhr.status == 200 && xhr.readyState == 4){
-            let rawData:ntppoolJSON = JSON.parse(this.responseText);
-            let x:Date[] = [];
-            let yScore:number[] = [];
-            let yDelay:number[] = [];
+            let rawData = JSON.parse(this.responseText);
+            let x = [];
+            let yScore = [];
+            let yDelay = [];
             rawData["history"].forEach((entry) => {
                 x.push(new Date(entry["ts"] * 1000));
                 yScore.push(entry["score"]);
@@ -52,7 +41,7 @@ graphElements.forEach((elememt) => {
     xhr.send();
 });
 
-function drawPlot(elementName:string, x:Date[], y:number[], title:string){
+function drawPlot(elementName, x, y, title){
     let score = {
         x: x,
         y: y,

js/ntpMenu.js

@@ -1,10 +1,12 @@
+let Plotly = require('plotly.js-dist')
+
 let ntpNav = document.querySelectorAll(".ntpBanner");
 
 ntpNav.forEach((element) => {
-    (<HTMLElement>element).onclick = function (){
+        element.onclick = function (){
         let index = element.getAttribute("data-index");
         let contentID = index + "-Content";
-        let contentElement = <HTMLElement> document.getElementById(contentID);
+        let contentElement = document.getElementById(contentID);
 
         if(contentElement.classList.contains("visible")){
             contentElement.classList.remove("visible");

js/script.js

@@ -0,0 +1,8 @@
+require("./burgerMenu");
+require("./cookie");
+require("./dialog");
+require("./error");
+require("./imgPreview");
+require("./includeHTML");
+require("./ntpGraph");
+require("./ntpMenu");

package.json

@@ -8,15 +8,17 @@
   "scripts": {
     "compile": "concurrently \"yarn css\" \"yarn js\"",
     "css": "sass scss/:public/css --style=compressed --no-source-map",
-    "js": "tsc",
-    "watch" : "concurrently \"tsc --watch\" \"sass --watch --style compressed scss/:public/css\" \"cd public && php -S locaLhost:1234\""
+    "js": "webpack --config ./webpack.conf.js",
+    "watch": "concurrently \"sass --watch --style compressed scss/:public/css\" \"cd public && php -S locaLhost:1234\" \"webpack --config ./webpack.conf.js --mode development\""
   },
   "devDependencies": {
-    "@types/node": "^14.14.31",
-    "@types/plotly.js": "^1.54.9",
-    "@webcomponents/custom-elements": "^1.4.3",
+    "@webpack-cli/init": "^1.1.3",
     "concurrently": "^6.0.0",
+    "webpack-cli": "^4.5.0"
+  },
+  "dependencies": {
+    "plotly.js-dist": "^1.58.4",
     "sass": "^1.32.8",
-    "typescript": "^4.2.2"
+    "webpack": "^5.28.0"
   }
 }

public/ntpstatus.php

@@ -15,7 +15,6 @@ EOF;
 
 }
 ?>
-    <script type="text/javascript" src="https://cdn.jonasled.de/plotly-latest.min.js"></script>
 <?php
 getFooter();
 ?>

ts/burgerMenu.ts

@@ -1,5 +0,0 @@
-function handleBurger(){
-    (<HTMLElement> document.getElementById("burgerMenu")).classList.toggle("change");
-    (<HTMLElement> document.getElementById("mainMenuContainer")).classList.toggle("visible");
-
-}

webpack.conf.js

@@ -0,0 +1,12 @@
+const path = require('path');
+module.exports = {
+  target: "web",
+  entry: {
+    app: ["./js/script.js"]
+  },
+  output: {
+    path: path.resolve(__dirname, "public/js"),
+    filename: "script.js",
+  },
+  mode: "production"
+}

website.iml

@@ -4,5 +4,6 @@
     <exclude-output />
     <content url="file://$MODULE_DIR$" />
     <orderEntry type="sourceFolder" forTests="false" />
+    <orderEntry type="library" name="basicLightbox" level="application" />
   </component>
 </module>