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