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

Login technically works

Browse Source
This commit is contained in:
aziis98
2022-03-04 01:56:15 +01:00
parent b5aecea322
commit 3aade31bd6
13 changed files with 769 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/index.html
+84 -16
View File
@@ -10,9 +10,11 @@
</head>
<body>
<header>
<div class="nav-cell left"></div>
<div class="nav-cell left">
<div class="nav-item" id="clock">14:23</div>
</div>
<div class="nav-cell center">
<div class="nav-item">Prenota Posti DM</div>
<div class="nav-item">Posti DM</div>
</div>
<div class="nav-cell right">
<div class="nav-item">Login</div>
@@ -21,53 +23,119 @@
<main>
<div class="room-name">AulaStud</div>
<div class="room-main">
<div class="room-diagram">
<img src="./diargamma-posti.jpg" alt="diargamma-posti" />
<div class="panel room-diagram">
<div
class="posto libero"
data-index="1"
style="grid-column: 3 / span 4; grid-row: 1 / span 2"
></div>
<div
class="posto libero"
data-index="2"
style="grid-column: 7 / span 4; grid-row: 1 / span 2"
></div>
<div
class="posto libero"
data-index="3"
style="grid-column: 1 / span 2; grid-row: 3 / span 4"
></div>
<div
class="posto libero"
data-index="4"
style="grid-column: 1 / span 2; grid-row: 7 / span 4"
></div>
<div
class="posto libero"
data-index="5"
style="grid-column: 3 / span 4; grid-row: 11 / span 2"
></div>
<div
class="posto occupato"
data-index="6"
style="grid-column: 7 / span 4; grid-row: 11 / span 2"
></div>
<div
class="posto occupato"
data-index="7"
style="grid-column: 8 / span 2; grid-row: 5 / span 4"
></div>
<div
class="posto occupato"
data-index="8"
style="grid-column: 14 / span 2; grid-row: 1 / span 4"
></div>
<div
class="posto occupato"
data-index="9"
style="grid-column: 14 / span 2; grid-row: 5 / span 4"
></div>
<div
class="posto occupato"
data-index="10"
style="grid-column: 14 / span 2; grid-row: 9 / span 4"
></div>
<div
class="posto occupato"
data-index="11"
style="grid-column: 14 / span 2; grid-row: 13 / span 4"
></div>
</div>
<div class="room-bookings">
<div class="panel room-bookings">
<div class="seat-list">
<div class="seat">
<div class="name">Posto 1</div>
<button disabled>Prenotato</button>
<button>Occupa</button>
</div>
<div class="seat">
<div class="name">Posto 2</div>
<button disabled>Prenotato</button>
<button>Occupa</button>
</div>
<div class="seat">
<div class="name">Posto 3</div>
<button>Prenota</button>
<button>Occupa</button>
</div>
<div class="seat">
<div class="name">Posto 4</div>
<button>Prenota</button>
<button>Occupa</button>
</div>
<div class="seat">
<div class="seat selected">
<div class="name">Posto 5</div>
<button disabled>Prenotato</button>
<button>Occupa</button>
</div>
<div class="seat">
<div class="name">Posto 6</div>
<button disabled>Prenotato</button>
<button disabled>Occupato</button>
</div>
<div class="seat">
<div class="name">Posto 7</div>
<button>Prenota</button>
<button disabled>Occupato</button>
</div>
<div class="seat">
<div class="name">Posto 8</div>
<button>Prenota</button>
<button disabled>Occupato</button>
</div>
<div class="seat">
<div class="name">Posto 9</div>
<button disabled>Prenotato</button>
<button disabled>Occupato</button>
</div>
<div class="seat">
<div class="name">Posto 10</div>
<button>Prenota</button>
<button disabled>Occupato</button>
</div>
</div>
</div>
<div class="panel room-timeline">
<button disabled>8:30 &mdash; 10:00</button>
<button disabled>10:00 &mdash; 11:00</button>
<button disabled>11:00 &mdash; 12:00</button>
<button disabled>12:00 &mdash; 13:00</button>
<button disabled>13:00 &mdash; 14:00</button>
<button>14:00 &mdash; 15:00</button>
<button>15:00 &mdash; 16:00</button>
<button>16:00 &mdash; 17:00</button>
<button disabled>17:00 &mdash; 18:00</button>
<button disabled>18:00 &mdash; 19:30</button>
</div>
</div>
</main>
</body>
client/src/style.scss
+142 -16
View File
@@ -55,6 +55,11 @@ header {
}
}
.panel {
border: 1px solid #ddd;
background: #fff;
}
main {
display: flex;
flex-direction: column;
@@ -74,47 +79,168 @@ main {
}
.room-main {
display: flex;
flex-direction: row;
gap: 1rem;
display: grid;
@media screen and (max-width: 1000px) {
flex-direction: column;
}
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
grid-template-areas:
'diagram bookings'
'timeline timeline';
max-width: 800px;
.room-diagram {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
grid-area: diagram;
}
.room-bookings {
grid-area: bookings;
}
.room-timeline {
grid-area: timeline;
}
background: #fff;
gap: 1rem;
.room-diagram {
padding: 1rem;
// --posto-libero-bg: #ddf;
// --posto-libero-bg-1: #88f;
// --posto-libero-bg-2: #66d;
--posto-libero-bg: #8d8;
--posto-occupato-bg: #d88;
display: grid;
grid-template-columns: repeat(15, 1fr);
grid-template-rows: repeat(16, 1fr);
gap: 0.25rem;
aspect-ratio: 15 / 16;
width: calc(15 * 2rem);
max-width: 500px;
.posto {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
&.libero {
background: var(--posto-libero-bg);
}
&.occupato {
background: var(--posto-occupato-bg);
}
border: 2px solid #0004;
cursor: pointer;
&:hover {
border-color: #0006;
border-width: 4px;
}
line-height: 1;
&::before {
font-size: 12px;
content: 'Posto';
}
&::after {
font-size: 12px;
content: attr(data-index);
}
}
}
.room-bookings {
display: flex;
flex-direction: column;
border: 1px solid #ddd;
background: #fff;
min-width: 15rem;
width: 100%;
padding: 0.5rem;
padding: 0.75rem 0;
.seat-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
.seat {
padding: 0.25rem 1rem;
display: grid;
grid-template-columns: 1fr auto;
height: 2.5rem;
&:hover {
background: #0001;
}
.name {
display: flex;
align-items: center;
}
&.selected {
background: #0002;
.name {
font-style: italic;
}
}
}
}
}
.room-timeline {
padding: 1rem;
display: flex;
flex-direction: row;
gap: 0.5rem;
align-items: center;
overflow-x: auto;
button {
min-width: 8rem;
height: 3rem;
}
}
}
}
@media screen and (max-width: 1000px) {
header {
height: unset;
display: flex;
flex-direction: column;
.nav-cell {
position: relative;
padding: 0 1rem;
}
}
main {
.room-main {
display: flex;
flex-direction: column;
.room-diagram {
width: 200px;
}
.room-timeline {
flex-direction: column;
}
}
}
}
client/vite.config.js
+13
View File
@@ -0,0 +1,13 @@
import { defineConfig } from 'vite'
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:4000/api',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, ''),
},
},
},
})