Started work for chef order management

app.py

@@ -53,7 +53,16 @@ def deliverystatus():
         return render_template("dashboard-deliverystat.html", nav = helpers.getSidebarNav(), currentUrl = '/dashboard/deliverystatus')
 
 @app.route('/dashboard/chefprogress')
-def chefprogress(): return render_template("chefprogress.html", currentUrl = "/chefprogress", nav = helpers.getSidebarNav())
+def chefprogress(): 
+    if helpers.isLoggedIn() and (helpers.isChef() or helpers.isManager()):
+        return render_template("dashboard-chefprogress.html", currentUrl = "/chefprogress", nav = helpers.getSidebarNav())
+    else: return abort(403)
+
+@app.route('/dashboard/chefprogress/<id>')
+def orderstatus(id):
+    if helpers.isLoggedIn() and (helpers.isChef() or helpers.isManager()):
+        return render_template("dashboard-chefprogress-order.html", currentUrl = "/chefprogress", nav = helpers.getSidebarNav())
+    else: return abort(403)
 
 @app.route('/login')
 def login():

build/dashboard-chefprogress-order.html

@@ -0,0 +1,13 @@
+{% extends 'dashboard-layout.html' %}
+{% block head %}
+    <title>Dashboard: Home</title>
+    <link href="/styles/chefprogress.css" rel="stylesheet" type="text/css">
+{% endblock %}
+
+{% block body %}
+    <div class="title">
+        <h2>Welcome to Dashboard</h2>
+        <!-- will prob display different stuff here based on employee -->
+    </div>
+
+{% if session.get('employeeType') == 'chef' %}

build/chefprogress.html → build/dashboard-chefprogress.html

@@ -1,23 +1,18 @@
 {% extends 'dashboard-layout.html' %}
 {% block head %}
-    <title>Dashboard: Home</title>
+    <title>Dashboard: Active Orders</title>
     <link href="/styles/chefprogress.css" rel="stylesheet" type="text/css">
 {% endblock %}
 
 {% block body %}
     <div class="title">
-        <h2>Welcome to Dashboard</h2>
+        <h2>Active Orders</h2>
         <!-- will prob display different stuff here based on employee -->
     </div>
 
 {% if session.get('employeeType') == 'chef' %}
-    <div>
-        <div class="title">
-            <h2>You're a chef.</h2>
-        </div>
-
-
-        <div class ="progresscontainer">
+    <div class="orderlist" id="orderlist">
+        <!-- <div class ="progresscontainer">
             <div class="progress" id="progress"></div>
             <div class="circle active"><i class="fa-solid fa-circle-check"></i></div>
             <div class="circle active"><i class="fa-solid fa-circle-check"></i></div>
@@ -31,8 +26,10 @@ <h2>Order ready for delivery.</h2>
 
         </div>
 
-        <button class="stepbtn" id="prev" diabled>Previous Step</button>
-        <button class="stepbtn" id="next" diabled>Next Step</button>
+        <button class="stepbtn" id="prev" disabled>Previous Step</button>
+        <button class="stepbtn" id="next" disabled>Next Step</button> -->
+
+    </div>
 
 
 {% else %}
@@ -42,4 +39,5 @@ <h2>Order ready for delivery.</h2>
 {% endif %}
 <!-- <script src="/scripts/showstatus.js"></script> -->
 <script src="/scripts/updateprogress.js"></script>
+<script src="/scripts/chefprogress-orders.js"></script>
 {% endblock %}

build/dashboard-layout.html

@@ -17,7 +17,7 @@
             <img src="/imgs/hamburger.svg"  class="sidebarIcon" onclick="displaySidebar()"/>
             <a href="/"><img src="/imgs/Logo.png" class="logo"></a>
         </header>
-        <div class="sidebar sidebarHide">
+        <div class="sidebar" id="sidebar">
             <div class="sidebarHeader">
                 <h1>Dashboard</h1>
                 <img src="/imgs/close.svg" class="sidebarClose" onclick="hideSidebar()"/>

build/scripts/bids.js

