2026-02-14 22:21:36 -08:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>Trip - Rooms</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
font-family: var(--wa-font-sans);
|
|
|
|
|
max-width: 800px;
|
|
|
|
|
margin: 0 auto;
|
2026-02-14 22:27:49 -08:00
|
|
|
padding: 0.5rem;
|
2026-02-14 22:21:36 -08:00
|
|
|
opacity: 0;
|
2026-02-14 22:27:49 -08:00
|
|
|
font-size: 0.9rem;
|
2026-02-14 22:21:36 -08:00
|
|
|
}
|
|
|
|
|
.header {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
gap: 0.5rem;
|
2026-02-14 22:27:49 -08:00
|
|
|
margin-bottom: 0.75rem;
|
2026-02-14 22:21:36 -08:00
|
|
|
}
|
2026-02-14 22:27:49 -08:00
|
|
|
.header img { width: 32px; height: 32px; border-radius: 50%; }
|
|
|
|
|
.header .spacer { flex: 1; }
|
2026-02-15 17:40:39 -08:00
|
|
|
h2 { margin: 0.75rem 0 0.5rem; font-size: 1.1rem; color: var(--wa-color-brand-60); }
|
|
|
|
|
wa-card { margin-bottom: 0.5rem; display: block; --spacing: 0.6rem; --border-width: 0; --border-radius: 0.5rem; }
|
|
|
|
|
wa-card::part(base) { background: var(--wa-color-neutral-50); }
|
2026-02-14 22:27:49 -08:00
|
|
|
wa-input::part(base) { min-height: 0; }
|
2026-02-15 17:40:39 -08:00
|
|
|
wa-details { margin-top: 0.5rem; font-size: 1rem; --spacing: 0.6rem; }
|
|
|
|
|
wa-card wa-details { font-size: 0.8rem; }
|
|
|
|
|
wa-details::part(summary) { font-weight: bold; }
|
|
|
|
|
wa-details::part(content) { padding-top: 0.2rem; }
|
|
|
|
|
.student-name { font-weight: bold; display: block; margin-bottom: 0.3rem; }
|
|
|
|
|
.tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.3rem; }
|
|
|
|
|
wa-tag { transition: opacity var(--wa-transition-normal); }
|
2026-02-15 18:59:41 -08:00
|
|
|
wa-tag::part(base) { padding: 0.15rem 0.4rem; }
|
2026-02-15 17:40:39 -08:00
|
|
|
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; }
|
2026-02-15 21:30:32 -08:00
|
|
|
#trip-settings { margin-bottom: 0.75rem; display: flex; flex-direction: column; gap: 0.3rem; }
|
|
|
|
|
#trip-settings label { display: flex; align-items: center; gap: 0.5rem; }
|
|
|
|
|
#trip-settings input[type="number"] { width: 3.5rem; font-size: 0.85rem; padding: 0.2rem; border: 1px solid var(--wa-color-neutral-300, #ccc); border-radius: 0.25rem; }
|
2026-02-15 20:46:47 -08:00
|
|
|
.constraint-group { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; padding-bottom: 0.3rem; margin-bottom: 0.3rem; border-bottom: 1px solid #909090; }
|
2026-02-15 19:10:58 -08:00
|
|
|
.constraint-level { font-size: 0.65rem; font-weight: bold; background: var(--wa-color-neutral-200, #ddd); color: var(--wa-color-neutral-700, #555); border-radius: 0.25rem; padding: 0.1rem 0.35rem; }
|
2026-02-15 18:01:52 -08:00
|
|
|
.constraint-add { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.3rem; }
|
2026-02-15 20:46:47 -08:00
|
|
|
.constraint-add wa-select { flex: 1; }
|
2026-02-15 18:59:41 -08:00
|
|
|
#conflicts { margin-bottom: 0.5rem; }
|
2026-02-15 19:26:38 -08:00
|
|
|
#mismatches { margin-bottom: 0.5rem; }
|
2026-02-15 19:34:13 -08:00
|
|
|
#hard-conflicts { margin-bottom: 0.5rem; }
|
2026-02-15 18:59:41 -08:00
|
|
|
.conflict-row { margin-bottom: 0.2rem; }
|
|
|
|
|
.conflict-icon { background: var(--wa-color-danger-50, #dc3545); color: white; border-radius: 0.15rem; padding: 0 0.15rem; font-size: 0.6rem; line-height: 1.2; vertical-align: middle; margin-right: 0.1rem; display: inline-block; }
|
2026-02-15 21:30:32 -08:00
|
|
|
#solver { margin-bottom: 0.75rem; }
|
|
|
|
|
#solver-results { margin-top: 0.5rem; }
|
|
|
|
|
.room-card { margin-bottom: 0.3rem; }
|
2026-02-16 11:43:16 -08:00
|
|
|
.room-locked { --wa-color-surface-border: var(--wa-color-brand-50); }
|
2026-02-15 21:30:32 -08:00
|
|
|
.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); }
|
2026-02-16 12:53:55 -08:00
|
|
|
.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; }
|
2026-02-15 22:38:33 -08:00
|
|
|
.divider { border: none; border-top: 1px solid #909090; margin: 0.75rem 0; }
|
2026-02-16 11:05:15 -08:00
|
|
|
.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; }
|
2026-02-16 10:51:29 -08:00
|
|
|
.pref-row:nth-child(even) { background: rgba(128, 128, 128, 0.06); }
|
|
|
|
|
.pref-row .pref-name { font-size: 0.85rem; }
|
2026-02-16 10:26:33 -08:00
|
|
|
.pref-row wa-radio-group { white-space: nowrap; }
|
2026-02-14 22:21:36 -08:00
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div id="signin" style="display: none; align-items: center; justify-content: center; height: 100vh;"></div>
|
|
|
|
|
<div id="main" style="display: none;">
|
|
|
|
|
<div class="header">
|
|
|
|
|
<img data-bind="picture" alt="Profile">
|
|
|
|
|
<span data-bind="name"></span>
|
|
|
|
|
<span class="spacer"></span>
|
|
|
|
|
<wa-button variant="neutral" size="small" id="logout-btn">Switch User</wa-button>
|
|
|
|
|
</div>
|
|
|
|
|
<h2 id="trip-name"></h2>
|
2026-02-16 09:50:19 -08:00
|
|
|
<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>
|
|
|
|
|
<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>
|
2026-02-15 18:01:52 -08:00
|
|
|
</div>
|
2026-02-16 09:50:19 -08:00
|
|
|
<div id="member-view" style="display: none;">
|
|
|
|
|
<div id="member-students"></div>
|
2026-02-15 21:30:32 -08:00
|
|
|
</div>
|
2026-02-14 22:21:36 -08:00
|
|
|
</div>
|
|
|
|
|
<script type="module" src="/trip.js"></script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
