From 5daeb20e992d5d0c6ab5c68051a2448c062ffe53 Mon Sep 17 00:00:00 2001
From: ulrich
Date: Mon, 18 May 2020 12:00:55 +0000
Subject: [PATCH] Nutzerprofil (in Arbeit)
---
web/WEB-INF/web.xml | 1
web/ui2/js/app.js | 3
web/profil2/app.js | 113 ++++++++++++++++++
web/profil2/stile.css | 131 +++++++++++++++++++++
web/profil2/index.html | 57 +++++++++
web/profil2/profil-form.html | 10 +
6 files changed, 312 insertions(+), 3 deletions(-)
diff --git a/web/WEB-INF/web.xml b/web/WEB-INF/web.xml
index 83593fd..c2ea0b7 100644
--- a/web/WEB-INF/web.xml
+++ b/web/WEB-INF/web.xml
@@ -87,6 +87,7 @@
<description>Nutzerprofil</description>
<url-pattern>/prf/*</url-pattern>
<url-pattern>/profil/*</url-pattern>
+ <url-pattern>/profil2/*</url-pattern>
</web-resource-collection>
<auth-constraint>
<description>nutzerProfilAuthContraint</description>
diff --git a/web/profil2/app.js b/web/profil2/app.js
new file mode 100644
index 0000000..be2c42b
--- /dev/null
+++ b/web/profil2/app.js
@@ -0,0 +1,113 @@
+function NutzerProfilApp() {
+ var self = this;
+ this.cache = {}; // mustache template cache
+
+ this.init = function () {
+ var dlg = document.querySelector(".dialog");
+ dlg.style.flexBasis = '0em';
+ document.querySelector('.west').style.flexBasis = '0em';
+ document.querySelector('.ost').style.flexBasis = '0em';
+ self.get_user_data();
+
+ var suedDiv = document.querySelector('.sued');
+ //if (suedDiv.classList.contains('sued-open')) {
+ suedDiv.classList.remove('sued-open');
+ suedDiv.style.height = '0';
+ //}
+ };
+
+ /*
+ {"UserData":{"id":"test","firstName":"Testvorname","lastName":"Testnachname","email":"-"}}
+ */
+ this.profil_zeigen = function(profil) {
+ self.html_erzeugen('profil-form.html', profil, function(html) {
+ document.querySelector('.zentraler-inhalt').innerHTML = html;
+ document.querySelector('.user-save-btn').addEventListener('click', self.kennwort_speichern);
+ });
+ };
+
+ this.kennwort_speichern = function() {
+ var suedDiv = document.querySelector('.sued');
+ suedDiv.textContent = 'Kennwort speichern';
+ //if (!suedDiv.classList.contains('sued-open')) {
+ suedDiv.classList.add('sued-open');
+ suedDiv.style.height = '1.5em';
+ //}
+ };
+
+ this.get_user_data = function() {
+ var m = '?c=de.uhilger.um.pub.SessionManager&m=getSessionUser';
+ var u = '../pub' + m;
+ self.http_get(u, function (antwort) {
+ self.profil_zeigen(JSON.parse(antwort));
+ });
+ };
+
+ /* -------- 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);
+ });
+ };
+}
diff --git a/web/profil2/index.html b/web/profil2/index.html
new file mode 100644
index 0000000..3741400
--- /dev/null
+++ b/web/profil2/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Nutzerprofil</title>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalabe=no">
+ <meta name="apple-mobile-web-app-capable" content="yes" />
+ <link rel="stylesheet" type="text/css" href="stile.css">
+ </head>
+ <body>
+ <!-- Kopfzeile -->
+ <div class="nord">
+ <div class="back-btn">
+ <button type="button" class="zurueck-btn">❮ Zurück</button>
+ </div>
+ <div class="app-titel">
+ <span id="app-titel">Nutzerprofil</span>
+ </div>
+ <div class="top-btn-area">
+ <button type="button" title="Neuer Benutzer" class="top-btn" id="top-neu-btn">+</button>
+ </div>
+ </div>
+ <div class="inhalt">
+ <!-- westliche Seitenleiste -->
+ <div class="west"></div>
+ <div class="zentrum-behaelter">
+ <!-- Einblendbereich -->
+ <div class="dialog"></div>
+ <!-- zentraler Inhaltsbereich -->
+ <div class="zentrum">
+ <div class="zentraler-inhalt">
+ <div class="zentrum-liste" id="nutzer">
+ <figure>
+ <i class="demo-icon icon-folder"></i>
+ <figcaption class="i-name">icon-folder</figcaption>
+ </figure>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- oestliche Seitenleiste -->
+ <div class="ost"></div>
+ </div>
+ <!-- Fusszeile -->
+ <div class="sued"></div>
+ <!-- Skripte -->
+ <script src="/jslib/mustache/mustache.min.js"></script>
+ <script src="app.js"></script>
+ <script>
+ var app;
+ document.addEventListener('DOMContentLoaded', function () {
+ app = new NutzerProfilApp();
+ app.init();
+ });
+ </script>
+ </body>
+</html>
diff --git a/web/profil2/profil-form.html b/web/profil2/profil-form.html
new file mode 100644
index 0000000..ac8cacf
--- /dev/null
+++ b/web/profil2/profil-form.html
@@ -0,0 +1,10 @@
+<div id="user-form">
+ <label id="anmeldename">{{UserData.id}}</label>
+ <input type="password" size="20" maxlength="30" placeholder="Kennwort" id="kennwort">
+ <input type="password" size="20" maxlength="30" placeholder="Neues Kennwort" id="kennwortNeu">
+ <input type="password" size="20" maxlength="30" placeholder="Wiederholung" id="kennwortw">
+ <label id="vorname">{{UserData.firstName}}</label>
+ <label id="nachname">{{UserData.lastName}}</label>
+ <button class="user-save-btn">Speichern</button>
+</div>
+
diff --git a/web/profil2/stile.css b/web/profil2/stile.css
new file mode 100644
index 0000000..18a1665
--- /dev/null
+++ b/web/profil2/stile.css
@@ -0,0 +1,131 @@
+/* aus App-Vorlage */
+
+html, body {
+ margin: 0;
+ padding: 0;
+ height: 100%; /* Anmerkung 2 */
+ font-size: larger;
+ font-family: 'Roboto Condensed';
+ -webkit-text-size-adjust: none;
+ /* touch-action: manipulation;*/
+}
+body {
+ min-height: 0; /* Anmerkung 1 */
+ display: flex;
+ flex-flow: column;
+}
+.inhalt {
+ display: flex;
+ flex-flow: row;
+ height: 100%; /* Anmerkung 2 */
+ min-height: 0; /* Anmerkung 1 */
+ /* background-color: #ededed; */
+ overflow: hidden;
+}
+.nord {
+ background-color: #eee;
+ display: flex;
+ flex-flow: row;
+ height: 2em;
+ align-items: center;
+}
+.sued {
+ height: 1.5em;
+ overflow: hidden;
+ transition: all 0.3s ease-in;
+ background-color: lightgray;
+}
+.west {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 4em;
+ background-color: white;
+ transition: all 0.3s ease-in;
+ overflow: hidden;
+ white-space: nowrap;
+}
+.ost {
+ flex-grow: 0;
+ flex-shrink: 0;
+ flex-basis: 6em;
+ transition: all 0.3s ease-in;
+ background-color: antiquewhite;
+ overflow: hidden;
+}
+.zentrum-behaelter {
+ display: flex;
+ flex-flow: column;
+ /* background-color: #eaeaea; */
+ height: 100%;
+ width: 100%;
+ padding: 0 0.4em 0 0.4em;
+}
+
+.zentrum {
+ width: 100%;
+ height: 100%;
+ overflow-x: hidden;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+}
+
+.zentraler-inhalt {
+ padding: 0.5em;
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+
+.zentrum-liste {
+ overflow-x: hidden;
+ overflow-y: auto;
+}
+/*
+ Anmerkungen:
+ 1.) min.height: 0 fuer body und inhalt ist gegen einen Bug, vgl.
+ http://stackoverflow.com/questions/33859811/understanding-flexbox-and-overflowauto
+ 2.) height 100% fuer html, body und inhalt sorgt dafuer, dass sich alles
+ immer ueber das gesamte Browserfenster ausdehnt.
+*/
+
+/* Kopfleiste */
+
+.app-titel {
+ margin-left: 0.1em;
+ color: black;
+}
+
+.zurueck-btn, .zurueck-btn:focus {
+ border: 0;
+ margin: 0 1.2em 0 0.6em;
+ padding: 0;
+ color: black;
+}
+
+.zurueck-btn:hover {
+ color: #888;
+}
+
+.top-btn {
+ margin: 0 1em 0 1em;
+ height: 28px;
+ line-height: 24px;
+ text-align: center;
+ font-size: large;
+ background-color: white;
+}
+
+.del-user-btn {
+ margin: 0 1.5em 0 1em;
+ height: 28px;
+ line-height: 24px;
+ text-align: center;
+}
+
+.danger-btn {
+ background-color: lightcoral;
+}
+
+#user-form {
+ display: flex;
+ flex-flow: column;
+}
diff --git a/web/ui2/js/app.js b/web/ui2/js/app.js
index 8e08d96..55cdea5 100644
--- a/web/ui2/js/app.js
+++ b/web/ui2/js/app.js
@@ -1,8 +1,6 @@
function NutzerApp() {
var self = this;
- //var vorlagen;
var userid;
- var loc;
this.cache = {}; // mustache template cache
this.init = function () {
@@ -14,7 +12,6 @@
document.querySelector('.ost').style.flexBasis = '0em';
self.get_login();
self.get_user_list();
- self.loc = window.location.protocol + '//' + window.location.host;
};
/* Nutzerverwaltung */
--
Gitblit v1.9.3