feat: added components, proxy and finished project/courseHEADmaster

1 files changed, 100 insertions, 0 deletions

diff --git a/components/OrderPage.js b/components/OrderPage.js
new file mode 100644
index 0000000..adb6427
--- /dev/null
+++ b/components/OrderPage.js
@@ -0,0 +1,100 @@
+export class OrderPage extends HTMLElement {
+  // the hash defines a private property in js
+  #user = {
+    name: "",
+    phone: "",
+    email: "",
+  };
+
+  constructor() {
+    super();
+
+    this.root = this.attachShadow({ mode: "open" });
+    const styles = document.createElement("style");
+    this.root.appendChild(styles);
+    const section = document.createElement("section");
+    this.root.appendChild(section);
+
+    async function loadCSS() {
+      const request = await fetch("/components/OrderPage.css");
+      styles.textContent = await request.text();
+    }
+    loadCSS();
+  }
+
+  connectedCallback() {
+    window.addEventListener("appcartchange", () => {
+      this.render();
+    });
+    this.render();
+  }
+
+  render() {
+    let section = this.root.querySelector("section");
+    if (app.store.cart.length == 0) {
+      section.innerHTML = `
+          <p class="empty">Your order is empty</p>
+      `;
+    } else {
+      let html = `
+          <h2>Your Order</h2>
+          <ul>
+          </ul>
+      `;
+      section.innerHTML = html;
+
+      const template = document.getElementById("order-form-template");
+      const content = template.content.cloneNode(true);
+      section.appendChild(content);
+
+      let total = 0;
+      for (let prodInCart of app.store.cart) {
+        const item = document.createElement("cart-item");
+        item.dataset.item = JSON.stringify(prodInCart);
+        this.root.querySelector("ul").appendChild(item);
+
+        total += prodInCart.quantity * prodInCart.product.price;
+      }
+      this.root.querySelector("ul").innerHTML += `
+            <li>
+                <p class='total'>Total</p>
+                <p class='price-total'>$${total.toFixed(2)}</p>
+            </li>                
+        `;
+    }
+
+    // use the shadow dom to select the form otherwise it doesnt work
+    this.setFormBindings(this.root.querySelector("form"));
+  }
+
+  setFormBindings(form) {
+    // use the submit event so the enter key and the button works
+    form.addEventListener("submit", (event) => {
+      event.preventDefault();
+      alert(`Thanks for your order ${this.#user.name}.`);
+      this.#user.name = "";
+      this.#user.email = "";
+      this.#user.phone = "";
+      // TODO: Send the data to the Server
+    });
+
+    // set double data binding
+    this.#user = new Proxy(this.#user, {
+      set(target, property, value) {
+        target[property] = value;
+        form.elements[property].value = value;
+        // needed to indicate that the modification was successful
+        return true;
+      },
+    });
+    Array.from(form.elements).forEach((element) => {
+      // the change event does only get triggered when the user changes the
+      // element via the ui
+      element.addEventListener("change", (event) => {
+        this.#user[element.name] = element.value;
+      });
+    });
+  }
+}
+
+customElements.define("order-page", OrderPage);