Large improvements to order page, with inclusion of list of order ite…

…ms, donut picture, as well as sum over all elemnts of order
CMU-17-356 · Mar 1, 2022 · d04929c · d04929c
1 parent 1bfd568
commit d04929c
Show file tree

Hide file tree

Showing 6 changed files with 215 additions and 203 deletions.
diff --git a/frontend/src/components/Customer/CustomerMenu.tsx b/frontend/src/components/Customer/CustomerMenu.tsx
@@ -1,5 +1,4 @@
 import {
-  AppBar,
   Box,
   Button,
   Card,
@@ -9,39 +8,12 @@ import {
   Container,
   CssBaseline,
   Grid,
-  Toolbar,
   Typography
 } from '@mui/material';
-import RestaurantMenuTwoToneIcon from '@mui/icons-material/RestaurantMenuTwoTone';
-import { Link } from 'react-router-dom';
 import React, { useEffect } from 'react';
-
-const donutImages = {
-  'Apple Krumb': require('../../assets/apple_krumb.jpeg'),
-  'Bavarian Kreme': require('../../assets/bavarian_kreme.jpeg'),
-  Blueberry: require('../../assets/blueberry.jpeg'),
-  'Boston Kreme': require('../../assets/boston_kreme.jpeg'),
-  'Chocolate Frosted': require('../../assets/chocolate_frosted.jpeg'),
-  'Chocolate Glaze': require('../../assets/chocolate_glaze.jpeg'),
-  'Cinnamon Sugar': require('../../assets/cinnamon_sugar.jpeg'),
-  'Marble Frosted': require('../../assets/marble_frosted.jpeg'),
-  'Old Fashioned': require('../../assets/old_fashioned.jpeg'),
-  'Original Glaze': require('../../assets/original_glaze.jpeg'),
-  'Powdered Sugar': require('../../assets/powdered_sugar.jpeg'),
-  'Sour Cream': require('../../assets/sour_cream.jpeg'),
-  'Strawberry Frosted': require('../../assets/strawberry_frosted.jpeg'),
-  'Vanilla Frosted': require('../../assets/vanilla_frosted.jpeg'),
-  Coconut: require('../../assets/coconut.jpeg'),
-  Cruller: require('../../assets/cruller.jpeg'),
-  Jelly: require('../../assets/jelly.jpeg'),
-  'Chocolate Kreme': require('../../assets/chocolate_kreme.jpeg')
-};
-
-export interface Donut {
-  id: string;
-  flavor: string;
-  price: number;
-}
+import { Link } from 'react-router-dom';
+import DonutInterface from '../Donuts/Donut';
+import { donutImages } from '../Donuts/donutImages';
 
 function Copyright() {
   return (
@@ -57,7 +29,7 @@ function Copyright() {
 }
 
 function Menu() {
-  const [donuts, setDonuts] = React.useState<Array<Donut>>([]);
+  const [donuts, setDonuts] = React.useState<Array<DonutInterface>>([]);
 
   async function fetchDonuts() {
     try {

diff --git a/frontend/src/components/Donuts/Donut.tsx b/frontend/src/components/Donuts/Donut.tsx
@@ -0,0 +1,5 @@
+export default interface DonutInterface {
+  id: string;
+  flavor: string;
+  price: number;
+}
diff --git a/frontend/src/components/Donuts/donutImages.tsx b/frontend/src/components/Donuts/donutImages.tsx
@@ -0,0 +1,20 @@
+export var donutImages = {
+  'Apple Krumb': require('../../assets/apple_krumb.jpeg'),
+  'Bavarian Kreme': require('../../assets/bavarian_kreme.jpeg'),
+  Blueberry: require('../../assets/blueberry.jpeg'),
+  'Boston Kreme': require('../../assets/boston_kreme.jpeg'),
+  'Chocolate Frosted': require('../../assets/chocolate_frosted.jpeg'),
+  'Chocolate Glaze': require('../../assets/chocolate_glaze.jpeg'),
+  'Cinnamon Sugar': require('../../assets/cinnamon_sugar.jpeg'),
+  'Marble Frosted': require('../../assets/marble_frosted.jpeg'),
+  'Old Fashioned': require('../../assets/old_fashioned.jpeg'),
+  'Original Glaze': require('../../assets/original_glaze.jpeg'),
+  'Powdered Sugar': require('../../assets/powdered_sugar.jpeg'),
+  'Sour Cream': require('../../assets/sour_cream.jpeg'),
+  'Strawberry Frosted': require('../../assets/strawberry_frosted.jpeg'),
+  'Vanilla Frosted': require('../../assets/vanilla_frosted.jpeg'),
+  Coconut: require('../../assets/coconut.jpeg'),
+  Cruller: require('../../assets/cruller.jpeg'),
+  Jelly: require('../../assets/jelly.jpeg'),
+  'Chocolate Kreme': require('../../assets/chocolate_kreme.jpeg')
+};
diff --git a/frontend/src/components/Employee/EmployeeDashboard.tsx b/frontend/src/components/Employee/EmployeeDashboard.tsx
@@ -1,46 +1,42 @@
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import Box from '@mui/material/Box';
-import Container from '@mui/material/Container';
 import Divider from '@mui/material/Divider';
 import MuiDrawer from '@mui/material/Drawer';
-import Grid from '@mui/material/Grid';
 import IconButton from '@mui/material/IconButton';
 import List from '@mui/material/List';
-import Paper from '@mui/material/Paper';
 import { styled } from '@mui/material/styles';
 import Toolbar from '@mui/material/Toolbar';
 import * as React from 'react';
 import { mainListItems } from './listItems';
 import Orders from './Orders';
 
-
 const drawerWidth: number = 240;
 
-const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })(
-  ({ theme, open }) => ({
-    '& .MuiDrawer-paper': {
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      width: drawerWidth,
+const Drawer = styled(MuiDrawer, {
+  shouldForwardProp: (prop) => prop !== 'open'
+})(({ theme, open }) => ({
+  '& .MuiDrawer-paper': {
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    width: drawerWidth,
+    transition: theme.transitions.create('width', {
+      easing: theme.transitions.easing.sharp,
+      duration: theme.transitions.duration.enteringScreen
+    }),
+    boxSizing: 'border-box',
+    ...(!open && {
+      overflowX: 'hidden',
       transition: theme.transitions.create('width', {
         easing: theme.transitions.easing.sharp,
-        duration: theme.transitions.duration.enteringScreen,
-      }),
-      boxSizing: 'border-box',
-      ...(!open && {
-        overflowX: 'hidden',
-        transition: theme.transitions.create('width', {
-          easing: theme.transitions.easing.sharp,
-          duration: theme.transitions.duration.leavingScreen,
-        }),
-        width: theme.spacing(7),
-        [theme.breakpoints.up('sm')]: {
-          width: theme.spacing(9),
-        },
+        duration: theme.transitions.duration.leavingScreen
       }),
-    },
-  }),
-);
+      width: theme.spacing(7),
+      [theme.breakpoints.up('sm')]: {
+        width: theme.spacing(9)
+      }
+    })
+  }
+}));
 
 function DashboardContent() {
   const [open, setOpen] = React.useState(true);
@@ -49,41 +45,33 @@ function DashboardContent() {
   };
 
   return (
-      <Box sx={{ display: 'flex' }}>
-        <Drawer variant="permanent" open={open}>
-          <Toolbar
-            sx={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'flex-end',
-              px: [1],
-            }}
-          >
-            <IconButton onClick={toggleDrawer}>
-              <ChevronLeftIcon />
-            </IconButton>
-          </Toolbar>
-          <Divider />
-          <List component="nav">
-            {mainListItems}
-          </List>
-        </Drawer>
-        <Box
-          component="main"
+    <Box sx={{ display: 'flex' }}>
+      <Drawer variant="permanent" open={open}>
+        <Toolbar
           sx={{
-            flexGrow: 1,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'flex-end',
+            px: [1]
           }}
         >
-          <Toolbar />
-          <Container maxWidth="lg" sx={{ mt: 4, mb: 4 }}>
-              <Grid item xs={12}>
-                <Paper sx={{ p: 2, display: 'flex', flexDirection: 'column' }}>
-                  <Orders />
-                </Paper>
-              </Grid>
-          </Container>
-        </Box>
+          <IconButton onClick={toggleDrawer}>
+            <ChevronLeftIcon />
+          </IconButton>
+        </Toolbar>
+        <Divider />
+        <List component="nav">{mainListItems}</List>
+      </Drawer>
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1
+        }}
+      >
+        <Toolbar />
+        <Orders />
       </Box>
+    </Box>
   );
 }