um.git - Ulrich Hilger Code Repository

parent: 1d0223f0 | patch | commit | ignore whitespace

ulrich

2020-05-18 5daeb20e992d5d0c6ab5c68051a2448c062ffe53

Nutzerprofil (in Arbeit)

2 files modified

4 files added

	web/WEB-INF/web.xml	1 ●●●●● patch \| view \| raw \| blame \| history
	web/profil2/app.js	113 ●●●●● patch \| view \| raw \| blame \| history
	web/profil2/index.html	57 ●●●●● patch \| view \| raw \| blame \| history
	web/profil2/profil-form.html	10 ●●●●● patch \| view \| raw \| blame \| history
	web/profil2/stile.css	131 ●●●●● patch \| view \| raw \| blame \| history
	web/ui2/js/app.js	3 ●●●●● patch \| view \| raw \| blame \| history

 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>

 web/profil2/app.js

New file
@@ -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);
    });
  };
}

 web/profil2/index.html

New file
@@ -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">&#10094; Zur&uuml;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">&#xe800;</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>

 web/profil2/profil-form.html

New file
@@ -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>


 web/profil2/stile.css

New file
@@ -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;  
}

 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 */

			@@ -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>

New file
			@@ -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);
			});
			};
			}

New file
			@@ -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>

New file
			@@ -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>

New file
			@@ -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;
			}

			@@ -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 */