diff --git a/src/actions/index.js b/src/actions/index.js index d24071c..4052206 100644 --- a/src/actions/index.js +++ b/src/actions/index.js @@ -22,7 +22,7 @@ axios.interceptors.response.use( }) resolve(response) } - throw error; + store.dispatch(logout()); }) }); @@ -272,7 +272,9 @@ export const changePassword = (email, password, token) => { export const logout = () => { return function (dispatch) { dispatch(notification("Wylogowano.", "info")); + dispatch(toggles.hideBackdrop()); dispatch(toggles.setLoggedOut()); + dispatch(push("/")); }; }; diff --git a/src/components/Dialogs/AddToSet.js b/src/components/Dialogs/AddToSet.js index 6a36b90..b2426ad 100644 --- a/src/components/Dialogs/AddToSet.js +++ b/src/components/Dialogs/AddToSet.js @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { makeStyles } from "@material-ui/core/styles"; import DialogTitle from "@material-ui/core/DialogTitle"; import DialogContent from "@material-ui/core/DialogContent"; @@ -9,8 +9,14 @@ import CloseIcon from "@material-ui/icons/Close"; import List from "@material-ui/core/List"; import ListItem from "@material-ui/core/ListItem"; import ListItemText from "@material-ui/core/ListItemText"; +import AddIcon from '@material-ui/icons/Add'; +import RemoveIcon from '@material-ui/icons/Remove'; +import ButtonPrimary from "../Input/ButtonPrimary"; +import ButtonSecondary from "../Input/ButtonSecondary"; export default function AddToSet(props) { + const [quantity, setQuantity] = useState(1); + const [selectedSet, setName] = useState(""); const loginStyles = makeStyles((theme) => ({ root: { textAlign: "center", @@ -18,7 +24,9 @@ export default function AddToSet(props) { backgroundColor: "#262626", color: "#bbbbbb", minWidth: "360px", + borderRadius: "24px" }, + zIndex: "5 !important" }, closeButton: { color: "#bbbbbb", @@ -28,7 +36,21 @@ export default function AddToSet(props) { }, set: { width: "100%", + "& .Mui-selected": { + backgroundColor: "#b46c00", + }, + "& .MuiListItem-root": { + borderRadius: "12px" + } }, + quantity: { + width: "100%", + display: "flex", + justifyContent: "center" + }, + h4: { + margin: "12px auto 12px auto" + } })); const loginClass = loginStyles(); @@ -38,13 +60,24 @@ export default function AddToSet(props) { props.add(lunchSet.lunchSetName)} + onClick={() => setName(lunchSet.lunchSetName)} + selected={selectedSet === lunchSet.lunchSetName} > ); }); + const increment = () => { + setQuantity(quantity + 1); + } + + const decrement = () => { + if(quantity > 1){ + setQuantity(quantity - 1); + } + } + return ( - Wybierz zestaw + Dodaj do zestawu +

Ilość

+
+ + + +

{quantity}

+ + + +
+

Zestaw

{Sets} + + props.cancel()}/> + 0)} text="Dodaj" onClick={() => props.add(selectedSet, quantity)}/>
); diff --git a/src/components/Dialogs/EditDish.js b/src/components/Dialogs/EditDish.js index 7010eee..7106536 100644 --- a/src/components/Dialogs/EditDish.js +++ b/src/components/Dialogs/EditDish.js @@ -30,6 +30,7 @@ import InputPrices from "../Input/InputPrices"; const useStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", margin: "auto", textAlign: "center", maxHeight: "90vh", diff --git a/src/components/Dialogs/ForgotPassword.js b/src/components/Dialogs/ForgotPassword.js index f92208d..c9aafc4 100644 --- a/src/components/Dialogs/ForgotPassword.js +++ b/src/components/Dialogs/ForgotPassword.js @@ -30,6 +30,7 @@ export default function ForgotPassword(props) { const loginStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { backgroundColor: "#262626", diff --git a/src/components/Dialogs/LoginDialog.js b/src/components/Dialogs/LoginDialog.js index 10ad1e0..cb376f9 100644 --- a/src/components/Dialogs/LoginDialog.js +++ b/src/components/Dialogs/LoginDialog.js @@ -39,6 +39,7 @@ export default function LoginDialog(props) { color: "#bbbbbb", borderRadius: "24px" }, + zIndex: "5 !important" }, closeButton: { color: "#bbbbbb", diff --git a/src/components/Dialogs/NewDish.js b/src/components/Dialogs/NewDish.js index 10d8f19..ea094cc 100644 --- a/src/components/Dialogs/NewDish.js +++ b/src/components/Dialogs/NewDish.js @@ -36,6 +36,7 @@ import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder"; const useStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", margin: "auto", textAlign: "center", maxHeight: "90vh", diff --git a/src/components/Dialogs/NewRestaurant.js b/src/components/Dialogs/NewRestaurant.js index 44438a9..e111939 100644 --- a/src/components/Dialogs/NewRestaurant.js +++ b/src/components/Dialogs/NewRestaurant.js @@ -43,6 +43,7 @@ import ButtonPrimary from "../Input/ButtonPrimary"; const useStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", margin: "auto", textAlign: "center", maxHeight: "90vh", diff --git a/src/components/Dialogs/PasswordConfirmation.js b/src/components/Dialogs/PasswordConfirmation.js index 2103542..7145683 100644 --- a/src/components/Dialogs/PasswordConfirmation.js +++ b/src/components/Dialogs/PasswordConfirmation.js @@ -16,6 +16,7 @@ export default function PasswordConfirmation(props) { const loginStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { backgroundColor: "#262626", diff --git a/src/components/Dialogs/PaymentDialog.js b/src/components/Dialogs/PaymentDialog.js index a3062a2..e7f859f 100644 --- a/src/components/Dialogs/PaymentDialog.js +++ b/src/components/Dialogs/PaymentDialog.js @@ -12,6 +12,7 @@ import CloseIcon from "@material-ui/icons/Close"; export default function PasswordConfirmation(props) { const loginStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { backgroundColor: "#262626", diff --git a/src/components/Dialogs/RegisterDialog.js b/src/components/Dialogs/RegisterDialog.js index 496f9b0..875ba49 100644 --- a/src/components/Dialogs/RegisterDialog.js +++ b/src/components/Dialogs/RegisterDialog.js @@ -50,6 +50,7 @@ export default function RegisterDialog(props) { const loginStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { backgroundColor: "#262626", diff --git a/src/components/Dialogs/ResetPassword.js b/src/components/Dialogs/ResetPassword.js index b945360..eddbe5f 100644 --- a/src/components/Dialogs/ResetPassword.js +++ b/src/components/Dialogs/ResetPassword.js @@ -39,6 +39,7 @@ export default function ResetPassword(props) { const loginStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { backgroundColor: "#262626", diff --git a/src/components/Dialogs/Settings.js b/src/components/Dialogs/Settings.js index 882c04b..b108909 100644 --- a/src/components/Dialogs/Settings.js +++ b/src/components/Dialogs/Settings.js @@ -20,6 +20,7 @@ import RoomIcon from '@material-ui/icons/Room'; const useStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { minWidth: "30%", diff --git a/src/components/Dialogs/YesNo.js b/src/components/Dialogs/YesNo.js index 313e54b..831169a 100644 --- a/src/components/Dialogs/YesNo.js +++ b/src/components/Dialogs/YesNo.js @@ -12,10 +12,12 @@ import CloseIcon from "@material-ui/icons/Close"; export default function PasswordConfirmation(props) { const loginStyles = makeStyles((theme) => ({ root: { + zIndex: "5 !important", textAlign: "center", "& .MuiPaper-root": { backgroundColor: "#262626", color: "#bbbbbb", + borderRadius: "24px" }, minWidth: "250px", }, diff --git a/src/components/EditRestaurant/LunchMenu.js b/src/components/EditRestaurant/LunchMenu.js index 882dacc..e00c359 100644 --- a/src/components/EditRestaurant/LunchMenu.js +++ b/src/components/EditRestaurant/LunchMenu.js @@ -91,29 +91,29 @@ export default function EditCategoriesList(props) { }; const SetList = props.lunchMenu.map((set) => { - return ( - - } - > -

