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

Restyle admin and trip UI with wa-tag, wa-details expandos, and visual hierarchy

Browse Source
This commit is contained in:
Ian Gulliver
2026-02-15 17:40:39 -08:00
parent 5db70a51df
commit 737e83f629
4 changed files with 164 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
static/admin.html
View File

@@ -13,6 +13,7 @@
opacity: 0; opacity: 0;
font-size: 0.9rem; font-size: 0.9rem;
} }
a { color: inherit; text-decoration: none; }
.header { .header {
display: flex; display: flex;
align-items: center; align-items: center;
@@ -21,18 +22,39 @@
} }
.header img { width: 32px; height: 32px; border-radius: 50%; } .header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; } .header .spacer { flex: 1; }
h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; } h2 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; }
wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; } wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; --border-width: 0; --border-radius: 0.5rem; }
wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; } wa-card::part(base) { background: var(--wa-color-neutral-50); }
wa-button[size="small"]::part(base) { font-size: 0.8rem; }
wa-input::part(base) { min-height: 0; } wa-input::part(base) { min-height: 0; }
.trip-header { display: flex; align-items: center; gap: 0.25rem; } wa-details { margin-top: 0.5rem; font-size: 1rem; --spacing: 0.6rem; }
.trip-header h3 { flex: 1; margin: 0; font-size: 1rem; } wa-card wa-details { font-size: 0.8rem; }
.admin-row { display: flex; align-items: center; gap: 0.25rem; } wa-details::part(summary) { font-weight: bold; }
.add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; } wa-details::part(content) { padding-top: 0.2rem; }
.add-row wa-input { flex: 1; } .trip-name { font-weight: bold; font-size: 1rem; color: var(--wa-color-brand-60); }
.create-trip { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; } .tags { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.create-trip wa-input { flex: 1; } wa-tag { transition: opacity var(--wa-transition-normal); }
wa-input.email { max-width: 20rem; }
.add-form { display: flex; flex-direction: column; gap: 0.3rem; max-width: 20rem; }
.add-form wa-button { align-self: flex-start; }
.input-action {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
opacity: 0.4;
padding: 0 0.2rem;
}
.input-action:hover { opacity: 1; }
.close-btn {
all: unset;
cursor: pointer;
opacity: 0;
padding: 0 0.3rem;
font-size: 1rem;
line-height: 1;
}
wa-card:hover .close-btn { opacity: 0.25; }
.close-btn:hover { opacity: 1 !important; color: var(--wa-color-danger-50, #dc3545); }
</style> </style>
</head> </head>
<body> <body>
@@ -44,13 +66,14 @@
<span class="spacer"></span> <span class="spacer"></span>
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button> <wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
</div> </div>
<h2>Create Trip</h2>
<div class="create-trip">
<wa-input id="new-trip-name" placeholder="Trip name" size="small"></wa-input>
<wa-button size="small" id="create-trip-btn">+</wa-button>
</div>
<h2>Trips</h2> <h2>Trips</h2>
<div id="trips"></div> <div id="trips"></div>
<wa-details summary="New Trip">
<div class="add-form">
<wa-input id="new-trip-name" placeholder="Trip name" size="small"></wa-input>
<wa-button size="small" id="create-trip-btn">Add Trip</wa-button>
</div>
</wa-details>
</div> </div>
<script type="module" src="/admin.js"></script> <script type="module" src="/admin.js"></script>
</body> </body>

77
static/admin.js
View File

@@ -25,75 +25,82 @@ async function loadTrips() {
for (const trip of trips) { for (const trip of trips) {
const card = document.createElement('wa-card'); const card = document.createElement('wa-card');
const header = document.createElement('div'); const nameRow = document.createElement('div');
header.className = 'trip-header'; nameRow.style.display = 'flex';
const h3 = document.createElement('h3'); nameRow.style.alignItems = 'center';
const tripLink = document.createElement('a'); const tripLink = document.createElement('a');
tripLink.href = '/trip/' + trip.id; tripLink.href = '/trip/' + trip.id;
tripLink.textContent = trip.name; tripLink.textContent = trip.name;
h3.appendChild(tripLink); tripLink.className = 'trip-name';
const deleteBtn = document.createElement('wa-button'); tripLink.style.flex = '1';
deleteBtn.size = 'small'; const deleteBtn = document.createElement('button');
deleteBtn.variant = 'danger'; deleteBtn.className = 'close-btn';
deleteBtn.textContent = '\u00d7'; deleteBtn.textContent = '\u00d7';
deleteBtn.addEventListener('click', async () => { deleteBtn.addEventListener('click', async () => {
if (!confirm('Delete trip "' + trip.name + '"?')) return; if (!confirm('Delete trip "' + trip.name + '"?')) return;
await api('DELETE', '/api/trips/' + trip.id); await api('DELETE', '/api/trips/' + trip.id);
loadTrips(); loadTrips();
}); });
header.appendChild(h3); nameRow.appendChild(tripLink);
header.appendChild(deleteBtn); nameRow.appendChild(deleteBtn);
card.appendChild(header); card.appendChild(nameRow);
const details = document.createElement('wa-details');
details.summary = 'Admins';
const tags = document.createElement('div');
tags.className = 'tags';
for (const admin of trip.admins) { for (const admin of trip.admins) {
const row = document.createElement('div'); const tag = document.createElement('wa-tag');
row.className = 'admin-row'; tag.size = 'small';
const span = document.createElement('span'); tag.variant = 'brand';
span.textContent = admin.email; tag.setAttribute('with-remove', '');
const removeBtn = document.createElement('wa-button'); tag.textContent = admin.email;
removeBtn.size = 'small'; tag.addEventListener('wa-remove', async () => {
removeBtn.variant = 'text';
removeBtn.textContent = '\u00d7';
removeBtn.addEventListener('click', async () => {
await api('DELETE', '/api/trips/' + trip.id + '/admins/' + admin.id); await api('DELETE', '/api/trips/' + trip.id + '/admins/' + admin.id);
loadTrips(); loadTrips();
}); });
row.appendChild(span); tags.appendChild(tag);
row.appendChild(removeBtn);
card.appendChild(row);
} }
details.appendChild(tags);
const addRow = document.createElement('div');
addRow.className = 'add-row';
const input = document.createElement('wa-input'); const input = document.createElement('wa-input');
input.placeholder = 'Admin email'; input.placeholder = 'Add admin email';
input.size = 'small'; input.size = 'small';
const addBtn = document.createElement('wa-button'); input.className = 'email';
addBtn.size = 'small'; input.style.marginTop = '0.3rem';
const addBtn = document.createElement('button');
addBtn.slot = 'end';
addBtn.className = 'input-action';
addBtn.textContent = '+'; addBtn.textContent = '+';
addBtn.addEventListener('click', async () => { const doAdd = async () => {
const email = input.value.trim(); const email = input.value.trim();
if (!email) return; if (!email) return;
await api('POST', '/api/trips/' + trip.id + '/admins', { email }); await api('POST', '/api/trips/' + trip.id + '/admins', { email });
loadTrips(); loadTrips();
}); };
addRow.appendChild(input); addBtn.addEventListener('click', doAdd);
addRow.appendChild(addBtn); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doAdd(); });
card.appendChild(addRow); input.appendChild(addBtn);
details.appendChild(input);
card.appendChild(details);
container.appendChild(card); container.appendChild(card);
} }
} }
document.getElementById('create-trip-btn').addEventListener('click', async () => { async function createTrip() {
const input = document.getElementById('new-trip-name'); const input = document.getElementById('new-trip-name');
const name = input.value.trim(); const name = input.value.trim();
if (!name) return; if (!name) return;
await api('POST', '/api/trips', { name }); await api('POST', '/api/trips', { name });
input.value = ''; input.value = '';
loadTrips(); loadTrips();
}); }
document.getElementById('create-trip-btn').addEventListener('click', createTrip);
document.getElementById('new-trip-name').addEventListener('keydown', (e) => { if (e.key === 'Enter') createTrip(); });
await loadTrips(); await loadTrips();
await customElements.whenDefined('wa-button'); await customElements.whenDefined('wa-card');
document.body.style.opacity = 1; document.body.style.opacity = 1;

