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