Add Nextcloud recipe display and controller

control/app.js

@@ -0,0 +1,82 @@
+const apiBase = "/MMM-NextcloudCookbook/api";
+const status = document.querySelector("#status");
+const list = document.querySelector("#recipes");
+const search = document.querySelector("#search");
+const exit = document.querySelector("#exit");
+let recipes = [];
+let activeRecipeId = null;
+
+async function request(path, options) {
+  const response = await fetch(`${apiBase}${path}`, {
+    headers: { "Content-Type": "application/json" },
+    ...options
+  });
+  if (!response.ok) {
+    const body = await response.json().catch(() => ({}));
+    throw new Error(body.error || `Request failed with HTTP ${response.status}`);
+  }
+  return response.json();
+}
+
+function render() {
+  const query = search.value.trim().toLocaleLowerCase();
+  const matches = recipes.filter((recipe) => recipe.name.toLocaleLowerCase().includes(query));
+  list.replaceChildren(...matches.map((recipe) => {
+    const item = document.createElement("li");
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = recipe.id === activeRecipeId ? "recipe active" : "recipe";
+    const title = document.createElement("strong");
+    title.textContent = recipe.name;
+    button.appendChild(title);
+    if (recipe.description) {
+      const description = document.createElement("span");
+      description.textContent = recipe.description;
+      button.appendChild(description);
+    }
+    button.addEventListener("click", () => activate(recipe));
+    item.appendChild(button);
+    return item;
+  }));
+  if (!matches.length) status.textContent = "No matching recipes.";
+}
+
+async function activate(recipe) {
+  status.textContent = `Opening ${recipe.name}…`;
+  try {
+    const state = await request("/activate", {
+      method: "POST",
+      body: JSON.stringify({ recipeId: recipe.id })
+    });
+    activeRecipeId = state.recipeId;
+    status.textContent = `${recipe.name} is now on the mirror.`;
+    render();
+  } catch (error) {
+    status.textContent = error.message;
+  }
+}
+
+exit.addEventListener("click", async () => {
+  status.textContent = "Leaving recipe mode…";
+  try {
+    await request("/exit", { method: "POST", body: "{}" });
+    activeRecipeId = null;
+    status.textContent = "The mirror is back to its normal display.";
+    render();
+  } catch (error) {
+    status.textContent = error.message;
+  }
+});
+
+search.addEventListener("input", render);
+
+Promise.all([request("/state"), request("/recipes")])
+  .then(([state, loadedRecipes]) => {
+    activeRecipeId = state.recipeId;
+    recipes = loadedRecipes;
+    status.textContent = `${recipes.length} recipes available.`;
+    render();
+  })
+  .catch((error) => {
+    status.textContent = error.message;
+  });