diff --git a/index.css b/index.css new file mode 100644 index 0000000..b2c21d4 --- /dev/null +++ b/index.css @@ -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; +} diff --git a/index.html b/index.html index 103e4df..6a9e60f 100644 --- a/index.html +++ b/index.html @@ -3,30 +3,75 @@ - USI INF room checker + USI • Rooms availability + + + + -

USI INF room checker

-

By maggicl

-
-
+

USI INF room availability

- +
+
+

SI-003

+

Free

+
+ +
+

SI-004

+

Free

+
+
+

SI-015

+

Free

+
+ +
+

SI-006

+

Free

+
+ +
+

SI-007

+

Free

+
+
+

SI-013

+

Free

+
+ +
+

SI-008

+

Free

+
+
- +

Time: 18:00

+ - +
+

Schedule for today

+
+
+ + + + + + +
diff --git a/index.js b/index.js index 86b241f..96a10a4 100644 --- a/index.js +++ b/index.js @@ -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 + "
(" + 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();