- {set.lunchSetName} ({set.lunchSetPrice}zł) -

-
- - handleDeleteButton(set)} - > - - - -
-
- -
- ); + return ( + + } + > +

+ {set.lunchSetName} ({set.lunchSetPrice}zł) +

+
+ + handleDeleteButton(set)} + > + + + +
+
+ +
+ ); }); // HANDLERS diff --git a/src/components/Input/ButtonSecondary.js b/src/components/Input/ButtonSecondary.js index 8c8f7ff..3b25cef 100644 --- a/src/components/Input/ButtonSecondary.js +++ b/src/components/Input/ButtonSecondary.js @@ -20,5 +20,5 @@ const StylizedButton = withStyles({ })(Button); export default function ButtonSecondary(props) { - return {props.text}; + return {props.text}; } diff --git a/src/components/Output/AppBackdrop.js b/src/components/Output/AppBackdrop.js index 87247d5..cb88ef4 100644 --- a/src/components/Output/AppBackdrop.js +++ b/src/components/Output/AppBackdrop.js @@ -6,7 +6,7 @@ import { makeStyles } from "@material-ui/core/styles"; const useStyles = makeStyles((theme) => ({ backdrop: { - zIndex: theme.zIndex.drawer + 15, + zIndex: theme.zIndex.drawer + 5, color: "#fff", }, })); diff --git a/src/components/Output/DishesCategory.js b/src/components/Output/DishesCategory.js index 1fa9226..c2db861 100644 --- a/src/components/Output/DishesCategory.js +++ b/src/components/Output/DishesCategory.js @@ -11,6 +11,9 @@ const useStyles = makeStyles((theme) => ({ root: { backgroundColor: "#262626", color: "#bbbbbb", + "& .MuiListItem-gutters": { + padding: "2px" + } }, expandIcon: { color: "#bbbbbb", @@ -20,6 +23,7 @@ const useStyles = makeStyles((theme) => ({ export default function DishesCategory(props) { const classes = useStyles(); const dishes = props.dishes; + const dishCards = dishes.map((dish) => { return ( diff --git a/src/components/Output/EditDishList.js b/src/components/Output/EditDishList.js index 60d4cf9..8ddb2c0 100644 --- a/src/components/Output/EditDishList.js +++ b/src/components/Output/EditDishList.js @@ -90,18 +90,19 @@ export default function EditDishList(props) { setSetListOpen(true); }; - const addToSet = (setName) => { + const addToSet = (setName, quantity) => { setSetListOpen(false); const data = { setName: setName, restaurantId: props.restaurantId, dishId: selectedDish, + quantity: quantity, action: "add", }; dispatch(showBackdrop()); axios({ method: "POST", - url: backend + "/restaurant/lunch", + url: backend + "restaurant/lunch", data: data, headers: { "x-auth-token": token, @@ -182,7 +183,7 @@ export default function EditDishList(props) { lunchMenu={props.lunchMenu} open={setListOpen} cancel={() => setSetListOpen(false)} - add={(setName) => addToSet(setName)} + add={(setName, quantity) => addToSet(setName, quantity)} /> {thisCategoryDishes.length === 0 ? ( diff --git a/src/components/Output/LunchCardDish.js b/src/components/Output/LunchCardDish.js new file mode 100644 index 0000000..73408a6 --- /dev/null +++ b/src/components/Output/LunchCardDish.js @@ -0,0 +1,33 @@ +import React from "react"; +import { useHistory } from "react-router-dom"; +import KeyboardArrowRightIcon from "@material-ui/icons/KeyboardArrowRight"; + +export default function LunchCardDish(props) { + const history = useHistory(); + const { + name, + imgUrl, + _id, + } = props.dish; + + return ( +
history.push(`/dish/${_id}`)} + > +
+

