From c6a9ed4ec0387654864b22eff31d17a7c2cd90d9 Mon Sep 17 00:00:00 2001 From: Jonasz Bigda Date: Mon, 28 Sep 2020 17:07:28 +0200 Subject: [PATCH] Change localization --- src/components/Dialogs/EditRestaurant.js | 13 --- .../EditRestaurant/EditRestaurantLocation.js | 90 ++++++++++++++++++- .../EditRestaurant/EditRestaurantLunch.js | 9 -- .../EditRestaurant/EditRestaurantMenu.js | 86 +++++++++++++++++- .../EditRestaurant/EditRestaurantPhoto.js | 5 +- src/components/Input/ImageUploadWide.js | 62 +++++++++++++ src/styles/EditRestaurant.scss | 4 + src/styles/NewRestaurant.scss | 45 ++++++++++ 8 files changed, 287 insertions(+), 27 deletions(-) delete mode 100644 src/components/EditRestaurant/EditRestaurantLunch.js create mode 100644 src/components/Input/ImageUploadWide.js diff --git a/src/components/Dialogs/EditRestaurant.js b/src/components/Dialogs/EditRestaurant.js index 121d713..4260451 100644 --- a/src/components/Dialogs/EditRestaurant.js +++ b/src/components/Dialogs/EditRestaurant.js @@ -11,14 +11,12 @@ import DescriptionIcon from "@material-ui/icons/Description"; import PhotoIcon from "@material-ui/icons/Photo"; import RoomIcon from "@material-ui/icons/Room"; import RestaurantMenuIcon from "@material-ui/icons/RestaurantMenu"; -import FastfoodIcon from "@material-ui/icons/Fastfood"; import AddIcon from "@material-ui/icons/Add"; import Badge from "@material-ui/core/Badge"; import SearchIcon from "@material-ui/icons/Search"; //-------------- import EditRestaurantInfo from "../EditRestaurant/EditRestaurantInfo"; import EditRestaurantLocation from "../EditRestaurant/EditRestaurantLocation"; -import EditRestaurantLunch from "../EditRestaurant/EditRestaurantLunch"; import EditRestaurantMenu from "../EditRestaurant/EditRestaurantMenu"; import EditRestaurantPhoto from "../EditRestaurant/EditRestaurantPhoto"; import EditRestaurantSubscription from "../EditRestaurant/EditRestaurantSubscription"; @@ -155,16 +153,6 @@ export default function EditRestaurant(props) { - handleListItemClick(event, 5)} - > - - - - - @@ -179,7 +167,6 @@ export default function EditRestaurant(props) { {tab === 2 && } {tab === 3 && } {tab === 4 && } - {tab === 5 && } ); } diff --git a/src/components/EditRestaurant/EditRestaurantLocation.js b/src/components/EditRestaurant/EditRestaurantLocation.js index e4fb2c5..f11d427 100644 --- a/src/components/EditRestaurant/EditRestaurantLocation.js +++ b/src/components/EditRestaurant/EditRestaurantLocation.js @@ -1,9 +1,95 @@ -import React from "react"; +import React, { useState } from "react"; +import InputGoogleMaps from "../Input/InputGoogleMaps"; +import ButtonSecondary from "../Input/ButtonSecondary"; +import { useDispatch, useSelector } from "react-redux"; +import { notification } from "../../actions"; +import { showBackdrop, hideBackdrop } from "../../actions/toggles.js"; +import axios from "axios"; export default function EditRestaurantLocation(props) { + const { + imgUrl, + dishes, + categories, + lunchMenu, + name, + city, + adress, + placesId, + location, + workingHours, + description, + tags, + links, + phone, + hidden, + } = props.restaurant; + const initialState = { + coordinates: location.coordinates, + placesId: placesId, + }; + const token = useSelector((state) => state.data.userData.jwt); + const dispatch = useDispatch(); + const [state, setState] = useState(initialState); + const handleSave = () => { + dispatch(showBackdrop()); + const data = { + restaurantId: props.restaurant._id, + dishes: dishes, + categories: categories, + lunchMenu: lunchMenu, + name: name, + city: city, + adress: adress, + coordinates: state.coordinates, + placesId: placesId, + imgUrl: imgUrl, + workingHours: workingHours, + description: description, + tags: tags, + links: links, + phone: phone, + hidden: hidden, + }; + axios({ + url: "http://localhost:4000/restaurant", + method: "PUT", + data: data, + headers: { + "x-auth-token": token, + }, + }) + .then((res) => { + dispatch(hideBackdrop()); + dispatch(notification("Zmieniono lokalizację.", "success")); + }) + .catch((e) => { + dispatch(hideBackdrop()); + dispatch(notification("Nie udało się zmienić lokalizacji :(", "error")); + }); + }; + + const setCoordinatesAndPlacesID = (coordinates, placesID) => { + if (!placesID) { + setState({ ...state, coordinates: coordinates }); + } else { + setState({ coordinates: coordinates, placesId: placesID }); + } + }; + return (
-

