Aggiunte alcune delle nuove pagine

client/src/common.js

@@ -5,22 +5,25 @@ import './style.scss'
  */
 export const BASE_URL = import.meta.env.BASE_URL.replace(/\/$/, '')
 
+//
+// User
+//
+
 const NotCached = Symbol('not cached')
+let userSession = NotCached
 
 export const User = {
-    _user: NotCached,
-
     async getLogged() {
-        if (User._user === NotCached) {
+        if (userSession === NotCached) {
             console.log('Caching user data...')
 
             const res = await fetch(`${BASE_URL}/api/user`)
             const user = await res.json()
 
-            User._user = user
+            userSession = user
         }
 
-        return User._user
+        return userSession
     },
     async login(username, password) {
         try {
@@ -49,10 +52,18 @@ export const User = {
     },
 }
 
+//
+// Room Event Source
+//
+
 export function createRoomEventStream(roomId) {
     return new EventSource(`${BASE_URL}/api/room_events?id=${roomId}`)
 }
 
+//
+// Database
+//
+
 export const Database = {
     async getSeats(roomId) {
         const seatList = await (await fetch(`${BASE_URL}/api/room/seats?id=${roomId}`)).json()
@@ -88,15 +99,18 @@ export const Database = {
     },
 }
 
-// Always append BASE_URL to all <a> links in the page.
+//
+// Fix page links
+//
+
+// TODO: It might actually be better to just create a <page-link> custom element
+// Always append BASE_URL to all <a> links in the page (in development mode links should point to html files)
 document.querySelectorAll('a').forEach($a => {
     const url = $a.getAttribute('href')
     let newUrl = BASE_URL + url
 
     if (import.meta.env.MODE === 'development') {
-        if (newUrl.endsWith('/')) newUrl += 'index'
-
-        newUrl += '.html'
+        newUrl += newUrl.endsWith('/') ? 'index.html' : '.html'
     }
 
     $a.href = newUrl

client/src/components/time-table.js

@@ -0,0 +1,3 @@
+import { BASE_URL, Database } from '../common'
+
+export function createTimeTable(el) {}

client/src/pages/orari.js

@@ -0,0 +1,10 @@
+import '../common'
+import { createTimeTable } from '../components/time-table.js'
+
+const elTimeTable = document.querySelector('#orari-time-table')
+
+async function main() {
+    createTimeTable(elTimeTable)
+}
+
+main()

client/src/pages/orario.js

@@ -1 +0,0 @@
-import '../common'

client/src/pages/prenota.js

@@ -0,0 +1,7 @@
+import '../common.js'
+
+async function main() {
+    // TODO: ...
+}
+
+main()

client/src/style.scss

@@ -102,21 +102,40 @@ a:visited {
     }
 }
 
-button {
-    border: none;
+@mixin button-panel {
     background: #ddd;
-    padding: 0 0.75rem;
-    height: 2rem;
-    border-radius: 3px;
     color: #222;
-    box-shadow: 0 2px 12px 2px #0002, 0 1px 3px 0px #0003;
-    cursor: pointer;
+    box-shadow: 0 2px 12px 2px #0002, 0 0 2px 0px #0005;
 
     &:hover {
         background: #d0d0d0;
     }
 }
 
+button {
+    @include button-panel;
+
+    border: none;
+    padding: 0 0.75rem;
+    height: 2rem;
+    border-radius: 3px;
+    cursor: pointer;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:active {
+        background: #c4c4c4;
+    }
+
+    &.square {
+        padding: 0;
+        width: 2rem;
+        height: 2rem;
+    }
+}
+
 input[type='text'],
 input[type='password'],
 textarea {
@@ -197,7 +216,7 @@ main {
     width: 100%;
 
     @media screen and (min-width: $media-small-device-size) {
-        max-width: 75ch;
+        max-width: 80ch;
     }
 
     padding-top: 2rem;
@@ -349,6 +368,76 @@ main {
     }
 }
 
+//
+// Time Table
+//
+
+.time-table {
+    @include padded-panel;
+
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    width: 100%;
+
+    .controls {
+        display: flex;
+        width: 100%;
+        gap: 1rem;
+
+        justify-content: space-between;
+
+        .group {
+            display: flex;
+            gap: 1rem;
+        }
+
+        align-items: center;
+    }
+
+    .weekly {
+        display: flex;
+        width: 100%;
+        gap: 0.75rem;
+
+        .day {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            gap: 0.5rem;
+
+            .title {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                font-weight: 600;
+            }
+
+            .slot {
+                @include button-panel;
+
+                width: 100%;
+                min-height: 5rem;
+
+                padding: 0.25rem;
+                font-size: 13px;
+
+                user-select: none;
+                cursor: pointer;
+
+                .counter {
+                    font-size: 18px;
+                }
+            }
+        }
+    }
+}
+
+//
+// Tooltip
+//
+
 body {
     position: relative;