Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-06 8239d17d0bbdae65fdd801a652a3918b7212072a
commit | author | age
b379f5 1 function Ablageort(n, o, u) {
U 2   this.name = n;
3   this.ort = o;
4   this.url = u;
5 }
6
7
8
9 function Mediazentrale() {
cfa858 10   var self = this;
U 11   var appMenu;
12   var cache; // mustache templates
86bbf7 13   var ortPfad;
U 14   var mediaPfad;
15   
16   // auf der obersten Ebene werden die Kataloge angezeigt,
17   // darunter der Inhalt des aktuellen Pfades
18   this.media_liste = function() {
19     if(self.ortPfad === '/') {
20       // Kataloge listen
21       self.http_get('../api/store/Ablageort/', function (responseText) {
22         self.vorlage_laden_und_fuellen("data/tpl/katalog_root_liste.tpl", JSON.parse(responseText), function (html) {
23           document.querySelector(".zentraler-inhalt").innerHTML = html;
24           self.addEvtListener('.entity-eintrag', 'click', function (event) {
25             var t = event.target;
26             self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText) {
27               var ablageort = JSON.parse(responseText);
28               self.ortPfad = ablageort.url;
29               self.media_liste();
30             });
31           });
32         });
33       });
34     } else {
35       // Pfad listen
36       self.http_get('..' + self.ortPfad + '/' + self.mediaPfad + '/', function(responseText) {
ca9872 37         //console.log(responseText);
86bbf7 38         self.vorlage_laden_und_fuellen("data/tpl/katalog_inhalt_liste.tpl", JSON.parse(responseText), function (html) {
U 39           document.querySelector(".zentraler-inhalt").innerHTML = html;
40           self.addEvtListener('.entity-eintrag', 'click', function (event) {
41             var t = event.target;
ca9872 42             //console.log(t.textContent);
86bbf7 43             if(t.classList.contains("entity-typ-folder")) {
U 44               self.mediaPfad = self.mediaPfad + '/' + t.textContent;
45               self.media_liste();
46             } else {
47               console.log("Media-Inhalt auswaehlen oder abspielen");
48             }
49           });
50           self.addEvtListener('#zurueck-btn', 'click', function (event) {
51             if(self.mediaPfad === '/') {
52               self.ortPfad = '/';              
53             } else {
54               var pos = self.mediaPfad.lastIndexOf('/');
55               var parent = self.mediaPfad.substring(0, pos);
ca9872 56               //console.log("Parent: " + parent);
86bbf7 57               self.mediaPfad = parent;
U 58             }
59             self.media_liste();
60           });        
61         });
62       });
63     }
64   };
cfa858 65
a43e1a 66   this.ablageort_liste = function() {
U 67     self.http_get('../api/store/Ablageort/', function (responseText) {
68       self.vorlage_laden_und_fuellen("data/tpl/ablageort_liste.tpl", JSON.parse(responseText), function (html) {
69         document.querySelector(".zentraler-inhalt").innerHTML = html;
70         self.addEvtListener('.entity-eintrag', 'click', function (event) {
71           var t = event.target;
90f5d4 72           self.http_get('../api/store/Ablageort/' + t.textContent, function(responseText){
86bbf7 73             var ablageort = JSON.parse(responseText);
90f5d4 74             self.ablageort_form(ablageort);
U 75           });
a43e1a 76         });
faab2d 77         self.addEvtListener('#neu-btn', 'click', function (event) {
U 78           eval("self.ablageort_form" + "(this)");
79         });        
a43e1a 80       });
U 81     });
82   };
cfa858 83
90f5d4 84   /* 
U 85    * Ablageort-Formular anzeigen
86    * 
87    * {"name":"Katalog 2","ort":"/home/ulrich/Videos","url":"/media/kat2"}: 
88    * 
89    * @param {type} ablageort  der Ablageort, der bearbeitet werden soll, leer fuer neuen Ort
90    * @returns {undefined} kein Rueckgabewert
91    */
92   this.ablageort_form = function(ort) {
93     self.vorlage_laden_und_fuellen("data/tpl/form_ablageort.tpl", ort, function (html) {
b379f5 94       document.querySelector(".zentraler-inhalt").innerHTML = html;
f074f6 95       self.addEvtListener('#ok-btn', 'click', function () {
2597cd 96         var aName = document.querySelector('#ablageort-name').value;
U 97         aName = aName.replace(' ', '').replace(/[\W]+/g, '');
b379f5 98         var a = new Ablageort(
2597cd 99           aName,
b379f5 100           document.querySelector('#ablageort-ort').value,
U 101           document.querySelector('#ablageort-url').value
102         );
90f5d4 103         var daten = JSON.stringify(a);        
2597cd 104         if(typeof ort === "undefined" || ort.name !== aName) {
U 105           // neu
90f5d4 106           self.http_post('../api/store/Ablageort', daten, function (responseText) {
U 107             // hier die Antwort verarbeiten
108           });
109         } else {
2597cd 110           // aendern
90f5d4 111           self.http_put('../api/store/Ablageort', daten, function (responseText) {
U 112             // hier die Antwort verarbeiten
113           });
114         }
b29119 115         //document.querySelector(".zentraler-inhalt").innerHTML = '';
faab2d 116         self.ablageort_liste();
b379f5 117       });
f074f6 118       self.addEvtListener('#cancel-btn', 'click', function () {
b29119 119         //document.querySelector(".zentraler-inhalt").innerHTML = '';
faab2d 120         self.ablageort_liste();
5b7356 121       });
U 122       self.addEvtListener('#loeschen-btn', 'click', function() {
123         var aoname = document.querySelector('#ablageort-name').value;
124         var dlgdata = {"del-elem": aoname};
125         self.dialog_laden_und_zeigen('data/tpl/dlg-loeschen.tpl', dlgdata, function() {
126           self.addEvtListener('#nein-btn', 'click', self.dialog_schliessen);
127           self.addEvtListener('#ja-btn', 'click', function() {
90f5d4 128             self.http_delete('../api/store/Ablageort/' + aoname, '', function (responseText) {
U 129               // hier die Antwort verarbeiten
2597cd 130               self.dialog_schliessen();
b29119 131               //document.querySelector(".zentraler-inhalt").innerHTML = '';
faab2d 132               self.ablageort_liste();
90f5d4 133             });
5b7356 134           });
U 135         });
b379f5 136       });
U 137     });
138   };
139
f074f6 140   this.addEvtListener = function (selector, eventName, func) {
b379f5 141     var elems = document.querySelectorAll(selector);
U 142     var index;
143     for (index = 0; index < elems.length; index++) {
144       elems[index].addEventListener(eventName, func);
145     }
146   };
f074f6 147
faab2d 148   /* asynchroner HTTP Client */
U 149   
f074f6 150   this.http_get = function (u, cb) {
b379f5 151     self.http_call('GET', u, null, cb);
U 152   };
f074f6 153
U 154   this.http_post = function (u, data, cb) {
b379f5 155     self.http_call('POST', u, data, cb);
U 156   };
157
90f5d4 158   this.http_put = function (u, data, cb) {
U 159     self.http_call('PUT', u, data, cb);
160   };
161   
5b7356 162   this.http_delete = function (u, data, cb) {
2597cd 163     console.log("delete " + u);
5b7356 164     self.http_call('DELETE', u, data, cb);
U 165   };
166   
f074f6 167   this.http_call = function (method, u, data, scallback) {
b379f5 168     var xhr = new XMLHttpRequest();
U 169     var url = u;
f074f6 170     xhr.onreadystatechange = function () {
b379f5 171       if (this.readyState === 4 && this.status === 200) {
U 172         scallback(this.responseText);
173       }
174     };
175     xhr.open(method, url);
f074f6 176     if (method === 'GET') {
b379f5 177       xhr.send();
2597cd 178     } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
b379f5 179       xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
U 180       xhr.send(data);
181     }
182   };
8239d1 183   
U 184   /* Unterer Einblendbereich */
185   
186   self.dialog_unten_zeigen = function() {
187     var dlg = document.querySelector(".dialog-unten");
188     dlg.style.height = '7em';
189     dlg.innerHTML = "Dialog unten";
190   };
f074f6 191
U 192   /* ab hier aus App-Vorlage */
193
194   this.init = function () {
cfa858 195     //self.vorlagen = new Vorlagen();
86bbf7 196     self.mediaPfad = '/';
U 197     self.ortPfad = '/';
cfa858 198     self.cache = new Array();
U 199     self.appMenu = new AppMenu();
200     self.appMenu.init(
f074f6 201             "data/menu/",
U 202             "hauptmenue.json",
203             "data/tpl/app-menu.tpl",
204             ".west",
205             "8em");
cfa858 206
f074f6 207     document.querySelector('.hamburger').addEventListener('click', function (e) {
cfa858 208       self.menue_umschalten();
U 209     });
f074f6 210     
U 211     self.fusszeile_umschalten();
212     self.seitenleiste_umschalten();
cfa858 213
U 214   };
215
f074f6 216   this.menue_umschalten = function () {
cfa858 217     var ham = document.querySelector(".hamburger");
U 218     ham.classList.toggle("is-active"); // hamburger-icon umschalten
219     self.appMenu.toggle(); // menue oeffnen/schliessen
220   };
221
f074f6 222   this.info_dialog_zeigen = function () {
cfa858 223     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
U 224     self.menue_umschalten();
225   };
226
f074f6 227   this.seitenleiste_umschalten = function () {
cfa858 228     var ostDiv = document.querySelector('.ost');
f074f6 229     if (ostDiv.classList.contains('ost-open')) {
cfa858 230       ostDiv.classList.remove('ost-open');
f074f6 231       ostDiv.style.flexBasis = '0em';
cfa858 232     } else {
f074f6 233       ostDiv.classList.add('ost-open');
U 234       ostDiv.style.flexBasis = '6em';
cfa858 235     }
U 236     self.menue_umschalten();
237   };
238
f074f6 239   this.fusszeile_umschalten = function () {
cfa858 240     var suedDiv = document.querySelector('.sued');
f074f6 241     if (suedDiv.classList.contains('sued-open')) {
cfa858 242       suedDiv.classList.remove('sued-open');
f074f6 243       suedDiv.style.height = '0';
cfa858 244     } else {
U 245       suedDiv.classList.add('sued-open');
f074f6 246       suedDiv.style.height = '1.5em';
cfa858 247     }
U 248     self.menue_umschalten();
249   };
250
f074f6 251   this.menu_message = function (msg) {
cfa858 252     self.meldung_mit_timeout(msg, 1500);
U 253     var suedDiv = document.querySelector('.sued');
f074f6 254     if (suedDiv.classList.contains('sued-open')) {
cfa858 255     } else {
U 256       suedDiv.classList.add('sued-open');
f074f6 257       suedDiv.style.height = '1.5em';
cfa858 258     }
U 259     self.menue_umschalten();
260   };
261
f074f6 262   this.message_1 = function () {
cfa858 263     self.menu_message('Eine Mitteilung.');
U 264   };
265
f074f6 266   this.message_2 = function () {
cfa858 267     self.menu_message('Was wir schon immer sagen wollten.');
U 268   };
269
f074f6 270   this.message_3 = function (text) {
cfa858 271     self.menu_message(text);
U 272   };
273
f074f6 274   this.meldung_mit_timeout = function (meldung, timeout) {
cfa858 275     var s = document.querySelector('.sued');
a43e1a 276     s.classList.add('sued-open');
U 277     s.style.height = '1.5em';
cfa858 278     s.textContent = meldung;
f074f6 279     setTimeout(function () {
cfa858 280       s.textContent = 'Bereit.';
f074f6 281       setTimeout(function () {
cfa858 282         var suedDiv = document.querySelector('.sued');
f074f6 283         if (suedDiv.classList.contains('sued-open')) {
U 284           suedDiv.classList.remove('sued-open');
285           suedDiv.style.height = '0';
cfa858 286         }
U 287       }, 500);
288     }, timeout);
289   };
8239d1 290   
cfa858 291   /* Dialog-Funktionen */
U 292
293   /*
f074f6 294    Einen Dialog aus Vorlagen erzeugen
U 295    
296    vurl - URL zur Dialogvorlage
297    msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
298    */
5b7356 299   this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) {
U 300     var vorlage = self.cache[vurl];
301     if(vorlage === undefined) {
302       self.http_get(vurl, function(antwort) {
303         self.cache[vurl] = antwort;
304         self.dialog_zeigen(vurl, msgTpl, cb);
f074f6 305       });
cfa858 306     } else {
5b7356 307       self.dialog_zeigen(vurl, msgTpl, cb);
cfa858 308     }
U 309   };
310
5b7356 311   this.dialog_zeigen = function (vurl, inhalt, cb) {
U 312     var dlg = document.querySelector(".dialog");
2597cd 313     self.html_erzeugen(vurl, inhalt, function (html) {
U 314       dlg.style.height = '7em';
315       dlg.innerHTML = html;
316       document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
317       if(typeof(cb) !== 'function') {
318         // ..
319       } else {
320         cb();
321       }
322     });
5b7356 323   };
2597cd 324   
f074f6 325   self.dialog_schliessen = function () {
cfa858 326     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 327     var dlg = document.querySelector('.dialog');
328     dlg.style.height = '0';
329     dlg.innerHTML = '';
330   };
331
332   /* Vorlagen */
333
334   /*
f074f6 335    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
U 336    gefüllt wird
337    
338    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
339    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
340    Das fertige HTML wird der Callback-Funktion übergeben
341    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
342    Programmlauf zu diesem Zeitpunkt mittlerweile ist.
343    
344    vurl - URL zur Vorlagendatei
345    inhalt - die JSON-Struktur, deren Inhalt in die
346    Vorlage gefüllt werden soll
347    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
348    Dieser Callback-Funktion wird das fertige HTML übergeben
349    */
350   this.html_erzeugen = function (vurl, inhalt, cb) {
cfa858 351     var vorlage = self.cache[vurl];
f074f6 352     if (vorlage === undefined) {
cfa858 353       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
U 354     } else {
355       self.vorlage_fuellen(vurl, inhalt, cb);
356     }
357   };
358
f074f6 359   this.vorlage_fuellen = function (vurl, inhalt, cb) {
cfa858 360     cb(Mustache.render(self.cache[vurl], inhalt));
U 361   };
362
363   /*
f074f6 364    Eine Vorlage vom Server in den lokalen Speicher laden
U 365    vurl - der URL unter dem die Vorlage zu finden ist
366    inhalt - die JSON-Struktur, deren Inhalt in die
367    Vorlage gefüllt werden soll
368    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
369    Inhalt gefüllt ist
370    */
371   this.vorlage_laden_und_fuellen = function (vurl, inhalt, cb) {
cfa858 372     var xmlhttp = new XMLHttpRequest();
f074f6 373     xmlhttp.onreadystatechange = function () {
cfa858 374       if (this.readyState == 4 && this.status == 200) {
U 375         self.cache[vurl] = this.responseText;
376         self.vorlage_fuellen(vurl, inhalt, cb);
377       }
378     };
379     xmlhttp.open("GET", vurl, true);
380     xmlhttp.send();
381   };
382
383
384 }
385