Localization

+

Dane lokalizacyjne

+ + setCoordinatesAndPlacesID(coordinates, placesID) + } + coordinates={state.coordinates} + /> +

Google Places ID: {state.placesId}

+
+ +
); } diff --git a/src/components/EditRestaurant/EditRestaurantLunch.js b/src/components/EditRestaurant/EditRestaurantLunch.js deleted file mode 100644 index 3993e3f..0000000 --- a/src/components/EditRestaurant/EditRestaurantLunch.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from "react"; - -export default function EditRestaurantLunch(props) { - return ( -
-

Lunch

-
- ); -} diff --git a/src/components/EditRestaurant/EditRestaurantMenu.js b/src/components/EditRestaurant/EditRestaurantMenu.js index 149df41..a296230 100644 --- a/src/components/EditRestaurant/EditRestaurantMenu.js +++ b/src/components/EditRestaurant/EditRestaurantMenu.js @@ -1,9 +1,93 @@ import React from "react"; +import Divider from "@material-ui/core/Divider"; +import Accordion from "@material-ui/core/Accordion"; +import AccordionSummary from "@material-ui/core/AccordionSummary"; +import ExpandMoreIcon from "@material-ui/icons/ExpandMore"; +import ButtonSecondary from "../Input/ButtonSecondary"; +import TextField from "@material-ui/core/TextField"; +import List from "@material-ui/core/List"; +import ListItem from "@material-ui/core/ListItem"; +import { makeStyles } from "@material-ui/core/styles"; + +const useStyles = makeStyles((theme) => ({ + root: { + backgroundColor: "#262626", + color: "#bbbbbb", + }, + expandIcon: { + color: "#bbbbbb", + }, + textInputFullWidth: { + marginTop: theme.spacing(2), + marginBottom: theme.spacing(2), + "& .MuiInputBase-root": { + color: "#bbbbbb", + }, + "& .MuiInputLabel-root": { + color: "#bbbbbb", + }, + "$ .MuiFormHelperText-root": { + color: "#bbbbbb", + }, + }, +})); export default function EditRestaurantMenu(props) { + const classes = useStyles(); + const { + imgUrl, + dishes, + categories, + lunchMenu, + name, + city, + adress, + placesId, + location, + workingHours, + description, + tags, + links, + phone, + hidden, + } = props.restaurant; + + const CategoriesList = categories.map((category) => { + return ( + + } + > +

{category}

+ + + ); + }); + return (
-

Menu

+
+

Menu

+ +
+ {CategoriesList} + + } + > +

Dodaj kategorię

+ + + + +
+

Lunch menu

