From 81574ab9054f77fdbda968e7f022c05fecd54375 Mon Sep 17 00:00:00 2001 From: Ava DeCroix Date: Sun, 30 Apr 2023 21:42:04 -0400 Subject: [PATCH] Tabs, and checkboxes --- db_app/src/App.js | 6 + db_app/src/components/LogMeals.js | 580 +++++++++++++++++++++++++ db_app/src/components/MenuExpansion.js | 91 +++- db_app/src/components/Menus.js | 11 + db_app/src/components/Past.js | 575 ++++++++++++++++++++++++ db_app/src/components/Plan.js | 33 +- db_app/src/components/ThisWeek.js | 580 +++++++++++++++++++++++++ 7 files changed, 1862 insertions(+), 14 deletions(-) create mode 100644 db_app/src/components/LogMeals.js create mode 100644 db_app/src/components/Past.js create mode 100644 db_app/src/components/ThisWeek.js diff --git a/db_app/src/App.js b/db_app/src/App.js index 0cbd162..3d06b0f 100644 --- a/db_app/src/App.js +++ b/db_app/src/App.js @@ -4,6 +4,9 @@ import CreateAccount from "./components/CreateAccount"; import Menus from "./components/Menus"; import Plan from "./components/Plan"; import MenuExpansion from "./components/MenuExpansion"; +import LogMeals from "./components/LogMeals"; +import ThisWeek from "./components/ThisWeek"; +import Past from "./components/Past" import { ReactSession } from 'react-client-session'; import { @@ -24,6 +27,9 @@ function App() { }> }> }> + }> + }> + }> ); diff --git a/db_app/src/components/LogMeals.js b/db_app/src/components/LogMeals.js new file mode 100644 index 0000000..2f54aae --- /dev/null +++ b/db_app/src/components/LogMeals.js @@ -0,0 +1,580 @@ +import React,{useState} from 'react'; +import {Routes, Route, useNavigate} from 'react-router-dom'; +import './Login.css'; +import Button from "@mui/material/Button"; +import Card from "@mui/material/Card"; +import TextField from "@mui/material/TextField"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import Checkbox from "@mui/material/Checkbox"; +import Link from "@mui/material/Link"; +import Grid from "@mui/material/Grid"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import Container from "@mui/material/Container"; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/IconButton'; +import Avatar from '@mui/material/Avatar'; +import Tooltip from '@mui/material/Tooltip'; +import Menu from '@mui/material/Menu'; +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'; +import Chip from '@mui/material/Chip'; +import Stack from '@mui/material/Stack'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material'; + + +const theme = createTheme({ + palette: { + primary: { + main: lightGreen[700], + apple: red[500], + }, + + }, + }); + +function LogMeals() { + + const navigate = useNavigate(); + + const Home = () => { + navigate('/Plan'); + } + const Menus = () => { + navigate('/Menus'); + } + const Past = () => { + navigate('/Past'); +} +const navigateLogin = () => { + navigate('/'); +} + +const logout = () => { + ReactSession.set("net_id", ""); + navigateLogin(); + +} + +const Log = () => { + navigate('/LogMeals') + } + + const Progress = () => { + navigate('/ThisWeek') + } +//get the start of each week and reformat to Oracle date type +function weekStart(){ + var date_str = new Date(); + const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] + var weekday = days[date_str.getDay()] + + if (weekday != 'Sunday'){ + return; + } + + var date_str = new Date(); + var curr_day = String(date_str.getDate()).padStart(2, '0'); + const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; + + var curr_month = months[date_str.getMonth()]; + var curr_year = String(date_str.getFullYear()); + var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2); + + return db_date; +} + +const net_id = ReactSession.get("net_id"); + +//to set nutritional goal for the week +const [goalInput, setGoalInput] = useState({ + total_cal: "", + total_fat: "", + total_sat_fat: "", + total_trans_fat: "", + total_carbs: "", + total_fiber: "", + total_sugar: "", + total_protein: "", + total_sodium: "", + total_potassium: "", + total_cholesterol: "", + } +); + +const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber, + total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput + +const changeGoalHandler = evt =>{ + setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] }) +} + +const submitGoalHandler = evt => { + evt.preventDefault(); + console.log(goalInput) + Axios.post("http://3.219.93.142:8000/api/", + { + total_cal: total_cal[0], + total_fat: total_fat[0], + total_sat_fat: total_sat_fat[0], + total_trans_fat: total_trans_fat[0], + total_carbs: total_carbs[0], + total_fiber: total_fiber[0], + total_sugar: total_sugar[0], + total_protein: total_protein[0], + total_sodium: total_sodium[0], + total_potassium: total_potassium[0], + total_cholesterol: total_cholesterol[0] + }).then((response) => { + console.log(response); + console.log(response.status); + }) +}; + + +//to add an off campus food item or meal to your weekly journal + const [offCampusInput, setOffCampusInput] = useState({ + calories: "", + fat_g: "", + sat_fat_g: "", + trans_fat_g: "", + carbs_g: "", + fiber_g: "", + sugar_g: "", + protein_g: "", + sodium_g: "", + potassium_g: "", + cholesterol_g: "", + } + ); + + const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g, + sodium_g, potassium_g, cholesterol_g, } = offCampusInput + + const changeoffCampusHandler = evt => { + setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] }) + } + + const submitoffCampusHandler = evt => { + evt.preventDefault(); + }; + + + return ( + + + + + + + + + + + + + + + + + + + + + +
+

  Your Plan

