merged master branch in

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,24 @@ const theme = createTheme({
     },
   });
 
-function Login() {
+
+
+export function Login() {
   const navigate = useNavigate();
 
 	const navigateCreateAccount = () => {
 		 navigate('/CreateAccount');
 	}
 
-  const [data,setData] = useState({
+  const navigateHome = () => {
+    navigate('/Plan');
+ }
+
+const [data,setData] = useState({
     net_id:"",
     password:""
   })
-  
+
   const {net_id,password} = data;
   
   const changeHandler = e => {
@@ -47,9 +54,12 @@ function Login() {
     console.log(data);
     console.log(net_id[0])
     login();
+    
   }
 
-  
+const setSession = () => {
+  ReactSession.set("net_id", net_id[0]);
+}
 
 
 const getHello = () => {
@@ -61,23 +71,21 @@ 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);
+     if (response.status === 200){
+      setSession();
+      navigateHome();
+     }
+
   });
 };
 
 
-
-
-
-  
    return (
     
     
         <ThemeProvider theme={theme}>
       <div className='bg' style={{backgroundImage: 'url(' + require('./images/main_background.jpg') + ')'}}>
-     
- 
-      
       <div className='logbox'>
        <Box
         sx={{  
@@ -142,3 +150,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

@@ -21,6 +21,9 @@ import MenuIcon from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem';
 import {red, green, lightBlue, lightGreen} from '@mui/material/colors';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { ReactSession } from 'react-client-session';
+
+
 import { Axios } from 'axios';
 
 const theme = createTheme({
@@ -37,10 +40,24 @@ function MyPlan() {
 
     const navigate = useNavigate();
 
-	const navigateLogin = () => {
-		 navigate('/');
-	}
+	const Home = () => {
+        navigate('/Plan');
+   }
+   const Menus = () => {
+       navigate('/Menus');
+  }
+  const Past = () => {
+   navigate('/Past');
+}
+const navigateLogin = () => {
+    navigate('/');
+}
 
+const logout = () => {
+    ReactSession.set("net_id", "");
+    navigateLogin();
+
+}
 //get the start of each week and reformat to Oracle date type
 function weekStart(){
   var date_str = new Date();
@@ -88,18 +105,21 @@ const handleSubmit = evt => {
 }
   
   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={logout} sx={{
     ':hover': {
       bgcolor: '#ffc6c4', // theme.palette.primary.main
       color: 'red',