Signed-off-by: Joey <bevilacquajoey@gmail.com>
This commit is contained in:
Joey 2019-09-26 18:54:29 +02:00
parent 78b4feb51d
commit 5ac9d3a28e
3 changed files with 219 additions and 43 deletions

63
index.css Normal file
View file

@ -0,0 +1,63 @@
* {
font-family: 'IBM Plex Sans', sans-serif;
}
body {
padding-left: 10vw;
padding-right: 10vw;
}
h1 {
text-align: center;
width: 100%;
}
h2 {
text-align: center;
width: 100%;
}
input[type=range] {
width: 100%;
}
.room-map {
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
}
.room {
margin: 0.5rem;
background: #e0e0e0;
border-radius: 8px;
padding: 0.2rem;
}
.room h3 {
font-size: 1.6rem;
}
.room p {
font-size: 1.2rem;
font-family: 'IBM Plex Mono', monospace;
}
.room-big {
flex: 1 1 100%;
}
.room-small {
flex: 1 1 45%;
}
.schedule {
border-color: #f1f2f3;
border-radius: 8px;
border-style: solid;
border-width: 2px;
padding: 0.2rem;
margin-top: 2rem;
margin-bottom: 1rem;
}

View file

@ -3,30 +3,75 @@
<html>
<head>
<meta charset='utf-8'>
<title>USI INF room checker</title>
<title>USI • Rooms availability</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono|IBM+Plex+Sans&display=swap">
<link rel="stylesheet" href="index.css">
</head>
<body>
<h1>USI INF room checker</h1>
<h4>By maggicl</h4>
<section class="times">
</section>
<h1>USI INF room availability</h1>
<template id="room">
<h2 class="room-title"></h2>
<ul class="list"></ul>
</template>
<div class="room-map">
<div class="room room-big" id="SI-003">
<h3>SI-003</h3>
<p>Free</p>
</div>
<!-- Row -->
<div class="room room-small" id="SI-004">
<h3>SI-004</h3>
<p>Free</p>
</div>
<div class="room room-small" id="SI-015">
<h3>SI-015</h3>
<p>Free</p>
</div>
<!-- Row -->
<div class="room room-big" id="SI-006">
<h3>SI-006</h3>
<p>Free</p>
</div>
<!-- Row -->
<div class="room room-small" id="SI-007">
<h3>SI-007</h3>
<p>Free</p>
</div>
<div class="room room-small" id="SI-013">
<h3>SI-013</h3>
<p>Free</p>
</div>
<!-- Row -->
<div class="room room-big room" id="SI-008">
<h3>SI-008</h3>
<p>Free</p>
</div>
</div>
<template id="time-free">
<li><strong>Free all day</strong></li>
</template>
<h2 id="timepreviewer">Time: 18:00</h2>
<input type="range" id="timemachine" />
<template id="time-slot">
<li>
<span class="title"></span>
(<span class="start"></span>-<span class="end"></span>)
</li>
</template>
<div class="schedule">
<h1>Schedule for today</h1>
<section class="times">
</section>
<template id="room">
<h2 class="room-title"></h2>
<ul class="list"></ul>
</template>
<template id="time-free">
<li><strong>Free all day</strong></li>
</template>
<template id="time-slot">
<li>
<span class="title"></span>
(<span class="start"></span>-<span class="end"></span>)
</li>
</template>
</div>
<script src='index.js'></script>
</body>
</html>

118
index.js
View file

