Add student and parent management for trip admins

static/trip.js

@@ -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;