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

Add role-based trip views and keep expandos open after adding items

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-16 09:50:19 -08:00
parent 33c5bd9632
commit 8ec03f1d96
4 changed files with 314 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
static/admin.js
View File

@@ -24,6 +24,7 @@ async function loadTrips() {
container.innerHTML = '';
for (const trip of trips) {
const card = document.createElement('wa-card');
card.dataset.tripId = trip.id;
const nameRow = document.createElement('div');
nameRow.style.display = 'flex';
@@ -77,7 +78,14 @@ async function loadTrips() {
const email = input.value.trim();
if (!email) return;
await api('POST', '/api/trips/' + trip.id + '/admins', { email });
loadTrips();
await loadTrips();
const card = container.querySelector('[data-trip-id="' + trip.id + '"]');
if (card) {
const det = card.querySelector('wa-details');
if (det) det.open = true;
const inp = card.querySelector('wa-input');
if (inp) inp.focus();
}
};
addBtn.addEventListener('click', doAdd);
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doAdd(); });

50
static/trip.html
View File

@@ -73,6 +73,9 @@
.room-label { font-weight: bold; font-size: 0.8rem; margin-bottom: 0.2rem; }
.solver-score { font-size: 0.8rem; margin-top: 0.3rem; color: var(--wa-color-neutral-500); }
.divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; }
.pref-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.pref-row .pref-name { flex: 1; font-size: 0.85rem; }
.pref-row wa-select { width: 14rem; }
</style>
</head>
<body>
@@ -85,28 +88,33 @@
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
</div>
<h2 id="trip-name"></h2>
<div id="trip-settings">
<label>Students per room: <input id="room-size" type="number" min="1"></label>
<label>Prefer Not cost: <input id="pn-multiple" type="number" min="1"></label>
<label>No Prefer cost: <input id="np-cost" type="number" min="0"></label>
</div>
<hr class="divider">
<div id="conflicts"></div>
<div id="mismatches"></div>
<div id="hard-conflicts"></div>
<div id="solver">
<wa-button id="solve-btn" size="small">Solve Rooms</wa-button>
<div id="solver-results"></div>
</div>
<hr class="divider">
<div id="students"></div>
<wa-details summary="Add Student">
<div class="add-form">
<wa-input id="new-student-name" placeholder="Name" size="small"></wa-input>
<wa-input id="new-student-email" placeholder="Email" size="small"></wa-input>
<wa-button size="small" id="add-student-btn">Add Student</wa-button>
<div id="admin-view" style="display: none;">
<div id="trip-settings">
<label>Students per room: <input id="room-size" type="number" min="1"></label>
<label>Prefer Not cost: <input id="pn-multiple" type="number" min="1"></label>
<label>No Prefer cost: <input id="np-cost" type="number" min="0"></label>
</div>
</wa-details>
<hr class="divider">
<div id="conflicts"></div>
<div id="mismatches"></div>
<div id="hard-conflicts"></div>
<div id="solver">
<wa-button id="solve-btn" size="small">Solve Rooms</wa-button>
<div id="solver-results"></div>
</div>
<hr class="divider">
<div id="students"></div>
<wa-details summary="Add Student">
<div class="add-form">
<wa-input id="new-student-name" placeholder="Name" size="small"></wa-input>
<wa-input id="new-student-email" placeholder="Email" size="small"></wa-input>
<wa-button size="small" id="add-student-btn">Add Student</wa-button>
</div>
</wa-details>
</div>
<div id="member-view" style="display: none;">
<div id="member-students"></div>
</div>
</div>
<script type="module" src="/trip.js"></script>
</body>

112
static/trip.js
View File

