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