From bc09ac8989d5d7cc5e89bca7036b6010815dbee9 Mon Sep 17 00:00:00 2001
From: Leo Goetz <dev@leogtz.de>
Date: Mon, 2 Feb 2026 11:47:42 +0100
Subject: feat: added components, proxy and finished project/course

---
 services/Menu.js   | 16 ++++++++++++++++
 services/Order.js  | 20 ++++++++++++++++++++
 services/Router.js | 11 ++++-------
 services/Store.js  | 17 ++++++++++++++---
 4 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 services/Order.js

(limited to 'services')

diff --git a/services/Menu.js b/services/Menu.js
index 88e3f35..b8e0ebd 100644
--- a/services/Menu.js
+++ b/services/Menu.js
@@ -3,3 +3,19 @@ import API from "./API.js";
 export async function loadData() {
   app.store.menu = await API.fetchMenu();
 }
+
+export async function getProductById(id) {
+  if (app.store.menu == null) {
+    await loadData();
+  }
+
+  for (let c of app.store.menu) {
+    for (let p of c.products) {
+      if (p.id == id) {
+        return p;
+      }
+    }
+  }
+
+  return null;
+}
diff --git a/services/Order.js b/services/Order.js
new file mode 100644
index 0000000..1c6e131
--- /dev/null
+++ b/services/Order.js
@@ -0,0 +1,20 @@
+import { getProductById } from "./Menu.js";
+
+export async function addToCart(id) {
+  const product = await getProductById(id);
+  const results = app.store.cart.filter(
+    (prodInCart) => prodInCart.product.id == id,
+  );
+
+  if (results.length == 1) {
+    app.store.cart = app.store.cart.map((p) =>
+      p.product.id == id ? { ...p, quantity: p.quantity + 1 } : p,
+    );
+  } else {
+    app.store.cart = [...app.store.cart, { product, quantity: 1 }];
+  }
+}
+
+export function removeFromCart(id) {
+  app.store.cart = app.store.cart.filter((p) => p.product.id != id);
+}
diff --git a/services/Router.js b/services/Router.js
index 13ef58e..4742e24 100644
--- a/services/Router.js
+++ b/services/Router.js
@@ -27,21 +27,18 @@ const Router = {
 
     switch (route) {
       case "/":
-        pageElement = document.createElement("h1");
-        pageElement.textContent = "Menu";
+        pageElement = document.createElement("menu-page");
         break;
       case "/order":
-        pageElement = document.createElement("h1");
-        pageElement.textContent = "Your Order";
+        pageElement = document.createElement("order-page");
         break;
       default:
         if (route.startsWith("/product-")) {
-          pageElement = document.createElement("h1");
-          pageElement.textContent = "Your Order";
+          pageElement = document.createElement("details-page");
           const paramId = route.substring(route.lastIndexOf("-") + 1);
           // Dataset is great for storing costum data because it doesnt get
           // parsed by the browser
-          pageElement.dataset.id = paramId;
+          pageElement.dataset.productId = paramId;
         }
     }
 
diff --git a/services/Store.js b/services/Store.js
index 979a5a6..d16f81b 100644
--- a/services/Store.js
+++ b/services/Store.js
@@ -1,8 +1,19 @@
-import API from "./API.js";
-
 const Store = {
   menu: null,
   cart: [],
 };
 
-export default Store;
+const proxiedStore = new Proxy(Store, {
+  set(target, property, value) {
+    target[property] = value;
+    if (property == "menu") {
+      window.dispatchEvent(new Event("appmenuchange"));
+    }
+    if (property == "cart") {
+      window.dispatchEvent(new Event("appcartchange"));
+    }
+    return true;
+  },
+});
+
+export default proxiedStore;
-- 
cgit v1.3