Funktion und Dialog 'Neue Rolle' erstellt, Vorlagen.js entfernt und in app....

ulrich

2020-05-16 f57e8475b5c9d58dd9cedc7f0d866d9cdb09965c

Funktion und Dialog 'Neue Rolle' erstellt, Vorlagen.js entfernt und in app.js ueberfuehrt

 web/ui2/data/tpl/dlg-rolle-neu.tpl

New file
@@ -0,0 +1,12 @@
<div class="dlg-nutzer-neu">
  <span class="close-btn pointer-cursor">&#10006;</span>
  <div class="dlg-behaelter">
    <div class="dlg-nutzer-titel">Neue Rolle</div>
    <form class="nutzer-form">
      <input id="rollen-id" placeholder="Rolle" type="text" class="nutzer-eingabe"></br>
      <div class="form-button-footer">
        <button type="button" id="rolle-speichern-btn">Speichern</button>
      </div>
    </form>
  </div>
</div>

 web/ui2/index.html

@@ -18,7 +18,7 @@
        <span id="app-titel">Nutzerverwaltung</span>
      </div>
      <div class="top-btn-area">
        <button type="button"  title="Neuer Benutzer" class="top-btn" id="nutzer-neu-btn">+</button>
        <button type="button"  title="Neuer Benutzer" class="top-btn" id="top-neu-btn">+</button>
      </div>
    </div>
    <div class="inhalt">

 web/ui2/js/app.js

@@ -8,7 +8,7 @@
    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('#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();
@@ -61,6 +61,11 @@
  /* Rollen erteilen und entziehen */
  
  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) {
@@ -103,13 +108,17 @@
  
  this.grant_role_klick = function(event) {
    self.alter_role(event, 'grantRole', function(roleId) {
      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) {
@@ -123,14 +132,24 @@
    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 */

@@ -253,6 +272,14 @@
    });
  };

  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() {