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

app.js

@@ -13,8 +13,8 @@ function roomStatus(room, callback) {
         xhr.addEventListener('load', () => {
             const parser = new DOMParser();
             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 = [];
 
             for (let lesson of lessons) {
@@ -30,8 +30,7 @@ function roomStatus(room, callback) {
                 end.setSeconds(0);
 
                 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,
                     end: end
                 });
@@ -46,11 +45,11 @@ function roomStatus(room, callback) {
 
 const ROOMS = [
     'SI-003',
-  'SI-004',
     'SI-015',
+    'SI-004',
     'SI-006',
-  'SI-007',
     'SI-013',
+    'SI-007',
     'SI-008',
 ];
 
@@ -150,10 +149,10 @@ function setupTimeMachine() {
     setTimePreview(date);
 }
 
-(async function() {
+(async () => {
     for (const room of ROOMS) {
         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">