| | |
| | | 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) { |
| | | /* |
| | |
| | | /* ---------------- Titel einer Abspielliste ----------------- */ |
| | | |
| | | this.titel_liste = function() { |
| | | self.http_get('../api/store/Ablageort/liste/', function (responseText) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/ablageort_liste.tpl", JSON.parse(responseText), function (html) { |
| | | 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)"); |
| | | }); |
| | | }); |
| | | */ |
| | | }); |
| | | }); |
| | | }; |
| | |
| | | } |
| | | 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 titel = new Titel(self.mediaPfad + titelName, self.ortPfad); |
| | | 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, interpret, anzName, album); |
| | | } else { |
| | | 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.meldung_mit_timeout(responseText, 1500); |
| | |
| | | }); |
| | | }); |
| | | }; |
| | | |
| | | |
| | | this.abspieler_form = function(pl) { |
| | | self.vorlage_laden_und_fuellen("data/tpl/form_abspieler.tpl", pl, function (html) { |
| | | document.querySelector(".zentraler-inhalt").innerHTML = html; |
| | |
| | | }); |
| | | }; |
| | | |
| | | /* |
| | | * existingKey: wenn die Entitaet existiert und geandert werden soll |
| | | * leer, wenn neue Entitaet |
| | | */ |
| | | this.handle_my_submit = function(event, existingKey, putUrl, keySelector) { |
| | | 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(); |
| | | }); |
| | | } else { |
| | | // aendern |
| | | self.http_put(putUrl + existingKey, daten, function (responseText) { |
| | | // hier die Antwort verarbeiten |
| | | self.prefs_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; |
| | | const form = document.querySelector('form'); |
| | | form.addEventListener('submit', function(event) { |
| | | self.handle_my_submit(event, k.key, '../api/store/Einstellung/', '#einstellung-key'); |
| | | }); |
| | | |
| | | |
| | | /* |
| | | 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 () { |
| | | //document.querySelector(".zentraler-inhalt").innerHTML = ''; |
| | | self.prefs_liste(); |
| | |
| | | this.name = n; |
| | | } |
| | | |
| | | function Titel(n, 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; |
| | | } |