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