Darstellung Nutzer-Rollen verfeinert, Code aufgeraeumt

undisclosed

2020-05-15 d9858d1771f13adbf2c802abe6147c83c66aec73

Darstellung Nutzer-Rollen verfeinert, Code aufgeraeumt

 web/ui2/data/tpl/inhalt.tpl

@@ -1,4 +1,4 @@
<div>
<div class="nutzer-liste">
  {{#List}}
  {{#List}}
    <p class="nutzer-liste-eintrag">{{String}}</p>

 web/ui2/data/tpl/nutzer-rollen-dlg.tpl

@@ -1,5 +1,5 @@
<p>Nutzer-ID: <span id="nutzer-id"></span></p>
<h6>Rollen des Benutzers</h6>
<p class="rollen-ansicht-titel">Rollen des Nutzers <span id="nutzer-id"></span></p>
<h6 class="rollen-ueberschrift">Rollen des Benutzers</h6>
<div class="rollen-behaelter">
  {{#List}}
  {{#List}}
@@ -7,5 +7,5 @@
  {{/List}}
  {{/List}}
</div>
<h6>Verf&uuml;gbare Rollen</h6>
<h6 class="rollen-ueberschrift">Verf&uuml;gbare Rollen</h6>
<div class="alle-rollen-behaelter"></div>

 web/ui2/js/app.js

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

  this.init = function () {
    self.vorlagen = new Vorlagen();
@@ -20,10 +16,6 @@
    self.loc = window.location.protocol + '//' + window.location.host;
  };

  this.datei_neuer_text = function () {
    self.meldung_mit_timeout("Neuer Text", 1500);
  };
  
  /* Nutzerverwaltung */
  
  this.nutzer_neu_dialog_zeigen = function () {
@@ -33,7 +25,6 @@
        btn.addEventListener('click', self.nutzer_speichern);                         
      }                      
    });
    //self.menue_umschalten();
  };

  this.nutzerliste_klick = function(event) {
@@ -44,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() {
@@ -69,36 +60,47 @@

  /* Rollen erteilen und entziehen */
  
  this.rollen_dialog_zeigen = function(nutzerId) {
  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',
        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);
              });
          });
          self.alle_rollen_zeigen();
        });
    });
    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");

 web/ui2/stile.css

@@ -88,6 +88,8 @@
      immer ueber das gesamte Browserfenster ausdehnt.
*/

/* Kopfleiste */

.app-titel {
  margin-left: 0.1em;
  color: black;
@@ -113,6 +115,20 @@
  font-size: large;
}

/* Nutzerliste */

.nutzer-liste-eintrag {
  margin: 0;
  padding: 0.3em 0 0 0;
  cursor: pointer;
}

.nutzer-gewaehlt {
  background-color: lightsteelblue;
}

/* ... */

.pointer-cursor {
  cursor: pointer;
}
@@ -122,6 +138,8 @@
  padding: 0.2em;
  font-size: medium;
}

/* Dialoge (Info, Neuer Nutzer, ..) */

.dialog {
  display: flex;
@@ -139,19 +157,6 @@
  padding: 0.4em;
}

.rollen-behaelter {
  
}

.granted-role-btn {
  margin: 0.2em;
  background-color: lightcoral;
}

.avl-role-btn {
  margin: 0.2em;
  background-color: darkseagreen;
}

.dlg-info {
  display: flex;
@@ -192,14 +197,31 @@
  color: #b8b8b8;
}

/* Nutzerliste */
/* Nutzer-Rollen */

.nutzer-liste-eintrag {
  cursor: pointer;
.rollen-ansicht-titel {
  margin: 0;
  padding: 0;
}

.nutzer-gewaehlt {
  background-color: lightsteelblue;
.rollen-ueberschrift {
  margin: 1.2em 0 0.2em 0;
  padding: 0;
}

.rollen-behaelter {
  margin: 0;
  padding: 0;
}

.granted-role-btn {
  margin: 0.2em;
  background-color: lightcoral;
}

.avl-role-btn {
  margin: 0.2em;
  background-color: darkseagreen;
}

/* für app-menu */