+

   Goal for the week of:

+ +
+     + +     + +     + +     + +     + +

+     + +     + +     + +     + +     + +     + +

+

+     + + + +
+

+ +
+

+     + So Far This Week: +

+ +

+     + Foods Eaten +

+ + + + + + Food + Calories + Fat (g) + Saturated Fat (g) + TransFat (g) + Carbs (g) + Fiber (g) + Sugar (g) + Protein (g) + Sodium (mg) + Potassium (mg) + Cholesterol (mg) + + + + + + + + + + + + + + + + + + +
+ + +

+     + Weekly Totals +

+ + + + + + Calories + Fat (g) + Saturated Fat (g) + TransFat (g) + Carbs (g) + Fiber (g) + Sugar (g) + Protein (g) + Sodium (mg) + Potassium (mg) + Cholesterol (mg) + + + + + + + + + + + + + + + + + +
+ + +

+ +     + + +     + +       + +     + +     + +       + +       + +       + +           + +           + + +
+ +
+

+     + Add to Food Journal +

+

    + On-Campus +

+
+     + + Dining Location + + + +     + + +     + + + +

    + Off-Campus +

+
+     + +     + +     + +     + +     + +     + +

+     + +     + +     + +     + +     + +     + +

+

+     + + + + +
+ + + ); + } + + export default LogMeals; \ No newline at end of file diff --git a/db_app/src/components/MenuExpansion.js b/db_app/src/components/MenuExpansion.js index 611b4af..ae1188d 100644 --- a/db_app/src/components/MenuExpansion.js +++ b/db_app/src/components/MenuExpansion.js @@ -80,7 +80,10 @@ const eatery_to_query = getEatery(); } + + const [menuItems, setmenuItems] = useState([{}]); +const [toAdd, setToAdd] = useState([]); const doMenu = () => { const data = getMenu(); @@ -91,6 +94,44 @@ const buttonTime = () => { getMenu(); console.log(menuItems); } + +const removeItem = (index) => { + setToAdd([ + ...toAdd.slice(0, index), + ...toAdd.slice(index + 1) + ]); + +} + +function handleCheck (i) { + console.log(i); + if (toAdd.indexOf(i) > -1){ + //get index and delete + var index = toAdd.indexOf(i) + removeItem(index); + console.log(`removed ${i}`); + + } + + else{ + setToAdd(toAdd => [...toAdd, i]); + console.log(`added ${i}`); + } + +} + + + +const testChecks = () => { + console.log(toAdd); +} + +const sendToPlan = () => { + Axios.post('http://3.219.93.142:8000/api/week_meals', {net_id: ReactSession.get("net_id"), item_list: toAdd,}).then((response) => { + console.log(response); + }); + + } useEffect(() => { getMenu() @@ -121,31 +162,47 @@ useEffect(() => { -

+ + +

    - Menu Items: -

+ Menu Items +

+ + + + + - - + +
- - Food + + + Add? + Food Calories - Fat (g) + Fat (g) Saturated Fat (g) TransFat (g) - Carbs (g) - Fiber (g) + Carbs (g) + Fiber (g) Sugar (g) Protein (g) Sodium (mg) Potassium (mg) - Cholesterol (mg) + Cholesterol (mg) - + {menuItems.map((menuItem, i) => { console.log(i); return( @@ -153,6 +210,15 @@ useEffect(() => { key={menuItem.item_name} sx={{ '&:last-child td, &:last-child th': { border: 0 } }} > + + + + handleCheck(menuItem.item_id)} + /> + {menuItem.item_name} @@ -179,6 +245,7 @@ useEffect(() => { + ); diff --git a/db_app/src/components/Menus.js b/db_app/src/components/Menus.js index 0d0b9a4..2e0ef10 100644 --- a/db_app/src/components/Menus.js +++ b/db_app/src/components/Menus.js @@ -124,6 +124,17 @@ const menuExpansion = () => { + + +

+     + Campus Eateries +

+ + + + + { + navigate('/Plan'); + } + const Menus = () => { + navigate('/Menus'); + } + const Past = () => { + navigate('/Past'); +} +const navigateLogin = () => { + navigate('/'); +} + +const logout = () => { + ReactSession.set("net_id", ""); + navigateLogin(); + +} + +const Log = () => { + navigate('/LogMeals') + } + + const Progress = () => { + navigate('/ThisWeek') + } +//get the start of each week and reformat to Oracle date type +function weekStart(){ + var date_str = new Date(); + const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] + var weekday = days[date_str.getDay()] + + if (weekday != 'Sunday'){ + return; + } + + var date_str = new Date(); + var curr_day = String(date_str.getDate()).padStart(2, '0'); + const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; + + var curr_month = months[date_str.getMonth()]; + var curr_year = String(date_str.getFullYear()); + var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2); + + return db_date; +} + +const net_id = ReactSession.get("net_id"); + +//to set nutritional goal for the week +const [goalInput, setGoalInput] = useState({ + total_cal: "", + total_fat: "", + total_sat_fat: "", + total_trans_fat: "", + total_carbs: "", + total_fiber: "", + total_sugar: "", + total_protein: "", + total_sodium: "", + total_potassium: "", + total_cholesterol: "", + } +); + +const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber, + total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput + +const changeGoalHandler = evt =>{ + setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] }) +} + +const submitGoalHandler = evt => { + evt.preventDefault(); + console.log(goalInput) + Axios.post("http://3.219.93.142:8000/api/", + { + total_cal: total_cal[0], + total_fat: total_fat[0], + total_sat_fat: total_sat_fat[0], + total_trans_fat: total_trans_fat[0], + total_carbs: total_carbs[0], + total_fiber: total_fiber[0], + total_sugar: total_sugar[0], + total_protein: total_protein[0], + total_sodium: total_sodium[0], + total_potassium: total_potassium[0], + total_cholesterol: total_cholesterol[0] + }).then((response) => { + console.log(response); + console.log(response.status); + }) +}; + + +//to add an off campus food item or meal to your weekly journal + const [offCampusInput, setOffCampusInput] = useState({ + calories: "", + fat_g: "", + sat_fat_g: "", + trans_fat_g: "", + carbs_g: "", + fiber_g: "", + sugar_g: "", + protein_g: "", + sodium_g: "", + potassium_g: "", + cholesterol_g: "", + } + ); + + const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g, + sodium_g, potassium_g, cholesterol_g, } = offCampusInput + + const changeoffCampusHandler = evt => { + setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] }) + } + + const submitoffCampusHandler = evt => { + evt.preventDefault(); + }; + + + return ( + + + + + + + + + + + + + + + + + + + + + +
+

  Your Plan

+

   Goal for the week of:

+ +
+     + +     + +     + +     + +     + +

+     + +     + +     + +     + +     + +     + +

+

+     + + + +
+

+ +
+

+     + So Far This Week: +

+ +

+     + Foods Eaten +

+ + +
+ + + Food + Calories + Fat (g) + Saturated Fat (g) + TransFat (g) + Carbs (g) + Fiber (g) + Sugar (g) + Protein (g) + Sodium (mg) + Potassium (mg) + Cholesterol (mg) + + + + + + + + + + + + + + + + + + +
+ + +

+     + Weekly Totals +

+ + + + + + Calories + Fat (g) + Saturated Fat (g) + TransFat (g) + Carbs (g) + Fiber (g) + Sugar (g) + Protein (g) + Sodium (mg) + Potassium (mg) + Cholesterol (mg) + + + + + + + + + + + + + + + + + +
+ + +

+ +     + + +     + +       + +     + +     + +       + +       + +       + +           + +           + + + + +
+

+     + Add to Food Journal +

+

    + On-Campus +

+
+     + + Dining Location + + + +     + + +     + + + +

    + Off-Campus +

+
+     + +     + +     + +     + +     + +     + +

+     + +     + +     + +     + +     + +     + +

+

+     + + + + +
+ + + ); + } + + export default ThisWeek; \ No newline at end of file diff --git a/db_app/src/components/Plan.js b/db_app/src/components/Plan.js index eca3322..85d4763 100644 --- a/db_app/src/components/Plan.js +++ b/db_app/src/components/Plan.js @@ -63,6 +63,17 @@ const logout = () => { navigateLogin(); } + +const Log = () => { + navigate('/LogMeals') +} + +const Progress = () => { + navigate('/ThisWeek') +} + + + //get the start of each week and reformat to Oracle date type function weekStart(){ var date_str = new Date(); @@ -162,7 +173,7 @@ const submitGoalHandler = evt => { return ( -
+ -
+ + + + + + + + + + + +

  Your Plan

diff --git a/db_app/src/components/ThisWeek.js b/db_app/src/components/ThisWeek.js new file mode 100644 index 0000000..c1e43f7 --- /dev/null +++ b/db_app/src/components/ThisWeek.js @@ -0,0 +1,580 @@ +import React,{useState} from 'react'; +import {Routes, Route, useNavigate} from 'react-router-dom'; +import './Login.css'; +import Button from "@mui/material/Button"; +import Card from "@mui/material/Card"; +import TextField from "@mui/material/TextField"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import Checkbox from "@mui/material/Checkbox"; +import Link from "@mui/material/Link"; +import Grid from "@mui/material/Grid"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import Container from "@mui/material/Container"; +import AppBar from '@mui/material/AppBar'; +import Toolbar from '@mui/material/Toolbar'; +import IconButton from '@mui/material/IconButton'; +import Avatar from '@mui/material/Avatar'; +import Tooltip from '@mui/material/Tooltip'; +import Menu from '@mui/material/Menu'; +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'; +import Chip from '@mui/material/Chip'; +import Stack from '@mui/material/Stack'; +import Select, { SelectChangeEvent } from '@mui/material/Select'; +import InputLabel from '@mui/material/InputLabel'; +import FormControl from '@mui/material/FormControl'; +import { Table, TableBody, TableCell, TableContainer,TableHead, TableRow, Paper} from '@mui/material'; + + +const theme = createTheme({ + palette: { + primary: { + main: lightGreen[700], + apple: red[500], + }, + + }, + }); + +function ThisWeek() { + + const navigate = useNavigate(); + + const Home = () => { + navigate('/Plan'); + } + const Menus = () => { + navigate('/Menus'); + } + const Past = () => { + navigate('/Past'); +} +const navigateLogin = () => { + navigate('/'); +} + +const logout = () => { + ReactSession.set("net_id", ""); + navigateLogin(); + +} + +const Log = () => { + navigate('/LogMeals') + } + + const Progress = () => { + navigate('/ThisWeek') + } +//get the start of each week and reformat to Oracle date type +function weekStart(){ + var date_str = new Date(); + const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] + var weekday = days[date_str.getDay()] + + if (weekday != 'Sunday'){ + return; + } + + var date_str = new Date(); + var curr_day = String(date_str.getDate()).padStart(2, '0'); + const months = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC']; + + var curr_month = months[date_str.getMonth()]; + var curr_year = String(date_str.getFullYear()); + var db_date = curr_day + '-' + curr_month + '-' + curr_year.slice(2); + + return db_date; +} + +const net_id = ReactSession.get("net_id"); + +//to set nutritional goal for the week +const [goalInput, setGoalInput] = useState({ + total_cal: "", + total_fat: "", + total_sat_fat: "", + total_trans_fat: "", + total_carbs: "", + total_fiber: "", + total_sugar: "", + total_protein: "", + total_sodium: "", + total_potassium: "", + total_cholesterol: "", + } +); + +const{total_cal, total_fat, total_sat_fat, total_trans_fat, total_carbs, total_fiber, + total_sugar, total_protein, total_sodium, total_potassium, total_cholesterol} = goalInput + +const changeGoalHandler = evt =>{ + setGoalInput({...goalInput, [evt.target.name]: [evt.target.value] }) +} + +const submitGoalHandler = evt => { + evt.preventDefault(); + console.log(goalInput) + Axios.post("http://3.219.93.142:8000/api/", + { + total_cal: total_cal[0], + total_fat: total_fat[0], + total_sat_fat: total_sat_fat[0], + total_trans_fat: total_trans_fat[0], + total_carbs: total_carbs[0], + total_fiber: total_fiber[0], + total_sugar: total_sugar[0], + total_protein: total_protein[0], + total_sodium: total_sodium[0], + total_potassium: total_potassium[0], + total_cholesterol: total_cholesterol[0] + }).then((response) => { + console.log(response); + console.log(response.status); + }) +}; + + +//to add an off campus food item or meal to your weekly journal + const [offCampusInput, setOffCampusInput] = useState({ + calories: "", + fat_g: "", + sat_fat_g: "", + trans_fat_g: "", + carbs_g: "", + fiber_g: "", + sugar_g: "", + protein_g: "", + sodium_g: "", + potassium_g: "", + cholesterol_g: "", + } + ); + + const { calories, fat_g, sat_fat_g, trans_fat_g, carbs_g, fiber_g,sugar_g, protein_g, + sodium_g, potassium_g, cholesterol_g, } = offCampusInput + + const changeoffCampusHandler = evt => { + setOffCampusInput({ ...offCampusInput, [evt.target.name]: [evt.target.value] }) + } + + const submitoffCampusHandler = evt => { + evt.preventDefault(); + }; + + + return ( + + + + + + + + + + + + + + + + + + + + + +
+

  Your Plan

+

   Goal for the week of:

+ +
+     + +     + +     + +     + +     + +

+     + +     + +     + +     + +     + +     + +

+

+     + + + +
+

+ +
+

+     + So Far This Week: +

+ +

+     + Foods Eaten +

+ + + + + + Food + Calories + Fat (g) + Saturated Fat (g) + TransFat (g) + Carbs (g) + Fiber (g) + Sugar (g) + Protein (g) + Sodium (mg) + Potassium (mg) + Cholesterol (mg) + + + + + + + + + + + + + + + + + + +
+ + +

+     + Weekly Totals +

+ + + + + + Calories + Fat (g) + Saturated Fat (g) + TransFat (g) + Carbs (g) + Fiber (g) + Sugar (g) + Protein (g) + Sodium (mg) + Potassium (mg) + Cholesterol (mg) + + + + + + + + + + + + + + + + + +
+ + +

+ +     + + +     + +       + +     + +     + +       + +       + +       + +           + +           + + +
+ +
+

+     + Add to Food Journal +

+

    + On-Campus +

+
+     + + Dining Location + + + +     + + +     + + + +

    + Off-Campus +

+
+     + +     + +     + +     + +     + +     + +

+     + +     + +     + +     + +     + +     + +

+

+     + + + + +
+ + + ); + } + + export default ThisWeek; \ No newline at end of file