styleless order page

raynelfss · Apr 23, 2022 · 275e8c0 · 275e8c0
1 parent 54f28be
commit 275e8c0
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 1 deletion.
diff --git a/api/order.py b/api/order.py
@@ -62,7 +62,11 @@ def index():    # route to handle requests
 @orderBlueprint.route('/<id>', methods = ['GET', 'PUT', 'DELETE'])
 def order(id):
     if request.method == 'GET':
-        try: return { 'response': orders.getOrderByID(id) }
+        try:
+            order = orders.getOrderByID(id)
+            dishes = helpers.getDishes(order['dishIDs']) # get dishes
+            order['dishes'] = dishes # add dishes to order
+            return { 'response': order }
         except Exception as e:
             print(e, '\n')
             return abort(500)

diff --git a/app.py b/app.py
@@ -46,6 +46,10 @@ def checkout():
 def orderspage():
     return render_template("orders-page.html")
 
+@app.route('/orders/<id>')
+def order(id):
+    return render_template("order.html")
+
 @app.errorhandler(404)
 def not_found(e):
   return render_template("404.html")

diff --git a/build/order.html b/build/order.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Order</title>
+        <script src="/scripts/helpers.js"></script>
+        <link href="/styles/order.css" rel="stylesheet" type="text/css" />
+    </head>
+    <body>
+        <div class="order-container">
+            <h1 class="order-id"></h1>
+            <div class="order-items"></div>
+            <div class="order-cost"></div>
+            <div class="order-status"></div>
+        </div>
+    </body>
+    <script src="/scripts/order.js"></script>
+</html>
diff --git a/build/scripts/order.js b/build/scripts/order.js
@@ -0,0 +1,79 @@
+async function getOrder() {
+    const url = window.location.href
+    const urlSplitted = url.split('/');
+    const id = urlSplitted[urlSplitted.length - 1];
+    const response = await fetch(`/api/order/${id}`);
+    const data = await response.json();
+    const order = data['response'] || {};
+    return order
+}
+
+async function loadOrder() {
+    const order = await getOrder();
+    console.log(order)
+    if (order) {
+        console.log('true')
+        // set order id
+        document.getElementsByClassName('order-id')[0].textContent = `Order ID: ${order['orderID']}`
+        // display order items
+        loadOrderItems(order['dishes'])
+        // display order costs
+        loadCosts(order['dishes'], order['deliveryMethod'] === 'delivery');
+        // display order status
+        loadStatus(order['status'])
+    } else {
+        console.log('err')
+    }
+}
+
+function loadOrderItems(items) {
+    const orderItems = document.getElementsByClassName('order-items')[0];
+    let h2 = createElement('h2', { text: 'Items' });
+    orderItems.appendChild(h2);
+    items.forEach(item => {
+        orderItem = createOrderItem(item);
+        orderItems.appendChild(orderItem);
+    })
+}
+
+function createOrderItem(item) {
+    const orderItem = createElement('div', { class: 'order-item' });
+    const image = createElement('img', { src: item['imageURL'] });
+    const dishName = createElement('h3', { text: item['dishName'] });
+    const quantity = createElement('p', { text: `Quantity: ${item['quantity']}` });
+    appendChildren(orderItem, [image, dishName, quantity])
+    return orderItem
+}
+
+function loadCosts(items, isDelivery) {
+    const prices = calculateCartPrice(items, isDelivery);
+    const orderCosts = document.getElementsByClassName('order-cost')[0]
+    const h2 = createElement('h2', { text: 'Costs' });
+    orderCosts.appendChild(h2);
+    const priceElementArray = Object.keys(prices).map(priceType => {
+        return createElement('p', { text: `${priceType}: ${prices[priceType].toFixed(2)}` });
+    })
+    appendChildren(orderCosts, priceElementArray);
+
+}
+// cur
+function calculateCartPrice(items, isDelivery) {
+    let subtotal = 0;
+    let taxes = 0;
+    let deliveryFee = 0;
+    let total = 0;
+    items.forEach(item => { subtotal = item.price * item.quantity; })
+    taxes = subtotal * 0.08875;
+    isDelivery && (deliveryFee = 7.99);
+    total = subtotal + taxes + deliveryFee;
+    return { subtotal, taxes, deliveryFee, total };
+}
+
+function loadStatus(status) {
+    const orderStatus = document.getElementsByClassName('order-status')[0];
+    const h2 = createElement('h2', { text: 'Status' });
+    const p = createElement('p', { text: status });
+    appendChildren(orderStatus, [h2, p]);
+}
+
+loadOrder()
diff --git a/build/styles/order.css b/build/styles/order.css
@@ -0,0 +1,4 @@
+.order-item img {
+    width: 100px;
+    height: 100px;
+}
diff --git a/helpers.py b/helpers.py
@@ -52,6 +52,23 @@ def calcPrices(dishIDs, deliveryStatus):
     roundedPrice = round(totalPrice, 2) # rounds to nearest hundredth
     return roundedPrice
 
+def getDishes(dishIDString):
+    dishIDs = dishIDString.split(',') # [dishID, dishID]
+    dishCount = {} # {dishID: quantity}
+    for dishID in dishIDs:
+        if dishID in dishCount:
+            dishCount[dishID] += 1
+        else:
+            dishCount[dishID] = 1
+    dishes = []
+    for dishID in dishCount: # itterate through keys in dishCount
+        dish = menu.getById(dishID) # get dish from db
+        dish['quantity'] = dishCount[dishID] # add quantity to dish
+        dishes.append(dish) # add dish to dishes
+    return dishes
+
+
+
 def getNav():
     if isLoggedIn():
         return [