In Arbeit: Rollen-Dialog

ulrich@undisclosed

2020-05-14 c995b7aefb982338ad4bd82b57ccf9295363aff9

In Arbeit: Rollen-Dialog

 web/ui2/data/tpl/alle-rollen.tpl

New file
@@ -0,0 +1,6 @@
{{#List}}
{{#List}}
<button type="button" class="avl-role-btn">{{String}}</button>
{{/List}}
{{/List}}


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

New file
@@ -0,0 +1,12 @@
<p>Nutzer-ID: <span id="nutzer-id"></span></p>
<h6>Rollen des Benutzers</h6>
<div class="rollen-behaelter">
  {{#List}}
  {{#List}}
  <button type="button" class="granted-role-btn">{{String}}</button>
  {{/List}}
  {{/List}}
</div>
<h6>Verf&uuml;gbare Rollen</h6>
<div class="alle-rollen-behaelter"></div>
<button type="button" class="zurueck-btn">< Zur&uuml;ck</button>

 web/ui2/js/app.js

@@ -21,6 +21,8 @@
      gewaehlterNutzer.classList.remove("nutzer-gewaehlt");
    }
    target.classList.add("nutzer-gewaehlt");
    var nutzerId = target.innerHTML;
    self.rollen_dialog_zeigen(nutzerId);
  };
  
  this.nutzer_speichern = function() {
@@ -75,6 +77,30 @@
    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();
@@ -99,7 +125,7 @@
      ostDiv.classList.add('ost-open');
      ostDiv.style.flexBasis = '6em';
    }
    self.menue_umschalten();
    //self.menue_umschalten();
  };

  this.fusszeile_umschalten = function () {

 web/ui2/stile.css

@@ -119,6 +119,20 @@
  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;
  flex-flow: column;