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