Nutzerverwaltung
view | history | commit | commitdiff
ulrich@undisclosed
2020-05-17 35ded1fef31b69b80995c3cdf4a5df5407abc3ba
commit | author | age
3d5fe0 1 function NutzerApp() {
002c44 2   var self = this;
35ded1 3   //var vorlagen;
002c44 4   var userid;
U 5   var loc;
35ded1 6   this.cache = {}; // mustache template cache
eefd25 7
U 8   this.init = function () {
35ded1 9     //self.vorlagen = new Vorlagen();
eefd25 10     var dlg = document.querySelector(".dialog");
U 11     dlg.style.flexBasis = '0em';
f57e84 12     document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
eefd25 13     document.querySelector('.west').style.flexBasis = '0em';
U 14     document.querySelector('.ost').style.flexBasis = '0em';
15     self.get_login();
16     self.get_user_list();
17     self.loc = window.location.protocol + '//' + window.location.host;
18   };
002c44 19
f9d0c4 20   /* Nutzerverwaltung */
U 21   
eefd25 22   this.nutzer_neu_dialog_zeigen = function () {
U 23     self.dialog_zeigen('data/tpl/dlg-nutzer-neu.tpl', '', function(){
24       var btn = document.getElementById('nutzer-speichern-btn');
25       if(btn !== null) {
26         btn.addEventListener('click', self.nutzer_speichern);                         
27       }                      
28     });
29   };
30
f9d0c4 31   this.nutzerliste_klick = function(event) {
U 32     var target = event.target;
33     var gewaehlterNutzer = document.querySelector(".nutzer-gewaehlt");
34     if(gewaehlterNutzer !== null) {
35       gewaehlterNutzer.classList.remove("nutzer-gewaehlt");
36     }
37     target.classList.add("nutzer-gewaehlt");
c995b7 38     var nutzerId = target.innerHTML;
d9858d 39     self.rollen_zeigen(nutzerId);
f9d0c4 40   };
d1b8b2 41   
U 42   this.nutzer_speichern = function() {
43     var user = self.nutzer_dialog_lesen();
44     var kww = document.getElementById('nutzer-wkw').value;
45     if(user.pw !== kww) {
46       self.meldung_mit_timeout("Kennworte stimmen nicht ueberein.", 1500);
47     } else {
48       self.neuen_nutzer_speichern('p=' + self.serialisieren(user));
49     }
50   };
51   
52   this.nutzer_dialog_lesen = function() {
53     var id = document.getElementById('nutzer-id').value;
54     var vname = document.getElementById('nutzer-vorname').value;
55     var nname = document.getElementById('nutzer-name').value;
56     var email = document.getElementById('nutzer-email').value;
57     var kw = document.getElementById('nutzer-kw').value;
58     var user = new User(id, kw, vname, nname, email);
59     return user;
60   };
002c44 61
eefd25 62   /* Rollen erteilen und entziehen */
002c44 63   
d9858d 64   this.rollen_zeigen = function(nutzerId) {
f57e84 65     var topBtn = document.querySelector('#top-neu-btn');
U 66     topBtn.removeEventListener('click', self.nutzer_neu_dialog_zeigen);
67     topBtn.addEventListener('click', self.rolle_neu_dialog_zeigen);
68     topBtn.title = "Neue Rolle";
69     
c995b7 70     var m = 'getUserRoleNames';
U 71     var u = '../svc/' + m + '?p=' + nutzerId;
72     self.http_get(u, function (antwort) {
d9858d 73       var jsonAntwort = JSON.parse(antwort);
U 74       var rollen = jsonAntwort.List[0];
75       if(typeof rollen === 'object') {
76         rollen = jsonAntwort;
77       } else {
78         rollen = 'keine';
79       }
35ded1 80       self.html_erzeugen(
c995b7 81         'data/tpl/nutzer-rollen-dlg.tpl',
d9858d 82         rollen,
c995b7 83         function (html) {
U 84           document.querySelector("#nutzer").innerHTML = html;
ab2b54 85           document.querySelector("#nutzer-id").textContent = nutzerId;          
U 86           self.addEvtListener('.granted-role-btn', 'click', self.revoke_role_klick);
f72545 87           document.querySelector("#del-user-btn").addEventListener(
U 88                   'click', self.nutzer_loeschen_bestaetigen);
d9858d 89           self.alle_rollen_zeigen();
c995b7 90         });
045d48 91     });
U 92     document.querySelector('.zurueck-btn').style.color = 'black';
f72545 93   };
U 94   
95   this.nutzer_loeschen_bestaetigen = function() {
96     var nutzerId = document.querySelector("#nutzer-id").textContent;
97     self.dialog_zeigen(
98       'data/tpl/dlg-del-conf.tpl',
99       JSON.parse('{"nutzername": "' + nutzerId + '"}'), 
100       function(){
101         var btn = document.getElementById('nutzer-loeschen-btn');
102         if(btn !== null) {
103           btn.addEventListener('click', function() {
104             var user = new User(nutzerId, '', '', '');
105             self.nutzer_loeschen(user);
106           });                         
107         }                      
108       });
ab2b54 109   };
U 110   
d9858d 111   this.alle_rollen_zeigen = function() {
U 112     var m = 'getRoleNamesGranted';
113     var u = '../svc/' + m;
114     self.http_get(u, function (antwort2) {
35ded1 115       self.html_erzeugen(
d9858d 116         'data/tpl/alle-rollen.tpl',
U 117         JSON.parse(antwort2),
118         function (html) {
119           document.querySelector(".alle-rollen-behaelter").innerHTML = html;
120           document.querySelector('.zurueck-btn').addEventListener('click', function (e) {
121             self.get_user_list();
122           });
123           self.addEvtListener('.avl-role-btn', 'click', self.grant_role_klick);
124         });
125     });
126   };
127   
ab2b54 128   this.grant_role_klick = function(event) {
U 129     self.alter_role(event, 'grantRole', function(roleId) {
f57e84 130       self.add_role_to_user_roles(roleId);
ab2b54 131     });
f57e84 132   };
U 133   
134   this.add_role_to_user_roles = function(roleId) {
135     var btn = document.createElement("button");
136     btn.type = "button";
137     btn.classList.add("granted-role-btn");
138     btn.id = roleId;
139     btn.textContent = roleId;
140     document.querySelector('.rollen-behaelter').appendChild(btn);
ab2b54 141   };
U 142   
143   this.revoke_role_klick = function(event) {
144     self.alter_role(event, 'revokeRole', function(roleId) {
145       var btn = document.querySelector("#" + roleId);
146       btn.parentNode.removeChild(btn);
147     });
148   };
149   
150   this.alter_role = function(event, method, updateCallback) {
151     var target = event.target;
152     var nutzerId = document.querySelector("#nutzer-id").textContent;
153     var roleId = target.textContent;
f57e84 154     self.alter_role_call(method, nutzerId, roleId, updateCallback);
c995b7 155   };
U 156   
f57e84 157   this.rolle_neu_dialog_zeigen = function () {
U 158     self.dialog_zeigen('data/tpl/dlg-rolle-neu.tpl', '', function(){
159       var btn = document.getElementById('rolle-speichern-btn');
160       if(btn !== null) {
161         btn.addEventListener('click', function() {
162           var nutzerId = document.querySelector("#nutzer-id").textContent;
163           var rolle = document.getElementById('rollen-id').value;
164           self.alter_role_call('grantRole', nutzerId, rolle, function(roleId) {
165             self.add_role_to_user_roles(roleId);
166             self.dialog_schliessen();
167           });
168         });                         
169       }                      
170     });
171   };
eefd25 172
U 173   /* Funktionen aus App-Vorlage */
174
175   this.login_zeigen = function() {
176     self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
177   };
178   
179   
002c44 180   this.info_dialog_zeigen = function () {
14cc29 181     self.dialog_zeigen('data/tpl/dlg-info.tpl', '');
002c44 182   };
U 183
184   this.seitenleiste_umschalten = function () {
185     var ostDiv = document.querySelector('.ost');
186     if (ostDiv.classList.contains('ost-open')) {
187       ostDiv.classList.remove('ost-open');
188       ostDiv.style.flexBasis = '0em';
189     } else {
190       ostDiv.classList.add('ost-open');
191       ostDiv.style.flexBasis = '6em';
192     }
193   };
194
195   this.fusszeile_umschalten = function () {
196     var suedDiv = document.querySelector('.sued');
197     if (suedDiv.classList.contains('sued-open')) {
198       suedDiv.classList.remove('sued-open');
199       suedDiv.style.height = '0';
200     } else {
201       suedDiv.classList.add('sued-open');
202       suedDiv.style.height = '1.5em';
203     }
204   };
205
206   this.meldung_mit_timeout = function (meldung, timeout) {
207     var s = document.querySelector('.sued');
208     s.textContent = meldung;
d1b8b2 209     if (!s.classList.contains('sued-open')) {
U 210       s.classList.add('sued-open');
211       s.style.height = '1.5em';
212     }
002c44 213     setTimeout(function () {
U 214       s.textContent = 'Bereit.';
215       setTimeout(function () {
216         var suedDiv = document.querySelector('.sued');
217         if (suedDiv.classList.contains('sued-open')) {
218           suedDiv.classList.remove('sued-open');
219           suedDiv.style.height = '0';
220         }
221       }, 500);
222     }, timeout);
223   };
224
225   /* Dialog-Funktionen */
226
227   /*
14cc29 228    * Einen Dialog erzeugen
U 229    * 
230    * Die Vorlage, auf die im Parameter vurl verwiesen wird, wird geladen, 
231    * wenn sie noch nicht benutzt wurde
232    * 
233    * @param {String} vurl - der URL mit der Dialogvorlage
234    * @param {JSON-Objekt} inhalt - was im Dialog an dynamischem Inhalt angezeigt werden soll
235    * @param {function} renderCallback - 
236    *     Funktion, die aufgerufen wird nachdem der Dialog gerendert wurde 
237    * @returns {undefined}
002c44 238    */
14cc29 239   this.dialog_zeigen = function (vurl, inhalt, renderCallback) {
002c44 240     var dlg = document.querySelector(".dialog");
35ded1 241     self.html_erzeugen(
002c44 242             vurl,
U 243             inhalt,
244             function (html) {
3d5fe0 245               dlg.style.flexBasis = '14em';
e86f3c 246               setTimeout(function () {
U 247                 dlg.innerHTML = html;
14cc29 248                 document.querySelector('.close-btn').addEventListener(
U 249                         'click', self.dialog_schliessen);
250                 if(renderCallback !== undefined) {
251                   renderCallback();
252                 }
e86f3c 253               }, 300);
002c44 254             });
U 255   };
256
257   this.dialog_schliessen = function () {
14cc29 258     document.querySelector('.close-btn').removeEventListener(
U 259             'click', self.dialog_schliessen);
002c44 260     var dlg = document.querySelector('.dialog');
U 261     dlg.innerHTML = '';
e86f3c 262     dlg.style.flexBasis = '0em';
002c44 263   };
U 264
265   /* API functions */
266   
d1b8b2 267   this.get_user_list = function() {
002c44 268     var m = 'getUserNameList';
U 269     var u = '../svc/' + m;
d1b8b2 270     self.http_get(u, function (antwort) {
35ded1 271       self.html_erzeugen(
045d48 272         'data/tpl/inhalt.tpl',
U 273         JSON.parse(antwort),
274         function (h) {
275           var elem = document.getElementById('nutzer');
276           elem.innerHTML = h;
277           self.addEvtListener('p.nutzer-liste-eintrag', 'click', self.nutzerliste_klick);
278           document.querySelector('.zurueck-btn').style.color = '#eee';
d65863 279           self.removeAllListeners('top-neu-btn'); 
U 280           var topBtn = document.querySelector('#top-neu-btn');
281           topBtn.title = "Neuer Benutzer";
282           topBtn.addEventListener('click', self.nutzer_neu_dialog_zeigen);
045d48 283         });
b73bb6 284       });
U 285   };
d1b8b2 286   
U 287   this.neuen_nutzer_speichern = function(u) {
288     var url = '../svc/createUser';
289     self.http_post(url, u, function (antwort) {
290       self.get_user_list();
14cc29 291       document.getElementById('nutzer-speichern-btn').removeEventListener(
U 292         'click', self.nutzer_speichern);
d1b8b2 293       self.dialog_schliessen();
U 294     });
295   };
002c44 296
f72545 297   this.nutzer_loeschen = function(u) {
U 298     var url = '../svc/deleteUser';
299     var data = "p=" + self.serialisieren(u);
300     self.http_post(url, data, function (antwort) {
301       self.get_user_list();
302       document.getElementById('nutzer-loeschen-btn').removeEventListener(
303         'click', self.nutzer_loeschen);
304       self.dialog_schliessen();
305     });
306   };
307   
f57e84 308   this.alter_role_call = function(method, nutzerId, roleId, updateCallback) {
U 309     var u = '../svc/' + method;
310     var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId));
311     self.http_post(u, data, function (antwort) {  
312       updateCallback(roleId);
313     });            
314   };
315   
002c44 316   /* -------- An- und Abmelden ------------- */
U 317
d1b8b2 318   this.get_login = function() {
002c44 319     var m = '?c=de.uhilger.um.pub.SessionManager&m=getSessionUser';
U 320     var u = '../pub' + m;
d1b8b2 321     self.http_get(u, function (resp) {
002c44 322       self.userid = resp;
U 323       self.login_zeigen();
324       //document.querySelector("#userMenu").textContent = resp;
325     });
326   };
327
328   this.um_logout = function() {
329     var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession';
330     var u = '../pub' + m;
d1b8b2 331     self.http_get(u, function (resp) {
002c44 332       //$('#userMenu').text('nicht angemeldet');
U 333       window.location.href = '../logout.html';
334     });
335   };
336
337   /* -------- ajax helper functions ----------- */
35ded1 338   
U 339   this.http_get = function(u, cb)  {
340     self.http_call('GET', u, null, cb);
341   };
342   
343   this.http_post = function(u, data, cb) {
344     self.http_call('POST', u, data, cb);
345   };
002c44 346
35ded1 347   this.http_call = function (method, u, data, scallback) {    
U 348     var xhr = new XMLHttpRequest();
002c44 349     var url = u;
35ded1 350     xhr.onreadystatechange = function() {
d1b8b2 351       if (this.readyState === 4 && this.status === 200) {
002c44 352         scallback(this.responseText);
U 353       }
354     };
35ded1 355     xhr.open(method, url);
U 356     if(method === 'GET')  {
357       xhr.send();
358     } else if(method === 'POST' || method === 'PUT') {
359       xhr.send(data);
360     }
d1b8b2 361   };
U 362   
3d5fe0 363 /* ----- Hilfsfunktionen ----- */
U 364
365   this.serialisieren = function(obj) {
366     return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
367   };
ab2b54 368   
U 369   this.addEvtListener = function(selector, eventName, func) {
370     var elems = document.querySelectorAll(selector);
371     var index;
372     for (index = 0; index < elems.length; index++) {
373       elems[index].addEventListener(eventName, func);
374     }
375   };
d65863 376   
U 377   this.removeAllListeners = function(elementId) {
378     var el = document.getElementById(elementId);
379     elClone = el.cloneNode(true);
380     el.parentNode.replaceChild(elClone, el);
35ded1 381   }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type
002c44 382
35ded1 383   /* ---- Vorlagen ---- */
70d6da 384
U 385   this.html_erzeugen = function(vurl, inhalt, cb) {
386     var vorlage = self.cache[vurl];
387     if(vorlage === undefined) {
388       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
389     } else {
390       self.vorlage_fuellen(vurl, inhalt, cb);
391     }
392   };
393
394   this.vorlage_fuellen = function(vurl, inhalt, cb) {
395     cb(Mustache.render(self.cache[vurl], inhalt));
396   };
397
398   this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
35ded1 399     app.http_get(vurl, function(antwort) {
U 400       self.cache[vurl] = antwort;
401       self.vorlage_fuellen(vurl, inhalt, cb);
402     });
70d6da 403   };
U 404
35ded1 405 }
3d5fe0 406
U 407 /* ----- Objekte ----- */
408
409 function User(i, p, fn, ln, em) {
410   this.id = i;
411   this.pw = p;
412   this.firstName = fn;
413   this.lastName = ln;
414   this.email = em;
415 }
416
ab2b54 417 function UserRole(u, r) {
U 418   this.userId = u;
419   this.role = r;
420 }