adding timetable

This commit is contained in:
Tobi 2023-06-20 16:36:08 +02:00
parent 4078fce05f
commit 36a4877f05
4 changed files with 309 additions and 0 deletions

53
timetable/eventData.js Normal file
View file

@ -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 */
}

28
timetable/index.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event Timetable</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="timetable">
<h1 id="headline">Headline Placeholder</h1>
<h2 id="subheadline">Subheadline Placeholder</h2>
<div id="slider-container">
<input type="range" min="0" max="4" value="0" id="slider" />
<div id="slider-day"></div>
<p id="slider-text">Slide to view other days</p>
</div>
<div id="tables-container"></div>
</div>
<div id="overlay"></div>
<script src="eventData.js"></script>
<script src="scripts.js"></script>
</body>
</html>

95
timetable/scripts.js Normal file
View file

@ -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 = `<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'));
});

133
timetable/styles.css Normal file
View file

@ -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;
}