fedi.camp_Website/unused_components/timetable/scripts.js

98 lines
3 KiB
JavaScript
Raw Normal View History

/*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'));
});