From f074f6806f7431c12146063ef228831c599e448b Mon Sep 17 00:00:00 2001
From: ulrich <ulrich@ulrich-vaio>
Date: Mon, 05 Apr 2021 08:41:44 +0000
Subject: [PATCH] UI-Anpassungen
---
www/ui/js/app.js | 223 ++++++++++++++++++++++++++++---------------------------
www/ui/index.html | 2
2 files changed, 114 insertions(+), 111 deletions(-)
diff --git a/www/ui/index.html b/www/ui/index.html
index 2a2f3df..0d0a88d 100644
--- a/www/ui/index.html
+++ b/www/ui/index.html
@@ -53,7 +53,7 @@
<div class="zentrum">
<div class="zentraler-inhalt">
<p>
- Hier erschient der Media-Inhalt.
+ Hier erscheint der Media-Inhalt.
</p>
</div>
</div>
diff --git a/www/ui/js/app.js b/www/ui/js/app.js
index f7cd6be..c3a2888 100644
--- a/www/ui/js/app.js
+++ b/www/ui/js/app.js
@@ -14,10 +14,10 @@
- this.form_ablageort_neu = function() {
- self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", "", function(html) {
+ this.form_ablageort_neu = function () {
+ self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", "", function (html) {
document.querySelector(".zentraler-inhalt").innerHTML = html;
- self.addEvtListener('#ok-btn', 'click', function() {
+ self.addEvtListener('#ok-btn', 'click', function () {
// hier neuen Ablageort speichern
var a = new Ablageort(
document.querySelector('#ablageort-name').value,
@@ -25,145 +25,148 @@
document.querySelector('#ablageort-url').value
);
// {"name":"Katalog","ort":"/home/ulrich/Videos","url":"/media/test"}
- //var daten = self.serialisieren(a);
var daten = JSON.stringify(a);
- self.http_post('../api/store/Ablageort', daten, function(){
+ self.http_post('../api/store/Ablageort', daten, function () {
// hier die Antwort verarbeiten
});
});
- self.addEvtListener('#cancel-btn', 'click', function() {
+ self.addEvtListener('#cancel-btn', 'click', function () {
// hier die Aktion abbrechen
+ document.querySelector(".zentraler-inhalt").innerHTML = '';
});
});
};
- this.addEvtListener = function(selector, eventName, func) {
+ 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.http_get = function(u, cb) {
+
+ this.http_get = function (u, cb) {
self.http_call('GET', u, null, cb);
};
-
- this.http_post = function(u, data, cb) {
+
+ this.http_post = function (u, data, cb) {
self.http_call('POST', u, data, cb);
};
- this.http_call = function (method, u, data, scallback) {
+ this.http_call = function (method, u, data, scallback) {
var xhr = new XMLHttpRequest();
var url = u;
- xhr.onreadystatechange = function() {
+ xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
scallback(this.responseText);
}
};
xhr.open(method, url);
- if(method === 'GET') {
+ if (method === 'GET') {
xhr.send();
- } else if(method === 'POST' || method === 'PUT') {
+ } else if (method === 'POST' || method === 'PUT') {
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send(data);
}
};
-
- this.serialisieren = function(obj) {
+
+ this.serialisieren = function (obj) {
return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
};
-
- /* ab hier aus App-Vorlage */
-
- this.init = function() {
+
+ /* ab hier aus App-Vorlage */
+
+ this.init = function () {
//self.vorlagen = new Vorlagen();
self.cache = new Array();
self.appMenu = new AppMenu();
self.appMenu.init(
- "data/menu/",
- "hauptmenue.json",
- "data/tpl/app-menu.tpl",
- ".west",
- "8em");
+ "data/menu/",
+ "hauptmenue.json",
+ "data/tpl/app-menu.tpl",
+ ".west",
+ "8em");
- document.querySelector('.hamburger').addEventListener('click', function(e) {
+ document.querySelector('.hamburger').addEventListener('click', function (e) {
self.menue_umschalten();
});
+
+ self.fusszeile_umschalten();
+ self.seitenleiste_umschalten();
};
- this.menue_umschalten = function() {
+ this.menue_umschalten = function () {
var ham = document.querySelector(".hamburger");
ham.classList.toggle("is-active"); // hamburger-icon umschalten
self.appMenu.toggle(); // menue oeffnen/schliessen
};
- this.info_dialog_zeigen = function() {
+ this.info_dialog_zeigen = function () {
self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
self.menue_umschalten();
};
- this.seitenleiste_umschalten = function() {
+ this.seitenleiste_umschalten = function () {
var ostDiv = document.querySelector('.ost');
- if(ostDiv.classList.contains('ost-open')) {
+ if (ostDiv.classList.contains('ost-open')) {
ostDiv.classList.remove('ost-open');
- ostDiv.style.flexBasis = '0em';
+ ostDiv.style.flexBasis = '0em';
} else {
- ostDiv.classList.add('ost-open');
- ostDiv.style.flexBasis = '6em';
+ ostDiv.classList.add('ost-open');
+ ostDiv.style.flexBasis = '6em';
}
self.menue_umschalten();
};
- this.fusszeile_umschalten = function() {
+ this.fusszeile_umschalten = function () {
var suedDiv = document.querySelector('.sued');
- if(suedDiv.classList.contains('sued-open')) {
+ if (suedDiv.classList.contains('sued-open')) {
suedDiv.classList.remove('sued-open');
- suedDiv.style.height = '0';
+ suedDiv.style.height = '0';
} else {
suedDiv.classList.add('sued-open');
- suedDiv.style.height = '1.5em';
+ suedDiv.style.height = '1.5em';
}
self.menue_umschalten();
};
- this.menu_message = function(msg) {
+ this.menu_message = function (msg) {
self.meldung_mit_timeout(msg, 1500);
var suedDiv = document.querySelector('.sued');
- if(suedDiv.classList.contains('sued-open')) {
+ if (suedDiv.classList.contains('sued-open')) {
} else {
suedDiv.classList.add('sued-open');
- suedDiv.style.height = '1.5em';
+ suedDiv.style.height = '1.5em';
}
self.menue_umschalten();
};
- this.message_1 = function() {
+ this.message_1 = function () {
self.menu_message('Eine Mitteilung.');
};
- this.message_2 = function() {
+ this.message_2 = function () {
self.menu_message('Was wir schon immer sagen wollten.');
};
- this.message_3 = function(text) {
+ this.message_3 = function (text) {
self.menu_message(text);
};
- this.meldung_mit_timeout = function(meldung, timeout) {
+ this.meldung_mit_timeout = function (meldung, timeout) {
var s = document.querySelector('.sued');
s.textContent = meldung;
- setTimeout(function() {
+ setTimeout(function () {
s.textContent = 'Bereit.';
- setTimeout(function() {
+ setTimeout(function () {
var suedDiv = document.querySelector('.sued');
- if(suedDiv.classList.contains('sued-open')) {
- suedDiv.classList.remove('sued-open');
- suedDiv.style.height = '0';
+ if (suedDiv.classList.contains('sued-open')) {
+ suedDiv.classList.remove('sued-open');
+ suedDiv.style.height = '0';
}
}, 500);
}, timeout);
@@ -172,40 +175,40 @@
/* Dialog-Funktionen */
/*
- Einen Dialog aus Vorlagen erzeugen
-
- vurl - URL zur Dialogvorlage
- msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
- */
- this.dialog_laden_und_zeigen = function(vurl, msgTpl) {
- if(msgTpl !== '') {
+ Einen Dialog aus Vorlagen erzeugen
+
+ vurl - URL zur Dialogvorlage
+ msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
+ */
+ this.dialog_laden_und_zeigen = function (vurl, msgTpl) {
+ if (msgTpl !== '') {
fetch(msgTpl)
- .then(data => {
- // Handle data
- self.dialog_zeigen(vurl, data);
- }).catch(error => {
- // Handle error
- });
+ .then(data => {
+ // Handle data
+ self.dialog_zeigen(vurl, data);
+ }).catch(error => {
+ // Handle error
+ });
} else {
self.dialog_zeigen(vurl, '');
}
};
- this.dialog_zeigen = function(vurl, inhalt) {
+ this.dialog_zeigen = function (vurl, inhalt) {
var dlg = document.querySelector(".dialog");
self.html_erzeugen(
- vurl,
- inhalt,
- function(html) {
- //dlg.html(html);
- dlg.style.height = '5em';
- dlg.innerHTML = html;
- document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
- //dlg.slideDown(300);
- });
+ vurl,
+ inhalt,
+ function (html) {
+ //dlg.html(html);
+ dlg.style.height = '5em';
+ dlg.innerHTML = html;
+ document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
+ //dlg.slideDown(300);
+ });
};
- self.dialog_schliessen = function() {
+ self.dialog_schliessen = function () {
document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
//$('.dialog').slideUp(300);
var dlg = document.querySelector('.dialog');
@@ -217,55 +220,55 @@
/* Vorlagen */
/*
- 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) {
+ 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) {
+ 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) {
+ 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) {
+ 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) {
/*
- $.ajax({
- url: vurl,
- type: "GET",
- dataType : "text"
- }).done(function( vorlage ) {
- self.cache[vurl] = vorlage;
- self.vorlage_fuellen(vurl, inhalt, cb);
- });
- */
+ $.ajax({
+ url: vurl,
+ type: "GET",
+ dataType : "text"
+ }).done(function( vorlage ) {
+ self.cache[vurl] = vorlage;
+ self.vorlage_fuellen(vurl, inhalt, cb);
+ });
+ */
var xmlhttp = new XMLHttpRequest();
- xmlhttp.onreadystatechange = function() {
+ xmlhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status == 200) {
self.cache[vurl] = this.responseText;
self.vorlage_fuellen(vurl, inhalt, cb);
--
Gitblit v1.9.3