forked from KABI/fedi.camp_Website
97 lines
3 KiB
JavaScript
97 lines
3 KiB
JavaScript
/*KABI Fancy Media and Communication */
|
|
|
|
const locations = ['Camp ground', 'Fire place', 'Lunch table', 'Stage room', 'Mobile'];
|
|
const days = ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
|
|
|
|
function generateDayTable(day, events) {
|
|
let table = `<table id="${day}" class="day-table"><tr><th>Time</th>`;
|
|
|
|
for (let location of locations) {
|
|
table += `<th>${location}</th>`;
|
|
}
|
|
|
|
table += '</tr>';
|
|
|
|
for (let hour = 10; hour <= 20; hour += 2) {
|
|
table += '<tr><td>' + (hour < 10 ? '0' + hour : hour) + ':00' + '</td>';
|
|
for (let location of locations) {
|
|
// Check if there is an event at this location and time
|
|
let event = events[day] && events[day][hour] && events[day][hour][location] ? events[day][hour][location] : '';
|
|
table += '<td>';
|
|
if (event) {
|
|
table += `<button class="event-button" data-day="${day}" data-hour="${hour}" data-location="${location}">${event.event}</button>`;
|
|
}
|
|
table += '</td>';
|
|
}
|
|
table += '</tr>';
|
|
}
|
|
|
|
table += '</table>';
|
|
|
|
return table;
|
|
}
|
|
|
|
// Doing the overlay shit
|
|
function showDescription(day, hour, location) {
|
|
|
|
let event = eventData[day][hour][location];
|
|
let description = event.description;
|
|
|
|
let overlay = document.getElementById('overlay');
|
|
overlay.style.display = 'block';
|
|
|
|
let content = document.createElement('div');
|
|
content.id = 'overlay-content';
|
|
|
|
let descriptionElement = document.createElement('p');
|
|
descriptionElement.innerText = description;
|
|
|
|
let closeButton = document.createElement('button');
|
|
closeButton.innerText = 'Close';
|
|
closeButton.addEventListener('click', hideOverlay);
|
|
|
|
content.appendChild(descriptionElement);
|
|
content.appendChild(closeButton);
|
|
overlay.appendChild(content);
|
|
}
|
|
|
|
|
|
function hideOverlay() {
|
|
let overlay = document.getElementById('overlay');
|
|
overlay.style.display = 'none';
|
|
overlay.innerHTML = '';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', (event) => {
|
|
let tablesContainer = document.getElementById('tables-container');
|
|
for (let day of days) {
|
|
tablesContainer.innerHTML += generateDayTable(day, eventData);
|
|
}
|
|
|
|
let slider = document.getElementById('slider');
|
|
let sliderDay = document.getElementById('slider-day');
|
|
|
|
slider.addEventListener('input', (event) => {
|
|
for (let day of days) {
|
|
document.getElementById(day).style.display = 'none';
|
|
}
|
|
|
|
document.getElementById(days[event.target.value]).style.display = 'table';
|
|
|
|
|
|
sliderDay.innerText = days[event.target.value];
|
|
});
|
|
|
|
|
|
tablesContainer.addEventListener('click', (event) => {
|
|
if (event.target.matches('.event-button')) {
|
|
let day = event.target.getAttribute('data-day');
|
|
let hour = event.target.getAttribute('data-hour');
|
|
let location = event.target.getAttribute('data-location');
|
|
showDescription(day, hour, location);
|
|
}
|
|
});
|
|
|
|
// show the first table initially
|
|
slider.dispatchEvent(new Event('input'));
|
|
});
|