Multiple prices (unfinished)

2020-11-07 16:11:01 +01:00
parent 169c874cb0
commit dfa1a88163
8 changed files with 8223 additions and 3039 deletions
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
    "react-dom": "^16.13.1",
    "react-redux": "^7.2.0",
    "react-router-dom": "^5.2.0",
-    "react-scripts": "^3.4.3",
+    "react-scripts": "^4.0.0",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0",
    "validator": "^13.1.1"
--- a/src/components/Dialogs.js
+++ b/src/components/Dialogs.js
@@ -1,7 +1,7 @@
 import React from "react";
 import RegulaminDialog from "./Dialogs/RegulaminDialog";

-export default function (props) {
+export default function Dialogs (props) {
  return (
    <div>
      <RegulaminDialog />
--- a/src/components/Dialogs/NewDish.js
+++ b/src/components/Dialogs/NewDish.js
@@ -23,11 +23,11 @@ import InputLabel from "@material-ui/core/InputLabel";
 import InputAdornment from "@material-ui/core/InputAdornment";
 import Checkboxes from "../Input/Checkboxes";
 import { backend } from "../../config";
+import InputPrices from "../Input/InputPrices";

 // ICONS

 import TextFieldsIcon from "@material-ui/icons/TextFields";
-import AttachMoneyIcon from "@material-ui/icons/AttachMoney";
 import FitnessCenterIcon from "@material-ui/icons/FitnessCenter";
 import LocalHospitalIcon from "@material-ui/icons/LocalHospital";
 import FavoriteBorderIcon from "@material-ui/icons/FavoriteBorder";
@@ -46,6 +46,11 @@ const useStyles = makeStyles((theme) => ({
      overflow: "visible",
    },
  },
+  h4: {
+    color: "#d68000",
+    fontSize: "16px",
+    fontWeight: "500"
+  },
  closeButton: {
    color: "#bbbbbb",
    position: "absolute",
@@ -103,7 +108,20 @@ export default function NewRestaurant() {
    restaurantId: restaurantID,
    name: "",
    category: "",
-    price: "",
+    prices: {
+      price1: {
+        priceName: "",
+        price: ""
+      },
+      price2: {
+        priceName: "",
+        price: ""
+      },
+      price3: {
+        priceName: "",
+        price: ""
+      },
+    },
    notes: "",
    imgUrl: "",
    hidden: false,
@@ -152,6 +170,10 @@ export default function NewRestaurant() {
    setState({ ...state, category: event.target.value });
  };

+  const handlePricesChange = (value) => {
+    setState({ ...state, prices: value });
+  }
+
  const handleAdd = () => {
    if (validateForm()) {
      sendForm();
@@ -164,14 +186,14 @@ export default function NewRestaurant() {
    const validation = {
      name: validator.isLength(state.name, { max: 50, min: 1 }),
      category: restaurant.categories.includes(state.category),
-      price: validator.isLength(state.price, { max: 10, min: 1 }),
+      prices: validator.isLength(state.prices.price1.priceName, { max: 18, min: 1 }) && validator.isLength(state.prices.price1.price, { max: 18, min: 1 }),
    };

    setState({
      ...state,
      nameError: !validation.name,
      categoryError: !validation.category,
-      priceError: !validation.price,
+      priceError: !validation.prices,
    });

    return validation.name && validation.category && validation.price;
@@ -182,7 +204,7 @@ export default function NewRestaurant() {
      restaurantId: restaurantID,
      name: state.name,
      category: state.category,
-      price: state.price,
+      prices: state.prices,
      notes: state.notes,
      imgUrl: state.imgUrl,
      hidden: false,
@@ -251,9 +273,10 @@ export default function NewRestaurant() {
        <DialogContent>
          <p>Danie zostanie dodane do: {restaurant.name}</p>
          <Paper variant="outlined">
-            <div className="newRestaurant-content">
+            <div className="newRestaurant-content-fullwidth">
              <TextField
-                className={styles.textInput}
+                className={styles.textInputFullWidth}
+                fullWidth
                required
                value={state.name}
                error={state.nameError}
@@ -271,6 +294,11 @@ export default function NewRestaurant() {
                  ),
                }}
              />
+            </div>
+            <div className="newRestaurant-content-fullwidth">
+              <InputPrices error={state.priceError} prices={state.prices} setPrices={handlePricesChange}/>
+            </div>
+            <div className="newRestaurant-content">
              <FormControl
                variant="outlined"
                required
@@ -288,25 +316,6 @@ export default function NewRestaurant() {
                  {Categories}
                </Select>
              </FormControl>
-              <TextField
-                className={styles.textInput}
-                required
-                label="Cena (zł)"
-                placeholder="np. 18,50"
-                error={state.priceError}
-                value={state.price}
-                variant="outlined"
-                onChange={(event) =>
-                  setState({ ...state, price: event.target.value })
-                }
-                InputProps={{
-                  startAdornment: (
-                    <InputAdornment position="start">
-                      <AttachMoneyIcon color="primary" />
-                    </InputAdornment>
-                  ),
-                }}
-              />
              <TextField
                className={styles.textInput}
                label="Porcja"
@@ -403,8 +412,8 @@ export default function NewRestaurant() {
              />
            </div>
          </Paper>
-          <Paper>
-            <h4>Dodaj zdjęcie.</h4>
+          <Paper variant="outlined">
+            <h4 className={styles.h4}>Dodaj zdjęcie.</h4>
            <ImageUpload
              img={state.imgUrl}
              onUpload={(link) => handleImageUploaded(link)}
--- a/src/components/Input/Checkboxes.js
+++ b/src/components/Input/Checkboxes.js
@@ -10,10 +10,11 @@ import FormHelperText from "@material-ui/core/FormHelperText";
 const useStyles = makeStyles((theme) => ({
  root: {
    "& .MuiFormLabel-root": {
-      color: "#e99800",
+      color: "#d68000",
      marginBottom: theme.spacing(2),
      marginLeft: "auto",
      marginRight: "auto",
+      fontWeight: "500"
    },
    "& .MuiFormHelperText-root": {
      color: "#7e7e7e",
@@ -141,9 +142,6 @@ export default function Checkboxes(props) {
            label="Sezam"
          />
        </FormGroup>
-        <FormHelperText>
-          Jeżeli nie masz pewności, czy danie zawiera alergen, zaznacz go :)
-        </FormHelperText>
      </FormControl>
      <FormControl component="fieldset" className={classes.formControl}>
        <FormLabel component="legend">Inne</FormLabel>
--- a/src/components/Input/InputPrices.js
+++ b/src/components/Input/InputPrices.js
@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import { makeStyles } from '@material-ui/core/styles';
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    '& > *': {
+        margin: theme.spacing(0),
+        backgroundColor: "#262626",
+        padding: theme.spacing(1)
+        },
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+    },
+    header: {
+        color: "#d68000",
+        fontSize: "16px"
+    },
+    paragraph: {
+        color: "#bbbbbb",
+        fontSize: "12px"
+    },
+    option: {
+        color: "#d68000",
+        minWidth: "60px",
+        marginLeft: theme.spacing(1),
+        marginRight: theme.spacing(1),
+        marginBottom: "0px",
+        marginTop: "0px"
+    },
+    paper: {
+        '& > *': {
+            margin: theme.spacing(1),
+            backgroundColor: "#262626",
+            padding: theme.spacing(1)
+        },
+    },
+    textField: {
+        margin: theme.spacing(1),
+        marginBottom: "0px",
+        marginTop: "0px"
+    },
+    subOption: {
+        margin: "0px",
+        color: "#bbbbbb",
+        fontSize: "11px"
+    },
+    optionContainer: {
+        display: "flex",
+        alignItems: "center",
+        margin: theme.spacing(1)
+    }
+}));
+
+export default function InputPrices(props) {
+    const classes = useStyles();
+    const [multi, setMulti] = useState("initial");
+
+    return <div className={classes.root}>
+        <Paper variant="outlined">
+            <h3 className={classes.header}>Podaj ceny</h3>
+            <p className={classes.paragraph}>Jeżeli ta pozycja w menu ma kilka opcji cenowych (np. Mała/Średnia/Duża porcja) - możesz dodać do trzech cen wraz z nazwami poszczególnych opcji.</p>
+            <div className={classes.paper} style={{ display: multi }}>
+                <div className={classes.optionContainer}>
+                    <h4 className={classes.option}>Cena 1</h4>
+                    <TextField error={props.error} value={props.prices.price1.priceName} onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price1: {
+                                priceName: event.target.value,
+                                price: props.prices.price1.price
+                        }})
+                    }} className={classes.textField} label="Nazwa" variant="outlined" required placeholder="np. Mała"/>
+                    <TextField error={props.error} onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price1: {
+                                priceName: props.prices.price1.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price1.price} className={classes.textField} label="Cena" variant="outlined" required placeholder="np. 14zł"/>
+                </div>
+                <div className={classes.optionContainer}>
+                    <div>
+                        <h4 className={classes.option}>Cena 2</h4>
+                        <p className={classes.subOption}>(opcjonalna)</p>
+                    </div>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price2: {
+                                priceName: event.target.value,
+                                price: props.prices.price2.price
+                        }})
+                    }} value={props.prices.price2.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Średnia"/>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price2: {
+                                priceName: props.prices.price2.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price2.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 18zł"/>
+                </div>
+                <div className={classes.optionContainer}>
+                    <div>
+                        <h4 className={classes.option}>Cena 3</h4>
+                        <p className={classes.subOption}>(opcjonalna)</p>
+                    </div>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price3: {
+                                priceName: event.target.value,
+                                price: props.prices.price3.price
+                        }})
+                    }} value={props.prices.price3.priceName} className={classes.textField} label="Nazwa" variant="outlined" placeholder="np. Duża"/>
+                    <TextField onChange={(event) => {
+                        props.setPrices({
+                            ...props.prices, price3: {
+                                priceName: props.prices.price3.priceName,
+                                price: event.target.value
+                        }})
+                    }} value={props.prices.price3.price} className={classes.textField} label="Cena" variant="outlined" placeholder="np. 22zł"/>
+                </div>
+            </div>
+        </Paper>
+    </div>
+}
--- a/src/components/Output/Footer.js
+++ b/src/components/Output/Footer.js
@@ -4,7 +4,7 @@ export default class Footer extends React.Component {
  render() {
    return (
      <div className="footer">
-        <p>Bankai Software 2020 (wersja testowa aplikacji)</p>
+        <p>Menui (wersja testowa aplikacji)</p>
      </div>
    );
  }
--- a/src/config.js
+++ b/src/config.js
@@ -1,4 +1,5 @@
-export const backend = "https://menui.azurewebsites.net/";
+/* export const backend = "https://menui.azurewebsites.net/"; */
+export const backend = "http://localhost:4000/";

 export const restaurantTypes = [
    "afrykańska",