forked from KABI/fedi.camp_Website
adding timetable
This commit is contained in:
parent
4078fce05f
commit
36a4877f05
4 changed files with 309 additions and 0 deletions
53
timetable/eventData.js
Normal file
53
timetable/eventData.js
Normal 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
28
timetable/index.html
Normal 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
95
timetable/scripts.js
Normal 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
133
timetable/styles.css
Normal 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;
|
||||||
|
}
|
||||||
Loading…
Reference in a new issue