From 5daeb20e992d5d0c6ab5c68051a2448c062ffe53 Mon Sep 17 00:00:00 2001
From: ulrich
Date: Mon, 18 May 2020 12:00:55 +0000
Subject: [PATCH] Nutzerprofil (in Arbeit)

---
 web/ui2/js/app.js |  297 +++++++++++++++++++++++++++++++++++------------------------
 1 files changed, 177 insertions(+), 120 deletions(-)

diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js
index 8f7f251..55cdea5 100644
--- a/web/ui2/js/app.js
+++ b/web/ui2/js/app.js
@@ -1,19 +1,30 @@
 function NutzerApp() {
   var self = this;
-  var appMenu;
-  var vorlagen;
-  var api;
   var userid;
-  var pfad = '';
-  var loc;
-  var modus = 'kacheln';
+  this.cache = {}; // mustache template cache
 
-  this.datei_neuer_text = function () {
-    self.meldung_mit_timeout("Neuer Text", 1500);
+  this.init = function () {
+    //self.vorlagen = new Vorlagen();
+    var dlg = document.querySelector(".dialog");
+    dlg.style.flexBasis = '0em';
+    document.querySelector('#top-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
+    document.querySelector('.west').style.flexBasis = '0em';
+    document.querySelector('.ost').style.flexBasis = '0em';
+    self.get_login();
+    self.get_user_list();
   };
-  
+
   /* Nutzerverwaltung */
   
+  this.nutzer_neu_dialog_zeigen = function () {
+    self.dialog_zeigen('data/tpl/dlg-nutzer-neu.tpl', '', function(){
+      var btn = document.getElementById('nutzer-speichern-btn');
+      if(btn !== null) {
+        btn.addEventListener('click', self.nutzer_speichern);                         
+      }                      
+    });
+  };
+
   this.nutzerliste_klick = function(event) {
     var target = event.target;
     var gewaehlterNutzer = document.querySelector(".nutzer-gewaehlt");
@@ -22,7 +33,7 @@
     }
     target.classList.add("nutzer-gewaehlt");
     var nutzerId = target.innerHTML;
-    self.rollen_dialog_zeigen(nutzerId);
+    self.rollen_zeigen(nutzerId);
   };
   
   this.nutzer_speichern = function() {
@@ -45,82 +56,85 @@
     return user;
   };
 
-  /* Funktionen aus App-Vorlage */
-
-  this.init = function () {
-    self.vorlagen = new Vorlagen();
-    /*
-    self.appMenu = new AppMenu();
-    self.appMenu.init(
-            "data/menu/",
-            "hauptmenue.json",
-            "data/tpl/app-menu.tpl",
-            ".west",
-            "8em");
-    document.querySelector('.hamburger').addEventListener('click', function (e) {
-      self.menue_umschalten();
-    });
-    */
-    var dlg = document.querySelector(".dialog");
-    dlg.style.flexBasis = '0em';
-    document.querySelector('#nutzer-neu-btn').addEventListener('click', self.nutzer_neu_dialog_zeigen);
-    self.seitenleiste_umschalten();
-    self.west_umschalten();
-    self.west_umschalten();
-    self.get_login();
-    self.get_user_list();
-    self.loc = window.location.protocol + '//' + window.location.host;
-  };
-
-  this.login_zeigen = function() {
-    self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
-  };
+  /* Rollen erteilen und entziehen */
   
-  this.menue_umschalten = function () {
-    var ham = document.querySelector(".hamburger");
-    ham.classList.toggle("is-active"); // hamburger-icon umschalten
-    self.appMenu.toggle(); // menue oeffnen/schliessen
-  };
-
-  this.rollen_dialog_zeigen = function(nutzerId) {
+  this.rollen_zeigen = function(nutzerId) {
+    var topBtn = document.querySelector('#top-neu-btn');
+    topBtn.removeEventListener('click', self.nutzer_neu_dialog_zeigen);
+    topBtn.addEventListener('click', self.rolle_neu_dialog_zeigen);
+    topBtn.title = "Neue Rolle";
+    
     var m = 'getUserRoleNames';
     var u = '../svc/' + m + '?p=' + nutzerId;
     self.http_get(u, function (antwort) {
-      self.vorlagen.html_erzeugen(
+      var jsonAntwort = JSON.parse(antwort);
+      var rollen = jsonAntwort.List[0];
+      if(typeof rollen === 'object') {
+        rollen = jsonAntwort;
+      } else {
+        rollen = 'keine';
+      }
+      self.html_erzeugen(
         'data/tpl/nutzer-rollen-dlg.tpl',
-        JSON.parse(antwort),
+        rollen,
         function (html) {
           document.querySelector("#nutzer").innerHTML = html;
           document.querySelector("#nutzer-id").textContent = nutzerId;          
           self.addEvtListener('.granted-role-btn', 'click', self.revoke_role_klick);
-          var m = 'getRoleNamesGranted';
-          var u = '../svc/' + m;
-          self.http_get(u, function (antwort2) {
-            self.vorlagen.html_erzeugen(
-              'data/tpl/alle-rollen.tpl',
-              JSON.parse(antwort2),
-              function (html) {
-                document.querySelector(".alle-rollen-behaelter").innerHTML = html;
-                document.querySelector('.zurueck-btn').addEventListener('click', function (e) {
-                  self.get_user_list();
-                });
-                self.addEvtListener('.avl-role-btn', 'click', self.grant_role_klick);
-              });
-          });
+          document.querySelector("#del-user-btn").addEventListener(
+                  'click', self.nutzer_loeschen_bestaetigen);
+          self.alle_rollen_zeigen();
         });
     });
     document.querySelector('.zurueck-btn').style.color = 'black';
   };
   
+  this.nutzer_loeschen_bestaetigen = function() {
+    var nutzerId = document.querySelector("#nutzer-id").textContent;
+    self.dialog_zeigen(
+      'data/tpl/dlg-del-conf.tpl',
+      JSON.parse('{"nutzername": "' + nutzerId + '"}'), 
+      function(){
+        var btn = document.getElementById('nutzer-loeschen-btn');
+        if(btn !== null) {
+          btn.addEventListener('click', function() {
+            var user = new User(nutzerId, '', '', '');
+            self.nutzer_loeschen(user);
+          });                         
+        }                      
+      });
+  };
+  
+  this.alle_rollen_zeigen = function() {
+    var m = 'getRoleNamesGranted';
+    var u = '../svc/' + m;
+    self.http_get(u, function (antwort2) {
+      self.html_erzeugen(
+        'data/tpl/alle-rollen.tpl',
+        JSON.parse(antwort2),
+        function (html) {
+          document.querySelector(".alle-rollen-behaelter").innerHTML = html;
+          document.querySelector('.zurueck-btn').addEventListener('click', function (e) {
+            self.get_user_list();
+          });
+          self.addEvtListener('.avl-role-btn', 'click', self.grant_role_klick);
+        });
+    });
+  };
+  
   this.grant_role_klick = function(event) {
     self.alter_role(event, 'grantRole', function(roleId) {
-      var btn = document.createElement("button");
-      btn.type = "button";
-      btn.classList.add("granted-role-btn");
-      btn.id = roleId;
-      btn.textContent = roleId;
-      document.querySelector('.rollen-behaelter').appendChild(btn);
+      self.add_role_to_user_roles(roleId);
     });
+  };
+  
+  this.add_role_to_user_roles = function(roleId) {
+    var btn = document.createElement("button");
+    btn.type = "button";
+    btn.classList.add("granted-role-btn");
+    btn.id = roleId;
+    btn.textContent = roleId;
+    document.querySelector('.rollen-behaelter').appendChild(btn);
   };
   
   this.revoke_role_klick = function(event) {
@@ -134,26 +148,34 @@
     var target = event.target;
     var nutzerId = document.querySelector("#nutzer-id").textContent;
     var roleId = target.textContent;
-    var u = '../svc/' + method;
-    var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId));
-    self.http_post(u, data, function (antwort) {  
-      updateCallback(roleId);
-    });        
+    self.alter_role_call(method, nutzerId, roleId, updateCallback);
   };
+  
+  this.rolle_neu_dialog_zeigen = function () {
+    self.dialog_zeigen('data/tpl/dlg-rolle-neu.tpl', '', function(){
+      var btn = document.getElementById('rolle-speichern-btn');
+      if(btn !== null) {
+        btn.addEventListener('click', function() {
+          var nutzerId = document.querySelector("#nutzer-id").textContent;
+          var rolle = document.getElementById('rollen-id').value;
+          self.alter_role_call('grantRole', nutzerId, rolle, function(roleId) {
+            self.add_role_to_user_roles(roleId);
+            self.dialog_schliessen();
+          });
+        });                         
+      }                      
+    });
+  };
+
+  /* Funktionen aus App-Vorlage */
+
+  this.login_zeigen = function() {
+    self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
+  };
+  
   
   this.info_dialog_zeigen = function () {
     self.dialog_zeigen('data/tpl/dlg-info.tpl', '');
-    //self.menue_umschalten();
-  };
-
-  this.nutzer_neu_dialog_zeigen = function () {
-    self.dialog_zeigen('data/tpl/dlg-nutzer-neu.tpl', '', function(){
-      var btn = document.getElementById('nutzer-speichern-btn');
-      if(btn !== null) {
-        btn.addEventListener('click', self.nutzer_speichern);                         
-      }                      
-    });
-    //self.menue_umschalten();
   };
 
   this.seitenleiste_umschalten = function () {
@@ -165,21 +187,8 @@
       ostDiv.classList.add('ost-open');
       ostDiv.style.flexBasis = '6em';
     }
-    //self.menue_umschalten();
   };
 
-  this.west_umschalten = function() {
-    var westDiv = document.querySelector('.west');
-    if (westDiv.classList.contains('west-open')) {
-      westDiv.classList.remove('west-open');
-      westDiv.style.flexBasis = '0em';
-    } else {
-      westDiv.classList.add('west-open');
-      westDiv.style.flexBasis = '6em';
-    }
-    //self.menue_umschalten();
-  };    
-  
   this.fusszeile_umschalten = function () {
     var suedDiv = document.querySelector('.sued');
     if (suedDiv.classList.contains('sued-open')) {
@@ -189,7 +198,6 @@
       suedDiv.classList.add('sued-open');
       suedDiv.style.height = '1.5em';
     }
-    //self.menue_umschalten();
   };
 
   this.meldung_mit_timeout = function (meldung, timeout) {
@@ -227,7 +235,7 @@
    */
   this.dialog_zeigen = function (vurl, inhalt, renderCallback) {
     var dlg = document.querySelector(".dialog");
-    self.vorlagen.html_erzeugen(
+    self.html_erzeugen(
             vurl,
             inhalt,
             function (html) {
@@ -254,11 +262,10 @@
   /* API functions */
   
   this.get_user_list = function() {
-    //var m = 'getUserNameList';
     var m = 'getUserNameList';
     var u = '../svc/' + m;
     self.http_get(u, function (antwort) {
-      self.vorlagen.html_erzeugen(
+      self.html_erzeugen(
         'data/tpl/inhalt.tpl',
         JSON.parse(antwort),
         function (h) {
@@ -266,6 +273,10 @@
           elem.innerHTML = h;
           self.addEvtListener('p.nutzer-liste-eintrag', 'click', self.nutzerliste_klick);
           document.querySelector('.zurueck-btn').style.color = '#eee';
+          self.removeAllListeners('top-neu-btn'); 
+          var topBtn = document.querySelector('#top-neu-btn');
+          topBtn.title = "Neuer Benutzer";
+          topBtn.addEventListener('click', self.nutzer_neu_dialog_zeigen);
         });
       });
   };
@@ -280,6 +291,25 @@
     });
   };
 
+  this.nutzer_loeschen = function(u) {
+    var url = '../svc/deleteUser';
+    var data = "p=" + self.serialisieren(u);
+    self.http_post(url, data, function (antwort) {
+      self.get_user_list();
+      document.getElementById('nutzer-loeschen-btn').removeEventListener(
+        'click', self.nutzer_loeschen);
+      self.dialog_schliessen();
+    });
+  };
+  
+  this.alter_role_call = function(method, nutzerId, roleId, updateCallback) {
+    var u = '../svc/' + method;
+    var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId));
+    self.http_post(u, data, function (antwort) {  
+      updateCallback(roleId);
+    });            
+  };
+  
   /* -------- An- und Abmelden ------------- */
 
   this.get_login = function() {
@@ -302,29 +332,29 @@
   };
 
   /* -------- ajax helper functions ----------- */
+  
+  this.http_get = function(u, cb)  {
+    self.http_call('GET', u, null, cb);
+  };
+  
+  this.http_post = function(u, data, cb) {
+    self.http_call('POST', u, data, cb);
+  };
 
-  this.http_get = function (u, scallback) {    
-    var xmlhttp = new XMLHttpRequest();
+  this.http_call = function (method, u, data, scallback) {    
+    var xhr = new XMLHttpRequest();
     var url = u;
-    xmlhttp.onreadystatechange = function() {
+    xhr.onreadystatechange = function() {
       if (this.readyState === 4 && this.status === 200) {
         scallback(this.responseText);
       }
     };
-    xmlhttp.open("GET", url, true);
-    xmlhttp.send();
-  };
-  
-  this.http_post = function (url, data, callback) {
-    var xhr = new XMLHttpRequest();
-    xhr.onreadystatechange = function() {
-      if (this.readyState === 4 && this.status === 200) {
-        callback(this.responseText);
-      }
-    };
-    xhr.open("POST", url, true);
-    xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
-    xhr.send(data);
+    xhr.open(method, url);
+    if(method === 'GET')  {
+      xhr.send();
+    } else if(method === 'POST' || method === 'PUT') {
+      xhr.send(data);
+    }
   };
   
 /* ----- Hilfsfunktionen ----- */
@@ -340,9 +370,36 @@
       elems[index].addEventListener(eventName, func);
     }
   };
+  
+  this.removeAllListeners = function(elementId) {
+    var el = document.getElementById(elementId);
+    elClone = el.cloneNode(true);
+    el.parentNode.replaceChild(elClone, el);
+  }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type
+
+  /* ---- Vorlagen ---- */
+
+  this.html_erzeugen = function(vurl, inhalt, cb) {
+    var vorlage = self.cache[vurl];
+    if(vorlage === undefined) {
+      self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
+    } else {
+      self.vorlage_fuellen(vurl, inhalt, cb);
+    }
+  };
+
+  this.vorlage_fuellen = function(vurl, inhalt, cb) {
+    cb(Mustache.render(self.cache[vurl], inhalt));
+  };
+
+  this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
+    app.http_get(vurl, function(antwort) {
+      self.cache[vurl] = antwort;
+      self.vorlage_fuellen(vurl, inhalt, cb);
+    });
+  };
 
 }
-
 
 /* ----- Objekte ----- */
 

--
Gitblit v1.9.3