Merge pull request #45 from CMU-17-356/Employee_View

Added employee view
CMU-17-356 · Feb 25, 2022 · e1cb976 · e1cb976
2 parents a71c0a9 + fa09f2b
commit e1cb976
Show file tree

Hide file tree

Showing 3 changed files with 177 additions and 0 deletions.
diff --git a/frontend/src/pages/App.tsx b/frontend/src/pages/App.tsx
@@ -2,6 +2,7 @@ import {BrowserRouter, Route, Routes} from 'react-router-dom';
 import {Menu} from "./Menu";
 import {HomePage} from "./HomePage";
 import {Confirmation} from "./Confirmation";
+import {Employee} from "./Employee";
 import {Status} from "./Status";
 import * as React from "react";
 
@@ -14,6 +15,7 @@ export const App: React.FC = () => {
         <Route path="/menu" element={<Menu />}/>
         <Route path="/confirm" element={<Confirmation />}/>
         <Route path="/status" element={<Status />}/>
+        <Route path="/employee" element={<Employee/>}/>
         <Route path="/shoppingcart" element={<HomePage />}/>
       </Routes>
     </BrowserRouter>

diff --git a/frontend/src/pages/Employee.tsx b/frontend/src/pages/Employee.tsx
@@ -0,0 +1,81 @@
+import * as React from "react";
+import "../styles/Employee.css";
+import {DonutCard} from "../components/DonutCard";
+import "../styles/Menu.css";
+
+class Donut {
+    name: string
+    image: string
+    description: string
+    price: number
+    quantity: number
+
+    constructor(name: string, image: string, description: string, price: number, quantity: number) {
+        this.name = name;
+        this.image = image;
+        this.description = description;
+        this.price = price;
+        this.quantity = quantity;
+    }
+}
+
+// Temporary Menu
+const items: Array<Donut> = [
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 2),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+    new Donut("Apple Krumble", "https://cmu-17-356.github.io/Dronuts/assets/donut_flavors/apple_krumb.jpg", "Apples and crumbs", 3.99, 0),
+]
+
+export const Employee: React.FC = () => {
+    return (<>
+        <div className="employee-Main-Div">
+            <div className="list-orders-div">
+                <h1 className = "employee-main-div-title">Orders</h1>
+                <div className="list-order-button">
+                    <button className = "xButton">x</button>
+                    <button className = "ListButton">Order #3000</button>
+                    <button className = "xButton">x</button>
+                </div>
+                <div className="list-order-button">
+                    <button className = "xButton">x</button>
+                    <button className = "ListButton">Order #3000</button>
+                    <button className = "xButton">x</button>
+                </div>
+                <div className="list-order-button">
+                    <button className = "xButton">x</button>
+                    <button className = "ListButton">Order #3000</button>
+                    <button className = "xButton">x</button>
+                </div>
+                <div className="list-order-button">
+                    <button className = "xButton">x</button>
+                    <button className = "ListButton">Order #3000</button>
+                    <button className = "xButton">x</button>
+                </div>
+            </div>
+
+            <div className="order-div">
+                <h1 className="order-Title">Order #3000</h1>
+                <div className="In-Progress-Div">
+                    <h1 className = "In-Progress-Title">In Progress</h1>
+                    <div className="In-Progress">
+                        {items.map((donut: Donut, index: number) => (
+                            <DonutCard key={index} name={donut.name} image={donut.image} description={donut.description} price={donut.price} quantity={donut.quantity}/>
+                        ))}
+                    </div>
+                </div>
+                <div className="Completed-Div">
+                    <h1 className = "Completed-Title">Completed</h1>
+                    <div className="Completed">
+                        {items.map((donut: Donut, index: number) => (
+                            <DonutCard key={index} name={donut.name} image={donut.image} description={donut.description} price={donut.price} quantity={donut.quantity}/>
+                        ))}
+                    </div>
+                </div>
+            </div>
+        </div>
+    </>);
+}
diff --git a/frontend/src/styles/Employee.css b/frontend/src/styles/Employee.css
@@ -0,0 +1,94 @@
+.employee-Main-Div{
+    display: grid;
+    grid-template-columns: 20% 80%;
+    height: 100vh;
+}
+
+.list-orders-div{
+    grid-column: 1;
+    height: 100%;
+    background-color: #EF72AC;
+    display: grid;
+    grid-template-rows: repeat(1fr, 8);
+    overflow-y:scroll;
+    text-align: center;
+    align-items: center;
+}
+
+.In-Progress{
+    border-color: black;
+    background-color: #F6F6F6;
+    display: grid;
+    padding: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
+    margin: auto;
+    height: auto;
+    text-align: center;
+    align-items: center;
+}
+
+.Completed{
+    border-color: black;
+    background-color: #F6F6F6;
+    display: grid;
+    padding: 10px;
+    grid-template-columns: repeat(auto-fill, minmax(200px, auto));
+    margin: auto;
+    height: auto;
+    text-align: center;
+    align-items: center;
+}
+
+.employee-main-div-title{
+    font-weight: bolder;
+    color: white;
+    font-size: 30px;
+}
+
+.list-order-button{
+    height: 100%;
+    color: white;
+    border-width: 1px;
+    display: grid;
+    grid-template-columns: auto auto auto;
+
+}
+
+.ListButton{
+    font-size: 17px;
+    font-weight: bolder;
+    height: 100%;
+    margin: auto;
+}
+
+.order-div{
+    overflow-y: scroll;
+}
+
+.order-Title{
+    font-size: 30px;
+    color: black;
+    font-weight: bolder;
+    margin-top: 30px;
+    text-align: center;
+}
+
+.In-Progress-Div{
+    padding: 30px;
+}
+
+.In-Progress-Title{
+    font-size: 25px;
+    color: black;
+    font-weight: bolder;
+}
+
+.Completed-Title{
+    font-size: 25px;
+    color: black;
+    font-weight: bolder;
+}
+
+.Completed-Div{
+    padding: 30px;
+}