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'
|
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';
|
@use './reset.scss';
|
||||||
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');
|
||||||
|
|
||||||
|
$media-small-device-size: 750px;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background: #f0f0f0;
|
color: #333;
|
||||||
|
background: #f8f8f8;
|
||||||
|
// background: #fff;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
padding-bottom: 6rem;
|
||||||
width: 100%;
|
}
|
||||||
height: 3rem;
|
|
||||||
|
|
||||||
position: relative;
|
//
|
||||||
|
// Utility Classes
|
||||||
|
//
|
||||||
|
|
||||||
|
@mixin panel {
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-bottom: 1px solid #ddd;
|
box-shadow: 0 0 8px 0px #0001, 0 0 16px 8px #0001;
|
||||||
|
|
||||||
.nav-item {
|
border-radius: 0.25rem;
|
||||||
height: 3rem;
|
|
||||||
|
|
||||||
display: flex;
|
@media screen and (max-width: $media-small-device-size) {
|
||||||
align-items: center;
|
width: 100%;
|
||||||
justify-content: center;
|
max-width: 100%;
|
||||||
|
border-radius: 0;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.left {
|
@mixin padded-panel {
|
||||||
position: absolute;
|
@include panel;
|
||||||
left: 0;
|
|
||||||
|
|
||||||
padding-left: 1rem;
|
padding: 2rem;
|
||||||
|
|
||||||
display: flex;
|
@media screen and (max-width: $media-small-device-size) {
|
||||||
gap: 1rem;
|
padding: 1rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.center {
|
.hidden {
|
||||||
position: absolute;
|
display: none !important;
|
||||||
left: 50%;
|
}
|
||||||
transform: translate(-50%, 0);
|
|
||||||
|
|
||||||
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 {
|
@return $value;
|
||||||
position: absolute;
|
}
|
||||||
right: 0;
|
|
||||||
|
|
||||||
padding-right: 1rem;
|
@for $i from 1 through 5 {
|
||||||
|
h#{$i} {
|
||||||
|
font-family: 'Inter', serif;
|
||||||
|
|
||||||
display: flex;
|
$factor: pow($heading-scale, 5 - $i);
|
||||||
gap: 1rem;
|
font-size: $base-font-size * $factor;
|
||||||
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
//
|
||||||
border: 1px solid #ddd;
|
// Base Elements
|
||||||
background: #fff;
|
//
|
||||||
|
|
||||||
|
a,
|
||||||
|
a:visited {
|
||||||
|
color: royalblue;
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
//
|
||||||
display: flex;
|
// General Page Structure
|
||||||
flex-direction: column;
|
//
|
||||||
gap: 2rem;
|
|
||||||
|
|
||||||
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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
font-size: 26px;
|
.left,
|
||||||
font-weight: bold;
|
.center,
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.room-main {
|
@media screen and (max-width: $media-small-device-size) {
|
||||||
display: grid;
|
height: unset;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
grid-template-columns: auto 1fr;
|
.nav-group {
|
||||||
grid-template-rows: auto auto;
|
height: 4rem;
|
||||||
grid-template-areas:
|
}
|
||||||
'diagram bookings'
|
}
|
||||||
'timeline timeline';
|
|
||||||
|
|
||||||
max-width: 800px;
|
@media screen and (min-width: $media-small-device-size) {
|
||||||
|
.left,
|
||||||
|
.center,
|
||||||
|
.right {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
.room-diagram {
|
.left {
|
||||||
grid-area: diagram;
|
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 {
|
@media screen and (min-width: $media-small-device-size) {
|
||||||
padding: 1rem;
|
max-width: 75ch;
|
||||||
|
}
|
||||||
|
|
||||||
// --posto-libero-bg: #ddf;
|
padding-top: 2rem;
|
||||||
// --posto-libero-bg-1: #88f;
|
|
||||||
// --posto-libero-bg-2: #66d;
|
|
||||||
--posto-libero-bg: #8d8;
|
|
||||||
--posto-occupato-bg: #d88;
|
|
||||||
|
|
||||||
display: grid;
|
display: flex;
|
||||||
grid-template-columns: repeat(15, 1fr);
|
flex-direction: column;
|
||||||
grid-template-rows: repeat(16, 1fr);
|
align-items: center;
|
||||||
|
|
||||||
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 {
|
gap: 2rem;
|
||||||
display: flex;
|
}
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
min-width: 15rem;
|
.form {
|
||||||
width: 100%;
|
@include padded-panel;
|
||||||
|
|
||||||
padding: 0.75rem 0;
|
display: grid;
|
||||||
|
grid-template-columns: auto 1fr;
|
||||||
|
|
||||||
.seat-list {
|
gap: 0.5rem 1rem;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.seat {
|
.error {
|
||||||
padding: 0.25rem 1rem;
|
color: #d00;
|
||||||
|
}
|
||||||
|
|
||||||
display: grid;
|
.fill-row {
|
||||||
grid-template-columns: 1fr auto;
|
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 {
|
@include padded-panel;
|
||||||
background: #0001;
|
|
||||||
}
|
|
||||||
|
|
||||||
.name {
|
display: flex;
|
||||||
display: flex;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
|
||||||
|
|
||||||
&.selected {
|
gap: 1rem;
|
||||||
background: #0002;
|
|
||||||
|
|
||||||
.name {
|
@media screen and (min-width: $media-small-device-size) {
|
||||||
font-style: italic;
|
width: 450px;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.room-timeline {
|
.room-grid {
|
||||||
padding: 1rem;
|
// To absolutly position a canvas underneat and render grid lines
|
||||||
|
position: relative;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-direction: row;
|
grid-template-columns: repeat(15, 1fr);
|
||||||
gap: 0.5rem;
|
grid-template-rows: repeat(16, 1fr);
|
||||||
|
|
||||||
|
gap: 4px;
|
||||||
|
padding: 4px;
|
||||||
|
|
||||||
|
aspect-ratio: 15 / 16;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
.posto {
|
||||||
|
display: flex;
|
||||||
align-items: center;
|
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 {
|
// @media screen and (min-width: $media-small-device-size) {
|
||||||
min-width: 8rem;
|
&::before {
|
||||||
height: 3rem;
|
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;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
|
||||||
.nav-cell {
|
width: 100%;
|
||||||
position: relative;
|
|
||||||
padding: 0 1rem;
|
.seat-item {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
main {
|
body {
|
||||||
.room-main {
|
position: relative;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.room-diagram {
|
#tooltip {
|
||||||
width: 200px;
|
position: absolute;
|
||||||
}
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
padding: 0.25rem;
|
||||||
|
|
||||||
.room-timeline {
|
width: fit-content;
|
||||||
flex-direction: column;
|
|
||||||
}
|
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 {
|
img {
|
||||||
transform: rotate(180deg);
|
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