| | |
| | | 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.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 */ |
| | | var ortPfad; |
| | | var mediaPfad; |
| | | var katUrl; |
| | | var selTitel; |
| | | |
| | | this.init = function () { |
| | | //self.vorlagen = new Vorlagen(); |
| | | self.mediaPfad = '/'; |
| | | self.ortPfad = '/'; |
| | | self.cache = new Array(); |
| | | self.appMenu = new AppMenu(); |
| | | self.appMenu.init( |
| | |
| | | self.menue_umschalten(); |
| | | }); |
| | | |
| | | self.addEvtListener('#mi-katalog', 'click', self.media_liste); |
| | | self.addEvtListener('#mi-orte', 'click', self.ablageort_liste); |
| | | self.addEvtListener('#mi-prefs', 'click', self.prefs_liste); |
| | | self.addEvtListener('#mi-player', 'click', self.abspieler_liste); |
| | | self.addEvtListener('#mi-listen', 'click', self.abspielliste_liste); |
| | | self.addEvtListener('#mi-list', 'click', self.titel_liste); |
| | | |
| | | self.fusszeile_umschalten(); |
| | | self.seitenleiste_umschalten(); |
| | | |
| | | self.dialog_unten_zeigen(); |
| | | }; |
| | | |
| | | this.abspieler_auswahl_fuellen = function() { |
| | | self.http_get('../api/store/Abspieler/', function (responseText) { |
| | | /* |
| | | {"ArrayList": [{"name":"Wohnz","url":"http://rpi4-wz:9090/"},{"name":"Arbz","url":"http://rpi4-az:9090/"}]} |
| | | */ |
| | | self.vorlage_laden_und_fuellen("data/tpl/abs_sel.tpl", JSON.parse(responseText), function (html) { |
| | | document.querySelector(".abs-sel").innerHTML = html; |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.abspielliste_auswahl_fuellen = function() { |
| | | self.http_get('../api/store/Abspielliste/', function (responseText) { |
| | | /* |
| | | ? |
| | | */ |
| | | self.vorlage_laden_und_fuellen("data/tpl/pl_sel.tpl", JSON.parse(responseText), function (html) { |
| | | document.querySelector(".pl-sel").innerHTML = html; |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | /* Unterer Einblendbereich */ |
| | | |
| | | this.dialog_unten_zeigen = function() { |
| | | self.vorlage_laden_und_fuellen("data/tpl/ctrl.tpl", "", function (html) { |
| | | var dlg = document.querySelector(".dialog-unten"); |
| | | dlg.style.height = '4.5em'; |
| | | dlg.innerHTML = html; |
| | | self.abspieler_auswahl_fuellen(); |
| | | self.abspielliste_auswahl_fuellen(); |
| | | self.addEvtListener('#dazu-btn', 'click', self.addSelectedTitel); |
| | | self.media_liste(); |
| | | }); |
| | | }; |
| | | |
| | | /* ---------------- Titel einer Abspielliste ----------------- */ |
| | | |
| | | this.titel_liste = function() { |
| | | self.reset_top_buttons(); |
| | | var plname = document.querySelector('#playlist').value; |
| | | self.http_get('../api/alist/' + plname, function (responseText) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/titel_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.removeClassMulti('selected'); |
| | | t.classList.add('selected'); |
| | | |
| | | /* |
| | | self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText){ |
| | | var ablageort = JSON.parse(responseText); |
| | | self.ablageort_form(ablageort); |
| | | }); |
| | | */ |
| | | }); |
| | | /* |
| | | self.addEvtListener('#neu-btn', 'click', function (event) { |
| | | eval("self.ablageort_form" + "(this)"); |
| | | }); |
| | | */ |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | /* ---------------- Entitaets-Listen ----------------- */ |
| | | |
| | | self.reset_top_buttons = function() { |
| | | self.vorlage_laden_und_fuellen("data/tpl/top_btns.tpl", '', function (html) { |
| | | document.querySelector(".top-btns").innerHTML = html; |
| | | }); |
| | | }; |
| | | |
| | | // auf der obersten Ebene werden die Kataloge angezeigt, |
| | | // darunter der Inhalt des aktuellen Pfades |
| | | this.media_liste = function() { |
| | | self.reset_top_buttons(); |
| | | if(self.ortPfad === '/') { |
| | | // Kataloge listen |
| | | self.http_get('../api/store/Ablageort/liste/', function (responseText) { |
| | | //document.querySelector('#top-up-btn').removeEventListener('click', self.media_liste_herauf); |
| | | self.vorlage_laden_und_fuellen("data/tpl/katalog_root_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.http_get('../api/store/Ablageort/' + t.textContent, function(responseText) { |
| | | var ablageort = JSON.parse(responseText); |
| | | self.ortPfad = ablageort.url; |
| | | self.media_liste(); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | } else { |
| | | var url = '..' + self.ortPfad + self.mediaPfad; |
| | | if(!url.endsWith('/')) { |
| | | url = url + '/'; |
| | | } |
| | | self.http_get(url, function(responseText) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/katalog_inhalt_liste.tpl", JSON.parse(responseText), function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | self.addEvtListener('.entity-eintrag', 'click', function (event) { |
| | | var t = event.target; |
| | | var tx = t.textContent; |
| | | if(t.classList.contains("entity-typ-folder")) { |
| | | if(self.mediaPfad.endsWith('/')) { |
| | | self.mediaPfad = self.mediaPfad + tx; |
| | | } else { |
| | | self.mediaPfad = self.mediaPfad + '/' + tx; |
| | | } |
| | | self.media_liste(); |
| | | } else { |
| | | self.removeClassMulti('selected'); |
| | | t.classList.add('selected'); |
| | | //self.selTitel = new Titel(t.textContent, self.ortPfad); |
| | | } |
| | | }); |
| | | self.addEvtListener('#top-up-btn', 'click', function(event) { |
| | | if(self.mediaPfad === '/') { |
| | | self.ortPfad = '/'; |
| | | } else { |
| | | var pos = self.mediaPfad.lastIndexOf('/'); |
| | | var parent; |
| | | if(pos > 1) { |
| | | parent = self.mediaPfad.substring(0, pos); |
| | | } else { |
| | | parent = '/'; |
| | | } |
| | | self.mediaPfad = parent; |
| | | } |
| | | self.media_liste(); |
| | | }); |
| | | }); |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | this.addSelectedTitel = function() { |
| | | var titelName = document.querySelector(".selected").textContent; |
| | | var titel; |
| | | if(self.mediaPfad.endsWith('/')) { |
| | | titel = new Titel(titelName, self.mediaPfad, self.ortPfad); |
| | | } else { |
| | | titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad); |
| | | } |
| | | var plname = document.querySelector('#playlist').value; |
| | | self.http_put('../api/alist/' + plname, JSON.stringify(titel), function(responseText) { |
| | | self.meldung_mit_timeout(responseText, 1500); |
| | | }); |
| | | }; |
| | | |
| | | this.ablageort_liste = function() { |
| | | self.reset_top_buttons(); |
| | | self.http_get('../api/store/Ablageort/liste/', 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.http_get('../api/store/Ablageort/' + t.textContent, function(responseText){ |
| | | var ablageort = JSON.parse(responseText); |
| | | self.ablageort_form(ablageort); |
| | | }); |
| | | }); |
| | | //self.addEvtListener('#neu-btn', 'click', function (event) { |
| | | self.addEvtListener('#top-neu-btn', 'click', function(event) { |
| | | eval("self.ablageort_form" + "(this)"); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.prefs_liste = function() { |
| | | self.reset_top_buttons(); |
| | | self.http_get('../api/store/Einstellung/liste/', function (responseText) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/einstellung_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.http_get('../api/store/Einstellung/' + t.textContent, function(responseText){ |
| | | var einstellung = JSON.parse(responseText); |
| | | self.prefs_form(einstellung); |
| | | }); |
| | | }); |
| | | self.addEvtListener('#top-neu-btn', 'click', function(event) { |
| | | eval("self.prefs_form" + "(this)"); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.abspieler_liste = function() { |
| | | self.http_get('../api/store/Abspieler/liste/', function (responseText) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/abspieler_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.http_get('../api/store/Abspieler/' + t.textContent, function(responseText){ |
| | | var abspieler = JSON.parse(responseText); |
| | | self.abspieler_form(abspieler); |
| | | }); |
| | | }); |
| | | self.addEvtListener('#neu-btn', 'click', function(event) { |
| | | eval("self.abspieler_form" + "(this)"); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.abspielliste_liste = function() { |
| | | self.http_get('../api/store/Abspielliste/liste/', function (responseText) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/abspielliste_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.http_get('../api/store/Abspielliste/' + t.textContent, function(responseText){ |
| | | var abspielliste = JSON.parse(responseText); |
| | | self.abspielliste_form(abspielliste); |
| | | }); |
| | | }); |
| | | self.addEvtListener('#top-neu-btn', 'click', function(event) { |
| | | eval("self.abspielliste_form" + "(this)"); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | /* -------------------- Entitaets-Formulare ------------------ */ |
| | | |
| | | this.abspielliste_form = function(al) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_abspielliste.tpl", al, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var alname = document.querySelector('#abspielliste-name').value; |
| | | alname = alname.replace(' ', '').replace(/[\W]+/g, ''); |
| | | var abspielliste = new Abspielliste( |
| | | alname |
| | | ); |
| | | var daten = JSON.stringify(abspielliste); |
| | | //if(typeof pl === "undefined" || pl.key !== plname) { |
| | | if(typeof al.name === "undefined" || al.name.length < 1) { |
| | | // neu |
| | | self.http_put('../api/store/Abspielliste/' + alname, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.abspielliste_auswahl_fuellen(); |
| | | self.abspielliste_liste(); |
| | | }); |
| | | } else { |
| | | // aendern |
| | | self.http_put('../api/store/Abspielliste/' + al.name, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.abspielliste_auswahl_fuellen(); |
| | | self.abspielliste_liste(); |
| | | }); |
| | | } |
| | | }); |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.abspielliste_liste(); |
| | | }); |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var alname = document.querySelector('#abspielliste-name').value; |
| | | var dlgdata = {"del-elem": alname}; |
| | | self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() { |
| | | self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen); |
| | | self.addEvtListener('#ja-btn', 'click', function() { |
| | | self.http_delete('../api/store/Abspielliste/' + alname, '', function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.dialog_schliessen(); |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.abspielliste_auswahl_fuellen(); |
| | | self.abspielliste_liste(); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.abspieler_form = function(pl) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_abspieler.tpl", pl, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var plname = document.querySelector('#abspieler-name').value; |
| | | plname = plname.replace(' ', '').replace(/[\W]+/g, ''); |
| | | var abspieler = new Abspieler( |
| | | plname, |
| | | document.querySelector('#abspieler-url').value |
| | | ); |
| | | var daten = JSON.stringify(abspieler); |
| | | //if(typeof pl === "undefined" || pl.key !== plname) { |
| | | if(typeof pl.name === "undefined" || pl.name.length < 1) { |
| | | // neu |
| | | self.http_put('../api/store/Abspieler/' + plname, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.abspieler_auswahl_fuellen(); |
| | | self.abspieler_liste(); |
| | | }); |
| | | } else { |
| | | // aendern |
| | | self.http_put('../api/store/Abspieler/' + pl.name, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.abspieler_auswahl_fuellen(); |
| | | self.abspieler_liste(); |
| | | }); |
| | | } |
| | | }); |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.abspieler_liste(); |
| | | }); |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var plname = document.querySelector('#abspieler-name').value; |
| | | var dlgdata = {"del-elem": plname}; |
| | | self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() { |
| | | self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen); |
| | | self.addEvtListener('#ja-btn', 'click', function() { |
| | | self.http_delete('../api/store/Abspieler/' + plname, '', function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.dialog_schliessen(); |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.abspieler_auswahl_fuellen(); |
| | | self.abspieler_liste(); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.prefs_form = function(k) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_einstellung.tpl", k, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var pkey = document.querySelector('#einstellung-key').value; |
| | | pkey = pkey.replace(' ', '').replace(/[\W]+/g, ''); |
| | | var pref = new Einstellung( |
| | | pkey, |
| | | document.querySelector('#einstellung-value').value |
| | | ); |
| | | var daten = JSON.stringify(pref); |
| | | //if(typeof k === "undefined" || k.key !== pkey) { |
| | | if(typeof k.key === "undefined" || k.key.length < 1) { |
| | | // neu |
| | | self.http_put('../api/store/Einstellung/' + pkey, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.prefs_liste(); |
| | | }); |
| | | } else { |
| | | // aendern |
| | | self.http_put('../api/store/Einstellung/' + k.key, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.prefs_liste(); |
| | | }); |
| | | } |
| | | }); |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.prefs_liste(); |
| | | }); |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var pkey = document.querySelector('#einstellung-key').value; |
| | | var dlgdata = {"del-elem": pkey}; |
| | | self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() { |
| | | self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen); |
| | | self.addEvtListener('#ja-btn', 'click', function() { |
| | | self.http_delete('../api/store/Einstellung/' + pkey, '', function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.dialog_schliessen(); |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.prefs_liste(); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | /* |
| | | * Ablageort-Formular anzeigen |
| | | * |
| | | * {"name":"Katalog 2","ort":"/home/ulrich/Videos","url":"/media/kat2"}: |
| | | * |
| | | * @param {type} ablageort der Ablageort, der bearbeitet werden soll, leer fuer neuen Ort |
| | | * @returns {undefined} kein Rueckgabewert |
| | | */ |
| | | this.ablageort_form = function(ort) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", ort, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var aName = document.querySelector('#ablageort-name').value; |
| | | aName = aName.replace(' ', '').replace(/[\W]+/g, ''); |
| | | var a = new Ablageort( |
| | | aName, |
| | | document.querySelector('#ablageort-ort').value, |
| | | document.querySelector('#ablageort-url').value |
| | | ); |
| | | var daten = JSON.stringify(a); |
| | | //if(typeof ort === "undefined" || ort.name !== aName) { |
| | | if(typeof ort.name === "undefined" || ort.name.length < 1) { |
| | | // neu |
| | | self.http_put('../api/store/Ablageort/' + aName, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.ablageort_liste(); |
| | | }); |
| | | } else { |
| | | // aendern |
| | | self.http_put('../api/store/Ablageort/' + ort.name, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.ablageort_liste(); |
| | | }); |
| | | } |
| | | }); |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.ablageort_liste(); |
| | | }); |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var aoname = document.querySelector('#ablageort-name').value; |
| | | var dlgdata = {"del-elem": aoname}; |
| | | self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() { |
| | | self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen); |
| | | self.addEvtListener('#ja-btn', 'click', function() { |
| | | self.http_delete('../api/store/Ablageort/' + aoname, '', function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.dialog_schliessen(); |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.ablageort_liste(); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.addEvtListener = function(selector, eventName, func) { |
| | | document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); }); |
| | | }; |
| | | |
| | | this.removeClassMulti = function(selector) { |
| | | document.querySelectorAll('.' + selector).forEach(elem => { elem.classList.remove(selector); }); |
| | | }; |
| | | |
| | | /* --------------------- asynchroner HTTP Client ----------------- */ |
| | | |
| | | 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_put = function (u, data, cb) { |
| | | self.http_call('PUT', u, data, cb); |
| | | }; |
| | | |
| | | this.http_delete = function (u, data, cb) { |
| | | console.log("delete " + u); |
| | | self.http_call('DELETE', 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' || method === 'DELETE') { |
| | | xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); |
| | | xhr.send(data); |
| | | } |
| | | }; |
| | | |
| | | /* ------------------------ aus App-Vorlage ------------------- */ |
| | | |
| | | this.menue_umschalten = function () { |
| | | var ham = document.querySelector(".hamburger"); |
| | |
| | | }, 500); |
| | | }, timeout); |
| | | }; |
| | | |
| | | /* Dialog-Funktionen */ |
| | | |
| | | /* --------------------- 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 !== '') { |
| | | fetch(msgTpl) |
| | | .then(data => { |
| | | // Handle data |
| | | self.dialog_zeigen(vurl, data); |
| | | }).catch(error => { |
| | | // Handle error |
| | | this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) { |
| | | var vorlage = self.cache[vurl]; |
| | | if(vorlage === undefined) { |
| | | self.http_get(vurl, function(antwort) { |
| | | self.cache[vurl] = antwort; |
| | | self.dialog_zeigen(vurl, msgTpl, cb); |
| | | }); |
| | | } else { |
| | | self.dialog_zeigen(vurl, ''); |
| | | self.dialog_zeigen(vurl, msgTpl, cb); |
| | | } |
| | | }; |
| | | |
| | | this.dialog_zeigen = function (vurl, inhalt) { |
| | | this.dialog_zeigen = function (vurl, inhalt, cb) { |
| | | 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); |
| | | }); |
| | | self.html_erzeugen(vurl, inhalt, function (html) { |
| | | dlg.style.height = '7em'; |
| | | dlg.innerHTML = html; |
| | | document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen); |
| | | if(typeof(cb) !== 'function') { |
| | | // .. |
| | | } else { |
| | | cb(); |
| | | } |
| | | }); |
| | | }; |
| | | |
| | | self.dialog_schliessen = function () { |
| | | |
| | | this.dialog_schliessen = function () { |
| | | document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen); |
| | | //$('.dialog').slideUp(300); |
| | | var dlg = document.querySelector('.dialog'); |
| | | //dlg.style.display = "none"; |
| | | dlg.style.height = '0'; |
| | | dlg.innerHTML = ''; |
| | | }; |
| | | |
| | | /* Vorlagen */ |
| | | /* --------------------- Vorlagen ---------------------- */ |
| | | |
| | | /* |
| | | Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt |
| | |
| | | }; |
| | | |
| | | this.vorlage_fuellen = function (vurl, inhalt, cb) { |
| | | //console.log("vorlage " + self.cache[vurl]); |
| | | //console.log("render " + inhalt); |
| | | cb(Mustache.render(self.cache[vurl], inhalt)); |
| | | }; |
| | | |
| | |
| | | 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); |
| | | }); |
| | | */ |
| | | var xmlhttp = new XMLHttpRequest(); |
| | | xmlhttp.onreadystatechange = function () { |
| | | if (this.readyState == 4 && this.status == 200) { |
| | |
| | | |
| | | } |
| | | |
| | | /* ----------- Objekte ---------------- */ |
| | | |
| | | function Ablageort(n, o, u) { |
| | | this.name = n; |
| | | this.ort = o; |
| | | this.url = u; |
| | | } |
| | | |
| | | function Einstellung(k, v) { |
| | | this.key = k; |
| | | this.value = v; |
| | | } |
| | | |
| | | function Abspieler(n, u) { |
| | | this.name = n; |
| | | this.url = u; |
| | | } |
| | | |
| | | function Abspielliste(n) { |
| | | this.name = n; |
| | | } |
| | | |
| | | function Titel(n, p, u) { |
| | | this.katalogUrl = u; |
| | | this.pfad = p; |
| | | this.name = n; |
| | | } |