From a970cea91adc96f75f89cda6976af6fb88ea6717 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Sun, 20 Mar 2022 18:46:41 +0100 Subject: [PATCH] Aggiunte alcune delle nuove pagine --- client/index.html | 5 +- client/orari.html | 178 +++++++++++++++++++++++++++ client/{orario.html => prenota.html} | 14 ++- client/src/common.js | 32 +++-- client/src/components/time-table.js | 3 + client/src/pages/orari.js | 10 ++ client/src/pages/orario.js | 1 - client/src/pages/prenota.js | 7 ++ client/src/style.scss | 101 ++++++++++++++- client/vite.config.js | 2 - 10 files changed, 332 insertions(+), 21 deletions(-) create mode 100644 client/orari.html rename client/{orario.html => prenota.html} (70%) create mode 100644 client/src/components/time-table.js create mode 100644 client/src/pages/orari.js delete mode 100644 client/src/pages/orario.js create mode 100644 client/src/pages/prenota.js diff --git a/client/index.html b/client/index.html index 69fbc97..e73b418 100644 --- a/client/index.html +++ b/client/index.html @@ -13,7 +13,10 @@
- Posti DM + Stanze +
+
+ Orari
-
- +
+

Prenota

+
+ diff --git a/client/src/common.js b/client/src/common.js index 16acdd9..1fb493f 100644 --- a/client/src/common.js +++ b/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 links in the page. +// +// Fix page links +// + +// TODO: It might actually be better to just create a custom element +// Always append BASE_URL to all 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 diff --git a/client/src/components/time-table.js b/client/src/components/time-table.js new file mode 100644 index 0000000..51ee94f --- /dev/null +++ b/client/src/components/time-table.js @@ -0,0 +1,3 @@ +import { BASE_URL, Database } from '../common' + +export function createTimeTable(el) {} diff --git a/client/src/pages/orari.js b/client/src/pages/orari.js new file mode 100644 index 0000000..9a95d22 --- /dev/null +++ b/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() diff --git a/client/src/pages/orario.js b/client/src/pages/orario.js deleted file mode 100644 index 59506f2..0000000 --- a/client/src/pages/orario.js +++ /dev/null @@ -1 +0,0 @@ -import '../common' diff --git a/client/src/pages/prenota.js b/client/src/pages/prenota.js new file mode 100644 index 0000000..95ba864 --- /dev/null +++ b/client/src/pages/prenota.js @@ -0,0 +1,7 @@ +import '../common.js' + +async function main() { + // TODO: ... +} + +main() diff --git a/client/src/style.scss b/client/src/style.scss index 6cf23d3..17d9c80 100644 --- a/client/src/style.scss +++ b/client/src/style.scss @@ -102,18 +102,37 @@ a:visited { } } +@mixin button-panel { + background: #ddd; + color: #222; + box-shadow: 0 2px 12px 2px #0002, 0 0 2px 0px #0005; + + &:hover { + background: #d0d0d0; + } +} + button { + @include button-panel; + border: none; - 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; - &:hover { - background: #d0d0d0; + display: flex; + align-items: center; + justify-content: center; + + &:active { + background: #c4c4c4; + } + + &.square { + padding: 0; + width: 2rem; + height: 2rem; } } @@ -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; diff --git a/client/vite.config.js b/client/vite.config.js index 6a93074..e61501b 100644 --- a/client/vite.config.js +++ b/client/vite.config.js @@ -5,8 +5,6 @@ export default defineConfig(({ mode }) => { // Load environment variables with no prefixes process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') } - console.log(`BASE_URL = "${process.env.BASE_URL}"`) - return { base: process.env.BASE_URL, build: {