From f45e203a66a5471a0dd05e0362566ef96a2b6b31 Mon Sep 17 00:00:00 2001 From: ulrich Date: Wed, 07 Apr 2021 16:26:34 +0000 Subject: [PATCH] Abspieler-Dropdown (in Arbeit) --- src/de/uhilger/mediaz/api/StorageHandler.java | 19 ++++ src/de/uhilger/mediaz/store/FileStorage.java | 20 ++++ src/de/uhilger/mediaz/store/Storage.java | 7 + www/ui/data/tpl/ctrl.tpl | 24 +++-- www/ui/data/tpl/abs_sel.tpl | 5 + src/de/uhilger/mediaz/App.java | 1 src/mediaz_de_DE.properties | 2 www/ui/js/app.js | 139 +++++++++++++++++++--------------- 8 files changed, 140 insertions(+), 77 deletions(-) diff --git a/src/de/uhilger/mediaz/App.java b/src/de/uhilger/mediaz/App.java index 66d3fab..6c9b472 100644 --- a/src/de/uhilger/mediaz/App.java +++ b/src/de/uhilger/mediaz/App.java @@ -47,6 +47,7 @@ public static final String RB_AP_WWW_DATA = "appParamWWWData"; public static final String RB_AP_CTX = "appParamCtx"; public static final String RB_AP_UI = "appParamUi"; + public static final String RB_EP_LISTE = "epliste"; /** * <p>Start-Methode dieser Anwendung</p> diff --git a/src/de/uhilger/mediaz/api/StorageHandler.java b/src/de/uhilger/mediaz/api/StorageHandler.java index 5899bef..3b8e010 100644 --- a/src/de/uhilger/mediaz/api/StorageHandler.java +++ b/src/de/uhilger/mediaz/api/StorageHandler.java @@ -21,6 +21,7 @@ import com.sun.net.httpserver.HttpExchange; import com.sun.net.httpserver.HttpHandler; import de.uhilger.mediaz.App; +import static de.uhilger.mediaz.App.RB_EP_LISTE; import de.uhilger.mediaz.Server; import static de.uhilger.mediaz.Server.RB_SLASH; import de.uhilger.mediaz.store.FileStorage; @@ -58,6 +59,9 @@ Beispiele: HTTP GET an /mz/api/store/Ablageort/ + liefert alle Ablageort-Objekte + + HTTP GET an /mz/api/store/Ablageort/liste/ liefert eine Liste der Namen vorhandener Ablageorte HTTP GET an /mz/api/store/Ablageort/Katalog @@ -86,6 +90,8 @@ /** Name der HTTP Methode DELETE */ public static final String HTTP_DELETE = "DELETE"; + + public static final String EP_LISTE = "liste/"; @Override public void handle(HttpExchange e) throws IOException { @@ -177,9 +183,16 @@ String[] elems = path.split(App.getRs(Server.RB_SLASH)); FileStorage fs = new FileStorage(App.getInitParameter(App.getRs(App.RB_AP_CONF))); if(path.endsWith(App.getRs(RB_SLASH))) { - String type = elems[elems.length - 1]; - logger.fine(type); - List list = fs.list(type); + List list = null; + if(path.endsWith(App.getRs(RB_EP_LISTE))) { + String type = elems[elems.length - 2]; + logger.fine(type); + list = fs.list(type); + } else { + String type = elems[elems.length - 1]; + logger.fine(type); + list = fs.listObjects(type); + } return jsonWithEnclosingType(list); } else { String type = elems[elems.length - 2]; diff --git a/src/de/uhilger/mediaz/store/FileStorage.java b/src/de/uhilger/mediaz/store/FileStorage.java index 4b0ff1a..217420c 100644 --- a/src/de/uhilger/mediaz/store/FileStorage.java +++ b/src/de/uhilger/mediaz/store/FileStorage.java @@ -168,7 +168,7 @@ } return list; } - + @Override public TypeToken typeFromName(String name) { return types.get(name); @@ -199,5 +199,23 @@ return false; } } + + @Override + public List<Entity> listObjects(String typ) { + File base = new File(fileBase); + File dir = new File(base, typ); + List<Entity> list = new ArrayList(); + File[] files = dir.listFiles(); + if(files != null) { + for(File file : files) { + try { + list.add(entityFromFile(file)); + } catch (ClassNotFoundException | IOException ex) { + logger.log(Level.SEVERE, null, ex); + } + } + } + return list; + } } diff --git a/src/de/uhilger/mediaz/store/Storage.java b/src/de/uhilger/mediaz/store/Storage.java index de960bb..7a1803e 100644 --- a/src/de/uhilger/mediaz/store/Storage.java +++ b/src/de/uhilger/mediaz/store/Storage.java @@ -82,6 +82,13 @@ public List<String> list(String typ); /** + * Alle Objekte eines Typs auflisten + * @param typ der gewuenschte Typ + * @return die Liste mit Objekten + */ + public List listObjects(String typ); + + /** * Fuer einen gegebenen Namen den Typ bestimmen * @param name der Name des gewuenschten Typs * @return der Typ zum Namen diff --git a/src/mediaz_de_DE.properties b/src/mediaz_de_DE.properties index b95252e..bc25054 100644 --- a/src/mediaz_de_DE.properties +++ b/src/mediaz_de_DE.properties @@ -10,10 +10,12 @@ webroot=/ # uiroot=/ui store=/api/store +epliste=liste/ stopServer=/api/server/stop testAblage=/api/test/ablage testStore=/api/test/store + slash=/ dash=- bytes=bytes diff --git a/www/ui/data/tpl/abs_sel.tpl b/www/ui/data/tpl/abs_sel.tpl new file mode 100644 index 0000000..b42a2ea --- /dev/null +++ b/www/ui/data/tpl/abs_sel.tpl @@ -0,0 +1,5 @@ +<select class="u-full-width ctrl-item ctrl-select" id="abspieler" title="Abspieler"> + {{#ArrayList}} + <option value="{{url}}">{{name}}</option> + {{/ArrayList}} +</select> \ No newline at end of file diff --git a/www/ui/data/tpl/ctrl.tpl b/www/ui/data/tpl/ctrl.tpl index 6717df1..1a04087 100644 --- a/www/ui/data/tpl/ctrl.tpl +++ b/www/ui/data/tpl/ctrl.tpl @@ -7,16 +7,20 @@ <button class="ctrl-btn ctrl-item" id="hier-btn" title="hier spielen"><i class="icon-tablet"></i></button> </div> <div class="ctrl-orte"> - <select class="u-full-width ctrl-item ctrl-select" id="abspieler" title="Abspieler"> - <option value="as1">Wohnzimmer langtext</option> - <option value="as2">Arbeitsz</option> - <option value="as3">Küche</option> - </select> - <select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Playliste"> - <option value="Pl1">Liste 1</option> - <option value="Pl2">Liste 2</option> - <option value="Pl3">Liste 3</option> - </select> + <div class="abs-sel"> + <select class="u-full-width ctrl-item ctrl-select" id="abspieler" title="Abspieler"> + <option value="as1">Wohnzimmer langtext</option> + <option value="as2">Arbeitsz</option> + <option value="as3">Küche</option> + </select> + </div> + <div class="pl-sel"> + <select class="u-full-width ctrl-item ctrl-select" id="playlist" title="Playliste"> + <option value="Pl1">Liste 1</option> + <option value="Pl2">Liste 2</option> + <option value="Pl3">Liste 3</option> + </select> + </div> <button class="ctrl-btn ctrl-item" id="dazu-btn" title="der Playlist hinzufügen"><i class="icon-forward"></i></button> <button class="ctrl-btn ctrl-item" id="weg-btn" title="aus Playlist entfernen"><i class="icon-trash-empty"></i></button> </div> diff --git a/www/ui/js/app.js b/www/ui/js/app.js index c76dca1..12a6b1e 100644 --- a/www/ui/js/app.js +++ b/www/ui/js/app.js @@ -1,32 +1,65 @@ -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 Mediazentrale() { var self = this; var appMenu; var cache; // mustache templates var ortPfad; var mediaPfad; + + this.init = function () { + self.mediaPfad = '/'; + self.ortPfad = '/'; + self.cache = new Array(); + self.appMenu = new AppMenu(); + self.appMenu.init( + "data/menu/", + "hauptmenue.json", + "data/tpl/app-menu.tpl", + ".west", + "8em"); + + document.querySelector('.hamburger').addEventListener('click', function (e) { + 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.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; + }); + }); + }; + + /* 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(); + }); + }; + // auf der obersten Ebene werden die Kataloge angezeigt, // darunter der Inhalt des aktuellen Pfades this.media_liste = function() { if(self.ortPfad === '/') { // Kataloge listen - self.http_get('../api/store/Ablageort/', function (responseText) { + self.http_get('../api/store/Ablageort/liste/', function (responseText) { 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) { @@ -76,7 +109,7 @@ /* Die folgenden '_liste' Funktionen koennen noch vereinheitlicht werden */ this.ablageort_liste = function() { - self.http_get('../api/store/Ablageort/', function (responseText) { + 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) { @@ -94,7 +127,7 @@ }; this.prefs_liste = function() { - self.http_get('../api/store/Einstellung/', function (responseText) { + 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) { @@ -112,7 +145,7 @@ }; this.abspieler_liste = function() { - self.http_get('../api/store/Abspieler/', function (responseText) { + 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) { @@ -301,7 +334,7 @@ // document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); }); - /* asynchroner HTTP Client */ + /* --------------------- asynchroner HTTP Client ----------------- */ this.http_get = function (u, cb) { self.http_call('GET', u, null, cb); @@ -337,45 +370,7 @@ } }; - /* Unterer Einblendbereich */ - - self.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; - }); - }; - - /* ab hier aus App-Vorlage */ - - this.init = function () { - //self.vorlagen = new Vorlagen(); - self.mediaPfad = '/'; - self.ortPfad = '/'; - self.cache = new Array(); - self.appMenu = new AppMenu(); - self.appMenu.init( - "data/menu/", - "hauptmenue.json", - "data/tpl/app-menu.tpl", - ".west", - "8em"); - - document.querySelector('.hamburger').addEventListener('click', function (e) { - 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-list', 'click', self.media_liste); - - self.fusszeile_umschalten(); - self.seitenleiste_umschalten(); - self.dialog_unten_zeigen(); - }; + /* ------------------------ aus App-Vorlage ------------------- */ this.menue_umschalten = function () { var ham = document.querySelector(".hamburger"); @@ -452,7 +447,7 @@ }, timeout); }; - /* Dialog-Funktionen */ + /* --------------------- Dialog-Funktionen ------------------------ */ /* Einen Dialog aus Vorlagen erzeugen @@ -486,14 +481,14 @@ }); }; - self.dialog_schliessen = function () { + this.dialog_schliessen = function () { document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen); var dlg = document.querySelector('.dialog'); dlg.style.height = '0'; dlg.innerHTML = ''; }; - /* Vorlagen */ + /* --------------------- Vorlagen ---------------------- */ /* Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt @@ -547,3 +542,21 @@ } +/* ----------- 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; +} + -- Gitblit v1.9.3