Nutzer loeschen und Dialog zur Bestaetigung

ulrich@undisclosed

2020-05-17 f7254551bdefb51624b4a26940543235e07db48f

Nutzer loeschen und Dialog zur Bestaetigung

 web/ui2/data/tpl/dlg-del-conf.tpl

New file
@@ -0,0 +1,10 @@
<div class="dlg-nutzer-neu">
  <span class="close-btn pointer-cursor">&#10006;</span>
  <div class="dlg-behaelter">
    <div class="dlg-info-app-titel">L&ouml;schen best&auml;tigen</div>
    <div class="dlg-info-app-info">Soll der Nutzer {{nutzername}} wirklich gel&ouml;scht werden?</div>
    <div class="form-button-footer">
      <button type="button" class="danger-btn" id="nutzer-loeschen-btn">L&ouml;schen</button>
    </div>
  </div>
</div>

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

@@ -1,4 +1,7 @@
<p class="rollen-ansicht-titel">Rollen des Nutzers <span id="nutzer-id"></span></p>
<p class="rollen-ansicht-titel">Rollen von 
  <span id="nutzer-id"></span> 
  <button type="button" class="del-user-btn danger-btn" id="del-user-btn">Löschen</button>
</p>
<h6 class="rollen-ueberschrift">Rollen des Benutzers</h6>
<div class="rollen-behaelter">
  {{#List}}

 web/ui2/js/app.js

@@ -83,10 +83,28 @@
          document.querySelector("#nutzer").innerHTML = html;
          document.querySelector("#nutzer-id").textContent = nutzerId;          
          self.addEvtListener('.granted-role-btn', 'click', self.revoke_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() {
@@ -275,6 +293,17 @@
    });
  };

  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));
@@ -356,24 +385,8 @@

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

  /*
    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) {
@@ -387,14 +400,6 @@
    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() {
@@ -406,7 +411,6 @@
    xmlhttp.open("GET", vurl, true);
    xmlhttp.send();
  };

}



 web/ui2/stile.css

@@ -108,11 +108,21 @@

.top-btn {
  margin: 0 1em 0 1em;

  height: 28px;
  line-height: 24px;
  text-align: center;
  font-size: large;
}

.del-user-btn {
  margin: 0 1.5em 0 1em;
  height: 28px;
  line-height: 24px;
  text-align: center;
}

.danger-btn {
  background-color: lightcoral;
}

/* Nutzerliste */
@@ -218,8 +228,8 @@
  height: 2.5em;
  padding: 0 0.5em;
  margin: 0.2em;
  background-color: lightcoral;
  text-transform: none;
  background-color: #fff8c4;
  font-size: medium;
}

@@ -227,7 +237,7 @@
  height: 2.5em;
  padding: 0 0.5em;
  margin: 0.2em;
  background-color: darkseagreen;
  background-color: #fff8c4;
  text-transform: none;
  font-size: medium;
}