helios/rooms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add student and parent management for trip admins

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-14 22:21:36 -08:00
parent 7cc73fe02c
commit 7afbb1efa2
4 changed files with 390 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
static/admin.js
View File

@@ -27,7 +27,10 @@ async function loadTrips() {
const header = document.createElement('div');
header.className = 'trip-header';
const h3 = document.createElement('h3');
h3.textContent = trip.name;
const tripLink = document.createElement('a');
tripLink.href = '/trip/' + trip.id;
tripLink.textContent = trip.name;
h3.appendChild(tripLink);
const deleteBtn = document.createElement('wa-button');
deleteBtn.variant = 'danger';
deleteBtn.size = 'small';

81
static/trip.html Normal file
View File

@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trip - 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; }
.parent-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
margin-left: 1rem;
}
.add-parent-row {
display: flex;
gap: 0.5rem;
margin-top: 0.5rem;
margin-left: 1rem;
}
.add-parent-row wa-input { flex: 1; }
.add-student {
display: flex;
gap: 0.5rem;
margin-bottom: 2rem;
}
.add-student wa-input { flex: 1; }
.student-header {
display: flex;
align-items: center;
gap: 0.5rem;
}
.student-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 id="trip-name"></h2>
<h3>Add Student</h3>
<div class="add-student">
<wa-input id="new-student-name" placeholder="Student name"></wa-input>
<wa-input id="new-student-email" placeholder="Student email"></wa-input>
<wa-button variant="brand" id="add-student-btn">Add</wa-button>
</div>
<h3>Students</h3>
<div id="students"></div>
</div>
<script type="module" src="/trip.js"></script>
</body>
</html>

101
static/trip.js Normal file
View File

@@ -0,0 +1,101 @@
import { init, logout, api } from '/app.js';
const tripID = location.pathname.split('/').pop();
const profile = await init();
let trip;
try {
trip = await api('GET', '/api/trips/' + tripID);
} catch (e) {
document.body.style.opacity = 1;
document.body.textContent = 'Access denied.';
throw e;
}
document.getElementById('trip-name').textContent = trip.name;
document.getElementById('main').style.display = 'block';
document.getElementById('logout-btn').addEventListener('click', logout);
async function loadStudents() {
const students = await api('GET', '/api/trips/' + tripID + '/students');
const container = document.getElementById('students');
container.innerHTML = '';
for (const student of students) {
const card = document.createElement('wa-card');
const header = document.createElement('div');
header.className = 'student-header';
const h3 = document.createElement('h3');
h3.textContent = student.name + ' (' + student.email + ')';
const deleteBtn = document.createElement('wa-button');
deleteBtn.variant = 'danger';
deleteBtn.size = 'small';
deleteBtn.textContent = 'Remove';
deleteBtn.addEventListener('click', async () => {
if (!confirm('Remove student "' + student.name + '"?')) return;
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id);
loadStudents();
});
header.appendChild(h3);
header.appendChild(deleteBtn);
card.appendChild(header);
const parentLabel = document.createElement('strong');
parentLabel.textContent = 'Parents:';
card.appendChild(parentLabel);
for (const parent of student.parents) {
const row = document.createElement('div');
row.className = 'parent-row';
const span = document.createElement('span');
span.textContent = parent.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/' + tripID + '/students/' + student.id + '/parents/' + parent.id);
loadStudents();
});
row.appendChild(span);
row.appendChild(removeBtn);
card.appendChild(row);
}
const addRow = document.createElement('div');
addRow.className = 'add-parent-row';
const input = document.createElement('wa-input');
input.placeholder = 'Parent email';
const addBtn = document.createElement('wa-button');
addBtn.variant = 'neutral';
addBtn.size = 'small';
addBtn.textContent = 'Add Parent';
addBtn.addEventListener('click', async () => {
const email = input.value.trim();
if (!email) return;
await api('POST', '/api/trips/' + tripID + '/students/' + student.id + '/parents', { email });
loadStudents();
});
addRow.appendChild(input);
addRow.appendChild(addBtn);
card.appendChild(addRow);
container.appendChild(card);
}
}
document.getElementById('add-student-btn').addEventListener('click', async () => {
const nameInput = document.getElementById('new-student-name');
const emailInput = document.getElementById('new-student-email');
const name = nameInput.value.trim();
const email = emailInput.value.trim();
if (!name || !email) return;
await api('POST', '/api/trips/' + tripID + '/students', { name, email });
nameInput.value = '';
emailInput.value = '';
loadStudents();
});
await loadStudents();
await customElements.whenDefined('wa-button');
document.body.style.opacity = 1;