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

Use lettered tabs (A1/A2, B1/B2) for swap group options

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-16 12:59:03 -08:00
parent 9220411fab
commit 960b96cc08
2 changed files with 19 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/trip.html
View File

@@ -74,8 +74,6 @@
.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); }
.swap-group { border-left: 2px solid var(--wa-color-brand-50); padding-left: 0.5rem; margin-bottom: 0.5rem; }
.swap-group-nav { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.3rem; }
.swap-group-label { font-size: 0.8rem; color: var(--wa-color-neutral-500); min-width: 3rem; text-align: center; }
.divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; }
.pref-rows { display: grid; grid-template-columns: auto 1fr; }
.pref-row { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: center; gap: 0.5rem; padding: 0.3rem 0.4rem; }

60
static/trip.js
View File

@@ -541,55 +541,33 @@ document.getElementById('solve-btn').addEventListener('click', async () => {
renderRoomCard(room, container, roomNum++, true);
}
for (const group of swapGroups) {
for (let gi = 0; gi < swapGroups.length; gi++) {
const group = swapGroups[gi];
const prefix = String.fromCharCode('A'.charCodeAt(0) + gi);
const section = document.createElement('div');
section.className = 'swap-group';
let current = 0;
const roomsDiv = document.createElement('div');
const baseRoomNum = roomNum;
const render = () => {
roomsDiv.innerHTML = '';
const tabGroup = document.createElement('wa-tab-group');
for (let ci = 0; ci < group.configs.length; ci++) {
const tab = document.createElement('wa-tab');
tab.slot = 'nav';
tab.panel = 'sg-' + gi + '-' + ci;
tab.textContent = prefix + (ci + 1);
tabGroup.appendChild(tab);
}
for (let ci = 0; ci < group.configs.length; ci++) {
const panel = document.createElement('wa-tab-panel');
panel.name = 'sg-' + gi + '-' + ci;
let rn = baseRoomNum;
for (const room of group.configs[current]) {
renderRoomCard(room, roomsDiv, rn++, false);
for (const room of group.configs[ci]) {
renderRoomCard(room, panel, rn++, false);
}
};
tabGroup.appendChild(panel);
}
const nav = document.createElement('div');
nav.className = 'swap-group-nav';
const prevBtn = document.createElement('wa-button');
prevBtn.size = 'small';
prevBtn.variant = 'text';
prevBtn.textContent = '\u25c0';
const lbl = document.createElement('span');
lbl.className = 'swap-group-label';
lbl.textContent = '1 of ' + group.configs.length;
const nextBtn = document.createElement('wa-button');
nextBtn.size = 'small';
nextBtn.variant = 'text';
nextBtn.textContent = '\u25b6';
prevBtn.addEventListener('click', () => {
current = (current - 1 + group.configs.length) % group.configs.length;
lbl.textContent = (current + 1) + ' of ' + group.configs.length;
render();
});
nextBtn.addEventListener('click', () => {
current = (current + 1) % group.configs.length;
lbl.textContent = (current + 1) + ' of ' + group.configs.length;
render();
});
nav.appendChild(prevBtn);
nav.appendChild(lbl);
nav.appendChild(nextBtn);
section.appendChild(nav);
section.appendChild(roomsDiv);
section.appendChild(tabGroup);
container.appendChild(section);
render();
roomNum += group.configs[0].length;
}
}