Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-06 822ddf5649666248df1c7436d237e50fd79646dc
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   };
f074f6 183
U 184   /* ab hier aus App-Vorlage */
185
186   this.init = function () {
cfa858 187     //self.vorlagen = new Vorlagen();
86bbf7 188     self.mediaPfad = '/';
U 189     self.ortPfad = '/';
cfa858 190     self.cache = new Array();
U 191     self.appMenu = new AppMenu();
192     self.appMenu.init(
f074f6 193             "data/menu/",
U 194             "hauptmenue.json",
195             "data/tpl/app-menu.tpl",
196             ".west",
197             "8em");
cfa858 198
f074f6 199     document.querySelector('.hamburger').addEventListener('click', function (e) {
cfa858 200       self.menue_umschalten();
U 201     });
f074f6 202     
U 203     self.fusszeile_umschalten();
204     self.seitenleiste_umschalten();
cfa858 205
U 206   };
207
f074f6 208   this.menue_umschalten = function () {
cfa858 209     var ham = document.querySelector(".hamburger");
U 210     ham.classList.toggle("is-active"); // hamburger-icon umschalten
211     self.appMenu.toggle(); // menue oeffnen/schliessen
212   };
213
f074f6 214   this.info_dialog_zeigen = function () {
cfa858 215     self.dialog_laden_und_zeigen('data/tpl/dlg-info.tpl', '');
U 216     self.menue_umschalten();
217   };
218
f074f6 219   this.seitenleiste_umschalten = function () {
cfa858 220     var ostDiv = document.querySelector('.ost');
f074f6 221     if (ostDiv.classList.contains('ost-open')) {
cfa858 222       ostDiv.classList.remove('ost-open');
f074f6 223       ostDiv.style.flexBasis = '0em';
cfa858 224     } else {
f074f6 225       ostDiv.classList.add('ost-open');
U 226       ostDiv.style.flexBasis = '6em';
cfa858 227     }
U 228     self.menue_umschalten();
229   };
230
f074f6 231   this.fusszeile_umschalten = function () {
cfa858 232     var suedDiv = document.querySelector('.sued');
f074f6 233     if (suedDiv.classList.contains('sued-open')) {
cfa858 234       suedDiv.classList.remove('sued-open');
f074f6 235       suedDiv.style.height = '0';
cfa858 236     } else {
U 237       suedDiv.classList.add('sued-open');
f074f6 238       suedDiv.style.height = '1.5em';
cfa858 239     }
U 240     self.menue_umschalten();
241   };
242
f074f6 243   this.menu_message = function (msg) {
cfa858 244     self.meldung_mit_timeout(msg, 1500);
U 245     var suedDiv = document.querySelector('.sued');
f074f6 246     if (suedDiv.classList.contains('sued-open')) {
cfa858 247     } else {
U 248       suedDiv.classList.add('sued-open');
f074f6 249       suedDiv.style.height = '1.5em';
cfa858 250     }
U 251     self.menue_umschalten();
252   };
253
f074f6 254   this.message_1 = function () {
cfa858 255     self.menu_message('Eine Mitteilung.');
U 256   };
257
f074f6 258   this.message_2 = function () {
cfa858 259     self.menu_message('Was wir schon immer sagen wollten.');
U 260   };
261
f074f6 262   this.message_3 = function (text) {
cfa858 263     self.menu_message(text);
U 264   };
265
f074f6 266   this.meldung_mit_timeout = function (meldung, timeout) {
cfa858 267     var s = document.querySelector('.sued');
a43e1a 268     s.classList.add('sued-open');
U 269     s.style.height = '1.5em';
cfa858 270     s.textContent = meldung;
f074f6 271     setTimeout(function () {
cfa858 272       s.textContent = 'Bereit.';
f074f6 273       setTimeout(function () {
cfa858 274         var suedDiv = document.querySelector('.sued');
f074f6 275         if (suedDiv.classList.contains('sued-open')) {
U 276           suedDiv.classList.remove('sued-open');
277           suedDiv.style.height = '0';
cfa858 278         }
U 279       }, 500);
280     }, timeout);
281   };
282
283   /* Dialog-Funktionen */
284
285   /*
f074f6 286    Einen Dialog aus Vorlagen erzeugen
U 287    
288    vurl - URL zur Dialogvorlage
289    msgTpl - URL mit einer Vorlage eines Mitteilungstextes (optional)
290    */
5b7356 291   this.dialog_laden_und_zeigen = function (vurl, msgTpl, cb) {
U 292     var vorlage = self.cache[vurl];
293     if(vorlage === undefined) {
294       self.http_get(vurl, function(antwort) {
295         self.cache[vurl] = antwort;
296         self.dialog_zeigen(vurl, msgTpl, cb);
f074f6 297       });
cfa858 298     } else {
5b7356 299       self.dialog_zeigen(vurl, msgTpl, cb);
cfa858 300     }
U 301   };
302
5b7356 303   this.dialog_zeigen = function (vurl, inhalt, cb) {
U 304     var dlg = document.querySelector(".dialog");
2597cd 305     self.html_erzeugen(vurl, inhalt, function (html) {
U 306       dlg.style.height = '7em';
307       dlg.innerHTML = html;
308       document.querySelector('.close-btn').addEventListener('click', self.dialog_schliessen);
309       if(typeof(cb) !== 'function') {
310         // ..
311       } else {
312         cb();
313       }
314     });
5b7356 315   };
2597cd 316   
f074f6 317   self.dialog_schliessen = function () {
cfa858 318     document.querySelector('.close-btn').removeEventListener('click', self.dialog_schliessen);
U 319     var dlg = document.querySelector('.dialog');
320     dlg.style.height = '0';
321     dlg.innerHTML = '';
322   };
323
324   /* Vorlagen */
325
326   /*
f074f6 327    Das HTML erzeugen, das entsteht, wenn eine Vorlage mit Inhalt
U 328    gefüllt wird
329    
330    Das Füllen erfolgt asynchron, d.h. der Programmlauf geht nach dem
331    Aufruf weiter ohne auf das Laden und Füllen der Vorlage zu warten.
332    Das fertige HTML wird der Callback-Funktion übergeben
333    sobald die Vorlage geladen und gefüllt ist, unabhängig davon, wo der
334    Programmlauf zu diesem Zeitpunkt mittlerweile ist.
335    
336    vurl - URL zur Vorlagendatei
337    inhalt - die JSON-Struktur, deren Inhalt in die
338    Vorlage gefüllt werden soll
339    cb - Callback-Funktion, die gerufen wird, wenn die Vorlage gefüllt ist.
340    Dieser Callback-Funktion wird das fertige HTML übergeben
341    */
342   this.html_erzeugen = function (vurl, inhalt, cb) {
cfa858 343     var vorlage = self.cache[vurl];
f074f6 344     if (vorlage === undefined) {
cfa858 345       self.vorlage_laden_und_fuellen(vurl, inhalt, cb);
U 346     } else {
347       self.vorlage_fuellen(vurl, inhalt, cb);
348     }
349   };
350
f074f6 351   this.vorlage_fuellen = function (vurl, inhalt, cb) {
cfa858 352     cb(Mustache.render(self.cache[vurl], inhalt));
U 353   };
354
355   /*
f074f6 356    Eine Vorlage vom Server in den lokalen Speicher laden
U 357    vurl - der URL unter dem die Vorlage zu finden ist
358    inhalt - die JSON-Struktur, deren Inhalt in die
359    Vorlage gefüllt werden soll
360    cb - callback: Diese Funktion wird gerufen, wenn die Vorlage mit dem
361    Inhalt gefüllt ist
362    */
363   this.vorlage_laden_und_fuellen = function (vurl, inhalt, cb) {
cfa858 364     var xmlhttp = new XMLHttpRequest();
f074f6 365     xmlhttp.onreadystatechange = function () {
cfa858 366       if (this.readyState == 4 && this.status == 200) {
U 367         self.cache[vurl] = this.responseText;
368         self.vorlage_fuellen(vurl, inhalt, cb);
369       }
370     };
371     xmlhttp.open("GET", vurl, true);
372     xmlhttp.send();
373   };
374
375
376 }
377