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