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