From 1d0223f074e395b3fd1fc92fac2ebc139014f770 Mon Sep 17 00:00:00 2001 From: ulrich Date: Sun, 17 May 2020 18:42:09 +0000 Subject: [PATCH] Doku angpasst --- web/ui2/js/app.js | 133 ++++++++++++++++++++++--------------------- 1 files changed, 68 insertions(+), 65 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 7dde16e..8e08d96 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,11 +1,12 @@ function NutzerApp() { var self = this; - var vorlagen; + //var vorlagen; var userid; var loc; + this.cache = {}; // mustache template cache this.init = function () { - self.vorlagen = new Vorlagen(); + //self.vorlagen = new Vorlagen(); var dlg = document.querySelector(".dialog"); dlg.style.flexBasis = '0em'; document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen); @@ -76,24 +77,42 @@ } else { rollen = 'keine'; } - self.vorlagen.html_erzeugen( + self.html_erzeugen( 'data/tpl/nutzer-rollen-dlg.tpl', rollen, function (html) { document.querySelector("#nutzer").innerHTML = html; document.querySelector("#nutzer-id").textContent = nutzerId; self.addEvtListener('.granted-role-btn', 'click', self.revoke_role_klick); + document.querySelector("#del-user-btn").addEventListener( + 'click', self.nutzer_loeschen_bestaetigen); self.alle_rollen_zeigen(); }); }); document.querySelector('.zurueck-btn').style.color = 'black'; }; + this.nutzer_loeschen_bestaetigen = function() { + var nutzerId = document.querySelector("#nutzer-id").textContent; + self.dialog_zeigen( + 'data/tpl/dlg-del-conf.tpl', + JSON.parse('{"nutzername": "' + nutzerId + '"}'), + function(){ + var btn = document.getElementById('nutzer-loeschen-btn'); + if(btn !== null) { + btn.addEventListener('click', function() { + var user = new User(nutzerId, '', '', ''); + self.nutzer_loeschen(user); + }); + } + }); + }; + this.alle_rollen_zeigen = function() { var m = 'getRoleNamesGranted'; var u = '../svc/' + m; self.http_get(u, function (antwort2) { - self.vorlagen.html_erzeugen( + self.html_erzeugen( 'data/tpl/alle-rollen.tpl', JSON.parse(antwort2), function (html) { @@ -219,7 +238,7 @@ */ this.dialog_zeigen = function (vurl, inhalt, renderCallback) { var dlg = document.querySelector(".dialog"); - self.vorlagen.html_erzeugen( + self.html_erzeugen( vurl, inhalt, function (html) { @@ -246,11 +265,10 @@ /* API functions */ this.get_user_list = function() { - //var m = 'getUserNameList'; var m = 'getUserNameList'; var u = '../svc/' + m; self.http_get(u, function (antwort) { - self.vorlagen.html_erzeugen( + self.html_erzeugen( 'data/tpl/inhalt.tpl', JSON.parse(antwort), function (h) { @@ -258,6 +276,10 @@ elem.innerHTML = h; self.addEvtListener('p.nutzer-liste-eintrag', 'click', self.nutzerliste_klick); document.querySelector('.zurueck-btn').style.color = '#eee'; + self.removeAllListeners('top-neu-btn'); + var topBtn = document.querySelector('#top-neu-btn'); + topBtn.title = "Neuer Benutzer"; + topBtn.addEventListener('click', self.nutzer_neu_dialog_zeigen); }); }); }; @@ -272,6 +294,17 @@ }); }; + this.nutzer_loeschen = function(u) { + var url = '../svc/deleteUser'; + var data = "p=" + self.serialisieren(u); + self.http_post(url, data, function (antwort) { + self.get_user_list(); + document.getElementById('nutzer-loeschen-btn').removeEventListener( + 'click', self.nutzer_loeschen); + self.dialog_schliessen(); + }); + }; + this.alter_role_call = function(method, nutzerId, roleId, updateCallback) { var u = '../svc/' + method; var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId)); @@ -302,29 +335,29 @@ }; /* -------- ajax helper functions ----------- */ + + this.http_get = function(u, cb) { + self.http_call('GET', u, null, cb); + }; + + this.http_post = function(u, data, cb) { + self.http_call('POST', u, data, cb); + }; - this.http_get = function (u, scallback) { - var xmlhttp = new XMLHttpRequest(); + this.http_call = function (method, u, data, scallback) { + var xhr = new XMLHttpRequest(); var url = u; - xmlhttp.onreadystatechange = function() { + xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { scallback(this.responseText); } }; - xmlhttp.open("GET", url, true); - xmlhttp.send(); - }; - - this.http_post = function (url, data, callback) { - var xhr = new XMLHttpRequest(); - xhr.onreadystatechange = function() { - if (this.readyState === 4 && this.status === 200) { - callback(this.responseText); - } - }; - xhr.open("POST", url, true); - xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); - xhr.send(data); + xhr.open(method, url); + if(method === 'GET') { + xhr.send(); + } else if(method === 'POST' || method === 'PUT') { + xhr.send(data); + } }; /* ----- Hilfsfunktionen ----- */ @@ -340,31 +373,15 @@ elems[index].addEventListener(eventName, func); } }; + + this.removeAllListeners = function(elementId) { + var el = document.getElementById(elementId); + elClone = el.cloneNode(true); + el.parentNode.replaceChild(elClone, el); + }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type -} + /* ---- Vorlagen ---- */ -/* ----- Vorlagen ----- */ - -function Vorlagen() { - var self = this; - this.cache = {}; // mustache templates - - /* - Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt - gefüllt wird - - Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem - Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten. - Das fertige HTML wird der Callback-Funktion übergeben - sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der - Programmlauf zu diesem Zeitpunkt mittlerweile ist. - - vurl - URL zur Vorlagendatei - inhalt - die JSON-Struktur, deren Inhalt in die - Vorlage gefüllt werden soll - cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist. - Dieser Callback-Funktion wird das fertige HTML übergeben - */ this.html_erzeugen = function(vurl, inhalt, cb) { var vorlage = self.cache[vurl]; if(vorlage === undefined) { @@ -378,28 +395,14 @@ cb(Mustache.render(self.cache[vurl], inhalt)); }; - /* - Eine Vorlage vom Server in den lokalen Speicher laden - vurl - der URL unter dem die Vorlage zu finden ist - inhalt - die JSON-Struktur, deren Inhalt in die - Vorlage gefüllt werden soll - cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem - Inhalt gefüllt ist - */ this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) { - var xmlhttp = new XMLHttpRequest(); - xmlhttp.onreadystatechange = function() { - if (this.readyState == 4 && this.status == 200) { - self.cache[vurl] = this.responseText; - self.vorlage_fuellen(vurl, inhalt, cb); - } - }; - xmlhttp.open("GET", vurl, true); - xmlhttp.send(); + app.http_get(vurl, function(antwort) { + self.cache[vurl] = antwort; + self.vorlage_fuellen(vurl, inhalt, cb); + }); }; } - /* ----- Objekte ----- */ -- Gitblit v1.9.3