web client v0.4 (edit restaurant info)

src/components/Dialogs/EditRestaurant.js

@@ -14,6 +14,13 @@ 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 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";
 
 const useStyles = makeStyles((theme) => ({
   main: {
@@ -31,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
   },
   secondary: {
     "& .MuiListItemText-secondary": {
-      color: "#7b7b7b",
+      color: "#868686",
       fontSize: "13px",
     },
   },
@@ -103,6 +110,7 @@ export default function EditRestaurant(props) {
               </Badge>
             </ListItemIcon>
             <ListItemText
+              className={classes.secondary}
               primary="Subskrypcja"
               secondary={badgeData.secondaryText}
             />
@@ -156,36 +164,12 @@ export default function EditRestaurant(props) {
         </List>
         <Divider />
       </div>
-      {tab === 0 && (
-        <div className="editRestaurant-tab">
-          <p>Informacje</p>
-        </div>
-      )}
-      {tab === 1 && (
-        <div className="editRestaurant-tab">
-          <p>Subskrypcja</p>
-        </div>
-      )}
-      {tab === 2 && (
-        <div className="editRestaurant-tab">
-          <p>Zdjęcie</p>
-        </div>
-      )}
-      {tab === 3 && (
-        <div className="editRestaurant-tab">
-          <p>Lokalizacja</p>
-        </div>
-      )}
-      {tab === 4 && (
-        <div className="editRestaurant-tab">
-          <p>Menu</p>
-        </div>
-      )}
-      {tab === 5 && (
-        <div className="editRestaurant-tab">
-          <p>Lunch menu</p>
-        </div>
-      )}
+      {tab === 0 && <EditRestaurantInfo restaurant={restaurant} />}
+      {tab === 1 && <EditRestaurantSubscription restaurant={restaurant} />}
+      {tab === 2 && <EditRestaurantPhoto restaurant={restaurant} />}
+      {tab === 3 && <EditRestaurantLocation restaurant={restaurant} />}
+      {tab === 4 && <EditRestaurantMenu restaurant={restaurant} />}
+      {tab === 5 && <EditRestaurantLunch restaurant={restaurant} />}
     </div>
   );
 }

src/components/Dialogs/NewRestaurant.js

@@ -22,6 +22,7 @@ import InfoDialog from "../Output/InfoDialog";
 import { prepareTags } from "../../Services.js";
 import axios from "axios";
 import { useSelector } from "react-redux";
+import InputWorkingHours from "../Input/InputWorkingHours";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -35,9 +36,11 @@ import ButtonPrimary from "../Input/ButtonPrimary";
 
 const useStyles = makeStyles((theme) => ({
   root: {
+    margin: "auto",
     textAlign: "center",
+    maxHeight: "700px",
     "& .MuiPaper-root": {
-      minWidth: "30%",
+      width: "auto",
       backgroundColor: "#262626",
       color: "#bbbbbb",
     },
@@ -70,15 +73,6 @@ const useStyles = makeStyles((theme) => ({
       color: "#bbbbbb",
     },
   },
-  timePicker: {
-    margin: theme.spacing(2),
-    "& .MuiInputBase-root": {
-      color: "#bbbbbb",
-    },
-    "& .MuiInputLabel-root": {
-      color: "#bbbbbb",
-    },
-  },
   stepLabel: {
     "& .MuiStepLabel-label": {
       color: "#bbbbbb",
@@ -97,14 +91,23 @@ export default function NewRestaurant() {
     coordinates: [52.354293, 19.42377],
     placesId: "",
     imgURL: "",
-    hoursFrom: "07:00",
-    hoursTo: "23:00",
+    workingHours: {
+      pn: "8:00 - 22:00",
+      wt: "8:00 - 22:00",
+      sr: "8:00 - 22:00",
+      cz: "8:00 - 22:00",
+      pt: "8:00 - 22:00",
+      sb: "8:00 - 22:00",
+      nd: "8:00 - 22:00",
+    },
     description: "",
     tags: [],
     phone: "",
-    facebook: "",
-    instagram: "",
-    www: "",
+    links: {
+      facebook: "",
+      instagram: "",
+      www: "",
+    },
     nameError: false,
     cityError: false,
     adressError: false,
@@ -141,12 +144,10 @@ export default function NewRestaurant() {
       coordinates: state.coordinates,
       placesId: state.placesId,
       imgURL: state.imgURL,
-      workingHours: `${state.hoursFrom} - ${state.hoursTo}`,
+      workingHours: state.workingHours,
       description: state.description,
       tags: formattedTags,
-      facebook: state.facebook,
-      instagram: state.instagram,
-      www: state.www,
+      links: state.links,
       phone: state.phone,
       hidden: false,
     };
@@ -345,37 +346,11 @@ export default function NewRestaurant() {
                     ),
                   }}
                 />
-                <TextField
-                  label="Otwarcie"
-                  type="time"
-                  onChange={(event) =>
-                    setState({ ...state, hoursFrom: event.target.value })
+                <InputWorkingHours
+                  hours={state.workingHours}
+                  setHours={(hours) =>
+                    setState({ ...state, workingHours: hours })
                   }
-                  variant="outlined"
-                  value={state.hoursFrom}
-                  className={styles.timePicker}
-                  InputLabelProps={{
-                    shrink: true,
-                  }}
-                  inputProps={{
-                    step: 300, // 5 min
-                  }}
-                />
-                <TextField
-                  label="Zamknięcie"
-                  type="time"
-                  onChange={(event) =>
-                    setState({ ...state, hoursTo: event.target.value })
-                  }
-                  variant="outlined"
-                  value={state.hoursTo}
-                  className={styles.timePicker}
-                  InputLabelProps={{
-                    shrink: true,
-                  }}
-                  inputProps={{
-                    step: 300, // 5 min
-                  }}
                 />
                 <div className="newRestaurant-content-fullwidth">
                   <TextField
@@ -434,9 +409,12 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="Facebook"
                   variant="outlined"
-                  value={state.facebook}
+                  value={state.links.facebook}
                   onChange={(event) =>
-                    setState({ ...state, facebook: event.target.value })
+                    setState({
+                      ...state,
+                      links: { ...state.links, facebook: event.target.value },
+                    })
                   }
                   InputProps={{
                     startAdornment: (
@@ -450,9 +428,12 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="Instagram"
                   variant="outlined"
-                  value={state.instagram}
+                  value={state.links.instagram}
                   onChange={(event) =>
-                    setState({ ...state, instagram: event.target.value })
+                    setState({
+                      ...state,
+                      links: { ...state.links, instagram: event.target.value },
+                    })
                   }
                   InputProps={{
                     startAdornment: (
@@ -466,9 +447,12 @@ export default function NewRestaurant() {
                   className={styles.textInput}
                   label="www"
                   variant="outlined"
-                  value={state.www}
+                  value={state.links.www}
                   onChange={(event) =>
-                    setState({ ...state, www: event.target.value })
+                    setState({
+                      ...state,
+                      links: { ...state.links, www: event.target.value },
+                    })
                   }
                   InputProps={{
                     startAdornment: (
@@ -505,13 +489,15 @@ export default function NewRestaurant() {
               />
             </Paper>
           )}
-          {activeStep !== 0 && (
-            <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
-          )}
-          <ButtonSecondary
-            onClick={handleNextButton}
-            text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
-          />
+          <div className="newRestaurant-bottom">
+            {activeStep !== 0 && (
+              <ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
+            )}
+            <ButtonSecondary
+              onClick={handleNextButton}
+              text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
+            />
+          </div>
         </DialogContent>
       </Dialog>
     </div>

src/components/EditRestaurant/EditRestaurantInfo.js

@@ -0,0 +1,240 @@
+import React, { useState } from "react";
+import ButtonPrimary from "../Input/ButtonPrimary";
+import ButtonSecondary from "../Input/ButtonSecondary";
+import TextField from "@material-ui/core/TextField";
+import { makeStyles } from "@material-ui/core/styles";
+import InputWorkingHours from "../Input/InputWorkingHours";
+import Autocomplete from "@material-ui/lab/Autocomplete";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import PhoneIcon from "@material-ui/icons/Phone";
+import FacebookIcon from "@material-ui/icons/Facebook";
+import InstagramIcon from "@material-ui/icons/Instagram";
+import LanguageIcon from "@material-ui/icons/Language";
+import Divider from "@material-ui/core/Divider";
+import { decodeTags } from "../../Services";
+
+const useStyles = makeStyles((theme) => ({
+  textInput: {
+    margin: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  textInputFullWidth: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiFormHelperText-root": {
+      color: "#bbbbbb",
+    },
+  },
+}));
+
+const calculateCharLeft = (from) => {
+  return 400 - from.length;
+};
+
+export default function EditRestaurantInfo(props) {
+  const initialState = {
+    name: props.restaurant.name,
+    city: props.restaurant.city,
+    adress: props.restaurant.adress,
+    description: props.restaurant.description,
+    phone: props.restaurant.phone,
+    hidden: props.restaurant.hidden,
+    links: props.restaurant.links,
+    tags: decodeTags(props.restaurant.tags),
+    workingHours: props.restaurant.workingHours,
+    charleft: calculateCharLeft(props.restaurant.description),
+  };
+  const [state, setState] = useState(initialState);
+  const styles = useStyles();
+  const handleDescriptionChange = (event) => {
+    let stringLength = event.target.value.length;
+    let charleft = 400 - stringLength;
+    setState({ ...state, description: event.target.value, charLeft: charleft });
+  };
+  const availableTags = [
+    "Płatność kartą",
+    "Lubimy zwierzaki",
+    "Bezglutenowe",
+    "Wegańskie",
+    "Wegetariańskie",
+    "Podajemy alkohol",
+    "Dowozimy",
+  ];
+
+  return (
+    <div className="editRestaurant-tab">
+      <div className="editRestaurant-doubleColumn">
+        <div className="editRestaurant-sectiontitle">
+          <h4>Podstawowe dane</h4>
+          <Divider />
+        </div>
+        <div className="editRestaurant-fullWidth">
+          <TextField
+            className={styles.textInputFullWidth}
+            fullWidth
+            value={state.name}
+            onChange={(event) =>
+              setState({ ...state, name: event.target.value })
+            }
+            InputLabelProps={{ shrink: true }}
+            label="Nazwa lokalu"
+            variant="outlined"
+          />
+        </div>
+
+        <TextField
+          className={styles.textInput}
+          value={state.city}
+          onChange={(event) => setState({ ...state, city: event.target.value })}
+          InputLabelProps={{ shrink: true }}
+          label="Miasto"
+          variant="outlined"
+        />
+        <TextField
+          className={styles.textInput}
+          value={state.adress}
+          onChange={(event) =>
+            setState({ ...state, adress: event.target.value })
+          }
+          InputLabelProps={{ shrink: true }}
+          label="Adres"
+          variant="outlined"
+        />
+        <div className="editRestaurant-fullWidth">
+          <TextField
+            className={styles.textInputFullWidth}
+            fullWidth
+            label="Opis"
+            value={state.description}
+            onChange={handleDescriptionChange}
+            multiline
+            rows={3}
+            rowsMax={8}
+            variant="outlined"
+            helperText={`Pozostałe znaki: ${state.charleft}`}
+            InputLabelProps={{ shrink: true }}
+            FormHelperTextProps={{
+              style: { color: "#bbbbbb" },
+            }}
+          />
+          <Autocomplete
+            multiple
+            options={availableTags}
+            value={state.tags}
+            onChange={(event, values) => setState({ ...state, tags: values })}
+            renderInput={(params) => (
+              <TextField
+                {...params}
+                className={styles.textInputFullWidth}
+                variant="outlined"
+                label="Tagi"
+                placeholder="Wybierz tagi"
+              />
+            )}
+          />
+        </div>
+        <div className="editRestaurant-sectiontitle">
+          <h4>Godziny otwarcia</h4>
+          <Divider />
+        </div>
+        <InputWorkingHours
+          setHours={(hours) => setState({ ...state, workingHours: hours })}
+          hours={state.workingHours}
+        />
+        <div className="editRestaurant-sectiontitle">
+          <h4>Dane kontaktowe</h4>
+          <Divider />
+        </div>
+        <TextField
+          className={styles.textInput}
+          label="Telefon"
+          type="tel"
+          variant="outlined"
+          value={state.phone}
+          onChange={(event) =>
+            setState({ ...state, phone: event.target.value })
+          }
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PhoneIcon color="primary" />
+              </InputAdornment>
+            ),
+          }}
+        />
+        <TextField
+          className={styles.textInput}
+          label="Facebook"
+          variant="outlined"
+          value={state.links.facebook}
+          onChange={(event) =>
+            setState({
+              ...state,
+              links: { ...state.links, facebook: event.target.value },
+            })
+          }
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <FacebookIcon color="primary" />
+              </InputAdornment>
+            ),
+          }}
+        />
+        <TextField
+          className={styles.textInput}
+          label="Instagram"
+          variant="outlined"
+          value={state.links.instagram}
+          onChange={(event) =>
+            setState({
+              ...state,
+              links: { ...state.links, instagram: event.target.value },
+            })
+          }
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <InstagramIcon color="primary" />
+              </InputAdornment>
+            ),
+          }}
+        />
+        <TextField
+          className={styles.textInput}
+          label="www"
+          variant="outlined"
+          value={state.links.www}
+          onChange={(event) =>
+            setState({
+              ...state,
+              links: { ...state.links, www: event.target.value },
+            })
+          }
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LanguageIcon color="primary" />
+              </InputAdornment>
+            ),
+          }}
+        />
+      </div>
+      <div className="editRestaurant-bottom">
+        <ButtonPrimary text="Anuluj" />
+        <ButtonSecondary text="Zapisz" />
+      </div>
+    </div>
+  );
+}

src/components/EditRestaurant/EditRestaurantLocation.js

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

src/components/EditRestaurant/EditRestaurantLunch.js

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

src/components/EditRestaurant/EditRestaurantMenu.js

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

src/components/EditRestaurant/EditRestaurantPhoto.js

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

src/components/EditRestaurant/EditRestaurantSubscription.js

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

src/components/Input/InputWorkingHours.js

@@ -0,0 +1,53 @@
+import React from "react";
+import InputWorkingHoursSingle from "./InputWorkingHoursSingle";
+
+export default function InputWorkingHours(props) {
+  return (
+    <div className="editRestaurant-fullWidth">
+      <div className="workingHours-container">
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.pn}
+          hours={props.hours.pn}
+          changeValue={(value) => props.setHours({ ...props.hours, pn: value })}
+          day="Poniedziałek"
+        />
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.wt}
+          hours={props.hours.wt}
+          changeValue={(value) => props.setHours({ ...props.hours, wt: value })}
+          day="Wtorek"
+        />
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.sr}
+          hours={props.hours.sr}
+          changeValue={(value) => props.setHours({ ...props.hours, sr: value })}
+          day="Środa"
+        />
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.cz}
+          hours={props.hours.cz}
+          changeValue={(value) => props.setHours({ ...props.hours, cz: value })}
+          day="Czwartek"
+        />
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.pt}
+          hours={props.hours.pt}
+          changeValue={(value) => props.setHours({ ...props.hours, pt: value })}
+          day="Piątek"
+        />
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.sb}
+          hours={props.hours.sb}
+          changeValue={(value) => props.setHours({ ...props.hours, sb: value })}
+          day="Sobota"
+        />
+        <InputWorkingHoursSingle
+          nieczynne={!props.hours.nd}
+          hours={props.hours.nd}
+          changeValue={(value) => props.setHours({ ...props.hours, nd: value })}
+          day="Niedziela"
+        />
+      </div>
+    </div>
+  );
+}

src/components/Input/InputWorkingHoursSingle.js

@@ -0,0 +1,61 @@
+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.nieczynne) {
+      props.changeValue("");
+    } else {
+      props.changeValue("8:00 - 22:00");
+    }
+  };
+
+  const classes = useStyles();
+  return (
+    <div className="workingHours-day">
+      <h5>{props.day}</h5>
+      <TextField
+        value={props.hours}
+        variant="outlined"
+        onChange={handleChangeValue}
+        className={classes.timePicker}
+        margin="dense"
+      />
+      <FormControlLabel
+        className={classes.checkbox}
+        control={
+          <Checkbox
+            onClick={handleCheckbox}
+            checked={props.nieczynne}
+            name="nieczynne"
+          />
+        }
+        label="Zamknięte"
+      />
+    </div>
+  );
+}