Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-28 3deb92a5bd144ac7bdf103175a58c182053f6b07
commit | author | age
b379f5 1 function Mediazentrale() {
cfa858 2   var self = this;
U 3   var appMenu;
4   var cache; // mustache templates
86bbf7 5   var ortPfad;
U 6   var mediaPfad;
e60cff 7   var katUrl;
U 8   var selTitel;
78d707 9   var katName;
f45e20 10
U 11   this.init = function () {
12     self.mediaPfad = '/';
13     self.ortPfad = '/';
14     self.cache = new Array();
15     self.appMenu = new AppMenu();
16     self.appMenu.init(
17             "data/menu/",
18             "hauptmenue.json",
78d707 19             "data/tpl/app-menu.txt",
f45e20 20             ".west",
0866ae 21             "6em");
f45e20 22
U 23     document.querySelector('.hamburger').addEventListener('click', function (e) {
24       self.menue_umschalten();
25     });
26     
27     self.addEvtListener('#mi-katalog', 'click', self.media_liste);
28     self.addEvtListener('#mi-orte', 'click', self.ablageort_liste);
29     self.addEvtListener('#mi-prefs', 'click', self.prefs_liste);
30     self.addEvtListener('#mi-player', 'click', self.abspieler_liste);
8d7d35 31     self.addEvtListener('#mi-listen', 'click', self.abspielliste_liste);
U 32     self.addEvtListener('#mi-list', 'click', self.titel_liste);
d027b5 33     self.addEvtListener('#mi-live', 'click', self.livestream_liste);
3929b0 34     self.addEvtListener('#mi-devices', 'click', self.geraet_liste);
a27c68 35     self.addEvtListener('#mi-switch', 'click', self.geraet_schalt_liste);
f45e20 36     
U 37     self.fusszeile_umschalten();
38     self.seitenleiste_umschalten();
39     self.dialog_unten_zeigen();
40   };
41   
8d7d35 42   /* ---------------- Entitaets-Listen ----------------- */
d027b5 43   
U 44   this.livestream_selection = function() {
45     document.querySelector('.breadcrumb-behaelter').textContent = '';
46     document.querySelector('.bereich-name').textContent = 'Livestream-Auswahl'; 
960359 47     self.http_get('api/store/Livestream/liste/', function(responseText) {
2af7d6 48       self.html_erzeugen("data/tpl/livestream_liste.txt", JSON.parse(responseText), function (html) {
d027b5 49         document.querySelector(".zentraler-inhalt").innerHTML = html;
U 50         self.addEvtListener('.entity-eintrag', 'click', function (event) {
51           var t = event.target;
52           self.removeClassMulti('selected');
53           t.classList.add('selected');          
54         });
55       });
56     });
57   };
8d7d35 58
86bbf7 59   // auf der obersten Ebene werden die Kataloge angezeigt,
U 60   // darunter der Inhalt des aktuellen Pfades
61   this.media_liste = function() {
78d707 62     self.reset_top_buttons(); 
095119 63     //console.log("ortPfad: " + self.ortPfad + ", mediaPfad: " + self.mediaPfad);
78d707 64     document.querySelector('.bereich-name').textContent = '';    
86bbf7 65     if(self.ortPfad === '/') {
78d707 66       var bb = document.querySelector('.breadcrumb-behaelter');
U 67       bb.textContent = "Kataloge";
86bbf7 68       // Kataloge listen
960359 69       self.http_get('api/store/Ablageort/liste/', function (responseText) {
8d7d35 70         //document.querySelector('#top-up-btn').removeEventListener('click', self.media_liste_herauf);
2af7d6 71         self.html_erzeugen("data/tpl/katalog_root_liste.txt", JSON.parse(responseText), function (html) {
86bbf7 72           document.querySelector(".zentraler-inhalt").innerHTML = html;
U 73           self.addEvtListener('.entity-eintrag', 'click', function (event) {
74             var t = event.target;
78d707 75             self.katName = t.textContent;
d027b5 76             if(self.katName !== "Livestreams") {
960359 77               self.http_get('api/store/Ablageort/' + t.textContent, function(responseText) {
d027b5 78                 var ablageort = JSON.parse(responseText);
U 79                 self.ortPfad = ablageort.url;
80                 self.media_liste();
81               });
82             } else {
83               self.livestream_selection();
84             }
86bbf7 85           });
U 86         });
87       });
88     } else {
78d707 89       var bb = document.querySelector('.breadcrumb-behaelter');
U 90       var brPfad = self.katName + self.mediaPfad;
91       var breadcrumbs = brPfad.split('/');
92       var brLinks = "";
93       var brLinkPfad = "";
94       for(var index = 0; index < breadcrumbs.length; index++) {
95         // <a class="breadcrumb-link" href="#">breadcrumbs[index]</a>
96         if(index === 0) {
275b21 97           brLinkPfad = '';
78d707 98         } else {
U 99           brLinkPfad = brLinkPfad + '/' + breadcrumbs[index];
100         }
101         brLinks = brLinks + "<a brlink='" + brLinkPfad + "' class='breadcrumb-link' href='#'>" + breadcrumbs[index] + "</a>";
102         //console.log('   breadcrumbs[' + index + ']: ' + breadcrumbs[index]);
103       }
104       bb.innerHTML = brLinks;
105       self.addEvtListener('.breadcrumb-link', 'click', function(event) {
095119 106         //console.log(event.target.attributes.brlink.nodeValue);
78d707 107         var neuerPfad = event.target.attributes.brlink.nodeValue;
U 108         self.mediaPfad = neuerPfad;
109         self.media_liste();
110       });
3deb92 111       //var url = '/tango' + self.ortPfad + self.mediaPfad;
U 112       var url = '.' + self.ortPfad + self.mediaPfad;
3271f1 113       if(!url.endsWith('/')) {
U 114         url = url + '/';
115       }
116       self.http_get(url, function(responseText) {
2af7d6 117         self.html_erzeugen("data/tpl/katalog_inhalt_liste.txt", JSON.parse(responseText), function (html) {
86bbf7 118           document.querySelector(".zentraler-inhalt").innerHTML = html;
U 119           self.addEvtListener('.entity-eintrag', 'click', function (event) {
120             var t = event.target;
3271f1 121             var tx = t.textContent;
86bbf7 122             if(t.classList.contains("entity-typ-folder")) {
3271f1 123               if(self.mediaPfad.endsWith('/')) {
U 124                 self.mediaPfad = self.mediaPfad + tx;                
125               } else {
126                 self.mediaPfad = self.mediaPfad + '/' + tx;
127               }
86bbf7 128               self.media_liste();
U 129             } else {
37eadf 130               if(t.classList.contains('selected')) {
78d707 131                 t.classList.add('added-to-playlist');
095119 132                 self.titelDazu();
37eadf 133               } else {
U 134                 self.removeClassMulti('selected');
135                 t.classList.add('selected');
136               }
e60cff 137               //self.selTitel = new Titel(t.textContent, self.ortPfad);       
86bbf7 138             }
U 139           });
8d7d35 140           self.addEvtListener('#top-up-btn', 'click', function(event) {
86bbf7 141             if(self.mediaPfad === '/') {
U 142               self.ortPfad = '/';              
143             } else {
144               var pos = self.mediaPfad.lastIndexOf('/');
3271f1 145               var parent;
U 146               if(pos > 1) {
147                 parent = self.mediaPfad.substring(0, pos);
148               } else {
149                 parent = '/';
150               }
86bbf7 151               self.mediaPfad = parent;
U 152             }
153             self.media_liste();
8d7d35 154           });
86bbf7 155         });
U 156       });
157     }
e60cff 158   };
245ac1 159   
39ebae 160   this.ein_aus_btn = function() {
U 161     self.addEvtListener('#ein-aus-btn', 'click', function (event) {
162       var geraetName = event.target.attributes.gname.nodeValue;
163       var nameElem = event.target.parentNode.querySelector('.schalt-geraet-name');
164       if(nameElem.classList.contains('schalt-geraet-true')) {
165         // ausschalten
960359 166         self.http_get('api/gstrg/geraet/' + geraetName + "/aus", function(responseText) {
39ebae 167           // console.log(responseText);
U 168           self.geraet_schalt_liste();
169         });
170       } else {
171         // einschalten            
960359 172         self.http_get('api/gstrg/geraet/' + geraetName + "/ein", function(responseText) {
39ebae 173           // console.log(responseText);
U 174           self.geraet_schalt_liste();
175         });
176       }
177     });
178   };
179   
3e5a56 180   this.geraet_schalt_liste = function() {
39ebae 181     /*self.entitaet_liste('Geräte schalten','../api/store/Geraet/listealles/', 
U 182       "data/tpl/geraet_schalt_liste.txt", '../api/store/Geraet/', 
183       "self.form_geraet_status", function(responseText) {*/
960359 184     self.entitaet_liste('Geräte schalten','api/store/Geraet/listealles/', 
U 185       "data/tpl/geraet_schalt_liste.txt", 'api/store/Geraet/', 
39ebae 186       "", function(responseText) {
U 187         //var geraet = JSON.parse(responseText);
188         //self.geraet_status_form(geraet);
189       }, self.ein_aus_btn);      
3e5a56 190   };
U 191   
3929b0 192   this.geraet_liste = function() {
960359 193     self.entitaet_liste('Geräte','api/store/Geraet/liste/', 
U 194       "data/tpl/geraet_liste.txt", 'api/store/Geraet/', 
3929b0 195       "self.geraet_form", function(responseText) {
U 196         var geraet = JSON.parse(responseText);
197         self.geraet_form(geraet);
198       });
199   };
200
a43e1a 201   this.ablageort_liste = function() {
960359 202     self.entitaet_liste('Kataloge','api/store/Ablageort/liste/', 
U 203       "data/tpl/ablageort_liste.txt", 'api/store/Ablageort/', 
e44ed0 204       "self.ablageort_form", function(responseText) {
U 205         var ablageort = JSON.parse(responseText);
206         self.ablageort_form(ablageort);
207       });
cf6509 208   };
U 209
210   this.prefs_liste = function() {
960359 211     self.entitaet_liste('Einstellungen','api/store/Einstellung/liste/', 
U 212       "data/tpl/einstellung_liste.txt", 'api/store/Einstellung/', 
e44ed0 213       "self.prefs_form", function(responseText) {
U 214         var einstellung = JSON.parse(responseText);
215         self.prefs_form(einstellung);
216       });
cf6509 217   };
U 218
3d4bca 219   this.abspieler_liste = function() {
960359 220     self.entitaet_liste('Abspieler','api/store/Abspieler/liste/', 
U 221       "data/tpl/abspieler_liste.txt", 'api/store/Abspieler/', 
e44ed0 222       "self.abspieler_form", function(responseText) {
U 223         var abspieler = JSON.parse(responseText);
224         self.abspieler_form(abspieler);
225       });
8d7d35 226   };
U 227   
d027b5 228   this.livestream_liste = function() {
960359 229     self.entitaet_liste('Livestreams','api/store/Livestream/liste/', 
U 230       "data/tpl/livestream_liste.txt", 'api/store/Livestream/', 
d027b5 231       "self.livestream_form", function(responseText) {
U 232         var livestream = JSON.parse(responseText);
233         self.livestream_form(livestream);
234       });
235   };
236   
8d7d35 237   this.abspielliste_liste = function() {
960359 238     self.entitaet_liste('Abspielliste','api/store/Abspielliste/liste/', 
U 239       "data/tpl/abspielliste_liste.txt", 'api/store/Abspielliste/', 
e44ed0 240       "self.abspielliste_form", function(responseText) {
095119 241         //console.log("responseTest: '" + responseText + "'");
e44ed0 242         var abspielliste = JSON.parse(responseText);
U 243         self.abspielliste_form(abspielliste);
244       });
8d7d35 245   };
U 246   
c7030d 247   /* -------------------- Entitaets-Formulare ------------------ */  
8d7d35 248   
U 249   this.abspielliste_form = function(al) {
50e53e 250     self.entitaet_form('Abspielliste', al, al.name,
960359 251       "data/tpl/form_abspielliste.txt", 'api/store/Abspielliste/',
960317 252       '#abspielliste-name', 'name', function(event) {
095119 253           if(event !== undefined) {
U 254             event.preventDefault();
255           }
c7030d 256           self.abspielliste_auswahl_fuellen();
U 257           self.abspielliste_liste();
258     });
3d4bca 259   };
71def1 260   
3d4bca 261   this.abspieler_form = function(pl) {
50e53e 262     self.entitaet_form('Abspieler', pl, pl.key,
960359 263       "data/tpl/form_abspieler.txt", 'api/store/Abspieler/',
960317 264       '#abspieler-name', 'name', function() { 
c7030d 265           self.abspieler_auswahl_fuellen();
U 266           self.abspieler_liste();
d027b5 267     });
U 268   };
269
270   this.livestream_form = function(ls) {
271     self.entitaet_form('Livestream', ls, ls.name,
960359 272       "data/tpl/form_livestream.txt", 'api/store/Livestream/',
960317 273       '#livestream-name', 'name', function() { 
d027b5 274           self.livestream_liste();
3929b0 275     });
U 276   };
277
278   this.geraet_form = function(ge) {
279     self.entitaet_form('Gerät', ge, ge.name,
960359 280       "data/tpl/form_geraet.txt", 'api/store/Geraet/',
960317 281       '#geraet-name', 'name', function() { 
3929b0 282           self.geraet_liste();
3e5a56 283     });
U 284   };
285
286   this.geraet_status_form = function(ge) {
287     self.entitaet_form('Gerät', ge, ge.name,
960359 288       "data/tpl/form_geraet_status.txt", 'api/store/Geraet/',
960317 289       '#geraet-name', 'name', function() { 
3e5a56 290           self.geraet_schalt_liste();
c7030d 291     });
71def1 292   };
U 293
cf6509 294   this.prefs_form = function(k) {
78d707 295     self.entitaet_form('Einstellung', k, k.key,
960359 296       "data/tpl/form_einstellung.txt", 'api/store/Einstellung/',
960317 297       '#einstellung-key', 'key', function() { 
c7030d 298           self.prefs_liste();
U 299     });
a43e1a 300   };
cfa858 301
90f5d4 302   /* 
U 303    * Ablageort-Formular anzeigen
304    * 
305    * {"name":"Katalog 2","ort":"/home/ulrich/Videos","url":"/media/kat2"}: 
306    * 
307    * @param {type} ablageort  der Ablageort, der bearbeitet werden soll, leer fuer neuen Ort
308    * @returns {undefined} kein Rueckgabewert
309    */
310   this.ablageort_form = function(ort) {
78d707 311     self.entitaet_form('Katalog', ort, ort.name,
960359 312       "data/tpl/form_ablageort.txt", 'api/store/Ablageort/',
a48ca3 313       '#ablageort-name', 'name', function() { 
c7030d 314         self.ablageort_liste();
U 315     });
b379f5 316   };
48f8f9 317   
748b6f 318   /* ------------------------------- UI-Dynamik ----------------------- */
48f8f9 319   
748b6f 320   self.reset_top_buttons = function() {
2af7d6 321     self.html_erzeugen("data/tpl/top_btns.txt", '', function (html) {
748b6f 322       document.querySelector(".top-btns").innerHTML = html;
U 323     });
324   };
325   
326   this.abspieler_auswahl_fuellen = function() {
960359 327     self.http_get('api/store/Abspieler/liste/', function (responseText) {
2af7d6 328       self.html_erzeugen("data/tpl/abs_sel.txt", JSON.parse(responseText), function (html) {
748b6f 329         document.querySelector(".abs-sel").innerHTML = html;
U 330       });    
331     });
332   };
333
334   this.abspielliste_auswahl_fuellen = function() {
960359 335     self.http_get('api/store/Abspielliste/', function (responseText) {
2af7d6 336       self.html_erzeugen("data/tpl/pl_sel.txt", JSON.parse(responseText), function (html) {
748b6f 337         document.querySelector(".pl-sel").innerHTML = html;
b56bb3 338         self.addEvtListener('#playlist', 'change', function() {
U 339           self.titel_liste();
340         });
748b6f 341       });    
U 342     });
343   };
344   
345   /* Unterer Einblendbereich */
346   
347   this.dialog_unten_zeigen = function() {
2af7d6 348     self.html_erzeugen("data/tpl/ctrl.txt", "", function (html) {
748b6f 349       var dlg = document.querySelector(".dialog-unten");
a07e7e 350       //dlg.style.height = '10em';
748b6f 351       dlg.innerHTML = html;
U 352       self.abspieler_auswahl_fuellen();
353       self.abspielliste_auswahl_fuellen();
095119 354       self.addEvtListener('#dazu-btn', 'click', self.titelDazu);
b56bb3 355       self.addEvtListener('#play-btn', 'click', self.play);
9e14ef 356       self.addEvtListener('#stop-btn', 'click', function() {
U 357         self.kommando('stop');
358       });
359       self.addEvtListener('#pause-btn', 'click', function() {
360         self.kommando('pause');
361       });
c6fdc4 362       self.addEvtListener('#weiter-btn', 'click', self.weiter);
fe0cf7 363
U 364       self.addEvtListener('#hier-btn', 'click', self.hier_spielen);
9e14ef 365       
U 366 /*
367     <button class="ctrl-btn ctrl-item" id="hier-btn" title="hier spielen"><i class="icon-tablet"></i></button>
368  */      
369       
095119 370       self.addEvtListener('#weg-btn', 'click', self.titelWeg);
U 371       self.addEvtListener('#leeren-btn', 'click', self.alleTitelEntfernen);
f6ea0c 372       
U 373       self.addEvtListener('#media-btn', 'click', self.media_liste);
374       self.addEvtListener('#plst-btn', 'click', self.titel_liste);
938b6b 375       self.addEvtListener('#live-btn', 'click', self.livestream_selection);
f6ea0c 376       self.addEvtListener('#switch-btn', 'click', self.geraet_schalt_liste);
U 377     
748b6f 378       self.media_liste();
U 379     });
380   };
381   
382   /* Titel einer Abspielliste */
383   
384   this.titel_liste = function() {
385     self.reset_top_buttons();
386     var plname = document.querySelector('#playlist').value;
78d707 387     document.querySelector('.bereich-name').textContent = 'Abspielliste ' + plname;
U 388     var bb = document.querySelector('.breadcrumb-behaelter');
389     bb.textContent = "";
960359 390     self.http_get('api/alist/' + plname, function (responseText) {
2af7d6 391       self.html_erzeugen("data/tpl/titel_liste.txt", JSON.parse(responseText), function (html) {
748b6f 392         document.querySelector(".zentraler-inhalt").innerHTML = html;
U 393         self.addEvtListener('.entity-eintrag', 'click', function (event) {
394           var t = event.target;
395           self.removeClassMulti('selected');
396           t.classList.add('selected');
397         });
398       });
399     });
400   };  
401   
b56bb3 402   /* ------------- Media-Steuerung ------------------------- */
U 403   
404   this.play = function() {
658c14 405     var bereichName = document.querySelector('.bereich-name').textContent;
U 406     if(bereichName === '') {
4f2589 407       var titel = self.titelErmitteln(document.querySelector(".selected"));
1c5fa4 408       var playername = document.querySelector('#abspieler').value;
658c14 409       console.log('plname: ' + playername + ' url: ' + titel.katalogUrl + titel.pfad + titel.name);
960359 410       self.http_post('api/strg/' + playername + '/play/titel', JSON.stringify(titel), function(responseText) {
658c14 411         self.meldung_mit_timeout(responseText, 1500);
d027b5 412       });   
U 413     } else if(bereichName === 'Livestream-Auswahl') {
414       var streamName = document.querySelector(".selected").textContent;
415       var playername = document.querySelector('#abspieler').value;
416       var stream = new Livestream(streamName, '-');
960359 417       self.http_post('api/strg/' + playername + '/play/stream', JSON.stringify(stream), function(responseText) {
d027b5 418         self.meldung_mit_timeout(responseText, 1500);
U 419       });   
658c14 420     } else {
U 421       var abs = document.querySelector('#abspieler').value;
422       var lst = document.querySelector('#playlist').value;
423       console.log(
424         "play playlist.value: " + document.querySelector('#playlist').value + 
425         ", abspieler.value: " + document.querySelector('#abspieler').value);
960359 426       self.http_get('api/strg/' + abs + '/play/liste/' + lst, function(responseText) {
658c14 427         self.meldung_mit_timeout(responseText, 1500);
U 428       });
429     }
095119 430   };
U 431   
c6fdc4 432   this.weiter = function() {
U 433     var bereichName = document.querySelector('.bereich-name').textContent;
434     if(bereichName === '') {
435       var titel = self.titelErmitteln(document.querySelector(".selected"));
436       var playername = document.querySelector('#abspieler').value;
437       console.log('plname: ' + playername + ' url: ' + titel.katalogUrl + titel.pfad + titel.name);
960359 438       self.http_post('api/strg/' + playername + '/weiter/titel', JSON.stringify(titel), function(responseText) {
c6fdc4 439         self.meldung_mit_timeout(responseText, 1500);
U 440       });   
441     }
442   };
443   
9e14ef 444   this.kommando = function(kommando) {
U 445     var abs = document.querySelector('#abspieler').value;
960359 446     self.http_get('api/strg/' + abs + '/' + kommando, function(responseText) {
9e14ef 447       self.meldung_mit_timeout(responseText, 1500);
U 448     });
449   };
fe0cf7 450   
U 451   this.hier_spielen = function() {
452     var url;
453     // den Host noch vom Server abrufen und den nachfolgenden Code ersetzen
883f91 454     var host = 'http://' + window.location.host + '/tango';
fe0cf7 455     console.log('host: ' + host);
U 456     var bereichName = document.querySelector('.bereich-name').textContent;
457     if(bereichName === '') {
458       var titel = self.titelErmitteln(document.querySelector(".selected"));
459       //var playername = document.querySelector('#abspieler').value;
460       console.log(' url: ' + titel.katalogUrl + titel.pfad + titel.name);
461       //self.http_post('../api/strg/' + playername + '/titel', JSON.stringify(titel), function(responseText) {
462       //  self.meldung_mit_timeout(responseText, 1500);
463       //}); 
464       url = host + titel.katalogUrl + titel.pfad + titel.name;
465       window.open(url);
466     } else if(bereichName === 'Livestream-Auswahl') {
467       var streamName = document.querySelector(".selected").textContent;
468       // hier den Stream-URL abrufen
469       //GET /mz/api/store/[typname]/[name]
960359 470       self.http_get('api/store/Livestream/' + streamName, function(responseText) {
fe0cf7 471         var stream = JSON.parse(responseText);        
U 472         url = stream.url;
473         window.open(url);
474       });
475     } else {
476       var lst = document.querySelector('#playlist').value;
477       console.log(
478         "play playlist.value: " + document.querySelector('#playlist').value + 
479         ", abspieler.value: " + document.querySelector('#abspieler').value);
480       // hier noch URL fuer Stream der Abspielliste abrufen
481       // Es muss auch noch die Funktion auf dem Server gabut werden, die 
482       // eine Abspielliste als Stream liefert
483       url = 'Stream fuer Abspielliste ' + lst + ' noch nicht gebaut.';
484     }
485     console.log('url: ' + url);
486     //window.open(url);
487   };  
9e14ef 488     
095119 489   /* ------------- Verwaltungsfunktionen Abspielliste -------------------- */
U 490   
491   self.alleTitelEntfernen = function() {
492     var plname = document.querySelector('#playlist').value;
960359 493     self.http_delete('api/alist/' + plname + '/alle', '', function(responseText) {
095119 494       // DELETE    http://localhost:9090/mz/api/alist/liste1/0
U 495       //self.meldung_mit_timeout(responseText, 1500);
496       self.titel_liste();
497     });
498   };
499   
500   this.titelDazu = function() {
4f2589 501     var titel = self.titelErmitteln(document.querySelector(".selected"));
095119 502     //var titelName = elem.textContent;
4f2589 503     /*
095119 504     var titelName = elem.attributes.dateiName.nodeValue;
U 505     var album = elem.attributes.album.nodeValue;
506     var interpret = elem.attributes.interpret.nodeValue;
507     var anzName = elem.attributes.titelAnzName.nodeValue;
508     var titel;
509     if(self.mediaPfad.endsWith('/')) {
510       titel = new Titel(titelName, self.mediaPfad, self.ortPfad, interpret, anzName, album);
511     } else {
512       titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad, interpret, anzName, album);
513     }
4f2589 514     */
095119 515     var plname = document.querySelector('#playlist').value;
960359 516     self.http_put('api/alist/' + plname, JSON.stringify(titel), function(responseText) {
095119 517       //self.meldung_mit_timeout(responseText, 1500);
U 518     });
519   };  
520   
521   this.titelWeg = function() {
522     var elem = document.querySelector(".selected");
523     var parentElem = elem.parentNode;
524     //console.log("elem: " + elem.nodeName + ", parent: " + parentElem.nodeName + ", len: " + parentElem.childNodes.length);
525     var liElems = parentElem.getElementsByTagName(elem.nodeName); // nur die LI Elemente
526     //console.log("liElems.anz: " + liElems.length);
527     var gefunden = false;
528     for(var i = 0; i < liElems.length && !gefunden; i++) {
529       //console.log(liElems.item(i).textContent);
530       if(liElems.item(i).classList.contains("selected")) {
531         gefunden = true;
532         var index = i;
533         //console.log(elem.textContent + ' hat Index ' + i);
534       }
535     }
536     // /mz/api/alist/[pl-name]/[nr] 
537     var plname = document.querySelector('#playlist').value;
960359 538     self.http_delete('api/alist/' + plname + '/' + index,'', function(responseText) {
095119 539       // DELETE    http://localhost:9090/mz/api/alist/liste1/0
U 540       //self.meldung_mit_timeout(responseText, 1500);
541       self.titel_liste();
542     });
543     
b56bb3 544   };
U 545   
748b6f 546   /* ------------- Helfer fuer Entitaets-Formulare ----------------------- */
14638b 547   
U 548   /*
549    * url: '../api/store/Ablageort/liste/'
78d707 550    * tpl: "data/tpl/ablageort_liste.txt"
14638b 551    * storeUrl: '../api/store/Ablageort/'
U 552    * formFunc: "self.ablageort_form"
553    * cb: etwas wie
554    *   function(responseText){
555    *     var ablageort = JSON.parse(responseText);
556    *     self.ablageort_form(ablageort);
557    *   });
39ebae 558    */  
849ee2 559   this.entitaet_liste = function(bname, listUrl, tpl, storeUrl, formFunc, cb, customListCode) {
14638b 560     self.reset_top_buttons();
50e53e 561     document.querySelector('.bereich-name').textContent = bname;
78d707 562     var bb = document.querySelector('.breadcrumb-behaelter');
U 563     bb.textContent = "";
14638b 564     self.http_get(listUrl, function (responseText) {
2af7d6 565       self.html_erzeugen(tpl, JSON.parse(responseText), function (html) {
14638b 566         document.querySelector(".zentraler-inhalt").innerHTML = html;
U 567         self.addEvtListener('.entity-eintrag', 'click', function (event) {
568           var t = event.target;
569           self.http_get(storeUrl + t.textContent, cb);
570         });
571         //self.addEvtListener('#neu-btn', 'click', function (event) {
572         self.addEvtListener('#top-neu-btn', 'click', function(event) {
573           eval(formFunc + "(this)");
849ee2 574         });                
U 575         if(typeof(customListCode) !== 'function') {
576           // ..
577         } else {
578           customListCode();
579         }        
14638b 580       });
U 581     });
582   };  
748b6f 583       
48f8f9 584   /*
c7030d 585    * dat: gefuelltes Datenobjekt bei Aenderung
U 586    * key: der alte schluesselbegriff bei Aenderung (z.B. al.name)
78d707 587    * tpl: "data/tpl/form_abspielliste.txt"
c7030d 588    * url: '../api/store/Abspielliste/'
U 589    * selector: '#abspielliste-name'
590    * cbOk: etwas wie
591    *    function() {
592    *       self.abspielliste_auswahl_fuellen();
593    *       self.abspielliste_liste();
594    *     });
595    * delSelector: '#abspielliste-name'
596    * cbDel: etwas wie
597    *    function() {
598    *       self.abspielliste_auswahl_fuellen();
599    *       self.abspielliste_liste();
600    *     });
601    */
602
960317 603   this.entitaet_form = function(bname, dat, key, tpl, url, selector, keyname, cb) {
50e53e 604     document.querySelector('.bereich-name').textContent = bname;
2af7d6 605     self.html_erzeugen(tpl, dat, function (html) {
c7030d 606       document.querySelector(".zentraler-inhalt").innerHTML = html;
U 607       const form = document.querySelector('form');      
608       form.addEventListener('submit', function(event) {
960317 609         self.handle_submit(event, key, url, selector, keyname, cb);
c7030d 610       });
U 611       self.addEvtListener('#cancel-btn', 'click', cb);
612       self.addEvtListener('#loeschen-btn', 'click', function(event) {
613         event.preventDefault();
614         self.handle_del_btn(selector, url, cb);
615       });
616     });
617   };
618   
619   /*
48f8f9 620    * existingKey: wenn die Entitaet existiert und geandert werden soll
U 621    *                 leer, wenn neue Entitaet 
622    */
960317 623   this.handle_submit = function(event, existingKey, putUrl, keySelector, keyname, cb) {
48f8f9 624     event.preventDefault();
U 625     const data = new FormData(event.target);
626     const value = Object.fromEntries(data.entries());
627     var formkey = document.querySelector(keySelector).value;
960317 628     formkey = formkey.replace(' ', '');
U 629     formkey = formkey.replace(/[\W]+/g, '');
630     value[keyname] = formkey;
631     var daten = JSON.stringify(value);
48f8f9 632     if(typeof existingKey === "undefined" ||  existingKey.length < 1) {
U 633       // neu
634       self.http_put(putUrl + formkey, daten, function (responseText) {
635         if(typeof(cb) !== 'function') {
636           // ..
637         } else {
638           cb();
639         }
640       });
641     } else {
642       // aendern
643       self.http_put(putUrl + existingKey, daten, function (responseText) {
644         if(typeof(cb) !== 'function') {
645           // ..
646         } else {
647           cb();
648         }
649       });
650     }
651   };
652   
653   this.handle_del_btn = function(selectorKey, delUrl, cb) {
654     var pkey = document.querySelector(selectorKey).value;
655     var dlgdata = {"del-elem": pkey};
78d707 656     self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.txt', dlgdata, function() {
48f8f9 657       self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
U 658       self.addEvtListener('#ja-btn', 'click', function(event) {
095119 659         //console.log("loeschen geklickt.");
48f8f9 660         self.http_delete(delUrl + pkey, '', function (responseText) {
U 661           self.dialog_schliessen();
662           if(typeof(cb) !== 'function') {
663             // ..
664           } else {
665             cb();
666           }
667         });
668       });
669     });    
670   };  
748b6f 671   
U 672   /* ------------------ sonstige Helfer ----------------------- */
673       
7c22a2 674   this.addEvtListener = function(selector, eventName, func) {
U 675     document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
676   };
677   
678   this.removeClassMulti = function(selector) {
679     document.querySelectorAll('.' + selector).forEach(elem => { elem.classList.remove(selector); });
680   };
4f2589 681   
U 682   self.titelErmitteln = function(elem) {
683     var titelName = elem.attributes.dateiName.nodeValue;
684     var album = elem.attributes.album.nodeValue;
685     var interpret = elem.attributes.interpret.nodeValue;
686     var anzName = elem.attributes.titelAnzName.nodeValue;
687     var titel;
688     if(self.mediaPfad.endsWith('/')) {
689       titel = new Titel(titelName, self.mediaPfad, self.ortPfad, interpret, anzName, album);
690     } else {
691       titel = new Titel(titelName, self.mediaPfad + '/', self.ortPfad, interpret, anzName, album);
692     }
693     return titel;
694   };
7c22a2 695
f45e20 696   /* --------------------- asynchroner HTTP Client ----------------- */
faab2d 697   
f074f6 698   this.http_get = function (u, cb) {
b379f5 699     self.http_call('GET', u, null, cb);
U 700   };
f074f6 701
U 702   this.http_post = function (u, data, cb) {
b379f5 703     self.http_call('POST', u, data, cb);
U 704   };
705
90f5d4 706   this.http_put = function (u, data, cb) {
U 707     self.http_call('PUT', u, data, cb);
708   };
709   
5b7356 710   this.http_delete = function (u, data, cb) {
5f7e0b 711     // console.log("delete " + u);
5b7356 712     self.http_call('DELETE', u, data, cb);
U 713   };
714   
f074f6 715   this.http_call = function (method, u, data, scallback) {
b379f5 716     var xhr = new XMLHttpRequest();
U 717     var url = u;
f074f6 718     xhr.onreadystatechange = function () {
b379f5 719       if (this.readyState === 4 && this.status === 200) {
U 720         scallback(this.responseText);
721       }
722     };
723     xhr.open(method, url);
f074f6 724     if (method === 'GET') {
b379f5 725       xhr.send();
2597cd 726     } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
b379f5 727       xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
U 728       xhr.send(data);
729     }
730   };
8239d1 731   
f45e20 732   /* ------------------------ aus App-Vorlage -------------------  */
cfa858 733
f074f6 734   this.menue_umschalten = function () {
cfa858 735     var ham = document.querySelector(".hamburger");
U 736     ham.classList.toggle("is-active"); // hamburger-icon umschalten
737     self.appMenu.toggle(); // menue oeffnen/schliessen
738   };
739
f074f6 740   this.info_dialog_zeigen = function () {
78d707 741     self.dialog_laden_und_zeigen('data/tpl/dlg-info.txt', '');
cfa858 742     self.menue_umschalten();
U 743   };
744
f074f6 745   this.seitenleiste_umschalten = function () {
cfa858 746     var ostDiv = document.querySelector('.ost');
f074f6 747     if (ostDiv.classList.contains('ost-open')) {
cfa858 748       ostDiv.classList.remove('ost-open');
f074f6 749       ostDiv.style.flexBasis = '0em';
cfa858 750     } else {
f074f6 751       ostDiv.classList.add('ost-open');
U 752       ostDiv.style.flexBasis = '6em';
cfa858 753     }
U 754     self.menue_umschalten();
755   };
756
f074f6 757   this.fusszeile_umschalten = function () {
cfa858 758     var suedDiv = document.querySelector('.sued');
f074f6 759     if (suedDiv.classList.contains('sued-open')) {
cfa858 760       suedDiv.classList.remove('sued-open');
f074f6 761       suedDiv.style.height = '0';
cfa858 762     } else {
U 763       suedDiv.classList.add('sued-open');
f074f6 764       suedDiv.style.height = '1.5em';
cfa858 765     }
U 766     self.menue_umschalten();
767   };
768
f074f6 769   this.menu_message = function (msg) {
cfa858 770     self.meldung_mit_timeout(msg, 1500);
U 771     var suedDiv = document.querySelector('.sued');
f074f6 772     if (suedDiv.classList.contains('sued-open')) {
cfa858 773     } else {
U 774       suedDiv.classList.add('sued-open');
f074f6 775       suedDiv.style.height = '1.5em';
cfa858 776     }
U 777     self.menue_umschalten();
778   };
779
f074f6 780   this.message_1 = function () {
cfa858 781     self.menu_message('Eine Mitteilung.');
U 782   };
783
f074f6 784   this.message_2 = function () {
cfa858 785     self.menu_message('Was wir schon immer sagen wollten.');
U 786   };
787
f074f6 788   this.message_3 = function (text) {
cfa858 789     self.menu_message(text);
U 790   };
791
f074f6 792   this.meldung_mit_timeout = function (meldung, timeout) {
cfa858 793     var s = document.querySelector('.sued');
a43e1a 794     s.classList.add('sued-open');
U 795     s.style.height = '1.5em';
cfa858 796     s.textContent = meldung;
f074f6 797     setTimeout(function () {
cfa858 798       s.textContent = 'Bereit.';
f074f6 799       setTimeout(function () {
cfa858 800         var suedDiv = document.querySelector('.sued');
f074f6 801         if (suedDiv.classList.contains('sued-open')) {
U 802           suedDiv.classList.remove('sued-open');
803           suedDiv.style.height = '0';
cfa858 804         }
U 805       }, 500);
806     }, timeout);
807   };
8239d1 808   
f45e20 809   /* --------------------- Dialog-Funktionen ------------------------ */
cfa858 810
U 811   /*
f074f6 812    Einen Dialog aus Vorlagen erzeugen
U 813    
814    vurl - URL zur Dialogvorlage
815    msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
816    */
5b7356 817   this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) {
U 818     var vorlage = self.cache[vurl];
819     if(vorlage === undefined) {
820       self.http_get(vurl, function(antwort) {
821         self.cache[vurl] = antwort;
822         self.dialog_zeigen(vurl, msgTpl, cb);
f074f6 823       });
cfa858 824     } else {
5b7356 825       self.dialog_zeigen(vurl, msgTpl, cb);
cfa858 826     }
U 827   };
828
5b7356 829   this.dialog_zeigen = function (vurl, inhalt, cb) {
U 830     var dlg = document.querySelector(".dialog");
2597cd 831     self.html_erzeugen(vurl, inhalt, function (html) {
U 832       dlg.style.height = '7em';
833       dlg.innerHTML = html;
834       document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
835       if(typeof(cb) !== 'function') {
836         // ..
837       } else {
838         cb();
839       }
840     });
5b7356 841   };
2597cd 842   
f45e20 843   this.dialog_schliessen = function () {
cfa858 844     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 845     var dlg = document.querySelector('.dialog');
846     dlg.style.height = '0';
847     dlg.innerHTML = '';
848   };
849
f45e20 850   /* ---------------------   Vorlagen   ---------------------- */
cfa858 851
U 852   /*
f074f6 853    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
U 854    gefüllt wird
855    
856    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
857    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
858    Das fertige HTML wird der Callback-Funktion übergeben
859    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
860    Programmlauf zu diesem Zeitpunkt mittlerweile ist.
861    
862    vurl - URL zur Vorlagendatei
863    inhalt - die JSON-Struktur, deren Inhalt in die
864    Vorlage gefüllt werden soll
865    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
866    Dieser Callback-Funktion wird das fertige HTML übergeben
867    */
868   this.html_erzeugen = function (vurl, inhalt, cb) {
cfa858 869     var vorlage = self.cache[vurl];
f074f6 870     if (vorlage === undefined) {
cfa858 871       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
U 872     } else {
873       self.vorlage_fuellen(vurl, inhalt, cb);
874     }
875   };
876
f074f6 877   this.vorlage_fuellen = function (vurl, inhalt, cb) {
cfa858 878     cb(Mustache.render(self.cache[vurl], inhalt));
U 879   };
880
881   /*
f074f6 882    Eine Vorlage vom Server in den lokalen Speicher laden
U 883    vurl - der URL unter dem die Vorlage zu finden ist
884    inhalt - die JSON-Struktur, deren Inhalt in die
885    Vorlage gefüllt werden soll
886    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
887    Inhalt gefüllt ist
888    */
889   this.vorlage_laden_und_fuellen = function (vurl, inhalt, cb) {
cfa858 890     var xmlhttp = new XMLHttpRequest();
f074f6 891     xmlhttp.onreadystatechange = function () {
cfa858 892       if (this.readyState == 4 && this.status == 200) {
U 893         self.cache[vurl] = this.responseText;
894         self.vorlage_fuellen(vurl, inhalt, cb);
895       }
896     };
897     xmlhttp.open("GET", vurl, true);
898     xmlhttp.send();
899   };
900
901
902 }
903
f45e20 904 /* ----------- Objekte ---------------- */
U 905
906 function Ablageort(n, o, u) {
907   this.name = n;
908   this.ort = o;
909   this.url = u;
910 }
911
912 function Einstellung(k, v) {
913   this.key = k;
914   this.value = v;
915 }
916
917 function Abspieler(n, u) {
918   this.name = n;
919   this.url = u;
8d7d35 920 }
U 921
d027b5 922 function Livestream(n, u) {
U 923   this.name = n;
924   this.url = u;
925 }
926
8d7d35 927 function Abspielliste(n) {
U 928   this.name = n;
e60cff 929 }
U 930
245ac1 931 function Titel(n, p, u, i, t, a) {
e60cff 932   this.katalogUrl = u;
2bdd78 933   this.pfad = p;
e60cff 934   this.name = n;
245ac1 935   this.interpret = i;
U 936   this.titelAnzName = t;
937   this.album  = a;
3929b0 938 }
U 939
a29f5c 940 function Geraet(n, e, a, s, st) {
3929b0 941   this.name = n;
U 942   this.einUrl = e;
943   this.ausUrl = a;
944   this.statusUrl = s;
a29f5c 945   this.status = st;
d6b78c 946 }