updates

db_app/package-lock.json

@@ -15,6 +15,7 @@
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.2.0",
+        "react-client-session": "^0.0.8",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.10.0",
         "react-scripts": "5.0.1",
@@ -14668,6 +14669,14 @@
         "node": ">=14"
       }
     },
+    "node_modules/react-client-session": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/react-client-session/-/react-client-session-0.0.8.tgz",
+      "integrity": "sha512-wHCTD4lEE8mzl6kxL8viL4q5kGx2TJJNaWdvzmx3KeiMgP+Yv5/Bx476jCpPD0pKc5VvdVuhkH4EM20XqtT/sQ==",
+      "peerDependencies": {
+        "react": "^17.0.1"
+      }
+    },
     "node_modules/react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",
@@ -28099,6 +28108,12 @@
         "whatwg-fetch": "^3.6.2"
       }
     },
+    "react-client-session": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/react-client-session/-/react-client-session-0.0.8.tgz",
+      "integrity": "sha512-wHCTD4lEE8mzl6kxL8viL4q5kGx2TJJNaWdvzmx3KeiMgP+Yv5/Bx476jCpPD0pKc5VvdVuhkH4EM20XqtT/sQ==",
+      "requires": {}
+    },
     "react-dev-utils": {
       "version": "12.0.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz",

db_app/package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
+    "react-client-session": "^0.0.8",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.10.0",
     "react-scripts": "5.0.1",

db_app/src/App.js

@@ -3,7 +3,7 @@ import Login from "./components/Login";
 import CreateAccount from "./components/CreateAccount";
 import Menus from "./components/Menus";
 import Plan from "./components/Plan";
-
+import { ReactSession } from 'react-client-session';
 
 import {
   BrowserRouter as Router,
@@ -12,6 +12,7 @@ import {
   useNavigate,
 } from 'react-router-dom';
 
+ReactSession.setStoreType("localStorage");
 function App() {
 
 

db_app/src/components/Login.css

@@ -18,3 +18,7 @@ position:fixed;
   margin:10px;
   padding:10px;
 }
+
+.bar{
+  margin-bottom: 15px;
+}

db_app/src/components/Login.js

@@ -15,6 +15,7 @@ import Container from "@mui/material/Container";
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import image from "./images/main_background.jpg"
+import { ReactSession } from 'react-client-session';
 
 const theme = createTheme({
     palette: {
@@ -24,18 +25,20 @@ const theme = createTheme({
     },
   });
 
-function Login() {
+
+
+export function Login() {
   const navigate = useNavigate();
 
 	const navigateCreateAccount = () => {
 		 navigate('/CreateAccount');
 	}
 
-  const [data,setData] = useState({
+const [data,setData] = useState({
     net_id:"",
     password:""
   })
-  
+
   const {net_id,password} = data;
   
   const changeHandler = e => {
@@ -47,6 +50,8 @@ function Login() {
     console.log(data);
     console.log(net_id[0])
     login();
+    ReactSession.set("username", net_id[0]);
+    ReactSession.set("password", password[0]);
   }
 
   
@@ -61,23 +66,16 @@ const getHello = () => {
 const login = () => {
   Axios.post("http://3.219.93.142:8000/api/auth", {net_id: net_id[0], password: password[0],}).then((response) => {
      console.log(response);
-     console.log(response.headers)
+     console.log(response.status)
   });
 };
 
 
-
-
-
-  
    return (
     
     
         <ThemeProvider theme={theme}>
       <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
-     
- 
-      
       <div className='logbox'>
        <Box
         sx={{  
@@ -142,3 +140,5 @@ const login = () => {
   }
   
   export default Login;
+
+

db_app/src/components/Menus.js

@@ -3,6 +3,7 @@ import {Routes, Route, useNavigate} from 'react-router-dom';
 import './Login.css';
 import Button from "@mui/material/Button";
 import Card from "@mui/material/Card";
+import { CardMedia, CardContent } from '@mui/material';
 import TextField from "@mui/material/TextField";
 import FormControlLabel from "@mui/material/FormControlLabel";
 import Checkbox from "@mui/material/Checkbox";
@@ -33,21 +34,34 @@ const theme = createTheme({
   });
 
 function Menus() {
- 
+    const navigate = useNavigate();
+
+	const Home = () => {
+		 navigate('/Plan');
+	}
+    const Menus = () => {
+        navigate('/Menus');
+   }
+   const Past = () => {
+    navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
 
   return (
 
     <ThemeProvider theme={theme}>
-    <AppBar position="static">
+    <AppBar className='bar' position="static">
   <Toolbar variant="dense">
-  <Button  variant="h6" color="main" position="right">
+  <Button  variant="h6" color="main" position="right" onClick={Home}>
    Home</Button> 
-    <Button variant="h6" color="main" component="div">
+    <Button variant="h6" color="main" component="div" onClick={Menus}>
       Menus
     </Button>
-    <Button  variant="h6" >
+    <Button  variant="h6" onClick="Past">
     Past Plans</Button> 
-    <Button variant="h6" color="main" component="div" sx={{
+    <Button variant="h6" color="main" component="div" onClick={navigateLogin} sx={{
     ':hover': {
       bgcolor: '#ffc6c4', // theme.palette.primary.main
       color: 'red',
@@ -55,9 +69,151 @@ function Menus() {
   }}>
         Log out
     </Button>
-   
   </Toolbar>
 </AppBar>
+
+<Box sx={{  
+          margin: 8,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+        }}>
+<Box sx={{  
+        
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2 }}>
+      <CardMedia
+        image={ require("./images/south.jpg")}
+        title="South Dining Hall"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Dining Hall
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/starb.jpg")}
+        title="Starbucks"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Starbucks
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+
+      <Box sx={{  
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/abp.jpg")}
+        title="ABP"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          ABP
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/chick.jpg")}
+        title="Chick"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Chick-fil-a
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+      <Box sx={{  
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/flip.jpg")}
+        title="Flip"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Flip Kitchen
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/moma.jpg")}
+        title="Moma"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Modern Market
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+      <Box sx={{  
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+        }}>
+<Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/taco.jpg")}
+        title="Taco Bell"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Taco Bell
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+
+      <Card sx={{ maxWidth: 200, margin: 2  }}>
+      <CardMedia
+        image={ require("./images/smash.jpg")}
+        title="smash"
+        sx={{ width: 200, height:170}}
+      />
+      <CardContent>
+        <Typography gutterBottom variant="h5" component="div">
+          Smashburger
+        </Typography>
+        <Button>View Items</Button>
+      </CardContent>
+      </Card>
+      </Box>
+      </Box>
+
 </ThemeProvider>
   
   );

db_app/src/components/Plan.js

@@ -22,6 +22,9 @@ import MenuItem from '@mui/material/MenuItem';
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 
+
+
+
 const theme = createTheme({
     palette: {
       primary: {
@@ -36,25 +39,35 @@ function MyPlan() {
 
     const navigate = useNavigate();
 
-	const navigateLogin = () => {
-		 navigate('/');
-	}
-
-  
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
   
     return (
+
+    
+
         <ThemeProvider theme={theme}>  
       <div>
          <AppBar position="static">
   <Toolbar variant="dense">
-  <Button  variant="h6" color="main" position="right">
+  <Button  variant="h6" color="main" position="right" onClick={Home}>
    Home</Button> 
-    <Button variant="h6" color="main" component="div">
+    <Button variant="h6" color="main" component="div" onClick={Menus}>
       Menus
     </Button>
-    <Button  variant="h6" >
+    <Button  variant="h6"onClick={Past} >
     Past Plans</Button> 
-    <Button variant="h6" color="main" component="div" sx={{
+    <Button variant="h6" color="main" component="div" onClick={navigateLogin} sx={{
     ':hover': {
       bgcolor: '#ffc6c4', // theme.palette.primary.main
       color: 'red',