phc/posti-dm
6
2
Fork 0
Code Issues 1 Pull Requests Projects Releases Wiki Activity

Aggiunte alcune delle nuove pagine

Browse Source
This commit is contained in:
aziis98
2022-03-20 18:46:41 +01:00
parent fb2db34a9b
commit a970cea91a
10 changed files with 334 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+4 -1
View File
@@ -13,7 +13,10 @@
</div>
<div class="nav-group center">
<div class="nav-item">
<a href="/">Posti DM</a>
<a href="/stanze">Stanze</a>
</div>
<div class="nav-item">
<a href="/orari">Orari</a>
</div>
</div>
<div id="nav-user" class="nav-group right">
client/orari.html
+178
View File
@@ -0,0 +1,178 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Posti DM</title>
<link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<nav>
<div class="nav-group left">
<div class="nav-item" id="clock">14:23</div>
</div>
<div class="nav-group center">
<div class="nav-item">
<a href="/">Posti DM</a>
</div>
<div class="nav-item">
<a href="/stanze">Stanze</a>
</div>
</div>
<div class="nav-group right">
<div id="login-label" class="nav-item">
<a href="/login">Login</a>
</div>
<div id="logged-label" class="nav-item hidden">
<!-- @username -->
</div>
<div id="logout-label" class="nav-item hidden">
<button id="logout-button">Logout</button>
</div>
</div>
</nav>
<main>
<div id="orari-time-table" class="time-table">
<div class="controls">
<div class="current-range">Settimana, 21 Marzo &mdash; 27 Marzo</div>
<div class="group">
<div class="previous">
<button class="square">
<i class="bx bx-chevron-left bx-sm"></i>
</button>
</div>
<div class="today">
<button class="square">
<i class="bx bxs-home"></i>
</button>
</div>
<div class="next">
<button class="square">
<i class="bx bx-chevron-right bx-sm"></i>
</button>
</div>
</div>
</div>
<div class="weekly">
<div class="day">
<div class="title">Lun 21</div>
<div class="slot">
<div class="range">8:30 &ndash; 11:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">11:00 &ndash; 13:30</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">13:30 &ndash; 16:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">16:00 &ndash; 19:30</div>
<div class="counter">100/100</div>
</div>
</div>
<div class="day">
<div class="title">Mar 21</div>
<div class="slot">
<div class="range">8:30 &ndash; 11:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">11:00 &ndash; 13:30</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">13:30 &ndash; 16:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">16:00 &ndash; 19:30</div>
<div class="counter">100/100</div>
</div>
</div>
<div class="day">
<div class="title">Mer 21</div>
<div class="slot">
<div class="range">8:30 &ndash; 11:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">11:00 &ndash; 13:30</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">13:30 &ndash; 16:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">16:00 &ndash; 19:30</div>
<div class="counter">100/100</div>
</div>
</div>
<div class="day">
<div class="title">Gio 21</div>
<div class="slot">
<div class="range">8:30 &ndash; 11:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">11:00 &ndash; 13:30</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">13:30 &ndash; 16:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">16:00 &ndash; 19:30</div>
<div class="counter">100/100</div>
</div>
</div>
<div class="day">
<div class="title">Ven 21</div>
<div class="slot">
<div class="range">8:30 &ndash; 11:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">11:00 &ndash; 13:30</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">13:30 &ndash; 16:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">16:00 &ndash; 19:30</div>
<div class="counter">100/100</div>
</div>
</div>
<div class="day">
<div class="title">Sab 21</div>
<div class="slot">
<div class="range">8:30 &ndash; 11:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">11:00 &ndash; 13:30</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">13:30 &ndash; 16:00</div>
<div class="counter">100/100</div>
</div>
<div class="slot">
<div class="range">16:00 &ndash; 19:30</div>
<div class="counter">100/100</div>
</div>
</div>
</div>
</div>
</main>
<script type="module" src="../src/pages/orari.js"></script>
</body>
</html>
client/orario.html → client/prenota.html
+12 -2
View File
@@ -5,6 +5,8 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Posti DM</title>
<link href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css" rel="stylesheet" />
</head>
<body>
<nav>
@@ -15,6 +17,12 @@
<div class="nav-item">
<a href="/">Posti DM</a>
</div>
<div class="nav-item">
<a href="/stanze">Stanze</a>
</div>
<div class="nav-item">
<a href="/orari">Orari</a>
</div>
</div>
<div class="nav-group right">
<div id="login-label" class="nav-item">
@@ -28,7 +36,9 @@
</div>
</div>
</nav>
<main></main>
<script type="module" src="../src/pages/orari.js"></script>
<main>
<p>Prenota</p>
</main>
<script type="module" src="../src/pages/prenota.js"></script>
</body>
</html>
client/src/common.js
+23 -9
View File
@@ -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
+3
View File
@@ -0,0 +1,3 @@
import { BASE_URL, Database } from '../common'
export function createTimeTable(el) {}
client/src/pages/orari.js
+10
View File
@@ -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
View File
@@ -1 +0,0 @@
import '../common'
client/src/pages/prenota.js
+7
View File
@@ -0,0 +1,7 @@
import '../common.js'
async function main() {
// TODO: ...
}
main()
client/src/style.scss
+97 -8
View File
@@ -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;
client/vite.config.js
-2
View File
@@ -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: {