10 mins into the future by default

Signed-off-by: Joey <bevilacquajoey@gmail.com>
Fix bugs
2019-09-27 09:58:31 +02:00 · 2019-09-27 09:25:37 +02:00 · 2019-09-27 08:21:07 +02:00 · 2019-09-26 23:25:17 +02:00
12 changed files with 264 additions and 104 deletions
--- a/index.js
+++ b/index.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.style.color = isFree ? "#155724" : "#721c24";
+    block.className = block.className.replace(" room-in-use", "")
+        .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]
-    // 00 15 30 45 60 15 30 45 00 15 30 45
-    // 00 00 00 00 01 01 01
-    //
-
-    slider.value = slider.min;
+    // Remaining minutes until 23:59
+    // 24 * 60 - [current hours * 60] - [current minutes] - [1 min to midnight]
+    slider.max = 1440 - (NOW.getHours() * 60) - NOW.getMinutes() - 1;

    slider.addEventListener("input", (e) => {
-        const hours = Math.round(slider.value / 4);
-        const mins = Math.round(slider.value % 60);
-        console.log(hours, mins);
+        const hours = Math.floor(slider.value / 60);
+        const mins = slider.value % 60;
+
        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();
--- a/assets/fonts/Inter-ExtraBold.woff
+++ b/assets/fonts/Inter-ExtraBold.woff
--- a/assets/fonts/Inter-ExtraBold.woff2
+++ b/assets/fonts/Inter-ExtraBold.woff2
--- a/assets/fonts/Inter-Regular.woff
+++ b/assets/fonts/Inter-Regular.woff
--- a/assets/fonts/Inter-Regular.woff2
+++ b/assets/fonts/Inter-Regular.woff2
--- a/assets/images/icon-192.png
+++ b/assets/images/icon-192.png
--- a/assets/images/icon-512.png
+++ b/assets/images/icon-512.png
--- a/assets/images/icon-64.png
+++ b/assets/images/icon-64.png
--- a/assets/index.css
+++ b/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;
+}
--- a/index.css
+++ b/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;
-}
--- a/index.html
+++ b/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="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="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>
-            <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="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>
--- a/manifest.json
+++ b/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"
+}
Author	SHA1	Message	Date
Joey	ac68a46c40	10 mins into the future by default Signed-off-by: Joey <bevilacquajoey@gmail.com>	2019-09-27 09:58:31 +02:00
Joey	ee5b5bfdad	Fix bugs * Slider now properly works * Move slider to the top * Fix class changes for room blocks Signed-off-by: Joey <bevilacquajoey@gmail.com>	2019-09-27 09:25:37 +02:00
Joey	be2003e723	Fix icons path Signed-off-by: Joey <bevilacquajoey@gmail.com>	2019-09-27 08:21:07 +02:00
Joey	4ec5db7b03	UI pt.2 Signed-off-by: Joey <bevilacquajoey@gmail.com>	2019-09-26 23:25:17 +02:00