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",
|
||||
"scripts": {
|
||||
"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",
|
||||
"test": "npm run build"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ module.exports = {
|
|||
entry: {
|
||||
infoscreens: './index.js',
|
||||
infodisplay: './infodisplay/infodisplay.js',
|
||||
calendar: './events/calendar.js',
|
||||
},
|
||||
output: {
|
||||
path: __dirname,
|
||||
|
|
|
|||
Loading…
Reference in a new issue