From d65863f4765853660eab4197ac4caa00f893f0b1 Mon Sep 17 00:00:00 2001 From: ulrich Date: Sat, 16 May 2020 12:23:00 +0000 Subject: [PATCH] Wechsel zurueck zu 'Neuer Benutzer' bei Anzeige Nutzerliste --- web/ui2/js/app.js | 260 ++++++++++++++++++++++++++++++++------------------- 1 files changed, 163 insertions(+), 97 deletions(-) diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js index 8f7f251..36c9fcf 100644 --- a/web/ui2/js/app.js +++ b/web/ui2/js/app.js @@ -1,19 +1,32 @@ function NutzerApp() { var self = this; - var appMenu; var vorlagen; - var api; var userid; - var pfad = ''; var loc; - var modus = 'kacheln'; - this.datei_neuer_text = function () { - self.meldung_mit_timeout("Neuer Text", 1500); + this.init = function () { + 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); + document.querySelector('.west').style.flexBasis = '0em'; + document.querySelector('.ost').style.flexBasis = '0em'; + self.get_login(); + self.get_user_list(); + self.loc = window.location.protocol + '//' + window.location.host; }; - + /* Nutzerverwaltung */ + this.nutzer_neu_dialog_zeigen = function () { + self.dialog_zeigen('data/tpl/dlg-nutzer-neu.tpl', '', function(){ + var btn = document.getElementById('nutzer-speichern-btn'); + if(btn !== null) { + btn.addEventListener('click', self.nutzer_speichern); + } + }); + }; + this.nutzerliste_klick = function(event) { var target = event.target; var gewaehlterNutzer = document.querySelector(".nutzer-gewaehlt"); @@ -22,7 +35,7 @@ } target.classList.add("nutzer-gewaehlt"); var nutzerId = target.innerHTML; - self.rollen_dialog_zeigen(nutzerId); + self.rollen_zeigen(nutzerId); }; this.nutzer_speichern = function() { @@ -45,82 +58,67 @@ return user; }; - /* Funktionen aus App-Vorlage */ - - this.init = function () { - self.vorlagen = new Vorlagen(); - /* - self.appMenu = new AppMenu(); - self.appMenu.init( - "data/menu/", - "hauptmenue.json", - "data/tpl/app-menu.tpl", - ".west", - "8em"); - document.querySelector('.hamburger').addEventListener('click', function (e) { - self.menue_umschalten(); - }); - */ - var dlg = document.querySelector(".dialog"); - dlg.style.flexBasis = '0em'; - document.querySelector('#nutzer-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen); - self.seitenleiste_umschalten(); - self.west_umschalten(); - self.west_umschalten(); - self.get_login(); - self.get_user_list(); - self.loc = window.location.protocol + '//' + window.location.host; - }; - - this.login_zeigen = function() { - self.meldung_mit_timeout("Benutzer: " + self.userid, 1500); - }; + /* Rollen erteilen und entziehen */ - this.menue_umschalten = function () { - var ham = document.querySelector(".hamburger"); - ham.classList.toggle("is-active"); // hamburger-icon umschalten - self.appMenu.toggle(); // menue oeffnen/schliessen - }; - - this.rollen_dialog_zeigen = function(nutzerId) { + this.rollen_zeigen = function(nutzerId) { + var topBtn = document.querySelector('#top-neu-btn'); + topBtn.removeEventListener('click', self.nutzer_neu_dialog_zeigen); + topBtn.addEventListener('click', self.rolle_neu_dialog_zeigen); + topBtn.title = "Neue Rolle"; + var m = 'getUserRoleNames'; var u = '../svc/' + m + '?p=' + nutzerId; self.http_get(u, function (antwort) { + var jsonAntwort = JSON.parse(antwort); + var rollen = jsonAntwort.List[0]; + if(typeof rollen === 'object') { + rollen = jsonAntwort; + } else { + rollen = 'keine'; + } self.vorlagen.html_erzeugen( 'data/tpl/nutzer-rollen-dlg.tpl', - JSON.parse(antwort), + rollen, function (html) { document.querySelector("#nutzer").innerHTML = html; document.querySelector("#nutzer-id").textContent = nutzerId; self.addEvtListener('.granted-role-btn', 'click', self.revoke_role_klick); - var m = 'getRoleNamesGranted'; - var u = '../svc/' + m; - self.http_get(u, function (antwort2) { - self.vorlagen.html_erzeugen( - 'data/tpl/alle-rollen.tpl', - JSON.parse(antwort2), - function (html) { - document.querySelector(".alle-rollen-behaelter").innerHTML = html; - document.querySelector('.zurueck-btn').addEventListener('click', function (e) { - self.get_user_list(); - }); - self.addEvtListener('.avl-role-btn', 'click', self.grant_role_klick); - }); - }); + self.alle_rollen_zeigen(); }); }); document.querySelector('.zurueck-btn').style.color = 'black'; }; + this.alle_rollen_zeigen = function() { + var m = 'getRoleNamesGranted'; + var u = '../svc/' + m; + self.http_get(u, function (antwort2) { + self.vorlagen.html_erzeugen( + 'data/tpl/alle-rollen.tpl', + JSON.parse(antwort2), + function (html) { + document.querySelector(".alle-rollen-behaelter").innerHTML = html; + document.querySelector('.zurueck-btn').addEventListener('click', function (e) { + self.get_user_list(); + }); + self.addEvtListener('.avl-role-btn', 'click', self.grant_role_klick); + }); + }); + }; + this.grant_role_klick = function(event) { self.alter_role(event, 'grantRole', function(roleId) { - var btn = document.createElement("button"); - btn.type = "button"; - btn.classList.add("granted-role-btn"); - btn.id = roleId; - btn.textContent = roleId; - document.querySelector('.rollen-behaelter').appendChild(btn); + self.add_role_to_user_roles(roleId); }); + }; + + this.add_role_to_user_roles = function(roleId) { + var btn = document.createElement("button"); + btn.type = "button"; + btn.classList.add("granted-role-btn"); + btn.id = roleId; + btn.textContent = roleId; + document.querySelector('.rollen-behaelter').appendChild(btn); }; this.revoke_role_klick = function(event) { @@ -134,26 +132,34 @@ var target = event.target; var nutzerId = document.querySelector("#nutzer-id").textContent; var roleId = target.textContent; - var u = '../svc/' + method; - var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId)); - self.http_post(u, data, function (antwort) { - updateCallback(roleId); - }); + self.alter_role_call(method, nutzerId, roleId, updateCallback); }; + + this.rolle_neu_dialog_zeigen = function () { + self.dialog_zeigen('data/tpl/dlg-rolle-neu.tpl', '', function(){ + var btn = document.getElementById('rolle-speichern-btn'); + if(btn !== null) { + btn.addEventListener('click', function() { + var nutzerId = document.querySelector("#nutzer-id").textContent; + var rolle = document.getElementById('rollen-id').value; + self.alter_role_call('grantRole', nutzerId, rolle, function(roleId) { + self.add_role_to_user_roles(roleId); + self.dialog_schliessen(); + }); + }); + } + }); + }; + + /* Funktionen aus App-Vorlage */ + + this.login_zeigen = function() { + self.meldung_mit_timeout("Benutzer: " + self.userid, 1500); + }; + this.info_dialog_zeigen = function () { self.dialog_zeigen('data/tpl/dlg-info.tpl', ''); - //self.menue_umschalten(); - }; - - this.nutzer_neu_dialog_zeigen = function () { - self.dialog_zeigen('data/tpl/dlg-nutzer-neu.tpl', '', function(){ - var btn = document.getElementById('nutzer-speichern-btn'); - if(btn !== null) { - btn.addEventListener('click', self.nutzer_speichern); - } - }); - //self.menue_umschalten(); }; this.seitenleiste_umschalten = function () { @@ -165,21 +171,8 @@ ostDiv.classList.add('ost-open'); ostDiv.style.flexBasis = '6em'; } - //self.menue_umschalten(); }; - this.west_umschalten = function() { - var westDiv = document.querySelector('.west'); - if (westDiv.classList.contains('west-open')) { - westDiv.classList.remove('west-open'); - westDiv.style.flexBasis = '0em'; - } else { - westDiv.classList.add('west-open'); - westDiv.style.flexBasis = '6em'; - } - //self.menue_umschalten(); - }; - this.fusszeile_umschalten = function () { var suedDiv = document.querySelector('.sued'); if (suedDiv.classList.contains('sued-open')) { @@ -189,7 +182,6 @@ suedDiv.classList.add('sued-open'); suedDiv.style.height = '1.5em'; } - //self.menue_umschalten(); }; this.meldung_mit_timeout = function (meldung, timeout) { @@ -254,7 +246,6 @@ /* API functions */ this.get_user_list = function() { - //var m = 'getUserNameList'; var m = 'getUserNameList'; var u = '../svc/' + m; self.http_get(u, function (antwort) { @@ -266,6 +257,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); }); }); }; @@ -280,6 +275,14 @@ }); }; + this.alter_role_call = function(method, nutzerId, roleId, updateCallback) { + var u = '../svc/' + method; + var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId)); + self.http_post(u, data, function (antwort) { + updateCallback(roleId); + }); + }; + /* -------- An- und Abmelden ------------- */ this.get_login = function() { @@ -340,6 +343,69 @@ elems[index].addEventListener(eventName, func); } }; + + this.removeAllListeners = function(elementId) { + var el = document.getElementById(elementId); + elClone = el.cloneNode(true); + el.parentNode.replaceChild(elClone, el); + }; + +} + +/* ----- 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) { + self.vorlage_laden_und_fuellen(vurl, inhalt, cb); + } else { + self.vorlage_fuellen(vurl, inhalt, cb); + } + }; + + this.vorlage_fuellen = function(vurl, inhalt, cb) { + 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(); + }; } -- Gitblit v1.9.3