Minor js riorganization and dev setup enhancements
parent
35ffa78c35
commit
fb2db34a9b
@ -0,0 +1,34 @@
|
|||||||
|
<!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>
|
||||||
|
</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>
|
||||||
|
<div class="nav-group right">
|
||||||
|
<div id="login-label" class="nav-item">
|
||||||
|
<a href="/login">Login</a>
|
||||||
|
</div>
|
||||||
|
<div id="logged-label" class="nav-item hidden">
|
||||||
|
<!-- @username -->
|
||||||
|
</div>
|
||||||
|
<div id="logout-label" class="nav-item hidden">
|
||||||
|
<button id="logout-button">Logout</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
<main></main>
|
||||||
|
<script type="module" src="../src/pages/orari.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,103 @@
|
|||||||
|
import './style.scss'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* `BASE_URL` string from environment file without final slash (for more readable interpolated strings)
|
||||||
|
*/
|
||||||
|
export const BASE_URL = import.meta.env.BASE_URL.replace(/\/$/, '')
|
||||||
|
|
||||||
|
const NotCached = Symbol('not cached')
|
||||||
|
|
||||||
|
export const User = {
|
||||||
|
_user: NotCached,
|
||||||
|
|
||||||
|
async getLogged() {
|
||||||
|
if (User._user === NotCached) {
|
||||||
|
console.log('Caching user data...')
|
||||||
|
|
||||||
|
const res = await fetch(`${BASE_URL}/api/user`)
|
||||||
|
const user = await res.json()
|
||||||
|
|
||||||
|
User._user = user
|
||||||
|
}
|
||||||
|
|
||||||
|
return User._user
|
||||||
|
},
|
||||||
|
async login(username, password) {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`${BASE_URL}/api/login`, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json, text/plain, */*',
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ username, password }),
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
return { error: await response.text() }
|
||||||
|
}
|
||||||
|
|
||||||
|
// If successful redirect to homepage
|
||||||
|
location.href = `${BASE_URL}/`
|
||||||
|
} catch (e) {
|
||||||
|
return { error: e }
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async logout() {
|
||||||
|
await fetch(`${BASE_URL}/api/logout`, { method: 'POST' })
|
||||||
|
location.href = `${BASE_URL}/`
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createRoomEventStream(roomId) {
|
||||||
|
return new EventSource(`${BASE_URL}/api/room_events?id=${roomId}`)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Database = {
|
||||||
|
async getSeats(roomId) {
|
||||||
|
const seatList = await (await fetch(`${BASE_URL}/api/room/seats?id=${roomId}`)).json()
|
||||||
|
const seats = {}
|
||||||
|
|
||||||
|
seatList.forEach(seat => {
|
||||||
|
seats[seat.id] = seat
|
||||||
|
})
|
||||||
|
|
||||||
|
return seats
|
||||||
|
},
|
||||||
|
async occupySeat(seatId) {
|
||||||
|
const response = await fetch(`${BASE_URL}/api/seat/occupy?id=${seatId}`, {
|
||||||
|
method: 'POST',
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(await response.text())
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json()
|
||||||
|
},
|
||||||
|
async leaveSeat(seatId) {
|
||||||
|
const response = await fetch(`${BASE_URL}/api/seat/leave?id=${seatId}`, {
|
||||||
|
method: 'POST',
|
||||||
|
})
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(await response.text())
|
||||||
|
}
|
||||||
|
|
||||||
|
await response.json()
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
// Always append BASE_URL to all <a> links in the page.
|
||||||
|
document.querySelectorAll('a').forEach($a => {
|
||||||
|
const url = $a.getAttribute('href')
|
||||||
|
let newUrl = BASE_URL + url
|
||||||
|
|
||||||
|
if (import.meta.env.MODE === 'development') {
|
||||||
|
if (newUrl.endsWith('/')) newUrl += 'index'
|
||||||
|
|
||||||
|
newUrl += '.html'
|
||||||
|
}
|
||||||
|
|
||||||
|
$a.href = newUrl
|
||||||
|
})
|
||||||
@ -0,0 +1,40 @@
|
|||||||
|
import { User } from '../common.js'
|
||||||
|
|
||||||
|
function elements(el) {
|
||||||
|
return {
|
||||||
|
elLoggedLabel: el.querySelector('.logged-label'),
|
||||||
|
elLoginLabel: el.querySelector('.login-label'),
|
||||||
|
elLogoutLabel: el.querySelector('.logout-label'),
|
||||||
|
elLogoutButton: el.querySelector('.logout-button'),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setup(el) {
|
||||||
|
const { elLogoutButton } = elements(el)
|
||||||
|
|
||||||
|
elLogoutButton.addEventListener('click', () => User.logout())
|
||||||
|
}
|
||||||
|
|
||||||
|
function update(el, { user }) {
|
||||||
|
const { elLoggedLabel, elLoginLabel, elLogoutLabel } = elements(el)
|
||||||
|
|
||||||
|
elLoginLabel.classList.toggle('hidden', user)
|
||||||
|
|
||||||
|
const roleString =
|
||||||
|
user && user.permissions.length > 0 ? ` (${user.permissions.join(', ')})` : ''
|
||||||
|
|
||||||
|
elLoggedLabel.innerText = user ? `@${user.id}${roleString}` : ''
|
||||||
|
|
||||||
|
elLoggedLabel.classList.toggle('hidden', !user)
|
||||||
|
elLogoutLabel.classList.toggle('hidden', !user)
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createNavUser(el) {
|
||||||
|
setup(el)
|
||||||
|
|
||||||
|
// Load current user
|
||||||
|
;(async () => {
|
||||||
|
const user = await User.getLogged()
|
||||||
|
update(el, { user })
|
||||||
|
})()
|
||||||
|
}
|
||||||
@ -1,52 +0,0 @@
|
|||||||
import './style.scss'
|
|
||||||
|
|
||||||
export const BASE_URL = import.meta.env.BASE_URL.replace(/\/$/, '')
|
|
||||||
|
|
||||||
let USER = false
|
|
||||||
export async function getLoggedUser() {
|
|
||||||
if (USER === false) {
|
|
||||||
console.log('Caching user data...')
|
|
||||||
USER = await (await fetch(`${BASE_URL}/api/user`)).json()
|
|
||||||
}
|
|
||||||
|
|
||||||
return USER
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createRoomEventStream(roomId) {
|
|
||||||
return new EventSource(`${BASE_URL}/api/room_events?id=${roomId}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Database = {
|
|
||||||
async getSeats(roomId) {
|
|
||||||
const seatList = await (await fetch(`${BASE_URL}/api/room/seats?id=${roomId}`)).json()
|
|
||||||
const seats = {}
|
|
||||||
|
|
||||||
seatList.forEach(seat => {
|
|
||||||
seats[seat.id] = seat
|
|
||||||
})
|
|
||||||
|
|
||||||
return seats
|
|
||||||
},
|
|
||||||
async occupySeat(seatId) {
|
|
||||||
const response = await fetch(`${BASE_URL}/api/seat/occupy?id=${seatId}`, {
|
|
||||||
method: 'POST',
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(await response.text())
|
|
||||||
}
|
|
||||||
|
|
||||||
await response.json()
|
|
||||||
},
|
|
||||||
async leaveSeat(seatId) {
|
|
||||||
const response = await fetch(`${BASE_URL}/api/seat/leave?id=${seatId}`, {
|
|
||||||
method: 'POST',
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(await response.text())
|
|
||||||
}
|
|
||||||
|
|
||||||
await response.json()
|
|
||||||
},
|
|
||||||
}
|
|
||||||
@ -0,0 +1 @@
|
|||||||
|
import '../common'
|
||||||
Loading…
Reference in New Issue