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