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

Switch member view from dropdowns to horizontal radio buttons

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-16 10:26:33 -08:00
parent d225a8c5d0
commit 992d581b51
2 changed files with 19 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/trip.html
View File

@@ -75,7 +75,7 @@
.divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; } .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; max-width: 24rem; } .pref-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; max-width: 24rem; }
.pref-row .pref-name { flex: 1; font-size: 0.85rem; } .pref-row .pref-name { flex: 1; font-size: 0.85rem; }
.pref-row wa-select { width: 14rem; } .pref-row wa-radio-group { white-space: nowrap; }
</style> </style>
</head> </head>
<body> <body>

34
static/trip.js
View File

@@ -611,12 +611,12 @@ async function renderMemberView(me) {
const container = document.getElementById('member-students'); const container = document.getElementById('member-students');
const kindLabels = me.role === 'student' const kindLabels = me.role === 'student'
? { '': 'OK to room with', prefer: 'Would like to room with', prefer_not: 'Would prefer not to room with' } ? { '': 'OK', prefer: 'Prefer', prefer_not: 'Prefer Not' }
: { '': 'OK to room with', must_not: 'Not OK to room with' }; : { '': 'OK', must_not: 'Must Not' };
const kindOptions = ['', ...me.level_kinds[me.role]]; const kindOptions = ['', ...me.level_kinds[me.role]];
const pendingSelects = []; const pendingRadios = [];
for (const myStudent of me.students) { for (const myStudent of me.students) {
const card = document.createElement('wa-card'); const card = document.createElement('wa-card');
@@ -641,18 +641,20 @@ async function renderMemberView(me) {
name.textContent = other.name; name.textContent = other.name;
row.appendChild(name); row.appendChild(name);
const select = document.createElement('wa-select'); const group = document.createElement('wa-radio-group');
select.size = 'small'; group.orientation = 'horizontal';
group.size = 'small';
for (const kind of kindOptions) { for (const kind of kindOptions) {
const opt = document.createElement('wa-option'); const radio = document.createElement('wa-radio');
opt.value = kind; radio.value = kind;
opt.textContent = kindLabels[kind]; radio.textContent = kindLabels[kind];
select.appendChild(opt); radio.setAttribute('appearance', 'button');
group.appendChild(radio);
} }
const existing = myConstraints[other.id]; const existing = myConstraints[other.id];
pendingSelects.push({ select, value: existing ? existing.kind : '' }); pendingRadios.push({ group, value: existing ? existing.kind : '' });
select.addEventListener('change', async (e) => { group.addEventListener('change', async (e) => {
const val = e.target.value; const val = e.target.value;
if (val === '') { if (val === '') {
const c = myConstraints[other.id]; const c = myConstraints[other.id];
@@ -670,15 +672,15 @@ async function renderMemberView(me) {
myConstraints[other.id] = { id: result.id, kind: val, student_a_id: myStudent.id, student_b_id: other.id }; myConstraints[other.id] = { id: result.id, kind: val, student_a_id: myStudent.id, student_b_id: other.id };
} }
}); });
row.appendChild(select); row.appendChild(group);
card.appendChild(row); card.appendChild(row);
} }
container.appendChild(card); container.appendChild(card);
} }
await customElements.whenDefined('wa-select'); await customElements.whenDefined('wa-radio-group');
for (const { select, value } of pendingSelects) { for (const { group, value } of pendingRadios) {
await select.updateComplete; await group.updateComplete;
select.value = value; group.value = value;
} }
} }