TobiasH/itender
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

add huuuge stuff

Browse Source
This commit is contained in:
Tobias Hopp
2022-11-14 00:53:09 +01:00
parent 0ddfa4d66f
commit 6aa6955fa8
30 changed files with 1768 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/web/ButtonType.ts Normal file
View File

@ -0,0 +1,5 @@
export enum ButtonType {
SUCCESS = "success",
ERROR = "error",
}

105
src/web/Modal.ts Normal file
View File

@ -0,0 +1,105 @@
import {ButtonType} from "./ButtonType";
export class Modal {
private static currentModalId = "";
private _title: string = "iTender";
private _content: string | undefined = "";
private _id: string = "";
private _loader: boolean = false;
private _buttons: { type: string, content: string, onclick: Function }[] = [];
constructor(id, title: string, content?: string) {
this._id = id;
this._title = title;
this._content = content;
}
set title(value: string) {
this._title = value;
}
set content(value: string | undefined) {
this._content = value;
}
set id(value: string) {
this._id = value;
}
set loader(value: boolean) {
this._loader = value;
}
public addButton( type: ButtonType, content: string, onclick: Function )
{
this._buttons.push({type: type, content: content, onclick: onclick});
}
public open() {
if (!this._content)
this._content = "";
if (this._loader)
this._content += "<br><div class=\"lds-ellipsis\">\n" +
" <div></div><div></div><div></div><div></div>\n" +
"</div>";
for (let btn of this._buttons) {
this._content += `<button class="btn btn-${btn.type}" onclick="${btn.onclick}">${btn.content}</button>`;
}
Modal.open(this._title, this._content, this._id);
}
/**
* @param title
* @param content
* @param id
*/
public static open(title: string, content: string, id?: string): void {
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modalInnerContent");
if (!modal || !modalContent)
return;
modalContent.classList.add("modalBlendIn");
modal.classList.add("modalBlendIn");
setTimeout(() => {
modalContent.classList.remove("modalBlendIn");
modal.classList.remove("modalBlendIn");
}, 800);
modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
modal.style.display = "block";
this.currentModalId = id ? id : "null";
}
public static close(id?: string): void {
if (this.currentModalId != id)
return;
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modal-content");
const modalInnerContent = document.getElementById("modalInnerContent");
if (!modal || !modalContent || !modalInnerContent)
return;
modalContent.classList.add("modalBlendOut");
modal.classList.add("modalBlendOut");
setTimeout(() => {
modal.style.display = "none";
modalInnerContent.innerHTML = "";
modalContent.classList.remove("modalBlendOut");
modal.classList.remove("modalBlendOut");
}, 800);
}
}

29
src/web/WebSocketHandler.ts Normal file
View File

@ -0,0 +1,29 @@
import {Modal} from "./Modal";
export class WebSocketHandler {
private socket : WebSocket;
constructor() {
this.socket = new WebSocket((window.location.protocol == "http:" ? "ws://" : "wss://") + window.location.hostname + ":3005");
this.socket.onopen = this.onOpen;
this.socket.onclose = this.onClose;
this.socket.onerror = this.onError;
}
private onOpen( event )
{
Modal.close("start");
}
private onClose( event ) {
console.error("WS Closed!", event );
//openModal("Einen Augenblick...", `Es wurde ein Verbindungsfehler erkannt.\nBitte warten Sie, während der Prozess neu gestartet wird...` );
//window.location.reload();
}
private onError( event ) {
console.error("WS Error", event);
//openModal("Einen Augenblick...", `Es wurde ein kritischer Fehler festgestellt.\nBitte warten Sie, während der Prozess neu gestartet wird...` );
//window.location.reload();
}
}

54
src/web/main.ts
View File

@ -1,3 +1,5 @@
import {WebSocketHandler} from "./WebSocketHandler";
import {Modal} from "./Modal";
const main = document.getElementById("main");
const time = document.getElementById("title");
@ -5,12 +7,13 @@ const time = document.getElementById("title");
document.addEventListener("DOMContentLoaded", () => {
console.log("DOM Loaded");
openModal("iTender", "Starten...")
let modal = new Modal("start", "iTender");
modal.content = "Willkommen";
modal.loader = true;
modal.open();
connect();
setTimeout( load, 1000);
setTimeout( () => closeModal(), 2500 );
});
function load()
@ -48,44 +51,9 @@ function load()
}
}
function openModal(title, content) {
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modalInnerContent");
if(!modal || !modalContent)
return;
modalContent.classList.add("modalBlendIn");
modal.classList.add("modalBlendIn");
setTimeout(() => {
modalContent.classList.remove("modalBlendIn");
modal.classList.remove("modalBlendIn");
}, 800);
modalContent.innerHTML = `<h1 id="modalTitle">${title}</h1>${content}`;
modal.style.display = "block";
let wsHandler;
function connect()
{
wsHandler = new WebSocketHandler();
}
function closeModal() {
const modal = document.getElementById("modal");
const modalContent = document.getElementById("modal-content");
const modalInnerContent = document.getElementById("modalInnerContent");
if(!modal || !modalContent || !modalInnerContent)
return;
modalContent.classList.add("modalBlendOut");
modal.classList.add("modalBlendOut");
setTimeout(() => {
modal.style.display = "none";
modalInnerContent.innerHTML = "";
modalContent.classList.remove("modalBlendOut");
modal.classList.remove("modalBlendOut");
}, 800);
}