From 36a4877f053a820407a0119d2ed527c926b8e67f Mon Sep 17 00:00:00 2001 From: tobi Date: Tue, 20 Jun 2023 16:36:08 +0200 Subject: [PATCH] adding timetable --- timetable/eventData.js | 53 ++++++++++++++++ timetable/index.html | 28 +++++++++ timetable/scripts.js | 95 +++++++++++++++++++++++++++++ timetable/styles.css | 133 +++++++++++++++++++++++++++++++++++++++++ 4 files changed, 309 insertions(+) create mode 100644 timetable/eventData.js create mode 100644 timetable/index.html create mode 100644 timetable/scripts.js create mode 100644 timetable/styles.css diff --git a/timetable/eventData.js b/timetable/eventData.js new file mode 100644 index 0000000..a1832c3 --- /dev/null +++ b/timetable/eventData.js @@ -0,0 +1,53 @@ +/* + +This is the only file to be modified for adding your session at FediCamp. + +Please follow the file structure as given in this example and commit your changes to the repo. +That's it! + +If you have any questions, ask in the Matrix-Room or ask Tobi. +If you aren't sure what to do, ask someone to help! + +You also can put the date & description about your session in the pad (Link in Matrix room). +It will be merged, but maybe not in time. + +As locations, please only use the following: +'Camp ground', 'Fire place', 'Lunch table', 'Stage room', 'Mobile' + +As start time please only use the following numbers: +10, 12, 14, 16, 18, 20 + +As days please only use the following days: +'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday' + + +*/ + +const eventData = { + 'Wednesday': { + 10: { + 'Camp ground': { + 'event': 'Workshop & Irgendwas hier text', + 'description': 'hier wird das Event genauer beschrieben!' + }, + 'Fire place': { + 'event': 'Event 2', + 'description': 'Description for Event 2' + } + /* other events */ + }, + 12: { + 'Lunch table': { + 'event': 'Event 3', + 'description': 'Description for Event 3' + }, + 'Stage room': { + 'event': 'Event 4', + 'description': 'Description for Event 4' + } + /* other events */ + }, + /* other times */ + }, + /* other days */ +} diff --git a/timetable/index.html b/timetable/index.html new file mode 100644 index 0000000..2524732 --- /dev/null +++ b/timetable/index.html @@ -0,0 +1,28 @@ + + + + + + Event Timetable + + + +
+

Headline Placeholder

+

Subheadline Placeholder

+ +
+ +
+

Slide to view other days

+
+ +
+
+ +
+ + + + + diff --git a/timetable/scripts.js b/timetable/scripts.js new file mode 100644 index 0000000..9c6503b --- /dev/null +++ b/timetable/scripts.js @@ -0,0 +1,95 @@ +const locations = ['Camp ground', 'Fire place', 'Lunch table', 'Stage room', 'Mobile']; +const days = ['Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']; + +function generateDayTable(day, events) { + let table = ``; + + for (let location of locations) { + table += ``; + } + + table += ''; + + for (let hour = 10; hour <= 20; hour += 2) { + table += ''; + 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 += ''; + } + table += ''; + } + + table += '
Time${location}
' + (hour < 10 ? '0' + hour : hour) + ':00' + ''; + if (event) { + 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')); +}); diff --git a/timetable/styles.css b/timetable/styles.css new file mode 100644 index 0000000..102b262 --- /dev/null +++ b/timetable/styles.css @@ -0,0 +1,133 @@ +body { + background-color: #F6F6F6; + font-family: Arial, sans-serif; +} + +#timetable { + width: 90%; + margin: 0 auto; +} + +#headline, #subheadline { + text-align: center; + color: #444; +} + +#slider-container { + width: 60%; + margin: 20px auto; + text-align: center; + position: relative; + height: 50px; +} + +#slider-text { + color: #444; + font-size: 0.8em; +} + +#slider { + display: block; + width: 100%; + margin: 20px 0; + appearance: none; + background: #D3D3D3; + outline: none; + height: 30px; + border-radius: 20px; +} + +#slider::-webkit-slider-thumb { + appearance: none; + width: 30px; + height: 30px; + background: #0066CC; + cursor: pointer; + border-radius: 50%; +} + +#slider-day { + position: absolute; + width: 100%; + height: 50px; + top: 0; + left: 0; + background: transparent; + color: #000; + display: flex; + justify-content: center; + align-items: center; + transition: none; + pointer-events: none; + font-size: 1.2em; + margin-top: -7px; +} + +.day-table { + width: 100%; + border-collapse: collapse; + display: none; + margin-bottom: 20px; + table-layout: fixed; +} + +.day-table th, .day-table td { + border: 1px solid #FFFFFF; + padding: 10px; + text-align: center; + background-color: #ADD8E6; + height: 60px; + word-break: break-word; + width: 20%; +} + +.day-table th { + background-color: #ddd; + color: #444; + text-transform: uppercase; +} + +.event-button { + background: none; + color: inherit; + border: none; + padding: 0; + font: inherit; + cursor: pointer; + outline: inherit; +} + +#overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); + display: none; + z-index: 999; +} + +#overlay-content { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: #fff; + padding: 20px; + border-radius: 5px; + text-align: center; +} + +#overlay-content p { + margin-bottom: 10px; +} + +#overlay-content button { + padding: 10px 20px; + background-color: #0066CC; + color: #fff; + border: none; + border-radius: 5px; + cursor: pointer; +}