Raggiunto primo stato presentabile
parent
b0732c9c4f
commit
bbd6b9eb7e
@ -0,0 +1,37 @@
|
||||
<!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>
|
||||
|
||||
<script type="module" src="./src/index.js"></script>
|
||||
</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>
|
||||
</nav>
|
||||
<main>
|
||||
<div class="form">
|
||||
<h3 class="fill-row">Login</h3>
|
||||
<p id="error-string" class="error fill-row hidden"></p>
|
||||
|
||||
<label for="login-username"> Username </label>
|
||||
<input type="text" id="input-login-username" />
|
||||
<label for="login-password"> Password </label>
|
||||
<input type="password" id="input-login-password" />
|
||||
|
||||
<button id="button-login" class="fill-row">Login</button>
|
||||
</div>
|
||||
</main>
|
||||
<script type="module" src="./src/pages/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,13 @@
|
||||
export function createClock(elClock) {
|
||||
const renderClock = () => {
|
||||
const pad = s => (s + '').padStart(2, '0')
|
||||
const now = new Date(),
|
||||
hours = now.getHours(),
|
||||
minutes = now.getMinutes(),
|
||||
seconds = now.getSeconds()
|
||||
elClock.innerText = `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`
|
||||
}
|
||||
|
||||
setInterval(renderClock, 1000)
|
||||
renderClock()
|
||||
}
|
||||
@ -0,0 +1,51 @@
|
||||
function renderGridLinesCanvas($canvas, [rows, cols]) {
|
||||
$canvas.width = $canvas.offsetWidth * 2
|
||||
$canvas.height = $canvas.offsetHeight * 2
|
||||
|
||||
const g = $canvas.getContext('2d')
|
||||
const width = $canvas.width / 2
|
||||
const height = $canvas.height / 2
|
||||
g.scale(2, 2)
|
||||
|
||||
g.strokeStyle = '#ddd'
|
||||
g.lineWidth = 2
|
||||
g.setLineDash([4, 4])
|
||||
|
||||
for (let i = 0; i < cols + 1; i++) {
|
||||
const x = 2 + ((width - 4) / cols) * i
|
||||
g.beginPath()
|
||||
g.moveTo(x, 0)
|
||||
g.lineTo(x, height)
|
||||
g.stroke()
|
||||
}
|
||||
|
||||
for (let j = 0; j < rows + 1; j++) {
|
||||
const y = 2 + ((height - 4) / rows) * j
|
||||
g.beginPath()
|
||||
g.moveTo(0, y)
|
||||
g.lineTo(width, y)
|
||||
g.stroke()
|
||||
}
|
||||
}
|
||||
|
||||
export function createGridLineCanvas($roomGrid) {
|
||||
const $canvas = document.createElement('canvas')
|
||||
$roomGrid.append($canvas)
|
||||
|
||||
$canvas.style.position = 'absolute'
|
||||
$canvas.style.inset = '0'
|
||||
$canvas.style.width = '100%'
|
||||
$canvas.style.height = '100%'
|
||||
$canvas.style.zIndex = '-1'
|
||||
|
||||
const [rows, cols] = getComputedStyle($roomGrid)
|
||||
.getPropertyValue('aspect-ratio')
|
||||
.split('/')
|
||||
.reverse()
|
||||
.map(s => parseInt(s))
|
||||
|
||||
const render = () => renderGridLinesCanvas($canvas, [rows, cols])
|
||||
|
||||
window.addEventListener('resize', render)
|
||||
render()
|
||||
}
|
||||
@ -0,0 +1,100 @@
|
||||
import { createRoomEventStream, Database, getLoggedUser } from '../index.js'
|
||||
import { addTooltipElementListener, resetTooltip, setTooltipText } from './tooltip.js'
|
||||
|
||||
async function renderWidget(elSeatMap, seats) {
|
||||
const user = await getLoggedUser()
|
||||
|
||||
Object.values(seats).forEach(seat => {
|
||||
const { id, occupiedBy } = seat
|
||||
|
||||
elSeatMap[id].classList.remove('libero')
|
||||
elSeatMap[id].classList.remove('occupato')
|
||||
elSeatMap[id].classList.remove('mio')
|
||||
|
||||
if (occupiedBy.length > 0) {
|
||||
const [seatOccupant] = occupiedBy
|
||||
|
||||
if (user && seatOccupant === user.id) {
|
||||
elSeatMap[id].classList.add('mio')
|
||||
} else {
|
||||
elSeatMap[id].classList.add('occupato')
|
||||
}
|
||||
} else {
|
||||
elSeatMap[id].classList.add('libero')
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export async function createSeatWidget($roomGrid, roomId) {
|
||||
const user = await getLoggedUser()
|
||||
|
||||
const elSeats = [...$roomGrid.querySelectorAll('[data-seat-id]')]
|
||||
const elSeatMap = {}
|
||||
|
||||
elSeats.forEach($seat => {
|
||||
const seatId = $seat.dataset.seatId
|
||||
$seat.dataset.index = seatId.split('-')[2]
|
||||
|
||||
elSeatMap[seatId] = $seat
|
||||
})
|
||||
|
||||
// Full widget state
|
||||
let seats = await Database.getSeats(roomId)
|
||||
|
||||
// First render
|
||||
renderWidget(elSeatMap, seats)
|
||||
|
||||
// Setup event listeners
|
||||
Object.entries(elSeatMap).forEach(([seatId, $seat]) => {
|
||||
addTooltipElementListener($hovering => {
|
||||
if ($seat.contains($hovering)) {
|
||||
const occupiedBy = seats[seatId].occupiedBy
|
||||
|
||||
if (occupiedBy.length > 0) {
|
||||
if (user && occupiedBy[0] === user.id) {
|
||||
setTooltipText(`Questo è il tuo posto!`)
|
||||
} else {
|
||||
setTooltipText(`Occupato da @${occupiedBy[0]}`)
|
||||
}
|
||||
} else {
|
||||
setTooltipText('Libero')
|
||||
}
|
||||
|
||||
return true
|
||||
} else {
|
||||
resetTooltip()
|
||||
}
|
||||
})
|
||||
|
||||
$seat.addEventListener('click', () => {
|
||||
if (!user) {
|
||||
location.href = '/login.html'
|
||||
return
|
||||
}
|
||||
|
||||
const occupiedBy = seats[seatId].occupiedBy
|
||||
|
||||
if (occupiedBy.length === 0) {
|
||||
const confirmResponse = confirm('Occupare il posto?')
|
||||
if (confirmResponse) {
|
||||
Database.occupySeat(seatId)
|
||||
}
|
||||
} else if (occupiedBy.length === 1 && occupiedBy[0] === user.id) {
|
||||
const answer = confirm('Lasciare veramente il posto?')
|
||||
if (answer) {
|
||||
Database.leaveSeat(seatId)
|
||||
}
|
||||
} else {
|
||||
alert('Posto già occupato!')
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// Refresh room diagram on message from server
|
||||
createRoomEventStream(roomId).addEventListener('message', async e => {
|
||||
console.log(e.data)
|
||||
|
||||
seats = await Database.getSeats(roomId)
|
||||
renderWidget(elSeatMap, seats)
|
||||
})
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
const LISTENERS = []
|
||||
const $tooltip = document.querySelector('#tooltip')
|
||||
|
||||
export function attachTooltip() {
|
||||
document.body.addEventListener('mousemove', e => {
|
||||
$tooltip.style.setProperty('--x', 10 + e.pageX + 'px')
|
||||
$tooltip.style.setProperty('--y', 10 + e.pageY + 'px')
|
||||
|
||||
LISTENERS.find(listener => listener(e.target))
|
||||
})
|
||||
}
|
||||
|
||||
export function addTooltipElementListener(callbackFn) {
|
||||
LISTENERS.push(callbackFn)
|
||||
}
|
||||
|
||||
export function setTooltip(mountFn) {
|
||||
$tooltip.classList.remove('hidden')
|
||||
mountFn($tooltip)
|
||||
}
|
||||
|
||||
export function setTooltipText(text) {
|
||||
$tooltip.classList.remove('hidden')
|
||||
setTooltip($t => {
|
||||
$t.innerText = text
|
||||
})
|
||||
}
|
||||
|
||||
export function resetTooltip() {
|
||||
$tooltip.classList.add('hidden')
|
||||
$tooltip.innerHTML = ''
|
||||
}
|
||||
@ -1 +1,34 @@
|
||||
import './style.scss'
|
||||
|
||||
let USER = false
|
||||
export async function getLoggedUser() {
|
||||
if (USER === false) {
|
||||
console.log('Caching user data...')
|
||||
USER = await (await fetch('/api/user')).json()
|
||||
}
|
||||
|
||||
return USER
|
||||
}
|
||||
|
||||
export function createRoomEventStream(roomId) {
|
||||
return new EventSource(`/api/room_events?id=${roomId}`)
|
||||
}
|
||||
|
||||
export const Database = {
|
||||
async getSeats(roomId) {
|
||||
const seatList = await (await fetch(`/api/room/seats?id=${roomId}`)).json()
|
||||
const seats = {}
|
||||
|
||||
seatList.forEach(seat => {
|
||||
seats[seat.id] = seat
|
||||
})
|
||||
|
||||
return seats
|
||||
},
|
||||
async occupySeat(seatId) {
|
||||
await (await fetch(`/api/seat/occupy?id=${seatId}`, { method: 'POST' })).json()
|
||||
},
|
||||
async leaveSeat(seatId) {
|
||||
await (await fetch(`/api/seat/leave?id=${seatId}`, { method: 'POST' })).json()
|
||||
},
|
||||
}
|
||||
|
||||
@ -0,0 +1,52 @@
|
||||
import { createGridLineCanvas } from '../components/gridlines.js'
|
||||
import { getLoggedUser } from '../index.js'
|
||||
import { createSeatWidget } from '../components/seats-widget.js'
|
||||
import { createClock } from '../components/clock.js'
|
||||
import { attachTooltip } from '../components/tooltip.js'
|
||||
|
||||
const elClock = document.querySelector('#clock')
|
||||
|
||||
const elLoggedLabel = document.querySelector('#logged-label')
|
||||
const elLoginLabel = document.querySelector('#login-label')
|
||||
const elLogoutLabel = document.querySelector('#logout-label')
|
||||
|
||||
const elLogoutButton = document.querySelector('#logout-button')
|
||||
|
||||
const elRoomGrid = document.querySelector('.room-grid')
|
||||
|
||||
async function logout() {
|
||||
await fetch('/api/logout', { method: 'POST' })
|
||||
location.href = '/'
|
||||
}
|
||||
|
||||
async function main() {
|
||||
const urlSearchParams = new URLSearchParams(window.location.search)
|
||||
const params = Object.fromEntries(urlSearchParams.entries())
|
||||
console.log(params)
|
||||
|
||||
elLogoutButton.addEventListener('click', () => logout())
|
||||
|
||||
const user = await getLoggedUser()
|
||||
|
||||
if (user) {
|
||||
elLoginLabel.classList.add('hidden')
|
||||
|
||||
elLoggedLabel.innerText =
|
||||
'@' + user.id + (user.permissions.length > 0 ? ` (${user.permissions.join(', ')})` : '')
|
||||
elLoggedLabel.classList.remove('hidden')
|
||||
|
||||
elLogoutLabel.classList.remove('hidden')
|
||||
}
|
||||
|
||||
// Widgets
|
||||
// createClock(elClock)
|
||||
createGridLineCanvas(elRoomGrid)
|
||||
createSeatWidget(elRoomGrid, 'aula-stud')
|
||||
|
||||
// Use tooltips only on desktop
|
||||
if (matchMedia('(pointer: fine)').matches) {
|
||||
attachTooltip()
|
||||
}
|
||||
}
|
||||
|
||||
main()
|
||||
@ -0,0 +1,79 @@
|
||||
import { getLoggedUser } from '../index.js'
|
||||
|
||||
//
|
||||
// Page Element
|
||||
//
|
||||
|
||||
const elErrorString = document.querySelector('#error-string')
|
||||
|
||||
const elLoginUsernameInput = document.querySelector('#input-login-username')
|
||||
const elLoginPasswordInput = document.querySelector('#input-login-password')
|
||||
|
||||
const elLoginButton = document.querySelector('#button-login')
|
||||
|
||||
//
|
||||
// Display error message
|
||||
//
|
||||
|
||||
let errorTimeoutHandle = null
|
||||
|
||||
function displayErrorString(e) {
|
||||
if (errorTimeoutHandle) clearTimeout(errorTimeoutHandle)
|
||||
elErrorString.classList.toggle('hidden', false)
|
||||
elErrorString.innerText = e.toString()
|
||||
errorTimeoutHandle = setTimeout(() => {
|
||||
elErrorString.classList.toggle('hidden', true)
|
||||
elErrorString.innerText = ''
|
||||
}, 5 * 1000)
|
||||
}
|
||||
|
||||
//
|
||||
// Handle Login Button
|
||||
//
|
||||
|
||||
async function login() {
|
||||
try {
|
||||
const response = await fetch('/api/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
Accept: 'application/json, text/plain, */*',
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: elLoginUsernameInput.value,
|
||||
password: elLoginPasswordInput.value,
|
||||
}),
|
||||
})
|
||||
|
||||
if (!response.ok) {
|
||||
displayErrorString(await response.text())
|
||||
return
|
||||
}
|
||||
|
||||
location.href = '/'
|
||||
} catch (e) {
|
||||
displayErrorString(e)
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Main
|
||||
//
|
||||
|
||||
async function main() {
|
||||
const user = await getLoggedUser()
|
||||
console.log(user)
|
||||
if (user) {
|
||||
location.href = '/'
|
||||
}
|
||||
|
||||
elLoginButton.addEventListener('click', () => login())
|
||||
|
||||
elLoginPasswordInput.addEventListener('keydown', e => {
|
||||
if (e.key === 'Enter') login()
|
||||
})
|
||||
|
||||
elLoginUsernameInput.focus()
|
||||
}
|
||||
|
||||
main()
|
||||
@ -1,249 +1,497 @@
|
||||
@use './reset.scss';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
|
||||
|
||||
$media-small-device-size: 750px;
|
||||
|
||||
body {
|
||||
background: #f0f0f0;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
// background: #fff;
|
||||
font-family: 'Inter', sans-serif;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 3rem;
|
||||
padding-bottom: 6rem;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
//
|
||||
// Utility Classes
|
||||
//
|
||||
|
||||
@mixin panel {
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #ddd;
|
||||
box-shadow: 0 0 8px 0px #0001, 0 0 16px 8px #0001;
|
||||
|
||||
.nav-item {
|
||||
height: 3rem;
|
||||
border-radius: 0.25rem;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@media screen and (max-width: $media-small-device-size) {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@mixin padded-panel {
|
||||
@include panel;
|
||||
|
||||
padding-left: 1rem;
|
||||
padding: 2rem;
|
||||
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
@media screen and (max-width: $media-small-device-size) {
|
||||
padding: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
// Headings
|
||||
|
||||
$base-font-size: 18px;
|
||||
$heading-scale: 1.33;
|
||||
|
||||
@function pow($number, $exponent) {
|
||||
$value: 1;
|
||||
|
||||
@if $exponent > 0 {
|
||||
@for $i from 1 through $exponent {
|
||||
$value: $value * $number;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@return $value;
|
||||
}
|
||||
|
||||
padding-right: 1rem;
|
||||
@for $i from 1 through 5 {
|
||||
h#{$i} {
|
||||
font-family: 'Inter', serif;
|
||||
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
$factor: pow($heading-scale, 5 - $i);
|
||||
font-size: $base-font-size * $factor;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.panel {
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
//
|
||||
// Base Elements
|
||||
//
|
||||
|
||||
a,
|
||||
a:visited {
|
||||
color: royalblue;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
//
|
||||
// General Page Structure
|
||||
//
|
||||
|
||||
align-items: center;
|
||||
nav {
|
||||
width: 100%;
|
||||
height: 4rem;
|
||||
position: relative;
|
||||
|
||||
padding: 2rem 1rem 2rem;
|
||||
@include panel;
|
||||
border-radius: 0;
|
||||
|
||||
.nav-group,
|
||||
.nav-item {
|
||||
height: 100%;
|
||||
|
||||
.room-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
font-size: 26px;
|
||||
font-weight: bold;
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.room-main {
|
||||
display: grid;
|
||||
@media screen and (max-width: $media-small-device-size) {
|
||||
height: unset;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
grid-template-areas:
|
||||
'diagram bookings'
|
||||
'timeline timeline';
|
||||
.nav-group {
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
max-width: 800px;
|
||||
@media screen and (min-width: $media-small-device-size) {
|
||||
.left,
|
||||
.center,
|
||||
.right {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.room-diagram {
|
||||
grid-area: diagram;
|
||||
.left {
|
||||
left: 0;
|
||||
padding-left: 1rem;
|
||||
}
|
||||
.room-bookings {
|
||||
grid-area: bookings;
|
||||
|
||||
.center {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
|
||||
font-size: 22px;
|
||||
}
|
||||
.room-timeline {
|
||||
grid-area: timeline;
|
||||
|
||||
.right {
|
||||
right: 0;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
gap: 1rem;
|
||||
main {
|
||||
width: 100%;
|
||||
|
||||
.room-diagram {
|
||||
padding: 1rem;
|
||||
@media screen and (min-width: $media-small-device-size) {
|
||||
max-width: 75ch;
|
||||
}
|
||||
|
||||
// --posto-libero-bg: #ddf;
|
||||
// --posto-libero-bg-1: #88f;
|
||||
// --posto-libero-bg-2: #66d;
|
||||
--posto-libero-bg: #8d8;
|
||||
--posto-occupato-bg: #d88;
|
||||
padding-top: 2rem;
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.room-bookings {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
min-width: 15rem;
|
||||
width: 100%;
|
||||
.form {
|
||||
@include padded-panel;
|
||||
|
||||
padding: 0.75rem 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
.seat-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem 1rem;
|
||||
|
||||
.seat {
|
||||
padding: 0.25rem 1rem;
|
||||
.error {
|
||||
color: #d00;
|
||||
}
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
.fill-row {
|
||||
grid-column: 1 / span 2;
|
||||
place-self: center;
|
||||
}
|
||||
}
|
||||
|
||||
height: 2.5rem;
|
||||
.room-diagram {
|
||||
--posto-libero-bg: #ddd;
|
||||
--posto-occupato-bg: #d88;
|
||||
--posto-mio-occupato-bg: #8d8;
|
||||
|
||||
&:hover {
|
||||
background: #0001;
|
||||
}
|
||||
@include padded-panel;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
&.selected {
|
||||
background: #0002;
|
||||
gap: 1rem;
|
||||
|
||||
.name {
|
||||
font-style: italic;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: $media-small-device-size) {
|
||||
width: 450px;
|
||||
}
|
||||
|
||||
.room-timeline {
|
||||
padding: 1rem;
|
||||
.room-grid {
|
||||
// To absolutly position a canvas underneat and render grid lines
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(15, 1fr);
|
||||
grid-template-rows: repeat(16, 1fr);
|
||||
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
|
||||
aspect-ratio: 15 / 16;
|
||||
|
||||
width: 100%;
|
||||
|
||||
.posto {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
|
||||
&.mio {
|
||||
background: var(--posto-mio-occupato-bg);
|
||||
}
|
||||
&.libero {
|
||||
background: var(--posto-libero-bg);
|
||||
}
|
||||
&.occupato {
|
||||
background: var(--posto-occupato-bg);
|
||||
}
|
||||
|
||||
border: 4px solid #0004;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
border-color: #0008;
|
||||
border-width: 4px;
|
||||
}
|
||||
|
||||
overflow-x: auto;
|
||||
line-height: 1;
|
||||
|
||||
button {
|
||||
min-width: 8rem;
|
||||
height: 3rem;
|
||||
// @media screen and (min-width: $media-small-device-size) {
|
||||
&::before {
|
||||
font-size: 12px;
|
||||
content: 'Posto';
|
||||
}
|
||||
&::after {
|
||||
font-size: 12px;
|
||||
content: attr(data-index);
|
||||
}
|
||||
// }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px) {
|
||||
header {
|
||||
height: unset;
|
||||
|
||||
.room-seat-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
|
||||
.nav-cell {
|
||||
position: relative;
|
||||
padding: 0 1rem;
|
||||
width: 100%;
|
||||
|
||||
.seat-item {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
.room-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
body {
|
||||
position: relative;
|
||||
|
||||
.room-diagram {
|
||||
width: 200px;
|
||||
}
|
||||
#tooltip {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.25rem;
|
||||
|
||||
.room-timeline {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
width: fit-content;
|
||||
|
||||
font-size: 14px;
|
||||
line-height: 1;
|
||||
|
||||
opacity: 0.8;
|
||||
|
||||
background: #666;
|
||||
color: #ddd;
|
||||
|
||||
transform: translate(var(--x, -100px), var(--y, -100px));
|
||||
|
||||
z-index: 100;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
// .panel {
|
||||
// border: 1px solid #ddd;
|
||||
// background: #fff;
|
||||
// }
|
||||
|
||||
// main {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
// gap: 2rem;
|
||||
|
||||
// align-items: center;
|
||||
|
||||
// padding: 2rem 1rem 2rem;
|
||||
|
||||
// .room-name {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
// justify-content: center;
|
||||
|
||||
// font-size: 26px;
|
||||
// font-weight: bold;
|
||||
// }
|
||||
|
||||
// .room-main {
|
||||
// display: grid;
|
||||
|
||||
// grid-template-columns: auto 1fr;
|
||||
// grid-template-rows: auto auto;
|
||||
// grid-template-areas:
|
||||
// 'diagram bookings'
|
||||
// 'timeline timeline';
|
||||
|
||||
// max-width: 800px;
|
||||
|
||||
// .room-diagram {
|
||||
// grid-area: diagram;
|
||||
// }
|
||||
// .room-bookings {
|
||||
// grid-area: bookings;
|
||||
// }
|
||||
// .room-timeline {
|
||||
// grid-area: timeline;
|
||||
// }
|
||||
|
||||
// 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;
|
||||
|
||||
// min-width: 15rem;
|
||||
// width: 100%;
|
||||
|
||||
// padding: 0.75rem 0;
|
||||
|
||||
// .seat-list {
|
||||
// display: flex;
|
||||
// flex-direction: column;
|
||||
|
||||
// .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: $media-small-device-size) {
|
||||
// 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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
img {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
@ -0,0 +1,78 @@
|
||||
package serverevents
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"log"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
type Config struct {
|
||||
Connected func(chan string)
|
||||
Disconnected func(chan string)
|
||||
}
|
||||
|
||||
type Handler interface {
|
||||
http.Handler
|
||||
Broadcast(message string)
|
||||
}
|
||||
|
||||
type handler struct {
|
||||
clients map[chan string]bool
|
||||
|
||||
Connected func(chan string)
|
||||
Disconnected func(chan string)
|
||||
}
|
||||
|
||||
func New(config *Config) Handler {
|
||||
return &handler{
|
||||
make(map[chan string]bool),
|
||||
config.Connected,
|
||||
config.Disconnected,
|
||||
}
|
||||
}
|
||||
|
||||
func (sse *handler) Broadcast(message string) {
|
||||
for client := range sse.clients {
|
||||
client <- message
|
||||
}
|
||||
}
|
||||
|
||||
func (sse *handler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
||||
w.Header().Set("Content-Type", "text/event-stream")
|
||||
w.Header().Set("Cache-Control", "no-cache")
|
||||
w.Header().Set("Connection", "keep-alive")
|
||||
w.Header().Set("Access-Control-Allow-Origin", "*")
|
||||
|
||||
client := make(chan string)
|
||||
sse.clients[client] = true
|
||||
|
||||
log.Printf(`New connection`)
|
||||
|
||||
if sse.Connected != nil {
|
||||
sse.Connected(client)
|
||||
}
|
||||
|
||||
defer func() {
|
||||
log.Printf(`Connection closed`)
|
||||
close(client)
|
||||
delete(sse.clients, client)
|
||||
if sse.Disconnected != nil {
|
||||
sse.Disconnected(client)
|
||||
}
|
||||
}()
|
||||
|
||||
flusher, _ := w.(http.Flusher)
|
||||
for {
|
||||
select {
|
||||
case message, ok := <-client:
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
|
||||
fmt.Fprintf(w, "data: %s\n\n", message)
|
||||
flusher.Flush()
|
||||
case <-r.Context().Done():
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,34 @@
|
||||
package serverevents_test
|
||||
|
||||
import (
|
||||
"log"
|
||||
"net/http"
|
||||
"testing"
|
||||
"time"
|
||||
|
||||
"git.phc.dm.unipi.it/aziis98/posti-dm/server/httputil/serverevents"
|
||||
)
|
||||
|
||||
func TestSSE(t *testing.T) {
|
||||
sse := serverevents.New(&serverevents.Config{
|
||||
Connected: func(client chan string) {
|
||||
go func() {
|
||||
log.Printf(`New client connected callback`)
|
||||
client <- "Messaggio 1 per questo client"
|
||||
time.Sleep(1 * time.Second)
|
||||
client <- "Messaggio 2 per questo client"
|
||||
}()
|
||||
},
|
||||
})
|
||||
|
||||
go func() {
|
||||
for {
|
||||
log.Printf(`Broadcasting message`)
|
||||
sse.Broadcast("Messaggio per tutti")
|
||||
time.Sleep(1 * time.Second)
|
||||
}
|
||||
}()
|
||||
|
||||
http.Handle("/sse", sse)
|
||||
http.ListenAndServe(":8000", nil)
|
||||
}
|
||||
@ -1,102 +0,0 @@
|
||||
package httputil
|
||||
|
||||
import (
|
||||
"fmt"
|
||||
"log"
|
||||
"net/http"
|
||||
)
|
||||
|
||||
type SSEHandler struct {
|
||||
clients map[chan string]bool
|
||||
|
||||
Connected func(chan string)
|
||||
Disconnected func(chan string)
|
||||
}
|
||||
|
||||
func (sse *SSEHandler) init() {
|
||||
if sse.clients == nil {
|
||||
sse.clients = make(map[chan string]bool)
|
||||
}
|
||||
}
|
||||
|
||||
func (sse *SSEHandler) Broadcast(message string) {
|
||||
sse.init()
|
||||
|
||||
for client := range sse.clients {
|
||||
client <- message
|
||||
}
|
||||
}
|
||||
|
||||
func (sse *SSEHandler) ServeHTTP(w http.ResponseWriter, r *http.Request) {
|
||||
sse.init()
|
||||
|
||||
w.Header().Set("Content-Type", "text/event-stream")
|
||||
w.Header().Set("Cache-Control", "no-cache")
|
||||
w.Header().Set("Connection", "keep-alive")
|
||||
w.Header().Set("Access-Control-Allow-Origin", "*")
|
||||
|
||||
client := make(chan string)
|
||||
sse.clients[client] = true
|
||||
|
||||
log.Printf(`New connection`)
|
||||
|
||||
if sse.Connected != nil {
|
||||
go sse.Connected(client)
|
||||
}
|
||||
|
||||
defer func() {
|
||||
log.Printf(`Connection closed`)
|
||||
close(client)
|
||||
delete(sse.clients, client)
|
||||
if sse.Disconnected != nil {
|
||||
go sse.Disconnected(client)
|
||||
}
|
||||
}()
|
||||
|
||||
flusher, _ := w.(http.Flusher)
|
||||
for {
|
||||
select {
|
||||
case message, ok := <-client:
|
||||
if !ok {
|
||||
return
|
||||
}
|
||||
|
||||
fmt.Fprintf(w, "data: %s\n\n", message)
|
||||
flusher.Flush()
|
||||
case <-r.Context().Done():
|
||||
return
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// func HandleSSE(handler func(broadcast, single chan<- string)) http.Handler {
|
||||
// broadcast := make(chan string)
|
||||
|
||||
// return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
|
||||
// w.Header().Set("Content-Type", "text/event-stream")
|
||||
// w.Header().Set("Cache-Control", "no-cache")
|
||||
// w.Header().Set("Connection", "keep-alive")
|
||||
// w.Header().Set("Access-Control-Allow-Origin", "*")
|
||||
|
||||
// client := make(chan string)
|
||||
// defer func() {
|
||||
// close(client)
|
||||
// }()
|
||||
|
||||
// go handler(broadcast, client)
|
||||
|
||||
// flusher, _ := w.(http.Flusher)
|
||||
// for {
|
||||
// select {
|
||||
// case message := <-broadcast:
|
||||
// fmt.Fprintf(w, "data: %s\n\n", message)
|
||||
// flusher.Flush()
|
||||
// case message := <-client:
|
||||
// fmt.Fprintf(w, "data: %s\n\n", message)
|
||||
// flusher.Flush()
|
||||
// case <-r.Context().Done():
|
||||
// return
|
||||
// }
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
@ -1,32 +0,0 @@
|
||||
package httputil_test
|
||||
|
||||
import (
|
||||
"log"
|
||||
"net/http"
|
||||
"testing"
|
||||
"time"
|
||||
|
||||
"git.phc.dm.unipi.it/aziis98/posti-dm/server/httputil"
|
||||
)
|
||||
|
||||
func TestSSE(t *testing.T) {
|
||||
sse := &httputil.SSEHandler{
|
||||
Connected: func(client chan string) {
|
||||
log.Printf(`New client connected callback`)
|
||||
client <- "Messaggio 1 per questo client"
|
||||
time.Sleep(1 * time.Second)
|
||||
client <- "Messaggio 2 per questo client"
|
||||
},
|
||||
}
|
||||
|
||||
go func() {
|
||||
for {
|
||||
log.Printf(`Broadcasting message`)
|
||||
sse.Broadcast("Messaggio per tutti")
|
||||
time.Sleep(1 * time.Second)
|
||||
}
|
||||
}()
|
||||
|
||||
http.Handle("/sse", sse)
|
||||
http.ListenAndServe(":8000", nil)
|
||||
}
|
||||
Loading…
Reference in New Issue