Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-08 fcc734a744409e307d334a1f8f4bfcfc0a319cb1
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;
f45e20 9
U 10   this.init = function () {
11     self.mediaPfad = '/';
12     self.ortPfad = '/';
13     self.cache = new Array();
14     self.appMenu = new AppMenu();
15     self.appMenu.init(
16             "data/menu/",
17             "hauptmenue.json",
18             "data/tpl/app-menu.tpl",
19             ".west",
20             "8em");
21
22     document.querySelector('.hamburger').addEventListener('click', function (e) {
23       self.menue_umschalten();
24     });
25     
26     self.addEvtListener('#mi-katalog', 'click', self.media_liste);
27     self.addEvtListener('#mi-orte', 'click', self.ablageort_liste);
28     self.addEvtListener('#mi-prefs', 'click', self.prefs_liste);
29     self.addEvtListener('#mi-player', 'click', self.abspieler_liste);
8d7d35 30     self.addEvtListener('#mi-listen', 'click', self.abspielliste_liste);
U 31     self.addEvtListener('#mi-list', 'click', self.titel_liste);
f45e20 32     
U 33     self.fusszeile_umschalten();
34     self.seitenleiste_umschalten();
35     self.dialog_unten_zeigen();
36   };
37   
38   this.abspieler_auswahl_fuellen = function() {
39     self.http_get('../api/store/Abspieler/', function (responseText) {
40       /*
41        {"ArrayList": [{"name":"Wohnz","url":"http://rpi4-wz:9090/"},{"name":"Arbz","url":"http://rpi4-az:9090/"}]}
42        */
43       self.vorlage_laden_und_fuellen("data/tpl/abs_sel.tpl", JSON.parse(responseText), function (html) {
44         document.querySelector(".abs-sel").innerHTML = html;
45       });    
46     });
47   };
48
8d7d35 49   this.abspielliste_auswahl_fuellen = function() {
U 50     self.http_get('../api/store/Abspielliste/', function (responseText) {
51       /*
52           ?
53        */
54       self.vorlage_laden_und_fuellen("data/tpl/pl_sel.tpl", JSON.parse(responseText), function (html) {
55         document.querySelector(".pl-sel").innerHTML = html;
56       });    
57     });
58   };
59   
f45e20 60   /* Unterer Einblendbereich */
U 61   
62   this.dialog_unten_zeigen = function() {
63     self.vorlage_laden_und_fuellen("data/tpl/ctrl.tpl", "", function (html) {
64       var dlg = document.querySelector(".dialog-unten");
65       dlg.style.height = '4.5em';
66       dlg.innerHTML = html;
67       self.abspieler_auswahl_fuellen();
8d7d35 68       self.abspielliste_auswahl_fuellen();
e60cff 69       self.addEvtListener('#dazu-btn', 'click', self.addSelectedTitel);
8d7d35 70       self.media_liste();
f45e20 71     });
U 72   };
73
8d7d35 74   /* ---------------- Titel einer Abspielliste ----------------- */
U 75   
76   this.titel_liste = function() {
fcc734 77     self.reset_top_buttons();
U 78     var plname = document.querySelector('#playlist').value;
79     self.http_get('../api/alist/' + plname, function (responseText) {
80       self.vorlage_laden_und_fuellen("data/tpl/titel_liste.tpl", JSON.parse(responseText), function (html) {
8d7d35 81         document.querySelector(".zentraler-inhalt").innerHTML = html;
U 82         self.addEvtListener('.entity-eintrag', 'click', function (event) {
83           var t = event.target;
fcc734 84           self.removeClassMulti('selected');
U 85           t.classList.add('selected');
86
87           /*
8d7d35 88           self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText){
U 89             var ablageort = JSON.parse(responseText);
90             self.ablageort_form(ablageort);
91           });
fcc734 92           */
8d7d35 93         });
fcc734 94         /*
8d7d35 95         self.addEvtListener('#neu-btn', 'click', function (event) {
U 96           eval("self.ablageort_form" + "(this)");
fcc734 97         });
U 98         */
8d7d35 99       });
U 100     });
101   };
102     
103   /* ---------------- Entitaets-Listen ----------------- */
104
105   self.reset_top_buttons = function() {
106     self.vorlage_laden_und_fuellen("data/tpl/top_btns.tpl", '', function (html) {
107       document.querySelector(".top-btns").innerHTML = html;
108     });
109   };
86bbf7 110   
U 111   // auf der obersten Ebene werden die Kataloge angezeigt,
112   // darunter der Inhalt des aktuellen Pfades
113   this.media_liste = function() {
8d7d35 114     self.reset_top_buttons();
86bbf7 115     if(self.ortPfad === '/') {
U 116       // Kataloge listen
f45e20 117       self.http_get('../api/store/Ablageort/liste/', function (responseText) {
8d7d35 118         //document.querySelector('#top-up-btn').removeEventListener('click', self.media_liste_herauf);
86bbf7 119         self.vorlage_laden_und_fuellen("data/tpl/katalog_root_liste.tpl", JSON.parse(responseText), function (html) {
U 120           document.querySelector(".zentraler-inhalt").innerHTML = html;
121           self.addEvtListener('.entity-eintrag', 'click', function (event) {
122             var t = event.target;
123             self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText) {
124               var ablageort = JSON.parse(responseText);
125               self.ortPfad = ablageort.url;
126               self.media_liste();
127             });
128           });
129         });
130       });
131     } else {
3271f1 132       var url = '..' + self.ortPfad + self.mediaPfad;
U 133       if(!url.endsWith('/')) {
134         url = url + '/';
135       }
136       self.http_get(url, function(responseText) {
86bbf7 137         self.vorlage_laden_und_fuellen("data/tpl/katalog_inhalt_liste.tpl", JSON.parse(responseText), function (html) {
U 138           document.querySelector(".zentraler-inhalt").innerHTML = html;
139           self.addEvtListener('.entity-eintrag', 'click', function (event) {
140             var t = event.target;
3271f1 141             var tx = t.textContent;
86bbf7 142             if(t.classList.contains("entity-typ-folder")) {
3271f1 143               if(self.mediaPfad.endsWith('/')) {
U 144                 self.mediaPfad = self.mediaPfad + tx;                
145               } else {
146                 self.mediaPfad = self.mediaPfad + '/' + tx;
147               }
86bbf7 148               self.media_liste();
U 149             } else {
7c22a2 150               self.removeClassMulti('selected');
U 151               t.classList.add('selected');
e60cff 152               //self.selTitel = new Titel(t.textContent, self.ortPfad);       
86bbf7 153             }
U 154           });
8d7d35 155           self.addEvtListener('#top-up-btn', 'click', function(event) {
86bbf7 156             if(self.mediaPfad === '/') {
U 157               self.ortPfad = '/';              
158             } else {
159               var pos = self.mediaPfad.lastIndexOf('/');
3271f1 160               var parent;
U 161               if(pos > 1) {
162                 parent = self.mediaPfad.substring(0, pos);
163               } else {
164                 parent = '/';
165               }
86bbf7 166               self.mediaPfad = parent;
U 167             }
168             self.media_liste();
8d7d35 169           });
86bbf7 170         });
U 171       });
172     }
e60cff 173   };
U 174   
175   this.addSelectedTitel = function() {
176     var titelName = document.querySelector(".selected").textContent;
fcc734 177     var titel;
U 178     if(self.mediaPfad.endsWith('/')) {
179       titel = new Titel(self.mediaPfad + titelName, self.ortPfad);
180     } else {
181       titel = new Titel(self.mediaPfad + '/' + titelName, self.ortPfad);
182     }
e60cff 183     var plname = document.querySelector('#playlist').value;
U 184     self.http_put('../api/alist/' + plname, JSON.stringify(titel), function(responseText) {
8e2578 185       self.meldung_mit_timeout(responseText, 1500);
e60cff 186     });
86bbf7 187   };
cfa858 188
a43e1a 189   this.ablageort_liste = function() {
8d7d35 190     self.reset_top_buttons();
f45e20 191     self.http_get('../api/store/Ablageort/liste/', function (responseText) {
a43e1a 192       self.vorlage_laden_und_fuellen("data/tpl/ablageort_liste.tpl", JSON.parse(responseText), function (html) {
U 193         document.querySelector(".zentraler-inhalt").innerHTML = html;
194         self.addEvtListener('.entity-eintrag', 'click', function (event) {
195           var t = event.target;
90f5d4 196           self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText){
86bbf7 197             var ablageort = JSON.parse(responseText);
90f5d4 198             self.ablageort_form(ablageort);
U 199           });
a43e1a 200         });
8d7d35 201         //self.addEvtListener('#neu-btn', 'click', function (event) {
U 202         self.addEvtListener('#top-neu-btn', 'click', function(event) {
faab2d 203           eval("self.ablageort_form" + "(this)");
U 204         });        
cf6509 205       });
U 206     });
207   };
208
209   this.prefs_liste = function() {
8d7d35 210     self.reset_top_buttons();
f45e20 211     self.http_get('../api/store/Einstellung/liste/', function (responseText) {
cf6509 212       self.vorlage_laden_und_fuellen("data/tpl/einstellung_liste.tpl", JSON.parse(responseText), function (html) {
U 213         document.querySelector(".zentraler-inhalt").innerHTML = html;
214         self.addEvtListener('.entity-eintrag', 'click', function (event) {
215           var t = event.target;
216           self.http_get('../api/store/Einstellung/' + t.textContent, function(responseText){
217             var einstellung = JSON.parse(responseText);
218             self.prefs_form(einstellung);
219           });
220         });
8d7d35 221         self.addEvtListener('#top-neu-btn', 'click', function(event) {
cf6509 222           eval("self.prefs_form" + "(this)");
U 223         });        
224       });
225     });
226   };
227
3d4bca 228   this.abspieler_liste = function() {
f45e20 229     self.http_get('../api/store/Abspieler/liste/', function (responseText) {
3d4bca 230       self.vorlage_laden_und_fuellen("data/tpl/abspieler_liste.tpl", JSON.parse(responseText), function (html) {
U 231         document.querySelector(".zentraler-inhalt").innerHTML = html;
232         self.addEvtListener('.entity-eintrag', 'click', function (event) {
233           var t = event.target;
234           self.http_get('../api/store/Abspieler/' + t.textContent, function(responseText){
235             var abspieler = JSON.parse(responseText);
236             self.abspieler_form(abspieler);
237           });
238         });
8d7d35 239         self.addEvtListener('#neu-btn', 'click', function(event) {
3d4bca 240           eval("self.abspieler_form" + "(this)");
8d7d35 241         });           
U 242       });
243     });
244   };
245   
246   this.abspielliste_liste = function() {
247     self.http_get('../api/store/Abspielliste/liste/', function (responseText) {
248       self.vorlage_laden_und_fuellen("data/tpl/abspielliste_liste.tpl", JSON.parse(responseText), function (html) {
249         document.querySelector(".zentraler-inhalt").innerHTML = html;
250         self.addEvtListener('.entity-eintrag', 'click', function (event) {
251           var t = event.target;
252           self.http_get('../api/store/Abspielliste/' + t.textContent, function(responseText){
253             var abspielliste = JSON.parse(responseText);
254             self.abspielliste_form(abspielliste);
255           });
256         });
257         self.addEvtListener('#top-neu-btn', 'click', function(event) {
258           eval("self.abspielliste_form" + "(this)");
259         });            
260       });
261     });
262   };
263   
264   /* -------------------- Entitaets-Formulare ------------------ */
265   
266   this.abspielliste_form = function(al) {
267     self.vorlage_laden_und_fuellen("data/tpl/form_abspielliste.tpl", al, function (html) {
268       document.querySelector(".zentraler-inhalt").innerHTML = html;
269       self.addEvtListener('#ok-btn', 'click', function () {
270         var alname = document.querySelector('#abspielliste-name').value;
271         alname = alname.replace(' ', '').replace(/[\W]+/g, '');
272         var abspielliste = new Abspielliste(
273           alname
274         );
275         var daten = JSON.stringify(abspielliste);        
276         //if(typeof pl === "undefined" || pl.key !== plname) {
277         if(typeof al.name === "undefined" || al.name.length < 1) {
278           // neu
279           self.http_put('../api/store/Abspielliste/' + alname, daten, function (responseText) {
280             // hier die Antwort verarbeiten
281             self.abspielliste_auswahl_fuellen();
282             self.abspielliste_liste();
283           });
284         } else {
285           // aendern
286           self.http_put('../api/store/Abspielliste/' + al.name, daten, function (responseText) {
287             // hier die Antwort verarbeiten
288             self.abspielliste_auswahl_fuellen();
289             self.abspielliste_liste();
290           });
291         }
292       });
293       self.addEvtListener('#cancel-btn', 'click', function () {
294         //document.querySelector(".zentraler-inhalt").innerHTML = '';
295         self.abspielliste_liste();
296       });
297       self.addEvtListener('#loeschen-btn', 'click', function() {
298         var alname = document.querySelector('#abspielliste-name').value;
299         var dlgdata = {"del-elem": alname};
300         self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
301           self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
302           self.addEvtListener('#ja-btn', 'click', function() {
303             self.http_delete('../api/store/Abspielliste/' + alname, '', function (responseText) {
304               // hier die Antwort verarbeiten
305               self.dialog_schliessen();
306               //document.querySelector(".zentraler-inhalt").innerHTML = '';
307               self.abspielliste_auswahl_fuellen();
308               self.abspielliste_liste();
309             });
310           });
311         });
3d4bca 312       });
U 313     });
314   };
315
316   this.abspieler_form = function(pl) {
317     self.vorlage_laden_und_fuellen("data/tpl/form_abspieler.tpl", pl, function (html) {
318       document.querySelector(".zentraler-inhalt").innerHTML = html;
319       self.addEvtListener('#ok-btn', 'click', function () {
320         var plname = document.querySelector('#abspieler-name').value;
321         plname = plname.replace(' ', '').replace(/[\W]+/g, '');
322         var abspieler = new Abspieler(
323           plname,
324           document.querySelector('#abspieler-url').value
325         );
326         var daten = JSON.stringify(abspieler);        
dfb7d3 327         //if(typeof pl === "undefined" || pl.key !== plname) {
U 328         if(typeof pl.name === "undefined" || pl.name.length < 1) {
3d4bca 329           // neu
dfb7d3 330           self.http_put('../api/store/Abspieler/' + plname, daten, function (responseText) {
3d4bca 331             // hier die Antwort verarbeiten
dfb7d3 332             self.abspieler_auswahl_fuellen();
U 333             self.abspieler_liste();
3d4bca 334           });
U 335         } else {
336           // aendern
dfb7d3 337           self.http_put('../api/store/Abspieler/' + pl.name, daten, function (responseText) {
3d4bca 338             // hier die Antwort verarbeiten
dfb7d3 339             self.abspieler_auswahl_fuellen();
U 340             self.abspieler_liste();
3d4bca 341           });
U 342         }
343       });
344       self.addEvtListener('#cancel-btn', 'click', function () {
345         //document.querySelector(".zentraler-inhalt").innerHTML = '';
346         self.abspieler_liste();
347       });
348       self.addEvtListener('#loeschen-btn', 'click', function() {
349         var plname = document.querySelector('#abspieler-name').value;
350         var dlgdata = {"del-elem": plname};
351         self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
352           self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
353           self.addEvtListener('#ja-btn', 'click', function() {
354             self.http_delete('../api/store/Abspieler/' + plname, '', function (responseText) {
355               // hier die Antwort verarbeiten
356               self.dialog_schliessen();
357               //document.querySelector(".zentraler-inhalt").innerHTML = '';
dfb7d3 358               self.abspieler_auswahl_fuellen();
3d4bca 359               self.abspieler_liste();
U 360             });
361           });
362         });
363       });
364     });
365   };
cf6509 366
U 367   this.prefs_form = function(k) {
368     self.vorlage_laden_und_fuellen("data/tpl/form_einstellung.tpl", k, function (html) {
369       document.querySelector(".zentraler-inhalt").innerHTML = html;
370       self.addEvtListener('#ok-btn', 'click', function () {
371         var pkey = document.querySelector('#einstellung-key').value;
372         pkey = pkey.replace(' ', '').replace(/[\W]+/g, '');
373         var pref = new Einstellung(
374           pkey,
375           document.querySelector('#einstellung-value').value
376         );
377         var daten = JSON.stringify(pref);        
dfb7d3 378         //if(typeof k === "undefined" || k.key !== pkey) {
U 379         if(typeof k.key === "undefined" ||  k.key.length < 1) {
cf6509 380           // neu
dfb7d3 381           self.http_put('../api/store/Einstellung/' + pkey, daten, function (responseText) {
cf6509 382             // hier die Antwort verarbeiten
dfb7d3 383             self.prefs_liste();
cf6509 384           });
U 385         } else {
386           // aendern
dfb7d3 387           self.http_put('../api/store/Einstellung/' + k.key, daten, function (responseText) {
cf6509 388             // hier die Antwort verarbeiten
dfb7d3 389             self.prefs_liste();
cf6509 390           });
U 391         }
392       });
393       self.addEvtListener('#cancel-btn', 'click', function () {
394         //document.querySelector(".zentraler-inhalt").innerHTML = '';
395         self.prefs_liste();
396       });
397       self.addEvtListener('#loeschen-btn', 'click', function() {
398         var pkey = document.querySelector('#einstellung-key').value;
399         var dlgdata = {"del-elem": pkey};
400         self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
401           self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
402           self.addEvtListener('#ja-btn', 'click', function() {
403             self.http_delete('../api/store/Einstellung/' + pkey, '', function (responseText) {
404               // hier die Antwort verarbeiten
405               self.dialog_schliessen();
406               //document.querySelector(".zentraler-inhalt").innerHTML = '';
407               self.prefs_liste();
408             });
409           });
410         });
a43e1a 411       });
U 412     });
413   };
cfa858 414
90f5d4 415   /* 
U 416    * Ablageort-Formular anzeigen
417    * 
418    * {"name":"Katalog 2","ort":"/home/ulrich/Videos","url":"/media/kat2"}: 
419    * 
420    * @param {type} ablageort  der Ablageort, der bearbeitet werden soll, leer fuer neuen Ort
421    * @returns {undefined} kein Rueckgabewert
422    */
423   this.ablageort_form = function(ort) {
424     self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", ort, function (html) {
b379f5 425       document.querySelector(".zentraler-inhalt").innerHTML = html;
f074f6 426       self.addEvtListener('#ok-btn', 'click', function () {
2597cd 427         var aName = document.querySelector('#ablageort-name').value;
U 428         aName = aName.replace(' ', '').replace(/[\W]+/g, '');
b379f5 429         var a = new Ablageort(
2597cd 430           aName,
b379f5 431           document.querySelector('#ablageort-ort').value,
U 432           document.querySelector('#ablageort-url').value
433         );
90f5d4 434         var daten = JSON.stringify(a);        
dfb7d3 435         //if(typeof ort === "undefined" || ort.name !== aName) {
U 436         if(typeof ort.name === "undefined"  || ort.name.length < 1) {
2597cd 437           // neu
dfb7d3 438           self.http_put('../api/store/Ablageort/' + aName, daten, function (responseText) {
90f5d4 439             // hier die Antwort verarbeiten
dfb7d3 440             self.ablageort_liste();
90f5d4 441           });
U 442         } else {
2597cd 443           // aendern
dfb7d3 444           self.http_put('../api/store/Ablageort/' + ort.name, daten, function (responseText) {
90f5d4 445             // hier die Antwort verarbeiten
dfb7d3 446             self.ablageort_liste();
90f5d4 447           });
U 448         }
b379f5 449       });
f074f6 450       self.addEvtListener('#cancel-btn', 'click', function () {
b29119 451         //document.querySelector(".zentraler-inhalt").innerHTML = '';
faab2d 452         self.ablageort_liste();
5b7356 453       });
U 454       self.addEvtListener('#loeschen-btn', 'click', function() {
455         var aoname = document.querySelector('#ablageort-name').value;
456         var dlgdata = {"del-elem": aoname};
457         self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
458           self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
459           self.addEvtListener('#ja-btn', 'click', function() {
90f5d4 460             self.http_delete('../api/store/Ablageort/' + aoname, '', function (responseText) {
U 461               // hier die Antwort verarbeiten
2597cd 462               self.dialog_schliessen();
b29119 463               //document.querySelector(".zentraler-inhalt").innerHTML = '';
faab2d 464               self.ablageort_liste();
90f5d4 465             });
5b7356 466           });
U 467         });
b379f5 468       });
U 469     });
470   };
471
7c22a2 472   this.addEvtListener = function(selector, eventName, func) {
U 473     document.querySelectorAll(selector).forEach(elem => { elem.addEventListener(eventName, func); });
474   };
475   
476   this.removeClassMulti = function(selector) {
477     document.querySelectorAll('.' + selector).forEach(elem => { elem.classList.remove(selector); });
478   };
479
f45e20 480   /* --------------------- asynchroner HTTP Client ----------------- */
faab2d 481   
f074f6 482   this.http_get = function (u, cb) {
b379f5 483     self.http_call('GET', u, null, cb);
U 484   };
f074f6 485
U 486   this.http_post = function (u, data, cb) {
b379f5 487     self.http_call('POST', u, data, cb);
U 488   };
489
90f5d4 490   this.http_put = function (u, data, cb) {
U 491     self.http_call('PUT', u, data, cb);
492   };
493   
5b7356 494   this.http_delete = function (u, data, cb) {
2597cd 495     console.log("delete " + u);
5b7356 496     self.http_call('DELETE', u, data, cb);
U 497   };
498   
f074f6 499   this.http_call = function (method, u, data, scallback) {
b379f5 500     var xhr = new XMLHttpRequest();
U 501     var url = u;
f074f6 502     xhr.onreadystatechange = function () {
b379f5 503       if (this.readyState === 4 && this.status === 200) {
U 504         scallback(this.responseText);
505       }
506     };
507     xhr.open(method, url);
f074f6 508     if (method === 'GET') {
b379f5 509       xhr.send();
2597cd 510     } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
b379f5 511       xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
U 512       xhr.send(data);
513     }
514   };
8239d1 515   
f45e20 516   /* ------------------------ aus App-Vorlage -------------------  */
cfa858 517
f074f6 518   this.menue_umschalten = function () {
cfa858 519     var ham = document.querySelector(".hamburger");
U 520     ham.classList.toggle("is-active"); // hamburger-icon umschalten
521     self.appMenu.toggle(); // menue oeffnen/schliessen
522   };
523
f074f6 524   this.info_dialog_zeigen = function () {
cfa858 525     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
U 526     self.menue_umschalten();
527   };
528
f074f6 529   this.seitenleiste_umschalten = function () {
cfa858 530     var ostDiv = document.querySelector('.ost');
f074f6 531     if (ostDiv.classList.contains('ost-open')) {
cfa858 532       ostDiv.classList.remove('ost-open');
f074f6 533       ostDiv.style.flexBasis = '0em';
cfa858 534     } else {
f074f6 535       ostDiv.classList.add('ost-open');
U 536       ostDiv.style.flexBasis = '6em';
cfa858 537     }
U 538     self.menue_umschalten();
539   };
540
f074f6 541   this.fusszeile_umschalten = function () {
cfa858 542     var suedDiv = document.querySelector('.sued');
f074f6 543     if (suedDiv.classList.contains('sued-open')) {
cfa858 544       suedDiv.classList.remove('sued-open');
f074f6 545       suedDiv.style.height = '0';
cfa858 546     } else {
U 547       suedDiv.classList.add('sued-open');
f074f6 548       suedDiv.style.height = '1.5em';
cfa858 549     }
U 550     self.menue_umschalten();
551   };
552
f074f6 553   this.menu_message = function (msg) {
cfa858 554     self.meldung_mit_timeout(msg, 1500);
U 555     var suedDiv = document.querySelector('.sued');
f074f6 556     if (suedDiv.classList.contains('sued-open')) {
cfa858 557     } else {
U 558       suedDiv.classList.add('sued-open');
f074f6 559       suedDiv.style.height = '1.5em';
cfa858 560     }
U 561     self.menue_umschalten();
562   };
563
f074f6 564   this.message_1 = function () {
cfa858 565     self.menu_message('Eine Mitteilung.');
U 566   };
567
f074f6 568   this.message_2 = function () {
cfa858 569     self.menu_message('Was wir schon immer sagen wollten.');
U 570   };
571
f074f6 572   this.message_3 = function (text) {
cfa858 573     self.menu_message(text);
U 574   };
575
f074f6 576   this.meldung_mit_timeout = function (meldung, timeout) {
cfa858 577     var s = document.querySelector('.sued');
a43e1a 578     s.classList.add('sued-open');
U 579     s.style.height = '1.5em';
cfa858 580     s.textContent = meldung;
f074f6 581     setTimeout(function () {
cfa858 582       s.textContent = 'Bereit.';
f074f6 583       setTimeout(function () {
cfa858 584         var suedDiv = document.querySelector('.sued');
f074f6 585         if (suedDiv.classList.contains('sued-open')) {
U 586           suedDiv.classList.remove('sued-open');
587           suedDiv.style.height = '0';
cfa858 588         }
U 589       }, 500);
590     }, timeout);
591   };
8239d1 592   
f45e20 593   /* --------------------- Dialog-Funktionen ------------------------ */
cfa858 594
U 595   /*
f074f6 596    Einen Dialog aus Vorlagen erzeugen
U 597    
598    vurl - URL zur Dialogvorlage
599    msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
600    */
5b7356 601   this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) {
U 602     var vorlage = self.cache[vurl];
603     if(vorlage === undefined) {
604       self.http_get(vurl, function(antwort) {
605         self.cache[vurl] = antwort;
606         self.dialog_zeigen(vurl, msgTpl, cb);
f074f6 607       });
cfa858 608     } else {
5b7356 609       self.dialog_zeigen(vurl, msgTpl, cb);
cfa858 610     }
U 611   };
612
5b7356 613   this.dialog_zeigen = function (vurl, inhalt, cb) {
U 614     var dlg = document.querySelector(".dialog");
2597cd 615     self.html_erzeugen(vurl, inhalt, function (html) {
U 616       dlg.style.height = '7em';
617       dlg.innerHTML = html;
618       document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
619       if(typeof(cb) !== 'function') {
620         // ..
621       } else {
622         cb();
623       }
624     });
5b7356 625   };
2597cd 626   
f45e20 627   this.dialog_schliessen = function () {
cfa858 628     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 629     var dlg = document.querySelector('.dialog');
630     dlg.style.height = '0';
631     dlg.innerHTML = '';
632   };
633
f45e20 634   /* ---------------------   Vorlagen   ---------------------- */
cfa858 635
U 636   /*
f074f6 637    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
U 638    gefüllt wird
639    
640    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
641    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
642    Das fertige HTML wird der Callback-Funktion übergeben
643    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
644    Programmlauf zu diesem Zeitpunkt mittlerweile ist.
645    
646    vurl - URL zur Vorlagendatei
647    inhalt - die JSON-Struktur, deren Inhalt in die
648    Vorlage gefüllt werden soll
649    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
650    Dieser Callback-Funktion wird das fertige HTML übergeben
651    */
652   this.html_erzeugen = function (vurl, inhalt, cb) {
cfa858 653     var vorlage = self.cache[vurl];
f074f6 654     if (vorlage === undefined) {
cfa858 655       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
U 656     } else {
657       self.vorlage_fuellen(vurl, inhalt, cb);
658     }
659   };
660
f074f6 661   this.vorlage_fuellen = function (vurl, inhalt, cb) {
cfa858 662     cb(Mustache.render(self.cache[vurl], inhalt));
U 663   };
664
665   /*
f074f6 666    Eine Vorlage vom Server in den lokalen Speicher laden
U 667    vurl - der URL unter dem die Vorlage zu finden ist
668    inhalt - die JSON-Struktur, deren Inhalt in die
669    Vorlage gefüllt werden soll
670    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
671    Inhalt gefüllt ist
672    */
673   this.vorlage_laden_und_fuellen = function (vurl, inhalt, cb) {
cfa858 674     var xmlhttp = new XMLHttpRequest();
f074f6 675     xmlhttp.onreadystatechange = function () {
cfa858 676       if (this.readyState == 4 && this.status == 200) {
U 677         self.cache[vurl] = this.responseText;
678         self.vorlage_fuellen(vurl, inhalt, cb);
679       }
680     };
681     xmlhttp.open("GET", vurl, true);
682     xmlhttp.send();
683   };
684
685
686 }
687
f45e20 688 /* ----------- Objekte ---------------- */
U 689
690 function Ablageort(n, o, u) {
691   this.name = n;
692   this.ort = o;
693   this.url = u;
694 }
695
696 function Einstellung(k, v) {
697   this.key = k;
698   this.value = v;
699 }
700
701 function Abspieler(n, u) {
702   this.name = n;
703   this.url = u;
8d7d35 704 }
U 705
706 function Abspielliste(n) {
707   this.name = n;
e60cff 708 }
U 709
710 function Titel(n, u) {
711   this.katalogUrl = u;
712   this.name = n;
d6b78c 713 }