Persoenliche Mediazentrale
view | history | commit | commitdiff
ulrich
2021-04-06 bebd4767df2dd419a2d04eaa4253592d13336e8c
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() {
bebd47 187     self.vorlage_laden_und_fuellen("data/tpl/ctrl.tpl", "", function (html) {
U 188       var dlg = document.querySelector(".dialog-unten");
189       dlg.style.height = '4.5em';
190       dlg.innerHTML = html;
191     });
8239d1 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();
bebd47 215     self.dialog_unten_zeigen();
cfa858 216   };
U 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   };
8239d1 292   
cfa858 293   /* Dialog-Funktionen */
U 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