updates and adding 2024 content

timetable/scripts.js

@@ -0,0 +1,97 @@
+/*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'));
+});