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()
|
||||
@ -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