const endpointFuture = 'https://api.sv-leobendorf.de/v1/events/future?tags=true&order=ASC';
const endpointFutureCategory = 'https://api.sv-leobendorf.de/v1/events/future/category?tags=true&order=ASC&category=';
const endpointDetail = 'https://api.sv-leobendorf.de/v1/events/';
const apiUrls = {
'all': endpointFuture,
'allgemein': endpointFutureCategory + 'Allgemein',
'fussball': endpointFutureCategory + 'Fu%C3%9Fball',
'tennis': endpointFutureCategory + 'Tennis',
'ski': endpointFutureCategory + 'Ski',
'la-gymnastik': endpointFutureCategory + 'LA/Gymnastik'
}
fetchEventData(apiUrls['all']);
function categoryButtonClicked(buttonId) {
let apiUrl;
if (buttonId === 'show-allgemein') {
apiUrl = apiUrls['allgemein'];
} else if (buttonId === 'show-fussball') {
apiUrl = apiUrls['fussball'];
} else if (buttonId === 'show-tennis') {
apiUrl = apiUrls['tennis'];
} else if (buttonId === 'show-ski') {
apiUrl = apiUrls['ski'];
} else if (buttonId === 'show-la-gymnastik') {
apiUrl = apiUrls['la-gymnastik'];
} else {
apiUrl = apiUrls['all'];
}
let buttonWrapper = document.getElementById('svl-event-buttons');
let buttons = buttonWrapper.getElementsByClassName('svl-event-button');
for (let i = 0; i < buttons.length; i++) {
let button = buttons[i];
if (button.id === buttonId && !button.classList.contains('active')) {
fetchEventData(apiUrl);
}
if (button.classList.contains('active')) {
button.classList.remove('active');
}
if (button.id === buttonId) {
button.classList.add('active');
}
}
}
function fetchEventData(apiUrl) {
if (typeof eventLimit === 'number' && eventLimit > 0) {
apiUrl += '&limit=' + eventLimit;
}
fetch(apiUrl)
.then(response => {
return response.json()
})
.then(data => {
let eventData = data.data;
// console.log(eventData);
if (eventData.length > 0) {
hideNoEventFoundNotice();
fillEventList(eventData);
} else {
showNoEventFoundNotice();
}
})
.catch(err => {
showNoEventFoundNotice();
console.error(err);
})
};
function fillEventList(events) {
let list = document.getElementById('svl-event-list');
list.innerHTML = '';
for (let i = 0; i < events.length; i++) {
let eventCancelled = events[i].status === 'CANCELLED';
let eventId = events[i].id;
let eventTitle = eventCancelled ? 'Abgesagt: ' + events[i].title : events[i].title;
let startDateIntl = parseGermanDateToDate(events[i].startDate);
let eventMeta = buildEventMeta(events[i], false);
let listItem = document.createElement("DIV");
listItem.classList.add('event-list-item');
if (eventCancelled) {
listItem.classList.add('event-cancelled');
}
listItem.innerHTML = '
\
\
' + getThreeLetterMonthNameFromDate(startDateIntl) + '
\
' + getDayFromDate(startDateIntl) + '
\
' + getWeekDayFromDate(startDateIntl) + '
\
\
\
\
' + eventTitle + '
\
' + eventMeta + ' \
';
list.appendChild(listItem);
animateItem(listItem);
}
}
function showNoEventFoundNotice() {
let list = document.getElementById('svl-event-list');
list.innerHTML = '';
let noEventMessage = document.getElementById('no-event-message');
animateItem(noEventMessage);
}
function hideNoEventFoundNotice() {
let noEventMessage = document.getElementById('no-event-message');
noEventMessage.style.opacity = 0;
noEventMessage.style.display = 'none';
}
function animateItem(item) {
item.style.display = 'flex';
item.offsetWidth;
requestAnimationFrame(() => item.style.opacity = 1);
}
function eventDetailButtonClicked(eventId) {
fetchEventDetailData(eventId);
}
function fetchEventDetailData(eventId) {
fetch(endpointDetail + eventId + '?tags=true')
.then(response => {
return response.json()
})
.then(data => {
if (data.success === true) {
let eventDetailData = data.data;
// console.log(eventDetailData);
showEventDetail(eventDetailData);
} else {
console.error('No event found');
}
})
.catch(err => {
console.error('No event found');
console.error(err);
})
};
function showEventDetail(event) {
let eventCancelled = event.status === 'CANCELLED';
let eventTitle = event.title;
let eventMeta = buildEventMeta(event, true);
let body = document.getElementsByTagName('body')[0];
let eventDetailOverlay = document.getElementById('svl-event-detail-overlay');
let eventDetailWrap = document.getElementById('svl-event-detail-wrap');
let eventDetailBox = document.getElementById('svl-event-detail-box');
let eventDetailContent = document.getElementById('svl-event-detail-content');
if (eventCancelled) {
eventDetailContent.classList.add('event-cancelled');
} else {
eventDetailContent.classList.remove('event-cancelled');
}
body.style.overflow = 'hidden';
eventDetailOverlay.offsetWidth;
eventDetailOverlay.style.display = 'block';
eventDetailOverlay.style.opacity = 1;
eventDetailWrap.style.display = 'flex';
eventDetailContent.innerHTML = '' + (eventCancelled ? 'Abgesagt: ' + eventTitle : eventTitle) + '
\
' + eventMeta + '';
}
function closeEventDetail(event) {
let body = document.getElementsByTagName('body')[0];
let eventDetailOverlay = document.getElementById('svl-event-detail-overlay');
let eventDetailWrap = document.getElementById('svl-event-detail-wrap');
let eventDetailCloser = document.getElementById('svl-event-detail-closer');
if (event.target == eventDetailWrap || event.target == eventDetailCloser) {
body.style.overflow = 'auto';
eventDetailOverlay.offsetWidth;
requestAnimationFrame(() => eventDetailOverlay.style.opacity = 0);
eventDetailOverlay.style.display = 'none';
eventDetailWrap.style.display = 'none';
}
}
function buildEventMeta(event, extended) {
let startDate = event.startDate;
let startTime = event.startTime;
let endDate = event.endDate;
let endTime = event.endTime;
let eventLocation = event.location;
let eventTags = buildEventTags(event.tags);
let eventDescription = event.description;
let eventUrl = event.url;
let startDateIntl = parseGermanDateToDate(startDate);
let endDateIntl = parseGermanDateToDate(endDate);
let allDayEvent = (startTime === '00:00' && endTime === '00:00') ? true : false;
let multiDayEventWithTimes = false;
let eventDate;
let eventTime;
if (allDayEvent) {
let endDateIntlMinusOneDay = endDateIntl.setDate(endDateIntl.getDate() - 1);
if (startDateIntl.getTime() === endDateIntlMinusOneDay) {
eventDate = startDate;
} else {
eventDate = startDate + ' - ' + parseDateToGermanDate(endDateIntlMinusOneDay);
}
} else {
if (startDate === endDate) {
eventDate = startDate;
eventTime = startTime + ' - ' + endTime;
} else {
multiDayEventWithTimes = true;
eventDate = startDate + ', ' + startTime + ' - ' + endDate + ', ' + endTime;
}
}
let eventMeta = '';
if (extended) {
eventMeta += '';
}
eventMeta += '' + eventDate + '
';
if (!allDayEvent && !multiDayEventWithTimes) {
eventMeta += '' + eventTime + '
';
}
if (eventLocation !== null) {
eventMeta += '' + eventLocation + '
'
}
eventMeta += eventTags;
if (extended && eventDescription !== null) {
eventMeta += ''
eventMeta += '' + eventDescription + '
'
}
if (extended && eventUrl !== null) {
eventMeta += ''
if (getHostFromUrl(eventUrl) === window.location.hostname) {
eventMeta += ''
} else {
eventMeta += ''
}
}
return eventMeta;
}
function buildEventTags(tags) {
let tagDivs = '';
for (let i = 0; i < tags.length; i++) {
const tag = tags[i];
let tagDiv = '' + tag.name + '
';
if (tag.url !== '') {
tagDiv = '' + tagDiv + '';
}
tagDivs += tagDiv;
}
return tagDivs;
}
function parseGermanDateToDate(germanDate) {
let dateParts = germanDate.split('.');
let date = new Date(dateParts[2] + '-' + dateParts[1] + '-' + dateParts[0]);
return date;
}
function parseDateToGermanDate(date) {
const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
return new Intl.DateTimeFormat('de-DE', options).format(date);
}
function getThreeLetterMonthNameFromDate(date) {
const options = { month: 'short' };
return new Intl.DateTimeFormat('de-DE', options).format(date);
}
function getDayFromDate(date) {
const options = { day: 'numeric' };
return new Intl.DateTimeFormat('de-DE', options).format(date);
}
function getWeekDayFromDate(date) {
const options = { weekday: 'long' };
return new Intl.DateTimeFormat('de-DE', options).format(date);
}
function getHostFromUrl(url) {
let link = document.createElement("A");
link.href = url;
return link.hostname;
}