375 lines
12 KiB
TypeScript
375 lines
12 KiB
TypeScript
import { LocalizationSource as localizeSource } from "./Localization";
|
|
import { LocalizationManager } from "./Localization";
|
|
import { Dialog } from "@syncfusion/ej2-popups";
|
|
import { Sidebar } from "@syncfusion/ej2-navigations";
|
|
import { enableRipple } from '@syncfusion/ej2-base';
|
|
|
|
|
|
/**
|
|
* Stellt UI-Funktionen zur Verfügung
|
|
*/
|
|
export class Ui {
|
|
|
|
private static _instance: Ui;
|
|
private _localizer: LocalizationManager;
|
|
private _modalDialog: Dialog;
|
|
private _modalModule: Dialog;
|
|
private _rightSideBar: Sidebar;
|
|
|
|
private _rightSideBarId: string;
|
|
private _modalModuleId:string;
|
|
|
|
/**
|
|
* Callback-Funktion für den modalen Dialog
|
|
*/
|
|
private _modalDialogCallback: any = undefined;
|
|
|
|
/**
|
|
* Callback-Funktion für den modalen Dialog wenn cancel
|
|
*/
|
|
private _modalDialogCancelCallback: any = undefined;
|
|
|
|
/**
|
|
* Erstellt eine Instanz
|
|
*/
|
|
private constructor() {
|
|
enableRipple(true);
|
|
this._modalDialogCallback = undefined;
|
|
this._modalDialogCancelCallback = undefined;
|
|
this._localizer = LocalizationManager.getInstance();
|
|
|
|
this._modalDialog = new Dialog({
|
|
isModal: true,
|
|
visible: false,
|
|
target: "body",
|
|
});
|
|
$("#modalDialog").css("display", "");
|
|
|
|
this._modalModule = new Dialog({
|
|
isModal: true,
|
|
visible: false,
|
|
target: "body",
|
|
});
|
|
$("#modalModule").css("display", "");
|
|
|
|
this._rightSideBar = new Sidebar({
|
|
showBackdrop: true,
|
|
isOpen: false,
|
|
enableDock: false,
|
|
type: "Over",
|
|
width: "75%",
|
|
position: "Right",
|
|
animate: true,
|
|
closeOnDocumentClick: false,
|
|
enableGestures: false
|
|
});
|
|
|
|
this._rightSideBarId = "";
|
|
this._modalModuleId = "";
|
|
this.init();
|
|
}
|
|
|
|
/**
|
|
* Instanz
|
|
*/
|
|
static getInstance(): Ui {
|
|
if (!Ui._instance) {
|
|
Ui._instance = new Ui();
|
|
}
|
|
return Ui._instance;
|
|
}
|
|
|
|
/**
|
|
* Initialisierung des Moduls
|
|
*/
|
|
private init(): void {
|
|
var self = this;
|
|
|
|
$("#modalDialogOk").on("click",
|
|
(e) => {
|
|
self._modalDialog.hide();
|
|
if (self._modalDialogCallback !== undefined && self._modalDialogCallback !== null) {
|
|
self._modalDialogCallback();
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
|
|
$("#modalDialogCancel").on("click",
|
|
() => {
|
|
self._modalDialog.hide();
|
|
if (self._modalDialogCancelCallback !== undefined && self._modalDialogCancelCallback !== null) {
|
|
self._modalDialogCancelCallback();
|
|
}
|
|
else
|
|
return false;
|
|
});
|
|
|
|
self._modalDialog.appendTo("#modalDialog");
|
|
self._modalModule.appendTo("#modalModule");
|
|
self._rightSideBar.appendTo("#sideBarRight");
|
|
//$("#modalDialog").css("display", "none");
|
|
|
|
//BlockUi anpassen
|
|
$.blockUI.defaults.overlayCSS.backgroundColor = "rgba(72, 73, 77, 0.95)";
|
|
$.blockUI.defaults.css.border = "0;";
|
|
$.blockUI.defaults.css.backgroundColor = "transparent;";
|
|
$.blockUI.defaults.message = "<div class=\"spinner\"><div class=\"double-bounce1\"></div><div class=\"double-bounce2\"></div></div>";
|
|
$.blockUI.defaults.baseZ = 1000000;
|
|
//Funktion die den Klick-Handler für alle Elemente die die Klasse "blockMainUi" haben registriert
|
|
$(".blockMainUi").on("click", () => {
|
|
self.blockMainUi();
|
|
});
|
|
|
|
if (typeof toastr !== "undefined") {
|
|
//Prüfen ob toastr überhaupt geladen wurde
|
|
toastr.options.positionClass = "toast-top-center";
|
|
toastr.options.timeOut = 1500;
|
|
}
|
|
}
|
|
|
|
//#region Messages - Anzeige
|
|
|
|
/**
|
|
* Zeigt eine Nachricht für den Benutzer an
|
|
* @param {string} title: Titel der Nachricht
|
|
* @param {string} message: Eigentliche Nachricht
|
|
* @param {number} type: Typ der Nachricht. 0: Info, 1: Warning, 2: Error, 3: Erfolg. Info ist default
|
|
* @param {number} timeout: Wie lange soll die Nachricht angezeigt werden (in Millisekunden)
|
|
* @param {boolean} closeButton: Soll ein Schließen-Button angezeigt werden? true für ja, false sonst
|
|
*/
|
|
showMessage(title: string, message: string, type: number, timeout: number, closeButton: boolean): void {
|
|
|
|
switch (type) {
|
|
case 0:
|
|
toastr.info(message, title, { closeButton: closeButton, timeOut: timeout });
|
|
break;
|
|
case 1:
|
|
toastr.warning(message, title, { closeButton: closeButton, timeOut: timeout });
|
|
break;
|
|
case 2:
|
|
toastr.error(message, title, { closeButton: closeButton, timeOut: timeout });
|
|
break;
|
|
case 3:
|
|
toastr.success(message, title, { closeButton: closeButton, timeOut: timeout });
|
|
break;
|
|
default:
|
|
toastr.info(message, title, { closeButton: closeButton, timeOut: timeout });
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Zeigt eine Erfolgs-Nachricht für den Benutzer an
|
|
* @param message: Eigentliche Nachricht
|
|
* @param title: Titel (Optional)
|
|
* @param timeout: Timout in Millisekunden (optional)
|
|
* @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
|
|
*/
|
|
showSuccessMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
|
|
var self = this;
|
|
self.showMessage(title, message, 3, timeout, showCloseButton);
|
|
}
|
|
|
|
/**
|
|
* Zeigt eine Fehler-Nachricht für den Benutzer an
|
|
* @param message: Eigentliche Nachricht
|
|
* @param title: Titel (Optional)
|
|
* @param timeout: Timout in Millisekunden (optional)
|
|
* @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
|
|
*/
|
|
showErrorMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
|
|
var self = this;
|
|
self.showMessage(title, message, 2, timeout, showCloseButton);
|
|
}
|
|
|
|
/**
|
|
* Zeigt eine Warnungs-Nachricht für den Benutzer an
|
|
* @param message: Eigentliche Nachricht
|
|
* @param title: Titel (Optional)
|
|
* @param timeout: Timout in Millisekunden (optional)
|
|
* @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
|
|
*/
|
|
showWarningMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
|
|
var self = this;
|
|
self.showMessage(title, message, 1, timeout, showCloseButton);
|
|
}
|
|
|
|
/**
|
|
* Zeigt eine Info-Nachricht für den Benutzer an
|
|
* @param message: Eigentliche Nachricht
|
|
* @param title: Titel (Optional)
|
|
* @param timeout: Timout in Millisekunden (optional)
|
|
* @param showCloseButton: Soll ein Schließen-Button angezeigt werden (optional)
|
|
*/
|
|
showInfoMessage(message: string, title: string = "", timeout: number = 4000, showCloseButton: boolean = false): void {
|
|
var self = this;
|
|
self.showMessage(title, message, 0, timeout, showCloseButton);
|
|
}
|
|
|
|
//#endregion
|
|
|
|
//#region Blocks
|
|
|
|
/**
|
|
* UI Loading Overlay anzeigen
|
|
*/
|
|
blockMainUi(timeout: number = 25000): void {
|
|
var self = this;
|
|
$(".tmloading").show();
|
|
setTimeout(() => {
|
|
self.unblockMainUi();
|
|
}, timeout);
|
|
}
|
|
|
|
/**
|
|
* UI Loading Overlay ausblenden
|
|
*/
|
|
unblockMainUi(): void {
|
|
$(".tmloading").fadeOut();
|
|
}
|
|
|
|
/**
|
|
* Blockieren eines HtmlElements
|
|
* @param selector
|
|
*/
|
|
blockUi(selector: string): void {
|
|
$(selector).block();
|
|
}
|
|
|
|
/**
|
|
* Blockierung eines HtmlElements aufheben
|
|
* @param selector
|
|
*/
|
|
unblockUi(selector: string): void {
|
|
$(selector).unblock();
|
|
}
|
|
|
|
//#endregion
|
|
|
|
//#region Modaler Dialog mit Yes/No
|
|
|
|
/**
|
|
*Anzeigen eines Modalen Dialoges
|
|
* showYesNo bestimmt ob "Ja/Nein" oder "Ok/Cancel" angezeigt wird
|
|
* @param text: Anzuzeigender Text?
|
|
* @param showYesNo: als Ja/Nein anzeigen?
|
|
* @param callback: optionaler Callback
|
|
*/
|
|
showModal(text: string, showYesNo: boolean, callback?: any, callbackCancel?: any) {
|
|
var self = this;
|
|
$("#modalDialogText").text(text);
|
|
|
|
if (showYesNo) {
|
|
$("#modalDialogOk").text(self._localizer.get("Button_Yes", localizeSource.All));
|
|
$("#modalDialogCancel").text(self._localizer.get("Button_No", localizeSource.All));
|
|
}
|
|
else {
|
|
$("#modalDialogOk").text(self._localizer.get("Button_Ok", localizeSource.All));
|
|
$("#modalDialogCancel").text(self._localizer.get("Button_Cancel", localizeSource.All));
|
|
}
|
|
|
|
this._modalDialogCallback = callback;
|
|
this._modalDialogCancelCallback = callbackCancel;
|
|
self._modalDialog.show(false);
|
|
}
|
|
|
|
//#endregion
|
|
|
|
//#region Modul-Anzeige
|
|
|
|
/**
|
|
* Anzeigen eines Moduls.
|
|
* Das System entscheidet ob in einem Sidebar oder einem Dialog.
|
|
* Wenn möglich wird zuerst der Sidebar verwendet, ansonsten ein Dialo.
|
|
* Derzeit wenn mehr als 2 Module angezeigt werden sollen, passiert nichts
|
|
* @param id Eindeutige Id des Moduls
|
|
* @param content Inhalt des Moduls
|
|
*/
|
|
showModule(id:string, content: string, width:any = null) {
|
|
var self = this;
|
|
|
|
if (self._rightSideBarId === "") {
|
|
self._rightSideBarId = id;
|
|
$("#sideBarRight").html(content);
|
|
if (width != null)
|
|
self._rightSideBar.width = width;
|
|
else
|
|
self._rightSideBar.width = "75%";
|
|
$("#sideBarRight").css("visibility", "visible");
|
|
self._rightSideBar.show();
|
|
return;
|
|
}
|
|
else if (self._modalModuleId === "") {
|
|
self._modalModuleId = id;
|
|
$("#modalModuleContent").html(content);
|
|
if (width != null)
|
|
self._modalModule.width = width;
|
|
else
|
|
self._modalModule.width = "75%";
|
|
self._modalModule.show();
|
|
return;
|
|
}
|
|
console.log(`showModule --> ${id} you need more view components!`);
|
|
}
|
|
|
|
/**
|
|
* Ausblenden des modalen Dialogs mit einem Modul als Inhalt
|
|
* @param id Eindeutige Id des Moduls
|
|
*/
|
|
hideModule(id:string) {
|
|
var self = this;
|
|
|
|
if (self._rightSideBarId === id) {
|
|
self._rightSideBarId = "";
|
|
self._rightSideBar.hide();
|
|
$("#sideBarRight").html("");
|
|
return;
|
|
}
|
|
else if (self._modalModuleId === id) {
|
|
self._modalModuleId = "";
|
|
self._modalModule.hide();
|
|
$("#modalModuleContent").html("");
|
|
return;
|
|
} else {
|
|
console.log(`hideModule --> Module ${id} not found!`);
|
|
}
|
|
}
|
|
|
|
//#endregion
|
|
|
|
//#region PageTitle
|
|
|
|
/**
|
|
* Anzeigen eines zusätzlichen Page-Titles
|
|
* Wird angezeigt wenn die Komponenten nicht in einem Sidebar oder Dialog angezeigt wird.
|
|
* Wird verwendet für z.B. Bereich | Bearbeiten xxxx
|
|
* @param componentId
|
|
* @param pageTitleId
|
|
*/
|
|
pageTitleAdd(componentId:string, pageTitleId): void {
|
|
if ($(componentId).length > 0 && $(pageTitleId).length > 0) {
|
|
if (!$(componentId).isInsideSidebar() && !$(componentId).isInsideModuleDialog()) {
|
|
var id = `#ptaid_${componentId.replace("#", "")}`;
|
|
if ($(id).length === 0) {
|
|
var span = `<span id="ptaid_${componentId.replace("#", "")}"> | ${$(pageTitleId).text()}</span>`;
|
|
$("#pageTitleAdd").append(span);
|
|
}
|
|
//$("#pageTitleAdd").text(`| ${$(pageTitleId).text()}`);
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Entfernen des zusätzlichen Page-Titles.
|
|
* Wird entfernt wenn die Komponenten nicht in einem Sidebar oder Dialog angezeigt wird.
|
|
* @param componentId
|
|
*/
|
|
pageTitleClear(componentId: string) {
|
|
if ($(componentId).length > 0) {
|
|
if (!$(componentId).isInsideSidebar() && !$(componentId).isInsideModuleDialog()) {
|
|
$(`#ptaid_${componentId.replace("#", "")}`).remove();
|
|
}
|
|
}
|
|
}
|
|
|
|
//#endregion
|
|
} |