Demo des Jahreskalenders
view | history | commit | commitdiff
undisclosed
2023-01-31 db2cc269df306c93b283336a5aab238662fa895e
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) {
db2cc2 207   var datum = new Date(jahr, monat, tag);
U 208   //datum.setFullYear(jahr);
209   //datum.setMonth(monat);
749d1b 210   var mname = monatsnamen[monat];
db2cc2 211   //datum.setDate(tag);
749d1b 212   var wtag = datum.getDay();
db2cc2 213   //console.log('wtag ' + wtag + ', Tagesname ' + tagesnamen[wtag]);
749d1b 214   var mt = ++monat;
U 215   document.querySelector('.kbl-datum').textContent = tagesnamen[wtag] + 
216           ', ' + tag + '. ' + mname + ' ' + jahr;
217   document.querySelector('.kbl-ereignisse').textContent = ereignisse;
218   //var kbl = document.querySelector('.kalenderblatt');
219   //kbl.classList.add('kbl-open');
220   dialogOeffnen();
221 }
222
223 function kalenderblattZuruecksetzen() {
224   document.querySelector('.kbl-datum').textContent = 'Kein Datum markiert';
225   document.querySelector('.kbl-ereignisse').textContent = '';  
226 }
227
228 /*
229  * Der Content-Type 'multipart/form-data' muss weggelassen werden, damit der 
230  * Browser selbsttaetig die Boundary erzeugt und der Anfrage mitgibt. Fuer 
231  * diesen Content-Type muss ctype=' ' uebergeben werden.
232  * 
233  * Wird ctype ganz weggelassen (ctype === undefined) bekommen POST, PUT und 
234  * DELETE automatisch 'application/x-www-form-urlencoded' als Content-Type 
235  * hinzugefuegt.
236  * 
237  * Alle anderen Angaben fuer Content-Type muessen im Parameter ctype 
238  * uebergeben werden.
239  * 
240  * @param {type} method  GET, PUT, POST, DELETE
241  * @param {type} callurl  wohin die Anfrage gehen soll
242  * @param {type} data  was im Body gesendet werden soll oder ''
243  * @param {type} scallback  Callback Funktion (optional)
244  * @param {type} ctype  der gewuenschte Content-Type (optional)
245  * @returns {undefined}
246  */
247 function http_call(method, callurl, data, scallback, ctype) {
248   var xhr = new XMLHttpRequest();
249   xhr.onreadystatechange = function () {
250     if (this.readyState === 4) {
251       scallback(this.responseText, this.status);
252     }
253   };
254   xhr.open(method, callurl);
255   if (method === 'GET') {
256     xhr.setRequestHeader('Content-type', 'application/text');
257     xhr.send();
258   } else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
259     if(ctype === undefined) {
260       xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
261     } else if(ctype === ' ') {
262       // keine Angabe fuer Content-Type, Browser waehlt selbst
263     } else {
264       xhr.setRequestHeader('Content-Type', ctype);
265     }
266     xhr.send(data);
267   }
268 }
269