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