Add portion controls and improve recipe display

control/app.js

@@ -3,8 +3,14 @@ const status = document.querySelector("#status");
 const list = document.querySelector("#recipes");
 const search = document.querySelector("#search");
 const exit = document.querySelector("#exit");
+const portionControls = document.querySelector("#portions");
+const portionCount = document.querySelector("#portion-count");
+const fewerPortions = document.querySelector("#fewer-portions");
+const morePortions = document.querySelector("#more-portions");
 let recipes = [];
 let activeRecipeId = null;
+let activeRecipeName = null;
+let portions = null;
 
 async function request(path, options) {
   const response = await fetch(`${apiBase}${path}`, {
@@ -39,6 +45,9 @@ function render() {
     return item;
   }));
   if (!matches.length) status.textContent = "No matching recipes.";
+  portionControls.hidden = !activeRecipeId;
+  portionCount.textContent = portions ?? "";
+  fewerPortions.disabled = portions <= 1;
 }
 
 async function activate(recipe) {
@@ -49,6 +58,8 @@ async function activate(recipe) {
       body: JSON.stringify({ recipeId: recipe.id })
     });
     activeRecipeId = state.recipeId;
+    activeRecipeName = recipe.name;
+    portions = state.portions;
     status.textContent = `${recipe.name} is now on the mirror.`;
     render();
   } catch (error) {
@@ -56,11 +67,30 @@ async function activate(recipe) {
   }
 }
 
+async function adjustPortions(delta) {
+  try {
+    const state = await request("/portions", {
+      method: "POST",
+      body: JSON.stringify({ delta })
+    });
+    portions = state.portions;
+    status.textContent = `${activeRecipeName} is now on the mirror.`;
+    render();
+  } catch (error) {
+    status.textContent = error.message;
+  }
+}
+
+fewerPortions.addEventListener("click", () => adjustPortions(-1));
+morePortions.addEventListener("click", () => adjustPortions(1));
+
 exit.addEventListener("click", async () => {
   status.textContent = "Leaving recipe mode…";
   try {
     await request("/exit", { method: "POST", body: "{}" });
     activeRecipeId = null;
+    activeRecipeName = null;
+    portions = null;
     status.textContent = "The mirror is back to its normal display.";
     render();
   } catch (error) {
@@ -73,6 +103,8 @@ search.addEventListener("input", render);
 Promise.all([request("/state"), request("/recipes")])
   .then(([state, loadedRecipes]) => {
     activeRecipeId = state.recipeId;
+    activeRecipeName = state.recipe?.name || null;
+    portions = state.portions;
     recipes = loadedRecipes;
     status.textContent = `${recipes.length} recipes available.`;
     render();