@@ -37,7 +37,7 @@ async function postBid(orderID) {
 function createOrder(order) {
     const orderDiv = createElement('div', { class: 'order' });
     ['address', 'datetime'].forEach(field => {
-        const element = createElement('p', { text: order[field] });
+        const element = createElement('p', { text: `${field.charAt(0).toUpperCase()+ field.slice(1)}: ${order[field]}` });
         orderDiv.appendChild(element);
     });
     const button = createElement('button', { text: 'Bid', onclick: `openBidModal(${order.orderID})` });
@@ -50,8 +50,10 @@ async function loadOrders() {
     const ordersDiv = document.getElementsByClassName('orders')[0];
     if (orders.length > 0) {
         orders.forEach(order => {
-            const orderDiv = createOrder(order);
-            ordersDiv.appendChild(orderDiv);
+            if (order.deliveryMethod == "delivery" && order.employeeID == null) {
+                const orderDiv = createOrder(order);
+                ordersDiv.appendChild(orderDiv);
+            }
         })
     }
     else {

build/scripts/chefprogress-orders.js

@@ -0,0 +1,52 @@
+async function getCurrentOrders() {
+    const response = await fetch('/api/order/inprogress');
+    const data = await response.json();
+    console.log(data['response']);
+
+    return data['response'];
+}
+
+async function showOrders() {
+    let container = document.getElementById('orderlist');
+
+    let orders = await getCurrentOrders();
+
+    if (orders.length > 0) {
+        orders.forEach(order => {
+            if ((order.status != "cancelled" && order.status != "completed")  && ((order.deliveryMethod == "delivery" && order.employeeID != null) || (order.deliveryMethod == "pickup"))) {
+                let orderdiv = createElement("a", {class: "orderdiv", href: `/dashboard/chefprogress/${order.orderID}`});
+                Array.from(["orderID", "datetime", "deliveryMethod", "status", "cost"]).forEach(attrib => {
+                    let element = createElement("p", {text: `${attrib.charAt(0).toUpperCase() + attrib.slice(1)} : ${order[attrib]}`, class: attrib});
+                    orderdiv.appendChild(element);
+                });
+                container.appendChild(orderdiv);
+            }
+        });
+    }
+    else {
+        let textdiv = createElement("div", {class : "noOrders"});
+        let text = createElement("p", {text: "There are no active orders available. Please check back in a minute.", class: "noOrdersText"});
+        textdiv.appendChild(text);
+        container.appendChild(textdiv);
+    }
+}
+
+function eraseOrders() {
+    let orders = document.getElementsByClassName('orderdiv');
+    if (orders.length > 0){
+        Array.from(orders).forEach(element => {
+            element.remove();
+        });
+    }
+}
+
+function reload() {
+    eraseOrders();
+    showOrders();
+}
+
+reload();
+
+setInterval(() => {
+    reload();
+}, 10000);

build/scripts/order-page-bidpicking.js

@@ -1,7 +1,7 @@
 
 async function autoAssign(id) {
     const allbids = await getBids(id);
-
+    doNotReload = true;
     if (allbids.length > 0) {   // Checks whether there are bids avalable.
         var smallest = selectSmallest(allbids);
 
@@ -15,6 +15,7 @@ async function autoAssign(id) {
             order.dishIDs = dishes;
 
             updateItem(order.orderID, order);
+            doNotReload = false;
             setTimeout(() => {
                 location.reload();
             }, 1000);

build/scripts/order-page.js

@@ -1,3 +1,4 @@
+var doNotReload = false;
 // Functions for the clock
 function currentTime() {
     let clock = document.getElementById("currentTime");
@@ -76,7 +77,7 @@ function filltable(data) {
                         break;
                     case 'orderID':
                         column = createElement('td');
-                        let anchor = createElement('a', { onclick:`loadOrder(${order[key]})`/*href: `/orders/${order[key]}`*/, text: order[key] })
+                        let anchor = createElement('a', { onclick:`loadOrder(${order[key]})`, href: "javascript:void(0)", text: order[key] })
                         column.appendChild(anchor)
                         break;
                     default:
@@ -139,3 +140,6 @@ currentTime();
 
 setInterval(() => { currentTime() }, 1000);
 
+setInterval(() => {
+    location.reload();
+}, 10000);

build/scripts/sidebar.js

@@ -1,7 +1,7 @@
 function displaySidebar() {
-    document.getElementsByClassName('sidebar')[0].classList.remove('sidebarHide');
+    document.getElementById('sidebar').style.width = "300px";
 }
 
 function hideSidebar() {
-    document.getElementsByClassName('sidebar')[0].classList.add('sidebarHide');
+    document.getElementById('sidebar').style.width = "0";
 }

build/styles/chefprogress.css

@@ -1,4 +1,4 @@
-.perinfo {
+/* .perinfo {
     text-align: left;
     font-size: 70%;
   
@@ -78,4 +78,37 @@
     background-color: rgb(179, 88, 138);
   }
   
-
+   */
+
+.orderlist{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  padding: 20px 80px;
+
+}
+.orderdiv{
+  background-color: white;
+  border-radius: 10px;
+  box-shadow: 0 0 20px rgb(0,0,0,0.15);
+  margin: 10px;
+  width: 400px;
+  transition: 0.5s;
+  text-decoration: none;
+  color: black;
+}
+
+.orderdiv:hover{
+  background-color: pink;
+}
+
+.orderID{
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.cost{
+  font-size: 17px;
+  font-weight: 600;
+}

build/styles/dashboard-layout.css

@@ -39,11 +39,13 @@ header {
     position: fixed;
     top: 0;
     left: 0;
-    width: 300px;
-    height: 100vh;
-    background-color: #3F829D;
+    width: 0;
+    height: 100%;
+    background-color: pink;
     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
     z-index: 100;
+    transition: 0.5s;
+    overflow-x: hidden;
 }
 
 .sidebarHide {