Demo des Jahreskalenders
view | history | commit | commitdiff
undisclosed
2022-08-24 749d1b70a6556ca33d37b332d4ade6732ab104e6
commit | author | age
749d1b 1 /*
U 2     kalender - a calendar component for the browser
3     Copyright (c) 2022  Ulrich Hilger
4  
5     This program is free software: you can redistribute it and/or modify
6     it under the terms of the GNU Affero General Public License as published by
7     the Free Software Foundation, either version 3 of the License, or
8     (at your option) any later version.
9  
10     This program is distributed in the hope that it will be useful,
11     but WITHOUT ANY WARRANTY; without even the implied warranty of
12     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
13     GNU Affero General Public License for more details.
14  
15     You should have received a copy of the GNU Affero General Public License
16     along with this program.  If not, see <http://www.gnu.org/licenses/>.
17 */
18
19
20 /*
21  * JavaScript code fuer den Jahreskalender
22  */
23
24 var jahr;    
25 var emap = new Map();
26 var fabrik = new MonatsboxFabrik();
27 var ereignisId = 'keine';
28 var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai", 
29           "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
30 var tagesnamen = new Array("Sonntag","Montag", "Dienstag", "Mittwoch", 
31           "Donnerstag", "Freitag", "Samstag");
32           
33 function kalenderInit() {
34   var jetzt = new Date();
35   jahr = jetzt.getFullYear();
36   katalogLesen(function(){
37     kalenderZeigen(fabrik, jahr);
38   });
39   document.querySelector('.icon-left-dir').addEventListener('click', function() {
40     kalenderZeigen(fabrik, --jahr);
41     kalenderblattZuruecksetzen();
42   });
43   document.querySelector('.icon-right-dir').addEventListener('click', function() {
44     kalenderZeigen(fabrik, ++jahr);
45     kalenderblattZuruecksetzen();
46   });
47   document.querySelector('#heute1').addEventListener('click', heute);
48   document.querySelector('#heute2').addEventListener('click', heute);
49   
50   document.querySelector('.icon-ellipsis-vert').addEventListener('click', dialogOeffnen);
51   document.querySelector('.jahr-eingabe').addEventListener('keyup', function(event) {
52     var eingabe = document.querySelector('.jahr-eingabe').value;
53     if(!isNaN(eingabe)) {
54       kalenderZeigen(fabrik, eingabe);
55     }
56   });
57   document.querySelector('.icon-cancel').addEventListener('click', function() {
58     document.querySelector(".dialog").classList.remove('dlg-open');
59   });    
60   document.querySelector(".dialog").classList.remove('dlg-open');
61 }
62 function heute() {
63   var jetzt = new Date();
64   jahr = jetzt.getFullYear();
65   kalenderblattZuruecksetzen();
66   kalenderZeigen(fabrik, jahr);
67 }
68 function dialogOeffnen() {
69   var dlg = document.querySelector(".dialog");
70   if(!dlg.classList.contains('dlg-open')) {
71     dlg.classList.add('dlg-open');
72   }
73 }
74 function katalogLesen(cb) {      
75   http_call('GET', '../ereignis/katalog', '', function(antwort, status) {
76     if(status === 200) {
77       var json = JSON.parse(antwort);
78       var sel = document.createElement("select");
79       var ix = 0;
80       while(ix < json.length) {
81         if(ix === 0) {
82           ereignisId = json[ix].id;
83         }
84         var opt = document.createElement("option");
85         opt.value = json[ix].id;
86         opt.textContent = json[ix].name;
87         sel.appendChild(opt);
88         ++ix;
89       }
90       sel.addEventListener('change', function(event) {
91         var jetzt = new Date();
92         jahr = jetzt.getFullYear();
93         ereignisId = event.target.value;
94         kalenderZeigen(fabrik, jahr);
95       });
96       document.querySelector('.ekat').appendChild(sel);
97       cb();
98     } else {
99       // ..
100       cb();
101     }
102   });
103 }
104 function kalenderZeigen(fab, jahr) {        
105   http_call('GET', '../ereignis/liste/' + ereignisId + '/' + jahr, '', function(antwort, status) {
106     console.log('kalenderZeigen status:' + status);
107     if(status == 200) {
108       console.log('ereignisse parsen..');
109       var json = JSON.parse(antwort);
110       ereignislisteInMap(json);
111     } else {
112       console.log('keine ereignisse');
113       emap = new Map();
114     }
115     // Kalender erzeugen
116     var starttag = 1; // Montag
117     var ruhetag = 0; // Sonntag
118     var elem = document.querySelector('.kalender');      
119     while(elem.firstChild) {
120       elem.removeChild(elem.firstChild);
121     }
122     kalenderErzeugen(fab, elem, jahr, starttag, ruhetag);
123     var jahrTitel = document.querySelector('.jahr-titel');      
124     jahrTitel.textContent = jahr;
125   });      
126 }
127 function ereignislisteInMap(json) {
128   var ix = 0;
129   emap = new Map();
130   var tmap;
131   while(ix < json.length) {
132     var ename = json[ix].name;
133     var emonat = json[ix].monat - 1;
134     var etag = json[ix].tag;
135     if(emap.has(emonat)) {
136       tmap = emap.get(emonat);
137       if(tmap.has(etag)) {
138         var tname = tmap.get(etag);
139         tmap.set(etag, tname + ', ' + ename);
140         console.log('added ' + ename + ' to existing tname ' + etag + ', result ' + tname + ' ' + ename);
141       } else {
142         tmap.set(etag, ename);
143         console.log('added new etag ' + etag + ' ' + ename + ' to existing tmap');
144       }            
145   } else {
146       tmap = new Map();
147       tmap.set(etag, ename);
148       console.log('added ' + etag + ' ' + ename + ' to new tmap');
149       emap.set(emonat, tmap);
150       console.log('added new tmap to emap ' + emonat);
151     }
152     ix++;
153   }
154   //console.log(json[1].monat + ' ' + json[1].tag);
155 }
156 function kalenderErzeugen(fabrik, behaelter, jahr, starttag, ruhetag) {
157   var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai", 
158         "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");    
159   var m = -1;
160   var elem;
161   var titel;
162
163   while(++m < 12) {
164     var ereignisse = new Map;   
165     if(emap.has(m)) {
166       console.log('kalenderErzeugen emap.keys ' + Array.from(emap.get(m).keys( )));
167       console.log('kalenderErzeugen emap.values: ' + Array.from(emap.get(m).values( )));
168       var keys = Array.from(emap.get(m).keys( ));
169       for(var i = 0; i < keys.length; i++) {
170         ereignisse.set(keys[i], 'monatsboxFeiertag');
171       }
172     }
173     titel = document.createElement("div");
174     titel.textContent = monatsnamen[m];
175     elem = document.createElement("div");
176     elem.className = "monat-elem";
177     elem.appendChild(titel);
178     elem.appendChild(fabrik.monatsboxErzeugen(jahr, m, starttag, ruhetag, ereignisse, function(event) {
179       // hier auf klicks in die Monatsbox reagieren
180       var d = fabrik.datum(event);
181       var cm = d.getMonth();
182       var ct = d.getDate();
183       console.log('klick auf monat ' + cm + ' tag ' + ct);
184       
185       var ereignisnamen = '';
186       if(emap.has(cm)) {
187         var tmap = emap.get(cm);
188         if(tmap.has(ct)) {
189           ereignisnamen = tmap.get(ct);
190           console.log('ereignisse: ' + ereignisnamen);
191           //kalenderblattZeigen(ct, cm, jahr, ereignisnamen);
192         }
193       }
194       kalenderblattZeigen(ct, cm, jahr, ereignisnamen);
195       
196       /*
197       document.querySelector('.datum-wahl').textContent = 
198               d.toLocaleDateString('de-DE') + ' (' + 
199               d.toISOString() + ')';        
200       */
201     }));      
202     behaelter.appendChild(elem);
203   }
204 }
205
206 function kalenderblattZeigen(tag, monat, jahr, ereignisse) {
207   var datum = new Date();
208   datum.setFullYear(jahr);
209   datum.setMonth(monat);
210   var mname = monatsnamen[monat];
211   datum.setDate(tag);
212   var wtag = datum.getDay();
213   var mt = ++monat;
214   document.querySelector('.kbl-datum').textContent = tagesnamen[wtag] + 
215           ', ' + tag + '. ' + mname + ' ' + jahr;
216   document.querySelector('.kbl-ereignisse').textContent = ereignisse;
217   //var kbl = document.querySelector('.kalenderblatt');
218   //kbl.classList.add('kbl-open');
219   dialogOeffnen();
220 }
221
222 function kalenderblattZuruecksetzen() {
223   document.querySelector('.kbl-datum').textContent = 'Kein Datum markiert';
224   document.querySelector('.kbl-ereignisse').textContent = '';  
225 }
226
227 /*
228  * Der Content-Type 'multipart/form-data' muss weggelassen werden, damit der 
229  * Browser selbsttaetig die Boundary erzeugt und der Anfrage mitgibt. Fuer 
230  * diesen Content-Type muss ctype=' ' uebergeben werden.
231  * 
232  * Wird ctype ganz weggelassen (ctype === undefined) bekommen POST, PUT und 
233  * DELETE automatisch 'application/x-www-form-urlencoded' als Content-Type 
234  * hinzugefuegt.
235  * 
236  * Alle anderen Angaben fuer Content-Type muessen im Parameter ctype 
237  * uebergeben werden.
238  * 
239  * @param {type} method  GET, PUT, POST, DELETE
240  * @param {type} callurl  wohin die Anfrage gehen soll
241  * @param {type} data  was im Body gesendet werden soll oder ''
242  * @param {type} scallback  Callback Funktion (optional)
243  * @param {type} ctype  der gewuenschte Content-Type (optional)
244  * @returns {undefined}
245  */
246 function http_call(method, callurl, data, scallback, ctype) {
247   var xhr = new XMLHttpRequest();
248   xhr.onreadystatechange = function () {
249     if (this.readyState === 4) {
250       scallback(this.responseText, this.status);
251     }
252   };
253   xhr.open(method, callurl);
254   if (method === 'GET') {
255     xhr.setRequestHeader('Content-type', 'application/text');
256     xhr.send();
257   } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
258     if(ctype === undefined) {
259       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
260     } else if(ctype === ' ') {
261       // keine Angabe fuer Content-Type, Browser waehlt selbst
262     } else {
263       xhr.setRequestHeader('Content-Type', ctype);
264     }
265     xhr.send(data);
266   }
267 }
268