@ -1,6 +1,9 @@
// vim: set ts=2 sw=2 et tw=80:
const URL = 'http://atelier.inf.usi.ch/~maggicl/proxy.php?url=https://aule.usi.ch/aule/View.aspx?name=';
const NOW = new Date();
const timeTable = {};
function roomStatus(room, callback) {
return new Promise((resolve, _) => {
@ -39,13 +42,13 @@ function roomStatus(room, callback) {
}
const ROOMS = [
'SI-003',
'SI-004',
'SI-005',
'SI-015',
'SI-006',
'SI-007',
'SI-008',
'SI-013',
'SI-015'
'SI-008',
];
const ROOM_LIST = document.querySelector(".times");
@ -53,39 +56,104 @@ const ROOM_TEMPLATE = document.getElementById("room");
const SLOT_TEMPLATE = document.getElementById("time-slot");
const FREE_SLOT_TEMPLATE = document.getElementById("time-free");
function getRoomNode() {
return document.importNode(ROOM_TEMPLATE.content, true);
}
function formatTime(date) {
return (date.getHours() < 10 ? '0' : '') + date.getHours() + ':' +
(date.getMinutes() < 10 ? '0' : '') + date.getMinutes();
const twoDigits = (n) => {
return n < 10 ? "0" + n : n;
}
return twoDigits(date.getHours()) + ':' +
twoDigits(date.getMinutes());
}
function colorRoom(roomTitle, node, time = NOW /* QuantumLeap */) {
const data = timeTable[roomTitle];
if (data == undefined) {
return
}
console.log(roomTitle, time);
const currentLecture = data.filter(d => d.start < time && d.end > time)[0];
const isFree = currentLecture === void(0);
const block = document.getElementById(roomTitle);
block.style.background = isFree ? "#d4edda" : "#f8d7da";
block.style.color = isFree ? "#155724" : "#721c24";
block.querySelector('p').innerHTML = isFree ? 'Free' :
currentLecture.title + "<br> (" + formatTime(currentLecture.start) + " - " +
formatTime(currentLecture.end) + ")";
}
async function buildRoomMarkup(roomTitle) {
const data = await roomStatus(roomTitle);
const room = document.importNode(ROOM_TEMPLATE.content, true);
const title = room.querySelector('.room-title');
title.innerHTML = roomTitle;
const list = room.querySelector('.list');
const data = await roomStatus(roomTitle);
const room = getRoomNode();
const title = room.querySelector('.room-title');
title.innerHTML = roomTitle;
const list = room.querySelector('.list');
for (const d of data) {
const slot = document.importNode(SLOT_TEMPLATE.content, true);
const title = slot.querySelector('.title');
document.getElementById("room");title.innerHTML = d.title;
const start = slot.querySelector('.start');
start.innerHTML = formatTime(d.start);
const end = slot.querySelector('.end');
end.innerHTML = formatTime(d.end);
list.appendChild(slot);
}
for (const d of data) {
const slot = document.importNode(SLOT_TEMPLATE.content, true);
const title = slot.querySelector('.title');
document.getElementById("room");title.innerHTML = d.title;
const start = slot.querySelector('.start');
start.innerHTML = formatTime(d.start);
const end = slot.querySelector('.end');
end.innerHTML = formatTime(d.end);
list.appendChild(slot);
}
if (data.length == 0) {
list.appendChild(document.importNode(FREE_SLOT_TEMPLATE.content, true));
}
timeTable[roomTitle] = data;
colorRoom(roomTitle, room);
ROOM_LIST.appendChild(room);
if (data.length == 0) {
list.appendChild(document.importNode(FREE_SLOT_TEMPLATE.content, true));
}
ROOM_LIST.appendChild(room);
}
function setTimePreview(date = NOW) {
const timePreview = document.getElementById('timepreviewer');
timePreview.innerText = formatTime(date);
}
function setupTimeMachine() {
const slider = document.getElementById('timemachine');
slider.min = 0;
slider.max = 92 - (NOW.getHours() * 4); // 24 * 4 - now[h]
// 00 15 30 45 60 15 30 45 00 15 30 45
// 00 00 00 00 01 01 01
//
slider.value = slider.min;
slider.addEventListener("input", (e) => {
const hours = Math.round(slider.value / 4);
const mins = Math.round(slider.value % 60);
console.log(hours, mins);
let newDate = new Date();
newDate.setHours(newDate.getHours() + hours);
newDate.setMinutes(newDate.getMinutes() + mins);
const node = getRoomNode();
setTimePreview(newDate)
ROOMS.forEach((roomTitle) => {
colorRoom(roomTitle, node, newDate);
});
});
}
(async function() {
for (const room of ROOMS) {
await buildRoomMarkup(room);
await buildRoomMarkup(room);
}
})()
setupTimeMachine();
setTimePreview();