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