Fix New plan feeling like a no-op; add plan delete and why-panel collapse
Test and deploy / test-and-deploy (push) Successful in 1m34s
Test and deploy / test-and-deploy (push) Successful in 1m34s
New plan reset the form correctly but left the Plans drawer open over
it, so the reset was invisible until the user closed the drawer
themselves. Now closes it immediately, matching selectPlan().
Also adds a delete button per plan in the Plans drawer (server route
already existed) - deleting the currently open plan resets to a fresh
blank one, matching New plan.
Why-panel teaching callouts ("WHY CULTIVAR SETS THE CLOCK" etc.) now
default collapsed instead of wall-to-wall expanded on first load, with
an "Expand all" button in the header on both the planner and cupping
pages. Persistence flips from tracking collapsed-vs-default-open to
expanded-vs-default-closed to match.
Co-Authored-By: Claude Sonnet 5 <[email protected]>
This commit is contained in:
+31
-14
@@ -1,25 +1,42 @@
|
||||
// Shared teaching-layer collapse memory for every page that uses `.why-panel` (`<details>`
|
||||
// with a `data-why` id): the planner and the cupping session view. One localStorage key across
|
||||
// both so a user's dismissals carry over between pages.
|
||||
const WHY_COLLAPSED_KEY = "roastPlannerWhyCollapsed.v1";
|
||||
// both so a user's choices carry over between pages.
|
||||
//
|
||||
// Panels are collapsed by default (see index.html/cupping.html) so the form isn't wall-to-wall
|
||||
// explanatory text on first load; this tracks which ones a user has explicitly opened, rather
|
||||
// than which they've closed, so it stays meaningful against a closed-by-default baseline.
|
||||
const WHY_EXPANDED_KEY = "roastPlannerWhyExpanded.v1";
|
||||
|
||||
export function wireWhyPanels() {
|
||||
let collapsed;
|
||||
let expanded;
|
||||
try {
|
||||
collapsed = new Set(JSON.parse(localStorage.getItem(WHY_COLLAPSED_KEY)) || []);
|
||||
expanded = new Set(JSON.parse(localStorage.getItem(WHY_EXPANDED_KEY)) || []);
|
||||
} catch {
|
||||
collapsed = new Set();
|
||||
expanded = new Set();
|
||||
}
|
||||
for (const panel of document.querySelectorAll(".why-panel")) {
|
||||
if (collapsed.has(panel.dataset.why)) panel.open = false;
|
||||
const persist = () => {
|
||||
try {
|
||||
localStorage.setItem(WHY_EXPANDED_KEY, JSON.stringify([...expanded]));
|
||||
} catch {
|
||||
/* unavailable storage */
|
||||
}
|
||||
};
|
||||
|
||||
const panels = [...document.querySelectorAll(".why-panel")];
|
||||
for (const panel of panels) {
|
||||
if (expanded.has(panel.dataset.why)) panel.open = true;
|
||||
panel.addEventListener("toggle", () => {
|
||||
if (panel.open) collapsed.delete(panel.dataset.why);
|
||||
else collapsed.add(panel.dataset.why);
|
||||
try {
|
||||
localStorage.setItem(WHY_COLLAPSED_KEY, JSON.stringify([...collapsed]));
|
||||
} catch {
|
||||
/* unavailable storage */
|
||||
}
|
||||
if (panel.open) expanded.add(panel.dataset.why);
|
||||
else expanded.delete(panel.dataset.why);
|
||||
persist();
|
||||
});
|
||||
}
|
||||
|
||||
document.getElementById("btn-expand-why")?.addEventListener("click", () => {
|
||||
for (const panel of panels) {
|
||||
panel.open = true;
|
||||
expanded.add(panel.dataset.why);
|
||||
}
|
||||
persist();
|
||||
});
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user