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

---
 components/DetailsPage.js | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 46 insertions(+)
 create mode 100644 components/DetailsPage.js

(limited to 'components/DetailsPage.js')

diff --git a/components/DetailsPage.js b/components/DetailsPage.js
new file mode 100644
index 0000000..4f8eb87
--- /dev/null
+++ b/components/DetailsPage.js
@@ -0,0 +1,46 @@
+import { getProductById } from "../services/Menu.js";
+import { addToCart } from "../services/Order.js";
+
+export class DetailsPage extends HTMLElement {
+  constructor() {
+    super();
+
+    this.root = this.attachShadow({ mode: "open" });
+
+    const template = document.getElementById("details-page-template");
+    const content = template.content.cloneNode(true);
+    const styles = document.createElement("style");
+    this.root.appendChild(content);
+    this.root.appendChild(styles);
+
+    async function loadCSS() {
+      const request = await fetch("/components/DetailsPage.css");
+      styles.textContent = await request.text();
+    }
+    loadCSS();
+  }
+
+  async renderData() {
+    if (this.dataset.productId) {
+      this.product = await getProductById(this.dataset.productId);
+      this.root.querySelector("h2").textContent = this.product.name;
+      this.root.querySelector("img").src = `/data/images/${this.product.image}`;
+      this.root.querySelector(".description").textContent =
+        this.product.description;
+      this.root.querySelector(".price").textContent =
+        `$ ${this.product.price.toFixed(2)} ea`;
+      this.root.querySelector("button").addEventListener("click", () => {
+        addToCart(this.product.id);
+        app.router.go("/order");
+      });
+    } else {
+      alert("Invalid Product ID");
+    }
+  }
+
+  connectedCallback() {
+    this.renderData();
+  }
+}
+
+customElements.define("details-page", DetailsPage);
-- 
cgit v1.3