Nicht mehr benoetigte Abhaengigkeiten entfernt, Stile verfeinert

ulrich

2020-05-16 70d6da1fb28dffe54a4bbc8b09097485875da4e3

 web/ui2/js/app.js

@@ -1,19 +1,32 @@
function NutzerApp() {
  var self = this;
  var appMenu;
  var vorlagen;
  var api;
  var userid;
  var pfad = '';
  var loc;
  var modus = 'kacheln';

  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('#nutzer-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();
    self.loc = window.location.protocol + '//' + window.location.host;
  };
  

  /* 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 +35,7 @@
    }
    target.classList.add("nutzer-gewaehlt");
    var nutzerId = target.innerHTML;
    self.rollen_dialog_zeigen(nutzerId);
    self.rollen_zeigen(nutzerId);
  };
  
  this.nutzer_speichern = function() {
@@ -45,75 +58,89 @@
    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();
  /* Rollen erteilen und entziehen */
  
  this.rollen_zeigen = function(nutzerId) {
    var m = 'getUserRoleNames';
    var u = '../svc/' + m + '?p=' + nutzerId;
    self.http_get(u, function (antwort) {
      var jsonAntwort = JSON.parse(antwort);
      var rollen = jsonAntwort.List[0];
      if(typeof rollen === 'object') {
        rollen = jsonAntwort;
      } else {
        rollen = 'keine';
      }
      self.vorlagen.html_erzeugen(
        'data/tpl/nutzer-rollen-dlg.tpl',
        rollen,
        function (html) {
          document.querySelector("#nutzer").innerHTML = html;
          document.querySelector("#nutzer-id").textContent = nutzerId;          
          self.addEvtListener('.granted-role-btn', 'click', self.revoke_role_klick);
          self.alle_rollen_zeigen();
        });
    });
    var dlg = document.querySelector(".dialog");
    dlg.style.flexBasis = '0em';
    self.seitenleiste_umschalten();
    self.get_login();
    self.get_user_list();
    self.loc = window.location.protocol + '//' + window.location.host;
    document.querySelector('.zurueck-btn').style.color = 'black';
  };
  
  this.alle_rollen_zeigen = function() {
    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);
        });
    });
  };
  
  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);
    });
  };
  
  this.revoke_role_klick = function(event) {
    self.alter_role(event, 'revokeRole', function(roleId) {
      var btn = document.querySelector("#" + roleId);
      btn.parentNode.removeChild(btn);
    });
  };
  
  this.alter_role = function(event, method, updateCallback) {
    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);
    });        
  };
  
  

  /* Funktionen aus App-Vorlage */

  this.login_zeigen = function() {
    self.meldung_mit_timeout("Benutzer: " + self.userid, 1500);
  };
  
  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) {
    var m = 'getUserRoleNames';
    var u = '../svc/' + m + '?p=' + nutzerId;
    self.http_get(u, function (antwort) {
      self.vorlagen.html_erzeugen(
        'data/tpl/nutzer-rollen-dlg.tpl',
        JSON.parse(antwort),
        function (html) {
          document.querySelector("#nutzer").innerHTML = html;
          document.querySelector("#nutzer-id").textContent = nutzerId;
          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;
              });
          });
        });
    });      
  };
  
  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 () {
@@ -125,7 +152,6 @@
      ostDiv.classList.add('ost-open');
      ostDiv.style.flexBasis = '6em';
    }
    //self.menue_umschalten();
  };

  this.fusszeile_umschalten = function () {
@@ -137,7 +163,6 @@
      suedDiv.classList.add('sued-open');
      suedDiv.style.height = '1.5em';
    }
    self.menue_umschalten();
  };

  this.meldung_mit_timeout = function (meldung, timeout) {
@@ -206,21 +231,16 @@
    var m = 'getUserNameList';
    var u = '../svc/' + m;
    self.http_get(u, function (antwort) {
    self.vorlagen.html_erzeugen(
      'data/tpl/inhalt.tpl',
      JSON.parse(antwort),
      function (h) {
        var elem = document.getElementById('nutzer');
        elem.innerHTML = h;
        
        var absaetze = document.querySelectorAll('p.nutzer-liste-eintrag');
        var index;
        for (index = 0; index < absaetze.length; index++) {
          absaetze[index].addEventListener("click", self.nutzerliste_klick);
        }
        
      self.vorlagen.html_erzeugen(
        'data/tpl/inhalt.tpl',
        JSON.parse(antwort),
        function (h) {
          var elem = document.getElementById('nutzer');
          elem.innerHTML = h;
          self.addEvtListener('p.nutzer-liste-eintrag', 'click', self.nutzerliste_klick);
          document.querySelector('.zurueck-btn').style.color = '#eee';
        });
      });
    });
  };
  
  this.neuen_nutzer_speichern = function(u) {
@@ -285,6 +305,71 @@
  this.serialisieren = function(obj) {
    return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
  };
  
  this.addEvtListener = function(selector, eventName, func) {
    var elems = document.querySelectorAll(selector);
    var index;
    for (index = 0; index < elems.length; index++) {
      elems[index].addEventListener(eventName, func);
    }
  };

}

/* ----- Vorlagen ----- */

function Vorlagen() {
  var self = this;
  this.cache = {}; // mustache templates

  /*
    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
    gefüllt wird

    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
    Das fertige HTML wird der Callback-Funktion übergeben
    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
    Programmlauf zu diesem Zeitpunkt mittlerweile ist.

    vurl - URL zur Vorlagendatei
    inhalt - die JSON-Struktur, deren Inhalt in die
              Vorlage gefüllt werden soll
    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
          Dieser Callback-Funktion wird das fertige HTML übergeben
  */
  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));
  };

  /*
    Eine Vorlage vom Server in den lokalen Speicher laden
    vurl - der URL unter dem die Vorlage zu finden ist
    inhalt - die JSON-Struktur, deren Inhalt in die
              Vorlage gefüllt werden soll
    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
            Inhalt gefüllt ist
  */
  this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) {
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
      if (this.readyState == 4 && this.status == 200) {
        self.cache[vurl] = this.responseText;
        self.vorlage_fuellen(vurl, inhalt, cb);
      }
    };
    xmlhttp.open("GET", vurl, true);
    xmlhttp.send();
  };

}

@@ -299,3 +384,7 @@
  this.email = em;
}

function UserRole(u, r) {
  this.userId = u;
  this.role = r;
}