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