58
static/trip.html
View File

@@ -21,19 +21,39 @@
} }
.header img { width: 32px; height: 32px; border-radius: 50%; } .header img { width: 32px; height: 32px; border-radius: 50%; }
.header .spacer { flex: 1; } .header .spacer { flex: 1; }
h2 { margin: 0.75rem 0 0.25rem; font-size: 1.1rem; } h2 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; color: var(--wa-color-brand-60); }
h3 { margin: 0.5rem 0 0.25rem; font-size: 1rem; } wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; --border-width: 0; --border-radius: 0.5rem; }
wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; } wa-card::part(base) { background: var(--wa-color-neutral-50); }
wa-button::part(base) { padding: 0.15rem 0.4rem; min-height: 0; }
wa-button[size="small"]::part(base) { font-size: 0.8rem; }
wa-input::part(base) { min-height: 0; } wa-input::part(base) { min-height: 0; }
.student-header { display: flex; align-items: center; gap: 0.25rem; } wa-details { margin-top: 0.5rem; font-size: 1rem; --spacing: 0.6rem; }
.student-header span { flex: 1; font-weight: bold; } wa-card wa-details { font-size: 0.8rem; }
.parent-row { display: flex; align-items: center; gap: 0.25rem; margin-left: 0.75rem; } wa-details::part(summary) { font-weight: bold; }
.add-row { display: flex; gap: 0.25rem; margin-top: 0.25rem; margin-left: 0.75rem; } wa-details::part(content) { padding-top: 0.2rem; }
.add-row wa-input { flex: 1; } .student-name { font-weight: bold; display: block; margin-bottom: 0.3rem; }
.add-student { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; } .tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.3rem; }
.add-student wa-input { flex: 1; } wa-tag { transition: opacity var(--wa-transition-normal); }
wa-input.email { max-width: 20rem; }
.add-form { display: flex; flex-direction: column; gap: 0.3rem; max-width: 20rem; }
.add-form wa-button { align-self: flex-start; }
.close-btn {
all: unset;
cursor: pointer;
opacity: 0;
padding: 0 0.3rem;
font-size: 1rem;
line-height: 1;
}
wa-card:hover .close-btn { opacity: 0.25; }
.close-btn:hover { opacity: 1 !important; color: var(--wa-color-danger-50, #dc3545); }
.input-action {
background: none;
border: none;
cursor: pointer;
font-size: 1rem;
opacity: 0.4;
padding: 0 0.2rem;
}
.input-action:hover { opacity: 1; }
</style> </style>
</head> </head>
<body> <body>
@@ -46,14 +66,14 @@
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button> <wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
</div> </div>
<h2 id="trip-name"></h2> <h2 id="trip-name"></h2>
<h3>Add Student</h3>
<div class="add-student">
<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">+</wa-button>
</div>
<h3>Students</h3>
<div id="students"></div> <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>
<script type="module" src="/trip.js"></script> <script type="module" src="/trip.js"></script>
</body> </body>

77
static/trip.js
View File

@@ -24,64 +24,71 @@ async function loadStudents() {
for (const student of students) { for (const student of students) {
const card = document.createElement('wa-card'); const card = document.createElement('wa-card');
const header = document.createElement('div'); const nameRow = document.createElement('div');
header.className = 'student-header'; nameRow.style.display = 'flex';
nameRow.style.alignItems = 'center';
const label = document.createElement('span'); const label = document.createElement('span');
label.className = 'student-name';
label.style.flex = '1';
label.textContent = student.name + ' (' + student.email + ')'; label.textContent = student.name + ' (' + student.email + ')';
const deleteBtn = document.createElement('wa-button'); const deleteBtn = document.createElement('button');
deleteBtn.size = 'small'; deleteBtn.className = 'close-btn';
deleteBtn.variant = 'danger';
deleteBtn.textContent = '\u00d7'; deleteBtn.textContent = '\u00d7';
deleteBtn.addEventListener('click', async () => { deleteBtn.addEventListener('click', async () => {
if (!confirm('Remove student "' + student.name + '"?')) return; if (!confirm('Remove student "' + student.name + '"?')) return;
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id); await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id);
loadStudents(); loadStudents();
}); });
header.appendChild(label); nameRow.appendChild(label);
header.appendChild(deleteBtn); nameRow.appendChild(deleteBtn);
card.appendChild(header); card.appendChild(nameRow);
const details = document.createElement('wa-details');
details.summary = 'Parents';
const tags = document.createElement('div');
tags.className = 'tags';
for (const parent of student.parents) { for (const parent of student.parents) {
const row = document.createElement('div'); const tag = document.createElement('wa-tag');
row.className = 'parent-row'; tag.size = 'small';
const span = document.createElement('span'); tag.variant = 'success';
span.textContent = parent.email; tag.setAttribute('with-remove', '');
const removeBtn = document.createElement('wa-button'); tag.textContent = parent.email;
removeBtn.size = 'small'; tag.addEventListener('wa-remove', async () => {
removeBtn.variant = 'text';
removeBtn.textContent = '\u00d7';
removeBtn.addEventListener('click', async () => {
await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id + '/parents/' + parent.id); await api('DELETE', '/api/trips/' + tripID + '/students/' + student.id + '/parents/' + parent.id);
loadStudents(); loadStudents();
}); });
row.appendChild(span); tags.appendChild(tag);
row.appendChild(removeBtn);
card.appendChild(row);
} }
details.appendChild(tags);
const addRow = document.createElement('div');
addRow.className = 'add-row';
const input = document.createElement('wa-input'); const input = document.createElement('wa-input');
input.placeholder = 'Parent email'; input.placeholder = 'Add parent email';
input.size = 'small'; input.size = 'small';
const addBtn = document.createElement('wa-button'); input.className = 'email';
addBtn.size = 'small'; input.style.marginTop = '0.3rem';
const addBtn = document.createElement('button');
addBtn.slot = 'end';
addBtn.className = 'input-action';
addBtn.textContent = '+'; addBtn.textContent = '+';
addBtn.addEventListener('click', async () => { const doAdd = async () => {
const email = input.value.trim(); const email = input.value.trim();
if (!email) return; if (!email) return;
await api('POST', '/api/trips/' + tripID + '/students/' + student.id + '/parents', { email }); await api('POST', '/api/trips/' + tripID + '/students/' + student.id + '/parents', { email });
loadStudents(); loadStudents();
}); };
addRow.appendChild(input); addBtn.addEventListener('click', doAdd);
addRow.appendChild(addBtn); input.addEventListener('keydown', (e) => { if (e.key === 'Enter') doAdd(); });
card.appendChild(addRow); input.appendChild(addBtn);
details.appendChild(input);
card.appendChild(details);
container.appendChild(card); container.appendChild(card);
} }
} }
document.getElementById('add-student-btn').addEventListener('click', async () => { async function addStudent() {
const nameInput = document.getElementById('new-student-name'); const nameInput = document.getElementById('new-student-name');
const emailInput = document.getElementById('new-student-email'); const emailInput = document.getElementById('new-student-email');
const name = nameInput.value.trim(); const name = nameInput.value.trim();
@@ -91,8 +98,12 @@ document.getElementById('add-student-btn').addEventListener('click', async () =>
nameInput.value = ''; nameInput.value = '';
emailInput.value = ''; emailInput.value = '';
loadStudents(); loadStudents();
}); }
document.getElementById('add-student-btn').addEventListener('click', addStudent);
document.getElementById('new-student-name').addEventListener('keydown', (e) => { if (e.key === 'Enter') addStudent(); });
document.getElementById('new-student-email').addEventListener('keydown', (e) => { if (e.key === 'Enter') addStudent(); });
await loadStudents(); await loadStudents();
await customElements.whenDefined('wa-button'); await customElements.whenDefined('wa-card');
document.body.style.opacity = 1; document.body.style.opacity = 1;