{props.quantity}x

+
+
+

{name}

+
+
+
+ +
+
+ ); +} diff --git a/src/components/Output/LunchDishesCategory.js b/src/components/Output/LunchDishesCategory.js new file mode 100644 index 0000000..a3b575a --- /dev/null +++ b/src/components/Output/LunchDishesCategory.js @@ -0,0 +1,63 @@ +import React from "react"; +import Accordion from "@material-ui/core/Accordion"; +import AccordionSummary from "@material-ui/core/AccordionSummary"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import LunchCardDish from "./LunchCardDish"; +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles((theme) => ({ + root: { + backgroundColor: "#262626", + color: "#bbbbbb", + "& .MuiListItem-gutters": { + padding: "2px" + }, + }, + expandIcon: { + color: "#bbbbbb", + }, +})); + +const filterDishes = (dishes, setDishes) => { + const ids = setDishes.map((dish) => { + return dish.dishId + }) + let result = []; + dishes.map((dish) => { + if (ids.includes(dish._id)) { + const lunchSetDish = setDishes.filter((thisDish) => thisDish.dishId === dish._id)[0] + result.push({...dish, quantity: lunchSetDish.quantity}); + } + return true; + }); + return result; +}; + + +export default function LunchDishesCategory(props) { + const classes = useStyles(); + const dishes = props.dishes; + const filtered = filterDishes(dishes, props.lunchSetDishes) + const dishCards = filtered.map((dish) => { + return ( + + + + ); + }); + + return ( + + } + > +

+ {props.name} {props.price && `(${props.price}zł)`} +

+
+ {dishCards} +
+ ); +} diff --git a/src/components/Output/LunchMenu.js b/src/components/Output/LunchMenu.js index 7b58fb3..ff5e4bd 100644 --- a/src/components/Output/LunchMenu.js +++ b/src/components/Output/LunchMenu.js @@ -1,35 +1,26 @@ import React from "react"; -import DishesCategory from "./DishesCategory"; +import LunchDishesCategory from "./LunchDishesCategory"; import { useSelector } from "react-redux"; export default function LunchMenu(props) { - const dishlist = useSelector((state) => state.dishes); + const dishes = useSelector((state) => state.dishes) const { restaurant } = props; const lunchMenu = restaurant.lunchMenu; - function filterDishes(dishes, set) { - var result = []; - if (dishes.length !== 0) { - dishes.map((dish) => { - if (set.lunchSetDishes.includes(dish._id)) { - result.push(dish); - } - return true; - }); - return result; - } else { - return []; - } - } const sets = lunchMenu.map((set) => { - return ( - - ); + if(set.lunchSetDishes.length > 0){ + return ( + + ); + } else { + return
; + } }); return
{sets && sets}
; diff --git a/src/components/Output/LunchSetDishList.js b/src/components/Output/LunchSetDishList.js index 80f2a3c..47e084c 100644 --- a/src/components/Output/LunchSetDishList.js +++ b/src/components/Output/LunchSetDishList.js @@ -18,9 +18,12 @@ export default function EditDishList(props) { const token = useSelector((state) => state.data.userData.jwt); const filterDishes = (dishes, setDishes) => { + const ids = setDishes.map((dish) => { + return dish.dishId + }) let result = []; dishes.map((dish) => { - if (setDishes.includes(dish._id)) { + if (ids.includes(dish._id)) { result.push(dish); } return true; @@ -50,7 +53,7 @@ export default function EditDishList(props) { dispatch(showBackdrop()); axios({ method: "POST", - url: backend + "/restaurant/lunch", + url: backend + "restaurant/lunch", data: data, headers: { "x-auth-token": token, @@ -70,10 +73,14 @@ export default function EditDishList(props) { const allDishes = useSelector((state) => state.dishes); const thisSetDishes = filterDishes(allDishes, props.lunchSet.lunchSetDishes); const Dishes = thisSetDishes.map((dish) => { + const thisDishInSet = props.lunchSet.lunchSetDishes.filter((dishInSet) => { + return dishInSet.dishId === dish._id; + })[0] return (
+

{thisDishInSet.quantity}x

{!showDishList && } + {(showDishList && restaurant.lunchMenu) &&

Zestawy

} {(showDishList && restaurant.lunchMenu) && }

Menu

{!showDishList && } diff --git a/src/styles/Dish.scss b/src/styles/Dish.scss index d9fd7cf..1504f8b 100644 --- a/src/styles/Dish.scss +++ b/src/styles/Dish.scss @@ -47,13 +47,13 @@ .dish-content { h5 { font-size: 1rem; - font-weight: 300; + font-weight: 500; margin: 0 0 0 auto; } p { color: $gray; margin: 0 auto 0 0; - font-weight: 500; + font-weight: 300; } } diff --git a/src/styles/DishList.scss b/src/styles/DishList.scss index 570fa5e..26ea393 100644 --- a/src/styles/DishList.scss +++ b/src/styles/DishList.scss @@ -13,7 +13,6 @@ h4 { width: 95%; cursor: pointer; transition: all 0.2s; - h2 { font-weight: 500; color: $main-color; @@ -28,10 +27,20 @@ h4 { background-color: $secondary-color; background-size: cover; background-position: center; - width: 120px; - height: 120px; + width: 100px; + height: 100px; border-radius: 20px; - margin: 0px 14px 0px 0px; + margin: 0px 12px 0px 0px; +} + +.lunch-carddish-img { + background-color: $secondary-color; + background-size: cover; + background-position: center; + width: 60px; + height: 60px; + border-radius: 14px; + margin: 0px 12px 0px 0px; } .carddish-left { @@ -42,11 +51,14 @@ h4 { margin: auto; } p { - font-size: 14px; + font-size: 12px; font-weight: 400; margin-left: auto; color: #c9c9c9; } + h3{ + margin: auto 12px auto 12px; + } } .carddish-left-info { @@ -76,6 +88,14 @@ h4 { } } +.lunch-carddish-right{ + display: flex; + flex-direction: column; + margin-right: 5px; + align-items: flex-end; + justify-content: center; +} + .carddish-prices-multi { margin-right: 6px; margin-top: 6px; diff --git a/src/styles/EditRestaurant.scss b/src/styles/EditRestaurant.scss index 41d6ea8..2349ac5 100644 --- a/src/styles/EditRestaurant.scss +++ b/src/styles/EditRestaurant.scss @@ -122,6 +122,10 @@ align-items: center; } +.editRestaurant-dishLeft-header{ + margin-right: 12px; +} + .editRestaurant-dish:hover { background-color: #3b3b3b; }