function NutzerApp() { var self = this; var userid; this.cache = {}; // mustache template cache this.init = function () { //self.vorlagen = new Vorlagen(); var dlg = document.querySelector(".dialog"); dlg.style.flexBasis = '0em'; 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(); self.get_user_list(); }; /* 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"); if(gewaehlterNutzer !== null) { gewaehlterNutzer.classList.remove("nutzer-gewaehlt"); } target.classList.add("nutzer-gewaehlt"); var nutzerId = target.innerHTML; self.rollen_zeigen(nutzerId); }; this.nutzer_speichern = function() { var user = self.nutzer_dialog_lesen(); var kww = document.getElementById('nutzer-wkw').value; if(user.pw !== kww) { self.meldung_mit_timeout("Kennworte stimmen nicht ueberein.", 1500); } else { self.neuen_nutzer_speichern('p=' + self.serialisieren(user)); } }; this.nutzer_dialog_lesen = function() { var id = document.getElementById('nutzer-id').value; var vname = document.getElementById('nutzer-vorname').value; var nname = document.getElementById('nutzer-name').value; var email = document.getElementById('nutzer-email').value; var kw = document.getElementById('nutzer-kw').value; var user = new User(id, kw, vname, nname, email); return user; }; /* 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) { var jsonAntwort = JSON.parse(antwort); var rollen = jsonAntwort.List[0]; if(typeof rollen === 'object') { rollen = jsonAntwort; } else { rollen = 'keine'; } self.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); 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() { var m = 'getRoleNamesGranted'; var u = '../svc/' + m; self.http_get(u, function (antwort2) { self.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) { 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) { 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; 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 */ this.login_zeigen = function() { self.meldung_mit_timeout("Benutzer: " + self.userid, 1500); }; this.info_dialog_zeigen = function () { self.dialog_zeigen('data/tpl/dlg-info.tpl', ''); }; this.seitenleiste_umschalten = function () { var ostDiv = document.querySelector('.ost'); if (ostDiv.classList.contains('ost-open')) { ostDiv.classList.remove('ost-open'); ostDiv.style.flexBasis = '0em'; } else { ostDiv.classList.add('ost-open'); ostDiv.style.flexBasis = '6em'; } }; this.fusszeile_umschalten = function () { var suedDiv = document.querySelector('.sued'); if (suedDiv.classList.contains('sued-open')) { suedDiv.classList.remove('sued-open'); suedDiv.style.height = '0'; } else { suedDiv.classList.add('sued-open'); suedDiv.style.height = '1.5em'; } }; this.meldung_mit_timeout = function (meldung, timeout) { var s = document.querySelector('.sued'); s.textContent = meldung; if (!s.classList.contains('sued-open')) { s.classList.add('sued-open'); s.style.height = '1.5em'; } setTimeout(function () { s.textContent = 'Bereit.'; setTimeout(function () { var suedDiv = document.querySelector('.sued'); if (suedDiv.classList.contains('sued-open')) { suedDiv.classList.remove('sued-open'); suedDiv.style.height = '0'; } }, 500); }, timeout); }; /* Dialog-Funktionen */ /* * Einen Dialog erzeugen * * Die Vorlage, auf die im Parameter vurl verwiesen wird, wird geladen, * wenn sie noch nicht benutzt wurde * * @param {String} vurl - der URL mit der Dialogvorlage * @param {JSON-Objekt} inhalt - was im Dialog an dynamischem Inhalt angezeigt werden soll * @param {function} renderCallback - * Funktion, die aufgerufen wird nachdem der Dialog gerendert wurde * @returns {undefined} */ this.dialog_zeigen = function (vurl, inhalt, renderCallback) { var dlg = document.querySelector(".dialog"); self.html_erzeugen( vurl, inhalt, function (html) { dlg.style.flexBasis = '14em'; setTimeout(function () { dlg.innerHTML = html; document.querySelector('.close-btn').addEventListener( 'click', self.dialog_schliessen); if(renderCallback !== undefined) { renderCallback(); } }, 300); }); }; this.dialog_schliessen = function () { document.querySelector('.close-btn').removeEventListener( 'click', self.dialog_schliessen); var dlg = document.querySelector('.dialog'); dlg.innerHTML = ''; dlg.style.flexBasis = '0em'; }; /* API functions */ this.get_user_list = function() { var m = 'getUserNameList'; var u = '../svc/' + m; self.http_get(u, function (antwort) { self.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'; self.removeAllListeners('top-neu-btn'); var topBtn = document.querySelector('#top-neu-btn'); topBtn.title = "Neuer Benutzer"; topBtn.addEventListener('click', self.nutzer_neu_dialog_zeigen); }); }); }; this.neuen_nutzer_speichern = function(u) { var url = '../svc/createUser'; self.http_post(url, u, function (antwort) { self.get_user_list(); document.getElementById('nutzer-speichern-btn').removeEventListener( 'click', self.nutzer_speichern); self.dialog_schliessen(); }); }; 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)); self.http_post(u, data, function (antwort) { updateCallback(roleId); }); }; /* -------- An- und Abmelden ------------- */ this.get_login = function() { var m = '?c=de.uhilger.um.pub.SessionManager&m=getSessionUser'; var u = '../pub' + m; self.http_get(u, function (resp) { self.userid = resp; self.login_zeigen(); //document.querySelector("#userMenu").textContent = resp; }); }; this.um_logout = function() { var m = '?c=de.uhilger.um.pub.SessionManager&m=expireSession'; var u = '../pub' + m; self.http_get(u, function (resp) { //$('#userMenu').text('nicht angemeldet'); window.location.href = '../logout.html'; }); }; /* -------- ajax helper functions ----------- */ this.http_get = function(u, cb) { self.http_call('GET', u, null, cb); }; this.http_post = function(u, data, cb) { self.http_call('POST', u, data, cb); }; this.http_call = function (method, u, data, scallback) { var xhr = new XMLHttpRequest(); var url = u; xhr.onreadystatechange = function() { if (this.readyState === 4 && this.status === 200) { scallback(this.responseText); } }; xhr.open(method, url); if(method === 'GET') { xhr.send(); } else if(method === 'POST' || method === 'PUT') { xhr.send(data); } }; /* ----- Hilfsfunktionen ----- */ 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); } }; this.removeAllListeners = function(elementId) { var el = document.getElementById(elementId); elClone = el.cloneNode(true); el.parentNode.replaceChild(elClone, el); }; // https://stackoverflow.com/questions/19469881/remove-all-event-listeners-of-specific-type /* ---- Vorlagen ---- */ 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)); }; this.vorlage_laden_und_fuellen = function(vurl, inhalt, cb) { app.http_get(vurl, function(antwort) { self.cache[vurl] = antwort; self.vorlage_fuellen(vurl, inhalt, cb); }); }; } /* ----- Objekte ----- */ function User(i, p, fn, ln, em) { this.id = i; this.pw = p; this.firstName = fn; this.lastName = ln; this.email = em; } function UserRole(u, r) { this.userId = u; this.role = r; }