From a43e1a055018aab9590c88c45d8495f99bfb6254 Mon Sep 17 00:00:00 2001
From: ulrich
Date: Mon, 05 Apr 2021 18:39:49 +0000
Subject: [PATCH] Ablageort-Liste
---
www/ui/js/app.js | 273 ++++++++++++++++++++++++++++++++++++------------------
1 files changed, 182 insertions(+), 91 deletions(-)
diff --git a/www/ui/js/app.js b/www/ui/js/app.js
index 4eaffef..04db53f 100644
--- a/www/ui/js/app.js
+++ b/www/ui/js/app.js
@@ -1,95 +1,184 @@
-function AppVorlage() {
+function Ablageort(n, o, u) {
+ this.name = n;
+ this.ort = o;
+ this.url = u;
+}
+
+
+
+function Mediazentrale() {
var self = this;
var appMenu;
// var vorlagen;
var cache; // mustache templates
+ this.ablageort_liste = function() {
+ self.http_get('../api/store/Ablageort/', function (responseText) {
+ self.vorlage_laden_und_fuellen("data/tpl/ablageort_liste.tpl", JSON.parse(responseText), function (html) {
+ document.querySelector(".zentraler-inhalt").innerHTML = html;
+ self.addEvtListener('.entity-eintrag', 'click', function (event) {
+ var t = event.target;
+ self.meldung_mit_timeout(t.textContent, 1500);
+ });
+ });
+ });
+ };
- this.init = function() {
+ this.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 () {
+ // hier neuen Ablageort speichern
+ var a = new Ablageort(
+ document.querySelector('#ablageort-name').value,
+ document.querySelector('#ablageort-ort').value,
+ document.querySelector('#ablageort-url').value
+ );
+ // {"name":"Katalog","ort":"/home/ulrich/Videos","url":"/media/test"}
+ var daten = JSON.stringify(a);
+ self.http_post('../api/store/Ablageort', daten, function (responseText) {
+ // hier die Antwort verarbeiten
+ });
+ });
+ self.addEvtListener('#cancel-btn', 'click', function () {
+ // hier die Aktion abbrechen
+ document.querySelector(".zentraler-inhalt").innerHTML = '';
+ });
+ });
+ };
+
+ 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) {
+ 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.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+ xhr.send(data);
+ }
+ };
+
+ this.serialisieren = function (obj) {
+ return '{"' + obj.constructor.name + '":' + JSON.stringify(obj) + '}';
+ };
+
+
+
+
+ /* 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.classList.add('sued-open');
+ s.style.height = '1.5em';
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);
@@ -98,40 +187,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');
@@ -143,55 +232,57 @@
/* 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) {
+ //console.log("vorlage " + self.cache[vurl]);
+ //console.log("render " + inhalt);
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