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