posti-dm/client/src/components/seats-widget.js

import { BASE_URL, 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)) return false

            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
        })

        // Listener for takeing or leaving a seat
        $seat.addEventListener('click', async () => {
            if (!user) {
                location.href = `${BASE_URL}/login.html`
                return
            }

            const occupiedBy = seats[seatId].occupiedBy

            if (occupiedBy.length === 0) {
                const confirmResponse = confirm('Occupare il posto?')
                if (confirmResponse) {
                    try {
                        await Database.occupySeat(seatId)
                        $seat.classList.remove('libero')
                        $seat.classList.add('mio')
                    } catch (e) {
                        alert(e.toString())
                    }
                }
            } else if (occupiedBy.length === 1 && occupiedBy[0] === user.id) {
                const answer = confirm('Lasciare veramente il posto?')
                if (answer) {
                    try {
                        await Database.leaveSeat(seatId)
                        $seat.classList.remove('mio')
                        $seat.classList.add('libero')
                    } catch (e) {
                        alert(e.toString())
                    }
                }
            } else if (
                user.permissions.includes('admin') ||
                user.permissions.includes('moderator')
            ) {
                const answer = confirm(`Liberare veramente il posto di @${occupiedBy[0]}?`)
                if (answer) {
                    try {
                        await Database.leaveSeat(seatId)
                        $seat.classList.remove('occupato')
                        $seat.classList.add('libero')
                    } catch (e) {
                        alert(e.toString())
                    }
                }
            } 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)
    })
}