added progress bar to chef progress order from dashboard

build/dashboard-chefprogress-order.html

@@ -16,7 +16,32 @@ <h1 class="order-id"></h1>
             <div class="order-items"></div>
             <div class="order-cost"></div>
             <div class="order-status"></div>
+
+            <h2>Progress Bar</h2>
+            <div id="stepProgressBar">
+                <div class="step">
+                    <p class="text">Incoming Order</p>
+                    <div class="circle">1</div>
+                </div>
+                <div class="step">
+                    <p class="text">Currently Making Order</p>
+                    <div class="circle">2</div>
+                </div>
+                <div class="step">
+                    <p class="text">Order Confirmed</p>
+                    <div class="circle">3</div>
+                </div>
+            </div>
+            <div id="main">
+                <p id="content"  class="text-center">Step 1</p>
+                <button id="previousBtn" >Previous</button>
+                <button id="nextBtn">Next</button>
+            </div>
+            </div>
         </div>
+
+
+
     {% endif %}
     <script src="/scripts/dashboard-chefprogress-order.js"></script>
 {% endblock %}

build/progressbar.html

@@ -0,0 +1,45 @@
+{% 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' %}
+    <div>
+        <div class="title">
+            <h2>You're a chef.</h2>
+        </div>
+
+
+        <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>
+            <div class="circle active"><i class="fa-solid fa-circle-check"></i></div>
+
+            <!-- <div class="progresstext">
+                <h2>Incoming order.</h2>
+                <h2>Preparing order.</h2>
+                <h2>Order ready for delivery.</h2>
+            </div> -->
+
+        </div>
+
+        <button class="stepbtn" id="prev" disabled>Previous Step</button>
+        <button class="stepbtn" id="next" disabled>Next Step</button>
+
+
+{% else %}
+    <div>
+        <t1> You're a customer. </t1>
+    </div>
+{% endif %}
+<!-- <script src="/scripts/showstatus.js"></script> -->
+<script src="/scripts/updateprogress.js"></script>
+{% endblock %}

build/scripts/chefprogress-orders.js

@@ -49,4 +49,42 @@ reload();
 
 setInterval(() => {
     reload();
-}, 10000);
+}, 10000);
+
+
+const  previousBtn  =  document.getElementById('previousBtn');
+const  nextBtn  =  document.getElementById('nextBtn');
+// const  finishBtn  =  document.getElementById('finishBtn');
+const  content  =  document.getElementById('content');
+const  bullets  =  [...document.querySelectorAll('.circle')];
+
+const MAX_STEPS = 3;
+let currentStep = 1;
+
+nextBtn.addEventListener('click',  ()  =>  {
+	bullets[currentStep  -  1].classList.add('completed');
+	currentStep  +=  1;
+	previousBtn.disabled  =  false;
+	if  (currentStep  ===  MAX_STEPS)  {
+		nextBtn.disabled  =  true;
+		// finishBtn.disabled  =  false;
+	}
+	content.innerText  =  `Step ${currentStep}`;
+});
+
+
+previousBtn.addEventListener('click',  ()  =>  {
+	bullets[currentStep  -  2].classList.remove('completed');
+	currentStep  -=  1;
+	nextBtn.disabled  =  false;
+	// finishBtn.disabled  =  true;
+	if  (currentStep  ===  1)  {
+		previousBtn.disabled  =  true;
+	}
+	content.innerText  =  `Step ${currentStep}`;
+});
+
+// finishBtn.addEventListener('click',  ()  =>  {
+// 	location.reload();
+// });
+// when done with order, page will reload

build/scripts/updateprogress.js

@@ -1,3 +1,27 @@
+const progress = document.getElementById("progress");
+const prev = document.getElementById("prev");
+const next = document.getElementById("next");
+const circles = documnet.querySelectorAll(".circles");
+
+let currentActive = 1;
+
+next.addEventListener("click", () => {
+    currentActive++;
+    if (currentActive > circles.length) {
+        currentActive = circles.length;
+    }
+    update();
+});
+
+prev.addEventListener("click", () => {
+    currentActive--;
+
+    if (currentActive < 1){
+        currentActive = 1;
+    }
+    update();
+});
+
 function update(){
     circles.forEach((circle, idx) => {
         if (idx < currenActive) {

build/styles/dashboard-chefprogress-order.css

@@ -33,4 +33,88 @@
     justify-content: center;
     flex-wrap: wrap;
     overflow-x: auto;
-}
+}
+
+#stepProgressBar  {
+	display:  flex;
+	justify-content:  space-between;
+	align-items:  flex-end;
+	width:  300px;
+	margin:  0  auto;
+	margin-bottom:  40px;
+}
+
+.step  {
+text-align:  center;
+}
+
+.text  {
+margin-bottom:  10px;
+color:  #000000;
+}
+
+
+.circle {
+	border: 1px solid #000000;
+	height: 20px;
+	width: 20px;
+	border-radius: 100%;
+	color: #000000;
+	display: inline-block;
+	position: relative;
+	transition: background-color 500ms;
+  line-height:20px;
+}
+
+
+.circle.completed  {
+	color:  white;
+	background-color:  #ff72c7;
+}
+
+
+
+.bullet.completed::after {
+	content: '';
+	position: absolute;
+	right: -60px;
+	bottom: 10px;
+	height: 1px;
+	width: 54px;
+	background-color: #ff72c7;
+}
+
+.hidden  {
+	display:  none;
+}
+
+button  {
+	padding:  5px  10px;
+	border:  none;
+	transition:  250ms background-color;
+}
+
+button:hover  {
+	cursor:  pointer;
+	background-color:  #ff72c7;
+	color:  white;
+}
+
+button:disabled:hover  {
+	opacity:  0.6;
+	cursor:  not-allowed;
+}
+
+.text-center  {
+	text-align:  center;
+}
+
+.container  {
+	max-width:  400px;
+	margin:  0  auto;
+	margin-top:  20px;
+	padding:  40px;
+}
+
+
+