aviv82 · AlinaTaoRao · Apr 18, 2022
diff --git a/public/index-v1.html b/public/index-v1.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" type="text/css" href="style/style.css" />
+    <title>Pizza app</title>
+  </head>
+
+  <body>
+    <div id="container">
+      <h1>Buy my pizza</h1>
+      <p>
+        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Minima,
+        recusandae earum animi illum fugit, iure neque iste amet quia dolorum
+        quidem vel beatae necessitatibus hic quod voluptas quos, praesentium
+        esse?
+      </p>
+    </div>
+    <div id="user-input"></div>
+    <input type="button" value="Send order" id="order-button" />
+    <script type="module" src="script/index.js"></script>
+  </body>
+</html>
diff --git a/public/script/components/load-up-v1.js b/public/script/components/load-up-v1.js
@@ -0,0 +1,79 @@
+// import { from } from "form-data.js";
+import { bigFetch } from "../api/big-fetch.js";
+
+export const loadUp = async () => {
+  const root = document.getElementById("user-input");
+  const userForm = document.createElement("form");
+  userForm.id = "user-form";
+  const sizeSearch = "sizes";
+  const sizeData = await bigFetch(sizeSearch);
+
+  const sizeSelect = document.createElement("select");
+  sizeSelect.name = "size";
+  sizeSelect.id = "size-select";
+  sizeSelect.innerHTML = `<option value="">--Please choose an option--</option>`;
+  for (let i = 0; i < sizeData.data.length; i++) {
+
+    const size = sizeData.data[i].attributes.size;
+    // Alina change size from small, medium, large, xl, to integer
+    const mySize = sizeData.data[i].id;
+    //
+
+    const optionEl = document.createElement("option");
+    optionEl.value = `${mySize}`;
+    optionEl.innerHTML = `${size}`;
+    sizeSelect.appendChild(optionEl);
+  }
+  userForm.innerHTML = `<label for="size-select">Choose a size:</label>`;
+  userForm.appendChild(sizeSelect);
+
+  const doughSearch = "doughs";
+  const doughData = await bigFetch(doughSearch);
+
+  const doughSelect = document.createElement("select");
+  doughSelect.name = "dough";
+  doughSelect.id = "dough-select";
+  doughSelect.innerHTML = `<option value="">--Please choose an option--</option>`;
+
+  for (let i = 0; i < doughData.data.length; i++) {
+    const dough = doughData.data[i].attributes.type;
+    // Alina: change dough value from : classic, cheezy, pan to integer
+    const myDough = doughData.data[i].id;
+
+    const optionEl = document.createElement("option");
+    optionEl.value = `${myDough}`;
+    optionEl.innerHTML = `${dough}`;
+    doughSelect.appendChild(optionEl);
+  }
+  const doughFor = `<label for="dough-select">Choose a dough:</label>`;
+
+  userForm.insertAdjacentHTML("beforeend", doughFor);
+  userForm.appendChild(doughSelect);
+
+  const topSearch = "toppings";
+  const topData = await bigFetch(topSearch);
+  const topList = document.createElement("ul");
+  topList.id = "topping-list";
+  topList.innerHTML = "Choose your favorite toppings:";
+  for (let i = 0; i < topData.data.length; i++) {
+    const topItem = document.createElement("li");
+    const topName = topData.data[i].attributes.toppingName;
+    const topInput = document.createElement("input");
+    topInput.type = "checkbox";
+    // Alina: add class name to checkbox
+    topInput.className = "fav-toppings";
+    const myId = topData.data[i].id;
+    topInput.id = `${myId}`; // change the id to number
+
+    const topLabel = document.createElement("label");
+    topLabel.setAttribute("for", `${topName}`);
+    topLabel.innerHTML = `${topName}`;
+    topItem.appendChild(topInput);
+    topItem.appendChild(topLabel);
+    topList.appendChild(topItem);
+  }
+
+  userForm.appendChild(topList);
+
+  root.appendChild(userForm);
+};
diff --git a/public/script/handlers/order-handler-v1.js b/public/script/handlers/order-handler-v1.js
@@ -0,0 +1,33 @@
+import { ORIGIN, jwt } from "../config.js";
+import { createPizza } from "../components/create-pizza.js";
+import { createOrder } from "../components/create-order.js";
+import { bigFetch } from "../api/big-fetch.js";
+
+export const orderHandler = async (event) => {
+  // collect user input
+  // event.preventDefault(); //Alina: stop the form submitting, if put #order-button into form element, we'll need it, for backup.
+  const size = document.getElementById("size-select").value;
+  const dough = document.getElementById("dough-select").value;
+  const toppings = Array.from(document.getElementsByClassName("fav-toppings"))
+    .filter((ele) => ele.checked)
+    .map((item) => item.id);
+
+  // create the pizza data in strapi
+  const myPizza = await createPizza(size, dough, toppings);
+
+  // get the pizza data in strapi
+  const pizzaSearch = "pizzas?sort=id:desc&populate=*";
+  const getMyPizza = await bigFetch(pizzaSearch);
+  const myPizzaId = getMyPizza.data[0].id;
+
+  // create order data in strapi
+  const myOrder = await createOrder(myPizzaId);
+
+  // get the customized pizza data from strapi and
+  const orderSearch = "orders?sort=id:desc&populate=*";
+  const getMyOrder = await bigFetch(orderSearch);
+  // console.log("getMyOrder:", getMyOrder);
+
+  // # todo: render order info to user: will crate at another feature branch
+  return getMyOrder;
+};