Merge branch 'master' of git.maggioni.xyz:maggicl/aule

app.js

@@ -8,50 +8,49 @@ const NOW = new Date();
 const timeTable = {};
 
 function roomStatus(room, callback) {
-  return new Promise((resolve, _) => {
+    return new Promise((resolve, _) => {
-    const xhr = new XMLHttpRequest();
+        const xhr = new XMLHttpRequest();
-    xhr.addEventListener('load', () => {
+        xhr.addEventListener('load', () => {
-      const parser = new DOMParser();
+            const parser = new DOMParser();
-      const doc = parser.parseFromString(xhr.responseText, 'text/html');
+            const doc = parser.parseFromString(xhr.responseText, 'text/html');
-      const lessons =
+            const lessons = doc.querySelectorAll(
-        doc.querySelectorAll('table.rsContentTable div.rsAptSimple');
+                'table.rsContentTable div.rsAptSimple');
-      const parsed = [];
+            const parsed = [];
 
-      for (let lesson of lessons) {
+            for (let lesson of lessons) {
-        const time = lesson.querySelector('span[id$=lblOrario]');
+                const time = lesson.querySelector('span[id$=lblOrario]');
-        const start = new Date();
+                const start = new Date();
-        start.setHours(parseInt(time.innerText.substring(1,3)));
+                start.setHours(parseInt(time.innerText.substring(1,3)));
-        start.setMinutes(parseInt(time.innerText.substring(4,6)));
+                start.setMinutes(parseInt(time.innerText.substring(4,6)));
-        start.setSeconds(0);
+                start.setSeconds(0);
 
-        const end = new Date();
+                const end = new Date();
-        end.setHours(parseInt(time.innerText.substring(7,9)));
+                end.setHours(parseInt(time.innerText.substring(7,9)));
-        end.setMinutes(parseInt(time.innerText.substring(10,12)));
+                end.setMinutes(parseInt(time.innerText.substring(10,12)));
-        end.setSeconds(0);
+                end.setSeconds(0);
 
-        parsed.push({
+                parsed.push({
-          title: lesson.getAttribute('title').
+                    title: lesson.getAttribute('title'),
-            replace(/\s*S[PA] \d\d\d\d-\d\d\d\d\s*/g, ''),
+                    start: start,
-          start: start,
+                    end: end
-          end: end
+                });
+            }
+
+            resolve(parsed);
         });
-      }
+        xhr.open('GET', URL + room);
-
+        xhr.send();
-      resolve(parsed);
     });
-    xhr.open('GET', URL + room);
-    xhr.send();
-  });
 }
 
 const ROOMS = [
-  'SI-003',
+    'SI-003',
-  'SI-004',
+    'SI-015',
-  'SI-015',
+    'SI-004',
-  'SI-006',
+    'SI-006',
-  'SI-007',
+    'SI-013',
-  'SI-013',
+    'SI-007',
-  'SI-008',
+    'SI-008',
 ];
 
 const ROOM_LIST = document.querySelector(".times");
@@ -150,10 +149,10 @@ function setupTimeMachine() {
     setTimePreview(date);
 }
 
-(async function() {
+(async () => {
-for (const room of ROOMS) {
+    for (const room of ROOMS) {
-    await buildRoomMarkup(room);
+        await buildRoomMarkup(room);
-}
+    }
-})()
+})();
 
 setupTimeMachine();

assets/index.css

@@ -48,13 +48,13 @@ input[type=range] {
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
-    background: #bdbdbd;
+    background: #b1b1bc;
     border-radius: 2px;
     height: 4px;
 }
 
 input[type="range"]::-moz-range-track {
-    background: #bdbdbd;
+    background: #b1b1bc;
     height: 4px;
 }
 
@@ -180,3 +180,78 @@ input[type="range"]::-moz-range-progress {
     font-weight: 800;
     text-align: start;
 }
+
+/* Dark mode */
+
+@media(prefers-color-scheme: dark) {
+    * {
+        color: #f9f9fa;
+    }
+
+    body {
+        background: #212529;
+    }
+
+    input[type="range"] {
+        background-color: #2d3339;
+    }
+
+    input[type="range"]::-webkit-slider-runnable-track {
+        background: #7a7a8b;
+    }
+
+    input[type="range"]::-moz-range-track {
+        background: #7a7a8b;
+    }
+
+    input[type="range"]::-webkit-slider-thumb {
+        background: #f9f9fa;
+        border: 4px solid #5e5e72;
+    }
+
+    input[type="range"]::-moz-range-thumb {
+        background: #f9f9fa;
+        border: 4px solid #5e5e72;
+    }
+
+    input[type="range"]::-moz-range-progress {
+        background: #f9f9fa;
+    }
+
+    .room {
+        margin: 0.5rem;
+        background: #2d3339;
+        border-radius: 6px;
+        padding: 0.5rem;
+        transition: all 0.5s ease;
+    }
+
+
+    .room-free {
+        background-color: #3FE1B0;
+    }
+
+    .room-free:hover {
+        box-shadow: 0 4px 8px #b3ffe333;
+    }
+
+    .room-in-use {
+        background-color: #ff6a75;
+    }
+
+    .room-in-use:hover {
+        box-shadow: 0 4px 8px #ff6a7533;
+    }
+
+    .timepicker {
+        border: #384047 solid 1px;
+        background-color: #2d3339;
+        box-shadow: 0 0 0 #00000000;
+    }
+
+    .schedule {
+        border: #384047 solid 1px;
+        background-color: #2d3339;
+        box-shadow: 0 0 0 #00000000;
+    }
+}

index.html

@@ -27,18 +27,18 @@
             </a>
         </div>
         <!-- Row -->
-        <div class="room room-small" id="SI-004">
-            <a href="#schedule-SI-004">
-                <h3>SI-004</h3>
-                <p>???</p>
-            </a>
-        </div>
         <div class="room room-small" id="SI-015">
             <a href="#schedule-SI-015">
                 <h3>SI-015</h3>
                 <p>???</p>
             </a>
         </div>
+        <div class="room room-small" id="SI-004">
+            <a href="#schedule-SI-004">
+                <h3>SI-004</h3>
+                <p>???</p>
+            </a>
+        </div>
         <!-- Row -->
         <div class="room room-big" id="SI-006">
             <a href="#schedule-SI-006">
@@ -47,18 +47,18 @@
             </a>
         </div>
         <!-- Row -->
-        <div class="room room-small" id="SI-007">
-            <a href="#schedule-SI-007">
-                <h3>SI-007</h3>
-                <p>???</p>
-            </a>
-        </div>
         <div class="room room-small" id="SI-013">
             <a href="#schedule-SI-013">
                 <h3>SI-013</h3>
                 <p>???</p>
             </a>
         </div>
+        <div class="room room-small" id="SI-007">
+            <a href="#schedule-SI-007">
+                <h3>SI-007</h3>
+                <p>???</p>
+            </a>
+        </div>
         <!-- Row -->
         <div class="room room-big room" id="SI-008">
             <a href="#schedule-SI-008">
@@ -74,19 +74,19 @@
         </section>
 
         <template id="room">
-          <h2 class="room-title"></h2>
+            <h2 class="room-title"></h2>
-          <ul class="list"></ul>
+            <ul class="list"></ul>
         </template>
 
         <template id="time-free">
-          <li><strong>Free all day</strong></li>
+            <li><strong>Free all day</strong></li>
         </template>
 
         <template id="time-slot">
-          <li>
+            <li>
-            <span class="title"></span>
+                <span class="title"></span>
-            (<span class="start"></span>-<span class="end"></span>)
+                (<span class="start"></span>-<span class="end"></span>)
-          </li>
+            </li>
         </template>
     </div>
 

manifest.json

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