diff --git a/src/components/Dialogs/AddToSet.js b/src/components/Dialogs/AddToSet.js new file mode 100644 index 0000000..6a36b90 --- /dev/null +++ b/src/components/Dialogs/AddToSet.js @@ -0,0 +1,69 @@ +import React from "react"; +import { makeStyles } from "@material-ui/core/styles"; +import DialogTitle from "@material-ui/core/DialogTitle"; +import DialogContent from "@material-ui/core/DialogContent"; +import Dialog from "@material-ui/core/Dialog"; +import Divider from "@material-ui/core/Divider"; +import IconButton from "@material-ui/core/IconButton"; +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"; + +export default function AddToSet(props) { + const loginStyles = makeStyles((theme) => ({ + root: { + textAlign: "center", + "& .MuiPaper-root": { + backgroundColor: "#262626", + color: "#bbbbbb", + minWidth: "360px", + }, + }, + closeButton: { + color: "#bbbbbb", + position: "absolute", + right: theme.spacing(1), + top: theme.spacing(1), + }, + set: { + width: "100%", + }, + })); + + const loginClass = loginStyles(); + + const Sets = props.lunchMenu.map((lunchSet) => { + return ( + props.add(lunchSet.lunchSetName)} + > + + + ); + }); + + return ( + + Wybierz zestaw + + + + + + {Sets} + + + ); +} diff --git a/src/components/EditRestaurant/EditRestaurantInfo.js b/src/components/EditRestaurant/EditRestaurantInfo.js index 8e99779..e1020c4 100644 --- a/src/components/EditRestaurant/EditRestaurantInfo.js +++ b/src/components/EditRestaurant/EditRestaurantInfo.js @@ -24,6 +24,7 @@ import { prepareTags } from "../../Services.js"; import axios from "axios"; import PasswordConfirmation from "../Dialogs/PasswordConfirmation"; import { backend } from "../../config"; +import InputLunchMenuHours from "../Input/InputLunchMenuHours"; const useStyles = makeStyles((theme) => ({ textInput: { @@ -69,6 +70,7 @@ export default function EditRestaurantInfo(props) { links: props.restaurant.links, tags: decodeTags(props.restaurant.tags), workingHours: props.restaurant.workingHours, + lunchHours: props.lunchHours, charleft: calculateCharLeft(props.restaurant.description), nameError: false, cityError: false, @@ -167,6 +169,7 @@ export default function EditRestaurantInfo(props) { placesId: props.restaurant.placesId, imgUrl: props.restaurant.imgUrl, workingHours: state.workingHours, + lunchHours: state.lunchHours, description: state.description, tags: formattedTags, links: state.links, @@ -383,6 +386,15 @@ export default function EditRestaurantInfo(props) { ), }} /> +
+

Lunch menu

+ + setState({ ...state, lunchHours: value })} + /> +

Zaawansowane

