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