@@ -5,9 +5,12 @@ const tripID = location.pathname.split('/').pop();
const profile = await init();
let trip;
let trip, me;
try {
trip = await api('GET', '/api/trips/' + tripID);
[trip, me] = await Promise.all([
api('GET', '/api/trips/' + tripID),
api('GET', '/api/trips/' + tripID + '/me')
]);
} catch (e) {
document.body.style.opacity = 1;
document.body.textContent = 'Access denied.';
@@ -15,11 +18,21 @@ try {
}
document.getElementById('trip-name').textContent = trip.name;
document.getElementById('main').style.display = 'block';
document.getElementById('logout-btn').addEventListener('click', logout);
if (me.role !== 'admin') {
document.getElementById('member-view').style.display = 'block';
await renderMemberView(me);
await customElements.whenDefined('wa-button');
document.body.style.opacity = 1;
} else {
await (async () => {
document.getElementById('admin-view').style.display = 'block';
document.getElementById('room-size').value = trip.room_size;
document.getElementById('pn-multiple').value = trip.prefer_not_multiple;
document.getElementById('np-cost').value = trip.no_prefer_cost;
document.getElementById('main').style.display = 'block';
document.getElementById('logout-btn').addEventListener('click', logout);
document.getElementById('room-size').addEventListener('change', async () => {
const size = parseInt(document.getElementById('room-size').value);
if (size >= 1) await api('PATCH', '/api/trips/' + tripID, { room_size: size });
@@ -334,10 +347,17 @@ async function loadStudents() {
addBtn.className = 'input-action';
addBtn.textContent = '+';
const doAdd = async () => {
const email = input.value.trim();
const email = (input.value || '').trim();
if (!email) return;
await api('POST', '/api/trips/' + tripID + '/students/' + student.id + '/parents', { email });
loadStudents();
await loadStudents();
const reCard = container.querySelector('[data-student-id="' + student.id + '"]');
if (reCard) {
const det = reCard.querySelector('wa-details');
if (det) det.open = true;
const inp = reCard.querySelector('wa-input');
if (inp) inp.focus();
}
};
addBtn.addEventListener('click', doAdd);
input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doAdd(); });
@@ -605,3 +625,83 @@ if (DOMAIN) {
if (parts.length >= 2) emailInput.value = parts.join('.') + '@' + DOMAIN;
});
}
})();
}
async function renderMemberView(me) {
const [students, constraints] = await Promise.all([
api('GET', '/api/trips/' + tripID + '/students'),
api('GET', '/api/trips/' + tripID + '/constraints')
]);
const myStudentIDs = new Set(me.students.map(s => s.id));
const container = document.getElementById('member-students');
const kindLabels = me.role === 'student'
? { '': 'OK to room with', prefer: 'Would like to room with', prefer_not: 'Would prefer not to room with' }
: { '': 'OK to room with', must_not: 'Not OK to room with' };
const kindOptions = me.role === 'student'
? ['', 'prefer', 'prefer_not']
: ['', 'must_not'];
for (const myStudent of me.students) {
const card = document.createElement('wa-card');
const label = document.createElement('span');
label.className = 'student-name';
label.textContent = myStudent.name;
card.appendChild(label);
const myConstraints = {};
for (const c of constraints) {
if (c.student_a_id === myStudent.id) {
myConstraints[c.student_b_id] = c;
}
}
for (const other of students) {
if (myStudentIDs.has(other.id)) continue;
const row = document.createElement('div');
row.className = 'pref-row';
const name = document.createElement('span');
name.className = 'pref-name';
name.textContent = other.name;
row.appendChild(name);
const select = document.createElement('wa-select');
select.size = 'small';
for (const kind of kindOptions) {
const opt = document.createElement('wa-option');
opt.value = kind;
opt.textContent = kindLabels[kind];
select.appendChild(opt);
}
const existing = myConstraints[other.id];
const initVal = existing ? existing.kind : '';
select.updateComplete.then(() => { select.value = initVal; });
select.addEventListener('change', async (e) => {
const val = e.target.value;
if (val === '') {
const c = myConstraints[other.id];
if (c) {
await api('DELETE', '/api/trips/' + tripID + '/constraints/' + c.id);
delete myConstraints[other.id];
}
} else {
const result = await api('POST', '/api/trips/' + tripID + '/constraints', {
student_a_id: myStudent.id,
student_b_id: other.id,
kind: val,
level: me.role
});
myConstraints[other.id] = { id: result.id, kind: val, student_a_id: myStudent.id, student_b_id: other.id };
}
});
row.appendChild(select);
card.appendChild(row);
}
container.appendChild(card);
}
}