Add admin interface with trip and trip-admin management
This commit is contained in:
Ian Gulliver
77
static/admin.html
Normal file
77
static/admin.html
Normal file
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Admin - Rooms</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: var(--wa-font-sans);
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
opacity: 0;
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.header img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.header .spacer { flex: 1; }
|
||||
wa-card {
|
||||
margin-bottom: 1rem;
|
||||
display: block;
|
||||
}
|
||||
wa-card h3 { margin: 0 0 0.5rem 0; }
|
||||
.admin-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
.add-admin-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
.add-admin-row wa-input { flex: 1; }
|
||||
.create-trip {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
.create-trip wa-input { flex: 1; }
|
||||
.trip-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
.trip-header h3 { flex: 1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="signin" style="display: none; align-items: center; justify-content: center; height: 100vh;"></div>
|
||||
<div id="main" style="display: none;">
|
||||
<div class="header">
|
||||
<img data-bind="picture" alt="Profile">
|
||||
<span data-bind="name"></span>
|
||||
<span class="spacer"></span>
|
||||
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
|
||||
</div>
|
||||
<h2>Create Trip</h2>
|
||||
<div class="create-trip">
|
||||
<wa-input id="new-trip-name" placeholder="Trip name"></wa-input>
|
||||
<wa-button variant="brand" id="create-trip-btn">Create</wa-button>
|
||||
</div>
|
||||
<h2>Trips</h2>
|
||||
<div id="trips"></div>
|
||||
</div>
|
||||
<script type="module" src="/admin.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
99
static/admin.js
Normal file
99
static/admin.js
Normal file
@@ -0,0 +1,99 @@
|
||||
import { init, logout, api } from '/app.js';
|
||||
|
||||
const profile = await init();
|
||||
|
||||
try {
|
||||
const check = await api('GET', '/api/admin/check');
|
||||
if (!check.admin) {
|
||||
document.body.style.opacity = 1;
|
||||
document.body.textContent = 'Access denied.';
|
||||
throw new Error('not admin');
|
||||
}
|
||||
} catch (e) {
|
||||
document.body.style.opacity = 1;
|
||||
if (!document.body.textContent) document.body.textContent = 'Access denied.';
|
||||
throw e;
|
||||
}
|
||||
|
||||
document.getElementById('main').style.display = 'block';
|
||||
document.getElementById('logout-btn').addEventListener('click', logout);
|
||||
|
||||
async function loadTrips() {
|
||||
const trips = await api('GET', '/api/trips');
|
||||
const container = document.getElementById('trips');
|
||||
container.innerHTML = '';
|
||||
for (const trip of trips) {
|
||||
const card = document.createElement('wa-card');
|
||||
const header = document.createElement('div');
|
||||
header.className = 'trip-header';
|
||||
const h3 = document.createElement('h3');
|
||||
h3.textContent = trip.name;
|
||||
const deleteBtn = document.createElement('wa-button');
|
||||
deleteBtn.variant = 'danger';
|
||||
deleteBtn.size = 'small';
|
||||
deleteBtn.textContent = 'Delete Trip';
|
||||
deleteBtn.addEventListener('click', async () => {
|
||||
if (!confirm('Delete trip "' + trip.name + '"?')) return;
|
||||
await api('DELETE', '/api/trips/' + trip.id);
|
||||
loadTrips();
|
||||
});
|
||||
header.appendChild(h3);
|
||||
header.appendChild(deleteBtn);
|
||||
card.appendChild(header);
|
||||
|
||||
const adminLabel = document.createElement('strong');
|
||||
adminLabel.textContent = 'Trip Admins:';
|
||||
card.appendChild(adminLabel);
|
||||
|
||||
for (const admin of trip.admins) {
|
||||
const row = document.createElement('div');
|
||||
row.className = 'admin-row';
|
||||
const span = document.createElement('span');
|
||||
span.textContent = admin.email;
|
||||
const removeBtn = document.createElement('wa-button');
|
||||
removeBtn.variant = 'danger';
|
||||
removeBtn.size = 'small';
|
||||
removeBtn.textContent = 'Remove';
|
||||
removeBtn.addEventListener('click', async () => {
|
||||
await api('DELETE', '/api/trips/' + trip.id + '/admins/' + admin.id);
|
||||
loadTrips();
|
||||
});
|
||||
row.appendChild(span);
|
||||
row.appendChild(removeBtn);
|
||||
card.appendChild(row);
|
||||
}
|
||||
|
||||
const addRow = document.createElement('div');
|
||||
addRow.className = 'add-admin-row';
|
||||
const input = document.createElement('wa-input');
|
||||
input.placeholder = 'Admin email';
|
||||
const addBtn = document.createElement('wa-button');
|
||||
addBtn.variant = 'neutral';
|
||||
addBtn.size = 'small';
|
||||
addBtn.textContent = 'Add Admin';
|
||||
addBtn.addEventListener('click', async () => {
|
||||
const email = input.value.trim();
|
||||
if (!email) return;
|
||||
await api('POST', '/api/trips/' + trip.id + '/admins', { email });
|
||||
loadTrips();
|
||||
});
|
||||
addRow.appendChild(input);
|
||||
addRow.appendChild(addBtn);
|
||||
card.appendChild(addRow);
|
||||
|
||||
container.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('create-trip-btn').addEventListener('click', async () => {
|
||||
const input = document.getElementById('new-trip-name');
|
||||
const name = input.value.trim();
|
||||
if (!name) return;
|
||||
await api('POST', '/api/trips', { name });
|
||||
input.value = '';
|
||||
loadTrips();
|
||||
});
|
||||
|
||||
await loadTrips();
|
||||
await customElements.whenDefined('wa-button');
|
||||
document.body.style.opacity = 1;
|
||||
@@ -1,5 +1,29 @@
|
||||
const CLIENT_ID = '{{.env.CLIENT_ID}}';
|
||||
|
||||
function initHead() {
|
||||
document.documentElement.className = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'wa-dark' : 'wa-light';
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
|
||||
document.documentElement.className = e.matches ? 'wa-dark' : 'wa-light';
|
||||
});
|
||||
|
||||
const head = document.head;
|
||||
const addLink = (rel, type, href) => {
|
||||
const link = document.createElement('link');
|
||||
link.rel = rel;
|
||||
if (type) link.type = type;
|
||||
link.href = href;
|
||||
head.appendChild(link);
|
||||
};
|
||||
addLink('stylesheet', null, 'https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3/dist-cdn/styles/themes/default.css');
|
||||
|
||||
const script = document.createElement('script');
|
||||
script.type = 'module';
|
||||
script.src = 'https://cdn.jsdelivr.net/npm/@awesome.me/webawesome@3/dist-cdn/webawesome.loader.js';
|
||||
head.appendChild(script);
|
||||
}
|
||||
|
||||
initHead();
|
||||
|
||||
function getProfile() {
|
||||
const data = localStorage.getItem('profile');
|
||||
return data ? JSON.parse(data) : null;
|
||||
@@ -97,9 +121,10 @@ export async function init() {
|
||||
const buttonContainer = document.createElement('div');
|
||||
signin.appendChild(buttonContainer);
|
||||
|
||||
const isDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
google.accounts.id.renderButton(buttonContainer, {
|
||||
type: 'standard',
|
||||
theme: 'filled_black',
|
||||
theme: isDark ? 'outline' : 'filled_black',
|
||||
size: 'large',
|
||||
text: 'sign_in_with',
|
||||
shape: 'pill',
|
||||
|
||||
@@ -10,11 +10,18 @@
|
||||
<div id="main" style="display: none;">
|
||||
<h1>Rooms</h1>
|
||||
<p>Signed in as <span data-bind="email"></span></p>
|
||||
<p id="admin-link" style="display: none;"><a href="/admin">Admin Dashboard</a></p>
|
||||
</div>
|
||||
<script type="module">
|
||||
import { init } from '/app.js';
|
||||
import { init, api } from '/app.js';
|
||||
const profile = await init();
|
||||
document.getElementById('main').style.display = 'block';
|
||||
try {
|
||||
const check = await api('GET', '/api/admin/check');
|
||||
if (check.admin) {
|
||||
document.getElementById('admin-link').style.display = 'block';
|
||||
}
|
||||
} catch (e) {}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user