Change localization

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) {
             </ListItemIcon>
             <ListItemText primary="Menu" />
           </ListItem>
-          <ListItem
-            button
-            selected={tab === 5}
-            onClick={(event) => handleListItemClick(event, 5)}
-          >
-            <ListItemIcon>
-              <FastfoodIcon color="primary" />
-            </ListItemIcon>
-            <ListItemText primary="Lunch menu" />
-          </ListItem>
           <ListItem button>
             <ListItemIcon>
               <AddIcon color="primary" />
@@ -179,7 +167,6 @@ export default function EditRestaurant(props) {
       {tab === 2 && <EditRestaurantPhoto restaurant={restaurant} />}
       {tab === 3 && <EditRestaurantLocation restaurant={restaurant} />}
       {tab === 4 && <EditRestaurantMenu restaurant={restaurant} />}
-      {tab === 5 && <EditRestaurantLunch restaurant={restaurant} />}
     </div>
   );
 }

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 (
     <div className="editRestaurant-tab">
-      <p>Localization</p>
+      <h3>Dane lokalizacyjne</h3>
+      <InputGoogleMaps
+        setCoordinates={(coordinates, placesID) =>
+          setCoordinatesAndPlacesID(coordinates, placesID)
+        }
+        coordinates={state.coordinates}
+      />
+      <p>Google Places ID: {state.placesId}</p>
+      <div className="editRestaurant-bottom">
+        <ButtonSecondary onClick={handleSave} text="Zapisz" />
+      </div>
     </div>
   );
 }

src/components/EditRestaurant/EditRestaurantLunch.js

@@ -1,9 +0,0 @@
-import React from "react";
-
-export default function EditRestaurantLunch(props) {
-  return (
-    <div className="editRestaurant-tab">
-      <p>Lunch</p>
-    </div>
-  );
-}

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 (
+      <Accordion key={category} className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>{category}</h4>
+        </AccordionSummary>
+      </Accordion>
+    );
+  });
+
   return (
     <div className="editRestaurant-tab">
-      <p>Menu</p>
+      <div className="editRestaurant-sectiontitle">
+        <h4>Menu</h4>
+        <Divider />
+      </div>
+      {CategoriesList}
+      <Accordion className={classes.root}>
+        <AccordionSummary
+          expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+        >
+          <h4>Dodaj kategorię</h4>
+        </AccordionSummary>
+        <TextField
+          className={classes.textInputFullWidth}
+          label="Nazwa kategorii"
+          variant="outlined"
+        ></TextField>
+        <ButtonSecondary text="Dodaj" />
+      </Accordion>
+      <div className="editRestaurant-sectiontitle">
+        <h4>Lunch menu</h4>
+        <Divider />
+      </div>
     </div>
   );
 }

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 (
     <div className="editRestaurant-tab">
-      <ImageUpload img={url} onUpload={(newUrl) => setUrl(newUrl)} />
+      <h3>Zdjęcie lokalu</h3>
+      <ImageUploadWide img={url} onUpload={(newUrl) => setUrl(newUrl)} />
       <div className="editRestaurant-bottom">
         <ButtonPrimary text="Anuluj" onClick={() => setUrl(imgUrl)} />
         <ButtonSecondary onClick={handleSave} text="Zapisz" />

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 = (
+    <div className="image-preview-wide">
+      {loading ? <CircularProgress /> : "Proszę wybrać obraz. (max. 2MB)"}
+    </div>
+  );
+  if (img) {
+    imagePreview = (
+      <div
+        className="image-preview-wide"
+        style={{ backgroundImage: `url(${img})` }}
+      ></div>
+    );
+  }
+
+  return (
+    <div className="image-upload-container-wide">
+      {imagePreview}
+      <input
+        name="menuiImage"
+        id="file"
+        type="file"
+        className="input-image-wide"
+        onChange={handleInputChange}
+      ></input>
+      <label htmlFor="file">Wybierz plik...</label>
+    </div>
+  );
+}

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 {

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;
+}