switched from typescript to javascript
This commit is contained in:
parent
f35f3040ed
commit
b2472e6881
5
js/burgerMenu.js
Normal file
5
js/burgerMenu.js
Normal file
|
@ -0,0 +1,5 @@
|
||||||
|
function handleBurger(){
|
||||||
|
document.getElementById("burgerMenu").classList.toggle("change");
|
||||||
|
document.getElementById("mainMenuContainer").classList.toggle("visible");
|
||||||
|
|
||||||
|
}
|
|
@ -3,7 +3,7 @@ function acceptCookie(){
|
||||||
checkHide();
|
checkHide();
|
||||||
}
|
}
|
||||||
|
|
||||||
function getCookie(name:string){
|
function getCookie(name){
|
||||||
var nameEQ = name + "=";
|
var nameEQ = name + "=";
|
||||||
var ca = document.cookie.split(";");
|
var ca = document.cookie.split(";");
|
||||||
for (var i=0; i < ca.length; i++) {
|
for (var i=0; i < ca.length; i++) {
|
||||||
|
@ -15,7 +15,7 @@ function getCookie(name:string){
|
||||||
}
|
}
|
||||||
|
|
||||||
function checkHide(){
|
function checkHide(){
|
||||||
let cookieInfo: HTMLElement = <HTMLElement> document.getElementsByClassName("cookieinfo")[0];
|
let cookieInfo = document.getElementsByClassName("cookieinfo")[0];
|
||||||
if (getCookie("cookieMessageHide") === "1"){
|
if (getCookie("cookieMessageHide") === "1"){
|
||||||
cookieInfo.style.display = "none";
|
cookieInfo.style.display = "none";
|
||||||
} else {
|
} else {
|
|
@ -1,8 +1,8 @@
|
||||||
function createDialogImage(url:string) {
|
function createDialogImage(url) {
|
||||||
createDialogHTML(`<img src="${url}">`, "imageDialog");
|
createDialogHTML(`<img src="${url}">`, "imageDialog");
|
||||||
}
|
}
|
||||||
|
|
||||||
function createDialogHTML(html:string, customClasses = "") {
|
function createDialogHTML(html, customClasses = "") {
|
||||||
let dialog = document.createElement("div");
|
let dialog = document.createElement("div");
|
||||||
dialog.classList.add("dialog");
|
dialog.classList.add("dialog");
|
||||||
|
|
||||||
|
@ -15,13 +15,13 @@ function createDialogHTML(html:string, customClasses = "") {
|
||||||
document.body.appendChild(dialog);
|
document.body.appendChild(dialog);
|
||||||
fade(dialog, 0.04);
|
fade(dialog, 0.04);
|
||||||
|
|
||||||
(<HTMLElement> dialog.querySelector(".close")).onclick = function (){
|
dialog.querySelector(".close").onclick = function (){
|
||||||
fade(dialog, -0.04, true);
|
fade(dialog, -0.04, true);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {
|
function fade(element, value = 0.1, deleteAfterwards = false) {
|
||||||
let opacity:number = +(element.style.opacity) + value;
|
let opacity = +(element.style.opacity) + value;
|
||||||
|
|
||||||
element.style.opacity = String(opacity);
|
element.style.opacity = String(opacity);
|
||||||
|
|
||||||
|
@ -31,7 +31,6 @@ function fade(element:HTMLElement, value = 0.1, deleteAfterwards = false) {
|
||||||
}, 10);
|
}, 10);
|
||||||
} else if (deleteAfterwards) {
|
} else if (deleteAfterwards) {
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
// @ts-ignore
|
|
||||||
element.parentNode.removeChild(element);
|
element.parentNode.removeChild(element);
|
||||||
}, 10);
|
}, 10);
|
||||||
}
|
}
|
|
@ -1,20 +1,17 @@
|
||||||
import Timeout = NodeJS.Timeout;
|
|
||||||
|
|
||||||
let intervalTime = 150;
|
let intervalTime = 150;
|
||||||
|
|
||||||
let dataIndex = 0;
|
let dataIndex = 0;
|
||||||
let stringPosition = 0;
|
let stringPosition = 0;
|
||||||
let printTask: Timeout;
|
let printTask;
|
||||||
|
|
||||||
let terminal:HTMLElement;
|
let terminal;
|
||||||
let historyContainer:HTMLElement;
|
let historyContainer;
|
||||||
let promptContainer:HTMLElement;
|
let promptContainer;
|
||||||
|
|
||||||
function writeOut() {
|
function writeOut() {
|
||||||
|
|
||||||
// @ts-ignore
|
let currentData = data[dataIndex];
|
||||||
let currentData: { [key: string]: string } = data[dataIndex];
|
let currentText = currentData["strings"];
|
||||||
let currentText: string = currentData["strings"];
|
|
||||||
promptContainer.innerText = promptContainer.innerText + currentText.charAt(stringPosition);
|
promptContainer.innerText = promptContainer.innerText + currentText.charAt(stringPosition);
|
||||||
stringPosition++;
|
stringPosition++;
|
||||||
if(stringPosition > currentText.length){
|
if(stringPosition > currentText.length){
|
||||||
|
@ -34,8 +31,8 @@ function writeOut() {
|
||||||
|
|
||||||
function startNewTask() {
|
function startNewTask() {
|
||||||
|
|
||||||
terminal = <HTMLElement> document.getElementsByClassName("terminal")[0];
|
terminal = document.getElementsByClassName("terminal")[0];
|
||||||
historyContainer = <HTMLElement> terminal.getElementsByClassName("history")[0];
|
historyContainer = terminal.getElementsByClassName("history")[0];
|
||||||
promptContainer = <HTMLElement> terminal.getElementsByClassName("prompt")[0];
|
promptContainer = terminal.getElementsByClassName("prompt")[0];
|
||||||
printTask = setInterval(writeOut, intervalTime);
|
printTask = setInterval(writeOut, intervalTime);
|
||||||
}
|
}
|
|
@ -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++){
|
for(let i = 0; i < images.length; i++){
|
||||||
let element:HTMLImageElement = images[i];
|
let element = images[i];
|
||||||
if(!(element.getAttribute("data-noPreview") === "true")) {
|
if(!(element.getAttribute("data-noPreview") === "true")) {
|
||||||
element.onclick = () => createDialogImage(element.src);
|
element.onclick = () => createDialogImage(element.src);
|
||||||
}
|
}
|
|
@ -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++) {
|
for (let i = 0; i < z.length; i++) {
|
||||||
let element:HTMLElement = z[i];
|
let element = z[i];
|
||||||
let externalFileURL:string = <string> element.getAttribute("includeHTML");
|
let externalFileURL = element.getAttribute("includeHTML");
|
||||||
if (externalFileURL) {
|
if (externalFileURL) {
|
||||||
let xhr:XMLHttpRequest = new XMLHttpRequest();
|
let xhr = new XMLHttpRequest();
|
||||||
xhr.onreadystatechange = function() {
|
xhr.onreadystatechange = function() {
|
||||||
if (this.readyState == 4) {
|
if (this.readyState == 4) {
|
||||||
if (this.status == 200) { element.innerHTML = this.responseText; }
|
if (this.status == 200) { element.innerHTML = this.responseText; }
|
|
@ -1,21 +1,10 @@
|
||||||
interface ntppoolJSONHistory {
|
import Plotly from 'plotly.js-dist'
|
||||||
offset: number,
|
|
||||||
ts: number,
|
|
||||||
monitor_id: string,
|
|
||||||
score: number,
|
|
||||||
step: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ntppoolJSON {
|
|
||||||
history: ntppoolJSONHistory[],
|
|
||||||
monitors: any,
|
|
||||||
server: any,
|
|
||||||
}
|
|
||||||
|
|
||||||
let graphIndexCounter = 0;
|
let graphIndexCounter = 0;
|
||||||
let graphElements = document.querySelectorAll("jl-ntp-graph");
|
let graphElements = document.querySelectorAll("jl-ntp-graph");
|
||||||
|
|
||||||
graphElements.forEach((elememt) => {
|
graphElements.forEach((elememt) => {
|
||||||
let ip:string = <string> elememt.getAttribute("data-server-ip");
|
let ip = elememt.getAttribute("data-server-ip");
|
||||||
|
|
||||||
elememt.innerHTML = `
|
elememt.innerHTML = `
|
||||||
<span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
|
<span id="${graphIndexCounter}-Banner" data-index="${graphIndexCounter}" class="ntpBanner">${ip}</span>
|
||||||
|
@ -32,10 +21,10 @@ graphElements.forEach((elememt) => {
|
||||||
|
|
||||||
xhr.onreadystatechange = function (){
|
xhr.onreadystatechange = function (){
|
||||||
if(xhr.status == 200 && xhr.readyState == 4){
|
if(xhr.status == 200 && xhr.readyState == 4){
|
||||||
let rawData:ntppoolJSON = JSON.parse(this.responseText);
|
let rawData = JSON.parse(this.responseText);
|
||||||
let x:Date[] = [];
|
let x = [];
|
||||||
let yScore:number[] = [];
|
let yScore = [];
|
||||||
let yDelay:number[] = [];
|
let yDelay = [];
|
||||||
rawData["history"].forEach((entry) => {
|
rawData["history"].forEach((entry) => {
|
||||||
x.push(new Date(entry["ts"] * 1000));
|
x.push(new Date(entry["ts"] * 1000));
|
||||||
yScore.push(entry["score"]);
|
yScore.push(entry["score"]);
|
||||||
|
@ -52,7 +41,7 @@ graphElements.forEach((elememt) => {
|
||||||
xhr.send();
|
xhr.send();
|
||||||
});
|
});
|
||||||
|
|
||||||
function drawPlot(elementName:string, x:Date[], y:number[], title:string){
|
function drawPlot(elementName, x, y, title){
|
||||||
let score = {
|
let score = {
|
||||||
x: x,
|
x: x,
|
||||||
y: y,
|
y: y,
|
|
@ -1,10 +1,12 @@
|
||||||
|
let Plotly = require('plotly.js-dist')
|
||||||
|
|
||||||
let ntpNav = document.querySelectorAll(".ntpBanner");
|
let ntpNav = document.querySelectorAll(".ntpBanner");
|
||||||
|
|
||||||
ntpNav.forEach((element) => {
|
ntpNav.forEach((element) => {
|
||||||
(<HTMLElement>element).onclick = function (){
|
element.onclick = function (){
|
||||||
let index = element.getAttribute("data-index");
|
let index = element.getAttribute("data-index");
|
||||||
let contentID = index + "-Content";
|
let contentID = index + "-Content";
|
||||||
let contentElement = <HTMLElement> document.getElementById(contentID);
|
let contentElement = document.getElementById(contentID);
|
||||||
|
|
||||||
if(contentElement.classList.contains("visible")){
|
if(contentElement.classList.contains("visible")){
|
||||||
contentElement.classList.remove("visible");
|
contentElement.classList.remove("visible");
|
8
js/script.js
Normal file
8
js/script.js
Normal file
|
@ -0,0 +1,8 @@
|
||||||
|
require("./burgerMenu");
|
||||||
|
require("./cookie");
|
||||||
|
require("./dialog");
|
||||||
|
require("./error");
|
||||||
|
require("./imgPreview");
|
||||||
|
require("./includeHTML");
|
||||||
|
require("./ntpGraph");
|
||||||
|
require("./ntpMenu");
|
14
package.json
14
package.json
|
@ -8,15 +8,17 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"compile": "concurrently \"yarn css\" \"yarn js\"",
|
"compile": "concurrently \"yarn css\" \"yarn js\"",
|
||||||
"css": "sass scss/:public/css --style=compressed --no-source-map",
|
"css": "sass scss/:public/css --style=compressed --no-source-map",
|
||||||
"js": "tsc",
|
"js": "webpack --config ./webpack.conf.js",
|
||||||
"watch" : "concurrently \"tsc --watch\" \"sass --watch --style compressed scss/:public/css\" \"cd public && php -S locaLhost:1234\""
|
"watch": "concurrently \"sass --watch --style compressed scss/:public/css\" \"cd public && php -S locaLhost:1234\" \"webpack --config ./webpack.conf.js --mode development\""
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/node": "^14.14.31",
|
"@webpack-cli/init": "^1.1.3",
|
||||||
"@types/plotly.js": "^1.54.9",
|
|
||||||
"@webcomponents/custom-elements": "^1.4.3",
|
|
||||||
"concurrently": "^6.0.0",
|
"concurrently": "^6.0.0",
|
||||||
|
"webpack-cli": "^4.5.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"plotly.js-dist": "^1.58.4",
|
||||||
"sass": "^1.32.8",
|
"sass": "^1.32.8",
|
||||||
"typescript": "^4.2.2"
|
"webpack": "^5.28.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -15,7 +15,6 @@ EOF;
|
||||||
|
|
||||||
}
|
}
|
||||||
?>
|
?>
|
||||||
<script type="text/javascript" src="https://cdn.jonasled.de/plotly-latest.min.js"></script>
|
|
||||||
<?php
|
<?php
|
||||||
getFooter();
|
getFooter();
|
||||||
?>
|
?>
|
|
@ -1,5 +0,0 @@
|
||||||
function handleBurger(){
|
|
||||||
(<HTMLElement> document.getElementById("burgerMenu")).classList.toggle("change");
|
|
||||||
(<HTMLElement> document.getElementById("mainMenuContainer")).classList.toggle("visible");
|
|
||||||
|
|
||||||
}
|
|
12
webpack.conf.js
Normal file
12
webpack.conf.js
Normal file
|
@ -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"
|
||||||
|
}
|
|
@ -4,5 +4,6 @@
|
||||||
<exclude-output />
|
<exclude-output />
|
||||||
<content url="file://$MODULE_DIR$" />
|
<content url="file://$MODULE_DIR$" />
|
||||||
<orderEntry type="sourceFolder" forTests="false" />
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
<orderEntry type="library" name="basicLightbox" level="application" />
|
||||||
</component>
|
</component>
|
||||||
</module>
|
</module>
|
Loading…
Reference in a new issue