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