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