| | |
| | | self.dialog_unten_zeigen(); |
| | | }; |
| | | |
| | | /* |
| | | * Der StorageHandler verarbeitet Entitaeten mit z.B. |
| | | * HTTP PUT Ablageort/[Name] |
| | | * und erwartet dabei eine JSON-Struktur, die der Entitaet entspricht. |
| | | * Beim Ablageort z.B. |
| | | * private String name; |
| | | * private String ort; |
| | | * private String url; |
| | | * |
| | | * Im HTML-Formular muessen die input-Elemente mit name="..." |
| | | * so genannt werden wie die Felder der Entitaet. Fuer Ablageort also |
| | | * |
| | | * <input name="name" |
| | | * <input name="ort" |
| | | * <input name="url" |
| | | * |
| | | * Auf diese Weise kann eine generische Funktion die Formulardaten |
| | | * an den REST-Endpunkt des Servers uebermitteln. |
| | | */ |
| | | /* |
| | | this.test_form = function() { |
| | | self.vorlage_laden_und_fuellen("data/tpl/test_form.tpl", "", function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | const form = document.querySelector('form'); |
| | | form.addEventListener('submit', self.handleSubmit); |
| | | }); |
| | | }; |
| | | |
| | | this.handleSubmit = function(event) { |
| | | event.preventDefault(); |
| | | const data = new FormData(event.target); |
| | | const value = Object.fromEntries(data.entries()); |
| | | console.log({ value }); |
| | | console.log(JSON.stringify(value)); |
| | | }; |
| | | */ |
| | | |
| | | this.abspieler_auswahl_fuellen = function() { |
| | | self.http_get('../api/store/Abspieler/', function (responseText) { |
| | | /* |
| | |
| | | } |
| | | self.media_liste(); |
| | | } else { |
| | | self.removeClassMulti('selected'); |
| | | t.classList.add('selected'); |
| | | if(t.classList.contains('selected')) { |
| | | self.addSelectedTitel(); |
| | | } else { |
| | | self.removeClassMulti('selected'); |
| | | t.classList.add('selected'); |
| | | } |
| | | //self.selTitel = new Titel(t.textContent, self.ortPfad); |
| | | } |
| | | }); |
| | |
| | | }; |
| | | |
| | | this.addSelectedTitel = function() { |
| | | var titelName = document.querySelector(".selected").textContent; |
| | | var elem = document.querySelector(".selected"); |
| | | var titelName = elem.textContent; |
| | | var album = elem.attributes.album.nodeValue; |
| | | var interpret = elem.attributes.interpret.nodeValue; |
| | | var anzName = elem.attributes.titelAnzName.nodeValue; |
| | | var titel; |
| | | if(self.mediaPfad.endsWith('/')) { |
| | | titel = new Titel(titelName, self.mediaPfad, self.ortPfad); |
| | | titel = new Titel(titelName, self.mediaPfad, self.ortPfad, interpret, anzName, album); |
| | | } else { |
| | | titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad); |
| | | titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad, interpret, anzName, album); |
| | | } |
| | | var plname = document.querySelector('#playlist').value; |
| | | self.http_put('../api/alist/' + plname, JSON.stringify(titel), function(responseText) { |
| | |
| | | self.abspieler_form(abspieler); |
| | | }); |
| | | }); |
| | | self.addEvtListener('#neu-btn', 'click', function(event) { |
| | | //self.addEvtListener('#neu-btn', 'click', function(event) { |
| | | self.addEvtListener('#top-neu-btn', 'click', function(event) { |
| | | eval("self.abspieler_form" + "(this)"); |
| | | }); |
| | | }); |
| | |
| | | this.abspielliste_form = function(al) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_abspielliste.tpl", al, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | const form = document.querySelector('form'); |
| | | form.addEventListener('submit', function(event) { |
| | | self.handle_submit(event, al.name, '../api/store/Abspielliste/', '#abspielliste-name', function() { |
| | | self.abspielliste_liste(); |
| | | }); |
| | | }); |
| | | |
| | | |
| | | /* |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var alname = document.querySelector('#abspielliste-name').value; |
| | | alname = alname.replace(' ', '').replace(/[\W]+/g, ''); |
| | |
| | | }); |
| | | } |
| | | }); |
| | | */ |
| | | |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.abspielliste_liste(); |
| | | }); |
| | | |
| | | self.addEvtListener('#loeschen-btn', 'click', function(event) { |
| | | event.preventDefault(); |
| | | self.handle_del_btn('#abspielliste-name', '../api/store/Abspielliste/', function() { |
| | | self.abspielliste_auswahl_fuellen(); |
| | | self.abspielliste_liste(); |
| | | }); |
| | | }); |
| | | |
| | | /* |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var alname = document.querySelector('#abspielliste-name').value; |
| | | var dlgdata = {"del-elem": alname}; |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | */ |
| | | }); |
| | | }; |
| | | |
| | | |
| | | this.abspieler_form = function(pl) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_abspieler.tpl", pl, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | const form = document.querySelector('form'); |
| | | form.addEventListener('submit', function(event) { |
| | | self.handle_submit(event, pl.key, '../api/store/Abspieler/', '#abspieler-name', function() { |
| | | self.abspieler_liste(); |
| | | }); |
| | | }); |
| | | |
| | | /* |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var plname = document.querySelector('#abspieler-name').value; |
| | | plname = plname.replace(' ', '').replace(/[\W]+/g, ''); |
| | |
| | | }); |
| | | } |
| | | }); |
| | | */ |
| | | |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.abspieler_liste(); |
| | | }); |
| | | |
| | | self.addEvtListener('#loeschen-btn', 'click', function(event) { |
| | | event.preventDefault(); |
| | | self.handle_del_btn('#abspieler-name', '../api/store/Abspieler/', function() { |
| | | self.abspieler_auswahl_fuellen(); |
| | | self.abspieler_liste(); |
| | | }); |
| | | }); |
| | | |
| | | |
| | | /* |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var plname = document.querySelector('#abspieler-name').value; |
| | | var dlgdata = {"del-elem": plname}; |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | */ |
| | | }); |
| | | }; |
| | | |
| | | this.prefs_form = function(k) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_einstellung.tpl", k, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | const form = document.querySelector('form'); |
| | | form.addEventListener('submit', function(event) { |
| | | self.handle_submit(event, k.key, '../api/store/Einstellung/', '#einstellung-key', function() { |
| | | self.prefs_liste(); |
| | | }); |
| | | }); |
| | | |
| | | |
| | | /* |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var pkey = document.querySelector('#einstellung-key').value; |
| | | pkey = pkey.replace(' ', '').replace(/[\W]+/g, ''); |
| | |
| | | }); |
| | | } |
| | | }); |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | */ |
| | | self.addEvtListener('#cancel-btn', 'click', function (event) { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | event.preventDefault(); |
| | | self.prefs_liste(); |
| | | }); |
| | | |
| | | self.addEvtListener('#loeschen-btn', 'click', function(event) { |
| | | event.preventDefault(); |
| | | self.handle_del_btn('#einstellung-key', '../api/store/Einstellung/', function() { |
| | | self.prefs_liste(); |
| | | }); |
| | | }); |
| | | |
| | | /* |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var pkey = document.querySelector('#einstellung-key').value; |
| | | var dlgdata = {"del-elem": pkey}; |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | */ |
| | | }); |
| | | }; |
| | | |
| | |
| | | this.ablageort_form = function(ort) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", ort, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | | const form = document.querySelector('form'); |
| | | form.addEventListener('submit', function(event) { |
| | | self.handle_submit(event, ort.name, '../api/store/Ablageort/', '#ablageort-name', function() { |
| | | self.ablageort_liste(); |
| | | }); |
| | | }); |
| | | |
| | | /* |
| | | self.addEvtListener('#ok-btn', 'click', function () { |
| | | var aName = document.querySelector('#ablageort-name').value; |
| | | aName = aName.replace(' ', '').replace(/[\W]+/g, ''); |
| | |
| | | }); |
| | | } |
| | | }); |
| | | */ |
| | | self.addEvtListener('#cancel-btn', 'click', function () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.ablageort_liste(); |
| | | }); |
| | | |
| | | self.addEvtListener('#loeschen-btn', 'click', function(event) { |
| | | event.preventDefault(); |
| | | self.handle_del_btn('#ablageort-name', '../api/store/Ablageort/', function() { |
| | | self.ablageort_liste(); |
| | | }); |
| | | }); |
| | | |
| | | |
| | | /* |
| | | self.addEvtListener('#loeschen-btn', 'click', function() { |
| | | var aoname = document.querySelector('#ablageort-name').value; |
| | | var dlgdata = {"del-elem": aoname}; |
| | |
| | | }); |
| | | }); |
| | | }); |
| | | */ |
| | | }); |
| | | }; |
| | | |
| | | /* ------------------------------- Helfer ----------------------- */ |
| | | |
| | | /* |
| | | * existingKey: wenn die Entitaet existiert und geandert werden soll |
| | | * leer, wenn neue Entitaet |
| | | */ |
| | | this.handle_submit = function(event, existingKey, putUrl, keySelector, cb) { |
| | | event.preventDefault(); |
| | | const data = new FormData(event.target); |
| | | const value = Object.fromEntries(data.entries()); |
| | | console.log({ value }); |
| | | console.log(JSON.stringify(value)); |
| | | var daten = JSON.stringify(value); |
| | | var formkey = document.querySelector(keySelector).value; |
| | | formkey = formkey.replace(' ', '').replace(/[\W]+/g, ''); |
| | | |
| | | if(typeof existingKey === "undefined" || existingKey.length < 1) { |
| | | // neu |
| | | self.http_put(putUrl + formkey, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | //self.prefs_liste(); |
| | | if(typeof(cb) !== 'function') { |
| | | // .. |
| | | } else { |
| | | cb(); |
| | | } |
| | | }); |
| | | } else { |
| | | // aendern |
| | | self.http_put(putUrl + existingKey, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | // self.prefs_liste(); |
| | | if(typeof(cb) !== 'function') { |
| | | // .. |
| | | } else { |
| | | cb(); |
| | | } |
| | | }); |
| | | } |
| | | }; |
| | | |
| | | this.handle_del_btn = function(selectorKey, delUrl, cb) { |
| | | var pkey = document.querySelector(selectorKey).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(event) { |
| | | console.log("loeschen geklickt."); |
| | | self.http_delete(delUrl + pkey, '', function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.dialog_schliessen(); |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | //self.prefs_liste(); |
| | | if(typeof(cb) !== 'function') { |
| | | // .. |
| | | } else { |
| | | cb(); |
| | | } |
| | | }); |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | this.addEvtListener = function(selector, eventName, func) { |
| | | document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); }); |
| | |
| | | this.name = n; |
| | | } |
| | | |
| | | function Titel(n, p, u) { |
| | | function Titel(n, p, u, i, t, a) { |
| | | this.katalogUrl = u; |
| | | this.pfad = p; |
| | | this.name = n; |
| | | this.interpret = i; |
| | | this.titelAnzName = t; |
| | | this.album = a; |
| | | } |