From b4086ab92853893fec9e0749e7882ba7b5a58aa8 Mon Sep 17 00:00:00 2001 From: AlinaTaoRao Date: Mon, 18 Apr 2022 10:51:48 +0200 Subject: [PATCH] app version1 unique files backup --- public/index-v1.html | 25 +++++++ public/script/components/load-up-v1.js | 79 ++++++++++++++++++++++ public/script/handlers/order-handler-v1.js | 33 +++++++++ 3 files changed, 137 insertions(+) create mode 100644 public/index-v1.html create mode 100644 public/script/components/load-up-v1.js create mode 100644 public/script/handlers/order-handler-v1.js diff --git a/public/index-v1.html b/public/index-v1.html new file mode 100644 index 0000000..57f8a46 --- /dev/null +++ b/public/index-v1.html @@ -0,0 +1,25 @@ + + + + + + + + Pizza app + + + +
+

Buy my pizza

+

+ 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? +

+
+
+ + + + diff --git a/public/script/components/load-up-v1.js b/public/script/components/load-up-v1.js new file mode 100644 index 0000000..e02b819 --- /dev/null +++ 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 = ``; + 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 = ``; + 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 = ``; + + 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 = ``; + + 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 new file mode 100644 index 0000000..76b722b --- /dev/null +++ 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; +};