diff --git a/src/components/EditRestaurant/EditRestaurantMenu.js b/src/components/EditRestaurant/EditRestaurantMenu.js index fdcf43f..e709ba5 100644 --- a/src/components/EditRestaurant/EditRestaurantMenu.js +++ b/src/components/EditRestaurant/EditRestaurantMenu.js @@ -7,6 +7,8 @@ import ButtonSecondary from "../Input/ButtonSecondary"; import TextField from "@material-ui/core/TextField"; import AddIcon from "@material-ui/icons/Add"; import { makeStyles } from "@material-ui/core/styles"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import TextFieldsIcon from "@material-ui/icons/TextFields"; import validator from "validator"; import LunchMenu from "./LunchMenu"; import axios from "axios"; @@ -27,6 +29,7 @@ const useStyles = makeStyles((theme) => ({ textInputFullWidth: { marginTop: theme.spacing(2), marginBottom: theme.spacing(2), + marginLeft: theme.spacing(2), flexGrow: 5, "& .MuiInputBase-root": { color: "#bbbbbb", @@ -109,6 +112,7 @@ export default function EditRestaurantMenu(props) {
@@ -125,6 +129,13 @@ export default function EditRestaurantMenu(props) { onChange={(event) => setNewCategory(event.target.value)} label="Nazwa kategorii" variant="outlined" + InputProps={{ + startAdornment: ( + + + + ), + }} > @@ -133,7 +144,7 @@ export default function EditRestaurantMenu(props) {

Lunch menu

- + ); } diff --git a/src/components/EditRestaurant/LunchMenu.js b/src/components/EditRestaurant/LunchMenu.js index fdf9c40..dfa373e 100644 --- a/src/components/EditRestaurant/LunchMenu.js +++ b/src/components/EditRestaurant/LunchMenu.js @@ -9,6 +9,16 @@ import YesNo from "../Dialogs/YesNo"; import ButtonSecondary from "../Input/ButtonSecondary"; import TextField from "@material-ui/core/TextField"; import AddIcon from "@material-ui/icons/Add"; +import InputAdornment from "@material-ui/core/InputAdornment"; +import AttachMoneyIcon from "@material-ui/icons/AttachMoney"; +import TextFieldsIcon from "@material-ui/icons/TextFields"; +import axios from "axios"; +import validator from "validator"; +import { useDispatch, useSelector } from "react-redux"; +import { notification, refreshUserData } from "../../actions"; +import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; +import { backend } from "../../config"; +import Tooltip from "@material-ui/core/Tooltip"; const useStyles = makeStyles((theme) => ({ root: { @@ -20,9 +30,24 @@ const useStyles = makeStyles((theme) => ({ expandIcon: { color: "#bbbbbb", }, - textInputFullWidth: { + textInput: { marginTop: theme.spacing(2), marginBottom: theme.spacing(2), + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + "$ .MuiFormHelperText-root": { + color: "#bbbbbb", + }, + }, + textInputWide: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + marginRight: theme.spacing(1), + marginLeft: theme.spacing(2), flexGrow: 5, "& .MuiInputBase-root": { color: "#bbbbbb", @@ -37,16 +62,28 @@ const useStyles = makeStyles((theme) => ({ })); export default function EditCategoriesList(props) { + const dispatch = useDispatch(); const [open, setOpen] = useState(false); - const [newSet, setNewSet] = useState(""); + const initialSet = { + lunchSetName: "", + lunchSetPrice: "", + lunchSetDishes: [], + nameError: false, + priceError: false, + }; + const [newSet, setNewSet] = useState(initialSet); + const [selectedSet, setSelectedSet] = useState(initialSet); + const token = useSelector((state) => state.data.userData.jwt); const classes = useStyles(); const handleDeleteButton = (set) => { + setSelectedSet(set); setOpen(true); }; const onCancel = () => { setOpen(false); }; const onAccept = () => { + sendForm("delete", selectedSet); setOpen(false); }; const SetList = props.lunchMenu.map((set) => { @@ -55,21 +92,83 @@ export default function EditCategoriesList(props) { } > -

{set.name}

+

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

- handleDeleteButton(set)} - > - - + + handleDeleteButton(set)} + > + + +
); }); + // HANDLERS + + const validateForm = () => { + const validation = { + nameValid: validator.isLength(newSet.lunchSetName, { min: 1, max: 30 }), + priceValid: validator.isLength(newSet.lunchSetPrice, { min: 1, max: 12 }), + }; + setNewSet({ + ...newSet, + nameError: !validation.nameValid, + priceError: !validation.priceValid, + }); + + return validation.nameValid && validation.priceValid; + }; + + const sendForm = (action, set) => { + let valid = false; + if (action === "add") { + valid = validateForm(); + } else { + valid = true; + } + if (valid) { + const data = { + restaurantId: props.restaurantId, + action: action, + set: { + lunchSetName: set.lunchSetName, + lunchSetPrice: set.lunchSetPrice, + lunchSetDishes: set.lunchSetDishes, + }, + }; + dispatch(showBackdrop()); + axios({ + method: "POST", + url: backend + "/restaurant/lunchSet", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((response) => { + dispatch(hideBackdrop()); + dispatch(notification("Zmieniono zestaw.", "success")); + dispatch(refreshUserData(token)); + }) + .catch((error) => { + dispatch(hideBackdrop()); + dispatch(notification("Wystąpił błąd.", "error")); + }); + } else { + dispatch(notification("Popraw dane.", "error")); + } + }; + + // COMPONENT + return (
@@ -82,13 +181,41 @@ export default function EditCategoriesList(props) {
setNewSet(event.target.value)} + className={classes.textInputWide} + value={newSet.lunchSetName} + onChange={(event) => + setNewSet({ ...newSet, lunchSetName: event.target.value }) + } label="Nazwa zestawu" variant="outlined" + InputProps={{ + startAdornment: ( + + + + ), + }} > - {}} text="Dodaj" /> + + setNewSet({ ...newSet, lunchSetPrice: event.target.value }) + } + label="Cena" + variant="outlined" + InputProps={{ + startAdornment: ( + + + + ), + }} + > + sendForm("add", newSet)} + text="Dodaj" + />
diff --git a/src/components/Input/InputLunchMenuHours.js b/src/components/Input/InputLunchMenuHours.js new file mode 100644 index 0000000..c535c75 --- /dev/null +++ b/src/components/Input/InputLunchMenuHours.js @@ -0,0 +1,57 @@ +import React from "react"; +import TextField from "@material-ui/core/TextField"; +import Checkbox from "@material-ui/core/Checkbox"; +import FormControlLabel from "@material-ui/core/FormControlLabel"; +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles((theme) => ({ + timePicker: { + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + }, + checkbox: { + marginLeft: theme.spacing(1), + "& .MuiFormControlLabel-label": { + color: "#979797", + fontSize: "14px", + }, + }, +})); + +export default function InputWorkingHoursSingle(props) { + const handleChangeValue = (event) => { + props.changeValue(event.target.value); + }; + const handleCheckbox = () => { + if (!props.off) { + props.changeValue(""); + } else { + props.changeValue("13:00 - 15:00"); + } + }; + + const classes = useStyles(); + return ( +
+
Lunch menu
+ + + } + label="Wyłącz" + /> +
+ ); +} diff --git a/src/components/Output/EditCategoriesList.js b/src/components/Output/EditCategoriesList.js index 6ddde5f..ecac1cf 100644 --- a/src/components/Output/EditCategoriesList.js +++ b/src/components/Output/EditCategoriesList.js @@ -9,6 +9,7 @@ import EditDishList from "./EditDishList"; import { makeStyles } from "@material-ui/core/styles"; import YesNo from "../Dialogs/YesNo"; import { notification } from "../../actions"; +import Tooltip from "@material-ui/core/Tooltip"; const useStyles = makeStyles((theme) => ({ root: { @@ -75,16 +76,22 @@ export default function EditCategoriesList(props) { >

{category}

- handleDeleteButton(category)} - > - - + + handleDeleteButton(category)} + > + + +
- + ); }); diff --git a/src/components/Output/EditDishList.js b/src/components/Output/EditDishList.js index 17c834c..62c856d 100644 --- a/src/components/Output/EditDishList.js +++ b/src/components/Output/EditDishList.js @@ -11,9 +11,14 @@ import axios from "axios"; import { backend } from "../../config"; import YesNo from "../Dialogs/YesNo"; import { notification, fetchAllDishes } from "../../actions"; +import Tooltip from "@material-ui/core/Tooltip"; +import FastfoodIcon from "@material-ui/icons/Fastfood"; +import AddToSet from "../Dialogs/AddToSet"; +import { hideBackdrop, showBackdrop } from "../../actions/toggles"; export default function EditDishList(props) { const [open, setOpen] = useState(false); + const [setListOpen, setSetListOpen] = useState(false); const [selectedDish, setDish] = useState(""); const history = useHistory(); const dispatch = useDispatch(); @@ -80,6 +85,38 @@ export default function EditDishList(props) { }); }; + const handleAddToSet = (dishId) => { + setDish(dishId); + setSetListOpen(true); + }; + + const addToSet = (setName) => { + setSetListOpen(false); + const data = { + setName: setName, + restaurantId: props.restaurantId, + dishId: selectedDish, + action: "add", + }; + dispatch(showBackdrop()); + axios({ + method: "POST", + url: backend + "/restaurant/lunch", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((response) => { + dispatch(hideBackdrop()); + dispatch(notification("Dodano do zestawu.", "success")); + }) + .catch((error) => { + dispatch(hideBackdrop()); + dispatch(notification("Wystąpił błąd.", "error")); + }); + }; + const allDishes = useSelector((state) => state.dishes); const thisCategoryDishes = filterDishes(allDishes, props.category); const Dishes = thisCategoryDishes.map((dish) => { @@ -98,24 +135,39 @@ export default function EditDishList(props) {

{dish.name}

- handleSetDishVisibility(dish._id, dish.hidden)} - /> - selectDish(dish._id)} - > - - - history.push(`/editDish/${dish._id}`)} - > - - + + handleSetDishVisibility(dish._id, dish.hidden)} + /> + + + selectDish(dish._id)} + > + + + + + history.push(`/editDish/${dish._id}`)} + > + + + + + handleAddToSet(dish._id)} + > + + +
@@ -125,6 +177,12 @@ export default function EditDishList(props) { return ( + setSetListOpen(false)} + add={(setName) => addToSet(setName)} + /> {thisCategoryDishes.length === 0 ? ( Kategoria pusta