10 mins into the future by default

Signed-off-by: Joey <bevilacquajoey@gmail.com>

app.js

@@ -1,5 +1,7 @@
 // vim: set ts=2 sw=2 et tw=80:
 
+// Real code
+
 const URL = 'https://usirooms.maggioni.xyz/schedule.html?name=';
 const NOW = new Date();
 
@@ -75,14 +77,13 @@ function colorRoom(roomTitle, node, time = NOW /* QuantumLeap */) {
         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.className = block.className.replace(" room-in-use", "")
-    block.style.color = isFree ? "#155724" : "#721c24";
+        .replace(" room-free", "");
+    block.className += isFree ? " room-free" : " room-in-use";
 
     block.querySelector('p').innerHTML = isFree ? 'Free' :
         currentLecture.title + "<br> (" + formatTime(currentLecture.start) + " - " +
@@ -94,12 +95,13 @@ async function buildRoomMarkup(roomTitle) {
     const room = getRoomNode();
     const title = room.querySelector('.room-title');
     title.innerHTML = roomTitle;
+    title.id = "schedule-" + 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;
+        title.innerHTML = d.title;
         const start = slot.querySelector('.start');
         start.innerHTML = formatTime(d.start);
         const end = slot.querySelector('.end');
@@ -117,25 +119,22 @@ async function buildRoomMarkup(roomTitle) {
     ROOM_LIST.appendChild(room);
 }
 
-function setTimePreview(date = NOW) {
+function setTimePreview(date) {
     const timePreview = document.getElementById('timepreviewer');
-    timePreview.innerText = formatTime(date);
+    timePreview.innerText = "Time: " + formatTime(date);
 }
 
 function setupTimeMachine() {
     const slider = document.getElementById('timemachine');
     slider.min = 0;
-    slider.max = 92 - (NOW.getHours() * 4); // 24 * 4 - now[h]
+    // Remaining minutes until 23:59
-    // 00 15 30 45 60 15 30 45 00 15 30 45
+    // 24 * 60 - [current hours * 60] - [current minutes] - [1 min to midnight]
-    // 00 00 00 00 01 01 01
+    slider.max = 1440 - (NOW.getHours() * 60) - NOW.getMinutes() - 1;
-    //
-
-    slider.value = slider.min;
 
     slider.addEventListener("input", (e) => {
-        const hours = Math.round(slider.value / 4);
+        const hours = Math.floor(slider.value / 60);
-        const mins = Math.round(slider.value % 60);
+        const mins = slider.value % 60;
-        console.log(hours, mins);
+
         let newDate = new Date();
         newDate.setHours(newDate.getHours() + hours);
         newDate.setMinutes(newDate.getMinutes() + mins);
@@ -147,6 +146,10 @@ function setupTimeMachine() {
             colorRoom(roomTitle, node, newDate);
         });
     });
+
+    // 10 mins into the future by default
+    slider.value = 10;
+    setTimePreview(new Date(NOW.getTime() + 600000));
 }
 
 (async function() {
@@ -156,4 +159,3 @@ for (const room of ROOMS) {
 })()
 
 setupTimeMachine();
-setTimePreview();

assets/index.css

@@ -0,0 +1,182 @@
+/* Inter font */
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("fonts/Inter-Regular.woff2") format("woff2"),
+       url("fonts/Inter-Regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("fonts/Inter-ExtraBold.woff2") format("woff2"),
+       url("fonts/Inter-ExtraBold.woff") format("woff");
+}
+
+/* Base */
+
+* {
+    font-family: 'Inter', sans-serif;
+    color: #212529;
+}
+
+h1 {
+    text-align: center;
+    width: 100%;
+}
+
+h2 {
+    text-align: center;
+    width: 100%;
+}
+
+/* Slider */
+
+input[type=range] {
+    -webkit-appearance: none;
+    border: 0;
+    height: 28px;
+    margin: 8px 0;
+    outline: none;
+    padding: 0 8px;
+    width: 100%;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+    background: #bdbdbd;
+    border-radius: 2px;
+    height: 4px;
+}
+
+input[type="range"]::-moz-range-track {
+    background: #bdbdbd;
+    height: 4px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: #212529;
+    border: 4px solid #ededf0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 28px;
+    margin-top: -12px;
+    width: 28px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    background: #212529;
+    border: 4px solid #ededf0;
+    border-radius: 50%;
+    cursor: pointer;
+    height: 20px;
+    width: 20px;
+}
+
+input[type="range"]::-moz-focus-outer {
+    border: 0;
+}
+
+input[type="range"]::-moz-range-progress {
+    background: #212529;
+    border-radius: 4px;
+    height: 4px;
+}
+
+/* Room map */
+
+.room-map {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding-left: 10vw;
+    padding-right: 10vw;
+    text-align: center;
+}
+
+.room {
+    margin: 0.5rem;
+    background: #ededf0;
+    border-radius: 6px;
+    padding: 0.5rem;
+    transition: all 0.5s ease;
+}
+
+.room:hover {
+    box-shadow: 0 4px 8px #0000002a;
+}
+
+.room a {
+    text-decoration: none;
+}
+
+.room h3 {
+    font-size: 1.6rem;
+    font-weight: 700;
+}
+
+.room p {
+    font-size: 1.2rem;
+}
+
+.room-big {
+    flex: 1 1 100%;
+}
+
+.room-small {
+    flex: 1 1 45%;
+}
+
+.room-free {
+    background-color: #3FE1B0;
+}
+
+.room-in-use {
+    background-color: #FF505F;
+}
+
+@media screen and (max-width: 830px) {
+    .room {
+        padding: 0.2rem;
+    }
+
+    .room-big {
+        flex: 1 1 80%;
+    }
+
+    .room-small {
+        flex: 1 1 35%;
+    }
+}
+
+/* Time */
+.timepicker {
+    border: #00000033 solid 1px;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px #0000001a;
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    margin: 2rem 5vw;
+    text-align: center;
+}
+
+/* Schedule */
+
+.schedule {
+    border: #00000033 solid 1px;
+    border-radius: 6px;
+    box-shadow: 0 1px 3px #0000001a;
+    padding: 1rem;
+    margin: 2rem 5vw;
+}
+
+.schedule h2 {
+    font-weight: 800;
+    text-align: start;
+}

index.css

@@ -1,63 +0,0 @@
-* {
-    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;
-}

index.html

@@ -1,56 +1,73 @@
 <!DOCTYPE html>
 <!-- vim: set ts=2 sw=2 et tw=80: -->
 <html>
-  <head>
+<head>
     <meta charset='utf-8'>
     <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="icon" href="assets/images/icon-64.png">
-    <link rel="stylesheet" href="index.css">
+    <link rel="manifest" href="manifest.json">
-  </head>
+    <link rel="stylesheet" href="assets/index.css">
-  <body>
+</head>
+<body>
     <h1>USI INF room availability</h1>
 
+    <div class="timepicker">
+        <h2 id="timepreviewer">Loading...</h2>
+        <input type="range" id="timemachine" />
+    </div>
+
     <div class="room-map">
         <div class="room room-big" id="SI-003">
-            <h3>SI-003</h3>
+            <a href="#schedule-SI-003">
-            <p>Free</p>
+                <h3>SI-003</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-small" id="SI-004">
-            <h3>SI-004</h3>
+            <a href="#schedule-SI-004">
-            <p>Free</p>
+                <h3>SI-004</h3>
+                <p>???</p>
+            </a>
         </div>
         <div class="room room-small" id="SI-015">
-            <h3>SI-015</h3>
+            <a href="#schedule-SI-015">
-            <p>Free</p>
+                <h3>SI-015</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-big" id="SI-006">
-            <h3>SI-006</h3>
+            <a href="#schedule-SI-006">
-            <p>Free</p>
+                <h3>SI-006</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-small" id="SI-007">
-            <h3>SI-007</h3>
+            <a href="#schedule-SI-007">
-            <p>Free</p>
+                <h3>SI-007</h3>
+                <p>???</p>
+            </a>
         </div>
         <div class="room room-small" id="SI-013">
-            <h3>SI-013</h3>
+            <a href="#schedule-SI-013">
-            <p>Free</p>
+                <h3>SI-013</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-big room" id="SI-008">
-            <h3>SI-008</h3>
+            <a href="#schedule-SI-008">
-            <p>Free</p>
+                <h3>SI-008</h3>
+                <p>???</p>
+            </a>
         </div>
     </div>
 
-    <h2 id="timepreviewer">Time: 18:00</h2>
-    <input type="range" id="timemachine" />
-
     <div class="schedule">
         <h1>Schedule for today</h1>
         <section class="times">
@@ -72,6 +89,7 @@
           </li>
         </template>
     </div>
-    <script src='index.js'></script>
+
-  </body>
+    <script src='app.js'></script>
+ </body>
 </html>

manifest.json

@@ -0,0 +1,21 @@
+{
+  "short_name": "USI Rooms",
+  "name": "USI INF Rooms",
+  "icons": [
+    {
+      "src": "./assets/images/icon-192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "./assets/images/icon-512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": "./index.html",
+  "background_color": "#fafafa",
+  "display": "standalone",
+  "scope": "./",
+  "theme_color": "#333333"
+}