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