function NutzerApp() {
|
var self = this;
|
var vorlagen;
|
var userid;
|
var loc;
|
|
this.init = function () {
|
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('.west').style.flexBasis = '0em';
|
document.querySelector('.ost').style.flexBasis = '0em';
|
self.get_login();
|
self.get_user_list();
|
self.loc = window.location.protocol + '//' + window.location.host;
|
};
|
|
/* 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 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',
|
rollen,
|
function (html) {
|
document.querySelector("#nutzer").innerHTML = html;
|
document.querySelector("#nutzer-id").textContent = nutzerId;
|
self.addEvtListener('.granted-role-btn', 'click', self.revoke_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");
|
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;
|
var u = '../svc/' + method;
|
var data = "p=" + self.serialisieren(new UserRole(nutzerId, roleId));
|
self.http_post(u, data, function (antwort) {
|
updateCallback(roleId);
|
});
|
};
|
|
|
|
/* 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.vorlagen.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 m = 'getUserNameList';
|
var u = '../svc/' + m;
|
self.http_get(u, function (antwort) {
|
self.vorlagen.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';
|
});
|
});
|
};
|
|
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();
|
});
|
};
|
|
/* -------- 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, scallback) {
|
var xmlhttp = new XMLHttpRequest();
|
var url = u;
|
xmlhttp.onreadystatechange = function() {
|
if (this.readyState === 4 && this.status === 200) {
|
scallback(this.responseText);
|
}
|
};
|
xmlhttp.open("GET", url, true);
|
xmlhttp.send();
|
};
|
|
this.http_post = function (url, data, callback) {
|
var xhr = new XMLHttpRequest();
|
xhr.onreadystatechange = function() {
|
if (this.readyState === 4 && this.status === 200) {
|
callback(this.responseText);
|
}
|
};
|
xhr.open("POST", url, true);
|
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
|
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);
|
}
|
};
|
|
}
|
|
/* ----- Vorlagen ----- */
|
|
function Vorlagen() {
|
var self = this;
|
this.cache = {}; // mustache templates
|
|
/*
|
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) {
|
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));
|
};
|
|
/*
|
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() {
|
if (this.readyState == 4 && this.status == 200) {
|
self.cache[vurl] = this.responseText;
|
self.vorlage_fuellen(vurl, inhalt, cb);
|
}
|
};
|
xmlhttp.open("GET", vurl, true);
|
xmlhttp.send();
|
};
|
|
}
|
|
|
/* ----- 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;
|
}
|
