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