/*
|
kalender - a calendar component for the browser
|
Copyright (c) 2022 Ulrich Hilger
|
|
This program is free software: you can redistribute it and/or modify
|
it under the terms of the GNU Affero General Public License as published by
|
the Free Software Foundation, either version 3 of the License, or
|
(at your option) any later version.
|
|
This program is distributed in the hope that it will be useful,
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
GNU Affero General Public License for more details.
|
|
You should have received a copy of the GNU Affero General Public License
|
along with this program. If not, see <http://www.gnu.org/licenses/>.
|
*/
|
|
|
/*
|
* JavaScript code fuer den Jahreskalender
|
*/
|
|
var jahr;
|
var emap = new Map();
|
var fabrik = new MonatsboxFabrik();
|
var ereignisId = 'keine';
|
var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai",
|
"Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
|
var tagesnamen = new Array("Sonntag","Montag", "Dienstag", "Mittwoch",
|
"Donnerstag", "Freitag", "Samstag");
|
|
function kalenderInit() {
|
var jetzt = new Date();
|
jahr = jetzt.getFullYear();
|
katalogLesen(function(){
|
kalenderZeigen(fabrik, jahr);
|
});
|
document.querySelector('.icon-left-dir').addEventListener('click', function() {
|
kalenderZeigen(fabrik, --jahr);
|
kalenderblattZuruecksetzen();
|
});
|
document.querySelector('.icon-right-dir').addEventListener('click', function() {
|
kalenderZeigen(fabrik, ++jahr);
|
kalenderblattZuruecksetzen();
|
});
|
document.querySelector('#heute1').addEventListener('click', heute);
|
document.querySelector('#heute2').addEventListener('click', heute);
|
|
document.querySelector('.icon-ellipsis-vert').addEventListener('click', dialogOeffnen);
|
document.querySelector('.jahr-eingabe').addEventListener('keyup', function(event) {
|
var eingabe = document.querySelector('.jahr-eingabe').value;
|
if(!isNaN(eingabe)) {
|
kalenderZeigen(fabrik, eingabe);
|
}
|
});
|
document.querySelector('.icon-cancel').addEventListener('click', function() {
|
document.querySelector(".dialog").classList.remove('dlg-open');
|
});
|
document.querySelector(".dialog").classList.remove('dlg-open');
|
}
|
function heute() {
|
var jetzt = new Date();
|
jahr = jetzt.getFullYear();
|
kalenderblattZuruecksetzen();
|
kalenderZeigen(fabrik, jahr);
|
}
|
function dialogOeffnen() {
|
var dlg = document.querySelector(".dialog");
|
if(!dlg.classList.contains('dlg-open')) {
|
dlg.classList.add('dlg-open');
|
}
|
}
|
function katalogLesen(cb) {
|
http_call('GET', '../ereignis/katalog', '', function(antwort, status) {
|
if(status === 200) {
|
var json = JSON.parse(antwort);
|
var sel = document.createElement("select");
|
var ix = 0;
|
while(ix < json.length) {
|
if(ix === 0) {
|
ereignisId = json[ix].id;
|
}
|
var opt = document.createElement("option");
|
opt.value = json[ix].id;
|
opt.textContent = json[ix].name;
|
sel.appendChild(opt);
|
++ix;
|
}
|
sel.addEventListener('change', function(event) {
|
var jetzt = new Date();
|
jahr = jetzt.getFullYear();
|
ereignisId = event.target.value;
|
kalenderZeigen(fabrik, jahr);
|
});
|
document.querySelector('.ekat').appendChild(sel);
|
cb();
|
} else {
|
// ..
|
cb();
|
}
|
});
|
}
|
function kalenderZeigen(fab, jahr) {
|
http_call('GET', '../ereignis/liste/' + ereignisId + '/' + jahr, '', function(antwort, status) {
|
console.log('kalenderZeigen status:' + status);
|
if(status == 200) {
|
console.log('ereignisse parsen..');
|
var json = JSON.parse(antwort);
|
ereignislisteInMap(json);
|
} else {
|
console.log('keine ereignisse');
|
emap = new Map();
|
}
|
// Kalender erzeugen
|
var starttag = 1; // Montag
|
var ruhetag = 0; // Sonntag
|
var elem = document.querySelector('.kalender');
|
while(elem.firstChild) {
|
elem.removeChild(elem.firstChild);
|
}
|
kalenderErzeugen(fab, elem, jahr, starttag, ruhetag);
|
var jahrTitel = document.querySelector('.jahr-titel');
|
jahrTitel.textContent = jahr;
|
});
|
}
|
function ereignislisteInMap(json) {
|
var ix = 0;
|
emap = new Map();
|
var tmap;
|
while(ix < json.length) {
|
var ename = json[ix].name;
|
var emonat = json[ix].monat - 1;
|
var etag = json[ix].tag;
|
if(emap.has(emonat)) {
|
tmap = emap.get(emonat);
|
if(tmap.has(etag)) {
|
var tname = tmap.get(etag);
|
tmap.set(etag, tname + ', ' + ename);
|
console.log('added ' + ename + ' to existing tname ' + etag + ', result ' + tname + ' ' + ename);
|
} else {
|
tmap.set(etag, ename);
|
console.log('added new etag ' + etag + ' ' + ename + ' to existing tmap');
|
}
|
} else {
|
tmap = new Map();
|
tmap.set(etag, ename);
|
console.log('added ' + etag + ' ' + ename + ' to new tmap');
|
emap.set(emonat, tmap);
|
console.log('added new tmap to emap ' + emonat);
|
}
|
ix++;
|
}
|
//console.log(json[1].monat + ' ' + json[1].tag);
|
}
|
function kalenderErzeugen(fabrik, behaelter, jahr, starttag, ruhetag) {
|
var monatsnamen = new Array("Januar", "Februar", "März", "April", "Mai",
|
"Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
|
var m = -1;
|
var elem;
|
var titel;
|
|
while(++m < 12) {
|
var ereignisse = new Map;
|
if(emap.has(m)) {
|
console.log('kalenderErzeugen emap.keys ' + Array.from(emap.get(m).keys( )));
|
console.log('kalenderErzeugen emap.values: ' + Array.from(emap.get(m).values( )));
|
var keys = Array.from(emap.get(m).keys( ));
|
for(var i = 0; i < keys.length; i++) {
|
ereignisse.set(keys[i], 'monatsboxFeiertag');
|
}
|
}
|
titel = document.createElement("div");
|
titel.textContent = monatsnamen[m];
|
elem = document.createElement("div");
|
elem.className = "monat-elem";
|
elem.appendChild(titel);
|
elem.appendChild(fabrik.monatsboxErzeugen(jahr, m, starttag, ruhetag, ereignisse, function(event) {
|
// hier auf klicks in die Monatsbox reagieren
|
var d = fabrik.datum(event);
|
var cm = d.getMonth();
|
var ct = d.getDate();
|
console.log('klick auf monat ' + cm + ' tag ' + ct);
|
|
var ereignisnamen = '';
|
if(emap.has(cm)) {
|
var tmap = emap.get(cm);
|
if(tmap.has(ct)) {
|
ereignisnamen = tmap.get(ct);
|
console.log('ereignisse: ' + ereignisnamen);
|
//kalenderblattZeigen(ct, cm, jahr, ereignisnamen);
|
}
|
}
|
kalenderblattZeigen(ct, cm, jahr, ereignisnamen);
|
|
/*
|
document.querySelector('.datum-wahl').textContent =
|
d.toLocaleDateString('de-DE') + ' (' +
|
d.toISOString() + ')';
|
*/
|
}));
|
behaelter.appendChild(elem);
|
}
|
}
|
|
function kalenderblattZeigen(tag, monat, jahr, ereignisse) {
|
var datum = new Date();
|
datum.setFullYear(jahr);
|
datum.setMonth(monat);
|
var mname = monatsnamen[monat];
|
datum.setDate(tag);
|
var wtag = datum.getDay();
|
var mt = ++monat;
|
document.querySelector('.kbl-datum').textContent = tagesnamen[wtag] +
|
', ' + tag + '. ' + mname + ' ' + jahr;
|
document.querySelector('.kbl-ereignisse').textContent = ereignisse;
|
//var kbl = document.querySelector('.kalenderblatt');
|
//kbl.classList.add('kbl-open');
|
dialogOeffnen();
|
}
|
|
function kalenderblattZuruecksetzen() {
|
document.querySelector('.kbl-datum').textContent = 'Kein Datum markiert';
|
document.querySelector('.kbl-ereignisse').textContent = '';
|
}
|
|
/*
|
* Der Content-Type 'multipart/form-data' muss weggelassen werden, damit der
|
* Browser selbsttaetig die Boundary erzeugt und der Anfrage mitgibt. Fuer
|
* diesen Content-Type muss ctype=' ' uebergeben werden.
|
*
|
* Wird ctype ganz weggelassen (ctype === undefined) bekommen POST, PUT und
|
* DELETE automatisch 'application/x-www-form-urlencoded' als Content-Type
|
* hinzugefuegt.
|
*
|
* Alle anderen Angaben fuer Content-Type muessen im Parameter ctype
|
* uebergeben werden.
|
*
|
* @param {type} method GET, PUT, POST, DELETE
|
* @param {type} callurl wohin die Anfrage gehen soll
|
* @param {type} data was im Body gesendet werden soll oder ''
|
* @param {type} scallback Callback Funktion (optional)
|
* @param {type} ctype der gewuenschte Content-Type (optional)
|
* @returns {undefined}
|
*/
|
function http_call(method, callurl, data, scallback, ctype) {
|
var xhr = new XMLHttpRequest();
|
xhr.onreadystatechange = function () {
|
if (this.readyState === 4) {
|
scallback(this.responseText, this.status);
|
}
|
};
|
xhr.open(method, callurl);
|
if (method === 'GET') {
|
xhr.setRequestHeader('Content-type', 'application/text');
|
xhr.send();
|
} else if (method === 'POST' || method === 'PUT' || method === 'DELETE') {
|
if(ctype === undefined) {
|
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
|
} else if(ctype === ' ') {
|
// keine Angabe fuer Content-Type, Browser waehlt selbst
|
} else {
|
xhr.setRequestHeader('Content-Type', ctype);
|
}
|
xhr.send(data);
|
}
|
}
|
