UI pt.2

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

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: 4px;
+    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: 4px;
+    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: 4px;
+    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,55 +1,72 @@
 <!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="stylesheet" href="index.css">
-  </head>
-  <body>
+    <link rel="icon" href="assets/images/icon-64.png">
+    <link rel="manifest" href="manifest.json">
+    <link rel="stylesheet" href="assets/index.css">
+</head>
+<body>
     <h1>USI INF room availability</h1>
 
     <div class="room-map">
         <div class="room room-big" id="SI-003">
-            <h3>SI-003</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-003">
+                <h3>SI-003</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-small" id="SI-004">
-            <h3>SI-004</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-004">
+                <h3>SI-004</h3>
+                <p>???</p>
+            </a>
         </div>
         <div class="room room-small" id="SI-015">
-            <h3>SI-015</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-015">
+                <h3>SI-015</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-big" id="SI-006">
-            <h3>SI-006</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-006">
+                <h3>SI-006</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-small" id="SI-007">
-            <h3>SI-007</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-007">
+                <h3>SI-007</h3>
+                <p>???</p>
+            </a>
         </div>
         <div class="room room-small" id="SI-013">
-            <h3>SI-013</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-013">
+                <h3>SI-013</h3>
+                <p>???</p>
+            </a>
         </div>
         <!-- Row -->
         <div class="room room-big room" id="SI-008">
-            <h3>SI-008</h3>
-            <p>Free</p>
+            <a href="#schedule-SI-008">
+                <h3>SI-008</h3>
+                <p>???</p>
+            </a>
         </div>
     </div>
 
-    <h2 id="timepreviewer">Time: 18:00</h2>
-    <input type="range" id="timemachine" />
+    <div class="timepicker">
+        <h2 id="timepreviewer">Loading...</h2>
+        <input type="range" id="timemachine" />
+    </div>
 
     <div class="schedule">
         <h1>Schedule for today</h1>
@@ -72,6 +89,7 @@
           </li>
         </template>
     </div>
+
     <script src='index.js'></script>
-  </body>
+ </body>
 </html>

index.js

@@ -75,14 +75,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.style.color = isFree ? "#155724" : "#721c24";
+    block.className = isFree ?
+        block.className.replace("room-in-use", "") + " room-free" :
+        block.className.replace("room-free", "") + " room-in-use";
 
     block.querySelector('p').innerHTML = isFree ? 'Free' :
         currentLecture.title + "<br> (" + formatTime(currentLecture.start) + " - " +
@@ -94,12 +93,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');
@@ -119,23 +119,19 @@ async function buildRoomMarkup(roomTitle) {
 
 function setTimePreview(date = NOW) {
     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]
-    // 00 15 30 45 60 15 30 45 00 15 30 45
-    // 00 00 00 00 01 01 01
-    //
+    slider.max = 92 - (NOW.getHours() * 4);
 
     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);
+        const mins = slider.value % 60;
         let newDate = new Date();
         newDate.setHours(newDate.getHours() + hours);
         newDate.setMinutes(newDate.getMinutes() + mins);

manifest.json

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