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