+ +
); } diff --git a/src/components/EditRestaurant/EditRestaurantPhoto.js b/src/components/EditRestaurant/EditRestaurantPhoto.js index fb95d06..ca59ba2 100644 --- a/src/components/EditRestaurant/EditRestaurantPhoto.js +++ b/src/components/EditRestaurant/EditRestaurantPhoto.js @@ -1,5 +1,5 @@ import React, { useState } from "react"; -import ImageUpload from "../Input/ImageUpload"; +import ImageUploadWide from "../Input/ImageUploadWide"; import ButtonSecondary from "../Input/ButtonSecondary"; import ButtonPrimary from "../Input/ButtonPrimary"; import { useDispatch, useSelector } from "react-redux"; @@ -67,7 +67,8 @@ export default function EditRestaurantPhoto(props) { }; return (
- setUrl(newUrl)} /> +

Zdjęcie lokalu

+ setUrl(newUrl)} />
setUrl(imgUrl)} /> diff --git a/src/components/Input/ImageUploadWide.js b/src/components/Input/ImageUploadWide.js new file mode 100644 index 0000000..45b4071 --- /dev/null +++ b/src/components/Input/ImageUploadWide.js @@ -0,0 +1,62 @@ +import React, { useState } from "react"; +import CircularProgress from "@material-ui/core/CircularProgress"; +import { useSelector } from "react-redux"; +import axios from "axios"; + +export default function ImageUpload(props) { + const { img } = props; + const [loading, setLoading] = useState(false); + const token = useSelector((state) => state.data.userData.jwt); + + const handleInputChange = (event) => { + let data = new FormData(); + data.append("menuiImage", event.target.files[0]); + setLoading(true); + axios({ + url: "http://localhost:4000/img", + method: "POST", + data: data, + headers: { + Accept: "application/json", + "Content-Type": "multipart/form-data", + "x-auth-token": token, + }, + }) + .then((response) => { + props.onUpload(response.data.imgURL); + setLoading(false); + }) + .catch((error) => { + console.log("Wystąpił błąd podczas wgrywania pliku."); + setLoading(false); + }); + }; + + let imagePreview = ( +
+ {loading ? : "Proszę wybrać obraz. (max. 2MB)"} +
+ ); + if (img) { + imagePreview = ( +
+ ); + } + + return ( +
+ {imagePreview} + + +
+ ); +} diff --git a/src/styles/EditRestaurant.scss b/src/styles/EditRestaurant.scss index ba962fb..784dd40 100644 --- a/src/styles/EditRestaurant.scss +++ b/src/styles/EditRestaurant.scss @@ -25,9 +25,13 @@ display: flex; flex-flow: column; justify-content: space-between; + align-items: center; width: 100%; max-height: 600px; overflow: auto; + h3 { + font-weight: 400; + } } .editRestaurant-doubleColumn { diff --git a/src/styles/NewRestaurant.scss b/src/styles/NewRestaurant.scss index 78dd73c..8d82305 100644 --- a/src/styles/NewRestaurant.scss +++ b/src/styles/NewRestaurant.scss @@ -57,3 +57,48 @@ .newRestaurant-bottom { display: inline-block; } + +// WIDE + +.image-upload-container-wide { + display: flex; + flex-direction: column; + align-items: flex-end; +} + +.image-preview-wide { + width: 100%; + height: 300px; + border-radius: 6px; + box-shadow: (5px 5px 15px rgba(0, 0, 0, 0.151)); + display: flex; + align-items: center; + justify-content: center; + font-size: 0.8rem; + background-size: cover; + background-position: center; +} + +.input-image-wide { + width: 0.1px; + height: 0.1px; + opacity: 0; + cursor: pointer; + overflow: hidden; + position: absolute; +} + +.input-image-wide + label { + margin: 16px; + font-size: 0.9rem; + font-weight: 500; + padding: 14px; + border-radius: 6px; + color: #262626; + background-color: #d68000; + cursor: pointer; +} + +.input-image-wide + label:hover { + background-color: #fd9800; +}