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