Initial event calendar / departures screen
This commit is contained in:
Henri Bergius
parent
125ff6fd6c
commit
d28b3f9c07
4 changed files with 195 additions and 1 deletions
105
events/calendar.js
Normal file
105
events/calendar.js
Normal file
|
|
@ -0,0 +1,105 @@
|
||||||
|
import dateformat from 'dateformat';
|
||||||
|
import timeElement from '../elements/time';
|
||||||
|
|
||||||
|
export default timeElement;
|
||||||
|
|
||||||
|
function getEvents(number) {
|
||||||
|
const now = new Date();
|
||||||
|
const allEvents = window.c_base_events.concat(window.c_base_regulars);
|
||||||
|
const current = allEvents.filter((event) => {
|
||||||
|
const start = new Date(event.start);
|
||||||
|
const end = new Date(event.start);
|
||||||
|
if (start > now) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (end < now) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
});
|
||||||
|
const upcoming = allEvents.filter((event) => {
|
||||||
|
const start = new Date(event.start);
|
||||||
|
if (start > now) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
const events = current.concat(upcoming);
|
||||||
|
events.sort((a, b) => {
|
||||||
|
if (a.start < b.start) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (a.start > b.start) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
});
|
||||||
|
return events.slice(0, number);
|
||||||
|
}
|
||||||
|
|
||||||
|
let prevDate = new Date();
|
||||||
|
function renderEvent(event, container) {
|
||||||
|
const now = new Date();
|
||||||
|
const row = document.createElement('tr');
|
||||||
|
const time = document.createElement('td');
|
||||||
|
time.className = 'time';
|
||||||
|
const destination = document.createElement('td');
|
||||||
|
destination.className = 'destination';
|
||||||
|
const code = document.createElement('td');
|
||||||
|
code.className = 'code';
|
||||||
|
const status = document.createElement('td');
|
||||||
|
status.className = 'status';
|
||||||
|
const startDate = new Date(event.start);
|
||||||
|
const pad = (t) => {
|
||||||
|
let val = `${t}`;
|
||||||
|
if (val.length === 1) {
|
||||||
|
val = `0${val}`;
|
||||||
|
}
|
||||||
|
if (val.length === 2) {
|
||||||
|
val = `0${val}`;
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
};
|
||||||
|
const timeFormat = 'HH:MM';
|
||||||
|
if (event.allDay) {
|
||||||
|
time.innerHTML = '--:--';
|
||||||
|
} else {
|
||||||
|
time.innerHTML = dateformat(startDate, timeFormat);
|
||||||
|
}
|
||||||
|
|
||||||
|
code.innerHTML = `CB${pad(event.id)}`;
|
||||||
|
destination.innerHTML = event.title;
|
||||||
|
|
||||||
|
if (startDate.toDateString() !== prevDate.toDateString()) {
|
||||||
|
if (window.innerWidth > window.innerHeight) {
|
||||||
|
status.innerHTML = dateformat(startDate, 'ddd dd.mm.');
|
||||||
|
} else {
|
||||||
|
status.innerHTML = dateformat(startDate, 'dd.mm.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (startDate.toDateString() === now.toDateString()) {
|
||||||
|
row.classList.add('today');
|
||||||
|
if (startDate < now) {
|
||||||
|
status.innerHTML = 'Ongoing';
|
||||||
|
status.classList.add('ongoing');
|
||||||
|
} else {
|
||||||
|
status.innerHTML = 'Today';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
row.appendChild(status);
|
||||||
|
row.appendChild(time);
|
||||||
|
row.appendChild(destination);
|
||||||
|
row.appendChild(code);
|
||||||
|
container.appendChild(row);
|
||||||
|
prevDate = startDate;
|
||||||
|
}
|
||||||
|
|
||||||
|
function onPageReady() {
|
||||||
|
window.removeEventListener('load', onPageReady, false);
|
||||||
|
const table = document.getElementById('events');
|
||||||
|
const events = getEvents(17);
|
||||||
|
events.forEach(event => renderEvent(event, table));
|
||||||
|
}
|
||||||
|
window.addEventListener('load', onPageReady, false);
|
||||||
88
events/index.html
Normal file
88
events/index.html
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>c-base event calendar</title>
|
||||||
|
<script src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-lite.js"></script>
|
||||||
|
<script src="../node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
|
||||||
|
<script src="https://www.c-base.org/calendar/exported/events.js"></script>
|
||||||
|
<script src="../dist/calendar.js"></script>
|
||||||
|
<link rel="stylesheet" href="../theme/c-base.css">
|
||||||
|
<style>
|
||||||
|
#events {
|
||||||
|
display: block;
|
||||||
|
height: 90vh;
|
||||||
|
margin-left: auto;
|
||||||
|
margin-right: auto;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
#events td {
|
||||||
|
font-size: 7vmin;
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
#events tr {
|
||||||
|
margin-bottom: 6vh;
|
||||||
|
}
|
||||||
|
#events tr.today {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#events td.destination {
|
||||||
|
color: hsl(35, 98%, 36%);
|
||||||
|
font-weight: bold;
|
||||||
|
max-width: 46vw;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
#events tr.today td.destination {
|
||||||
|
color: hsl(35, 98%, 46%);
|
||||||
|
}
|
||||||
|
#events td.code {
|
||||||
|
font-family: 'ceva', sans-serif;
|
||||||
|
}
|
||||||
|
#events td.status {
|
||||||
|
text-transform: lowercase;
|
||||||
|
white-space: nowrap;
|
||||||
|
padding-right: 2vw;
|
||||||
|
}
|
||||||
|
#events tr.today td.status {
|
||||||
|
background-color: hsl(35, 98%, 46%);
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
#events td.status.ongoing {
|
||||||
|
background-color: #73d216;
|
||||||
|
}
|
||||||
|
cbase-time, h1 {
|
||||||
|
font-family: 'ceva', sans-serif;
|
||||||
|
font-size: 6vmin;
|
||||||
|
line-height: 10vh;
|
||||||
|
color: #fff;
|
||||||
|
margin: 0px;
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
#screen-title {
|
||||||
|
text-align: left;
|
||||||
|
position: absolute;
|
||||||
|
left: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
}
|
||||||
|
#current-time {
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
bottom: 0px;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
@media (orientation: portrait) {
|
||||||
|
#events td.code {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 id="screen-title">c-base events</h1>
|
||||||
|
<table id="events">
|
||||||
|
</table>
|
||||||
|
<cbase-time id="current-time" interval="1" format="HH:MM"></cbase-time>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "webpack",
|
"build": "webpack",
|
||||||
"pretest": "eslint lib/*.js elements/*.js infodisplay/*.js index.js",
|
"pretest": "eslint index.js lib/*.js elements/*.js infodisplay/*.js events/*.js",
|
||||||
"start": "http-server . -p 3000 -s",
|
"start": "http-server . -p 3000 -s",
|
||||||
"test": "npm run build"
|
"test": "npm run build"
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -2,6 +2,7 @@ module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
infoscreens: './index.js',
|
infoscreens: './index.js',
|
||||||
infodisplay: './infodisplay/infodisplay.js',
|
infodisplay: './infodisplay/infodisplay.js',
|
||||||
|
calendar: './events/calendar.js',
|
||||||
},
|
},
|
||||||
output: {
|
output: {
|
||||||
path: __dirname,
|
path: __dirname,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue