home screen changes (info button, appstore and google play buttons)

2020-10-21 19:54:51 +02:00
parent e488827335
commit f5f758dbdc
11 changed files with 208 additions and 68 deletions
--- a/src/App.js
+++ b/src/App.js
@@ -24,6 +24,7 @@ import EditRestaurant from "./components/Dialogs/EditRestaurant";
 import NewDish from "./components/Dialogs/NewDish";
 import EditDish from "./components/Dialogs/EditDish";
 import Dish from "./components/Dialogs/Dish";
+import HomeScreen from "./components/Output/HomeScreen";

 const theme = createMuiTheme({
  palette: {
@@ -57,11 +58,7 @@ function App(props) {
            <div className="main-container">
              <Switch>
                <Route exact path="/">
-                  <LogoMain />
-                  <SearchPanel />
-                  <p className="darkParagraph">
-                    Sprawdź co serwuje Twoja ulubiona restauracja.
-                  </p>
+                 <HomeScreen/>
                </Route>
                <Route path="/results">
                  <LogoMain />
--- a/src/App.scss
+++ b/src/App.scss
@@ -10,6 +10,7 @@
@import "./styles/NewRestaurant.scss";
@import "./styles/EditRestaurant.scss";
@import "./styles/Dish.scss";
+@import "./styles/Home.scss";

 .App {
  background-image: url("./public/bg_tile.jpg");
--- a/src/components/Dialogs/NewRestaurant.js
+++ b/src/components/Dialogs/NewRestaurant.js
@@ -24,8 +24,12 @@ import { useSelector, useDispatch } from "react-redux";
 import { notification, refreshUserData } from "../../actions";
 import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import InputWorkingHours from "../Input/InputWorkingHours";
-import InputWorkingHoursSingle from "../Input/InputWorkingHoursSingle";
-import { backend } from "../../config";
+import InputLunchMenuHours from "../Input/InputLunchMenuHours";
+import { backend, restaurantTypes } from "../../config";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";
 // ICONS
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
@@ -84,6 +88,24 @@ const useStyles = makeStyles((theme) => ({
      color: "#bbbbbb",
    },
  },
+  formControl: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    minWidth: 100,
+    maxHeight: 400,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiSelect-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
 }));

 export default function NewRestaurant() {
@@ -97,7 +119,7 @@ export default function NewRestaurant() {
    adress: "",
    coordinates: [52.354293, 19.42377],
    placesId: "",
-    type: "",
+    type: "polska",
    imgUrl: "",
    workingHours: {
      pn: "8:00 - 22:00",
@@ -121,7 +143,6 @@ export default function NewRestaurant() {
    cityError: false,
    adressError: false,
    descriptionError: false,
-    typeError: false,
    charLeft: 400,
  };
  const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
@@ -140,6 +161,10 @@ export default function NewRestaurant() {
  const history = useHistory();
  const token = useSelector((state) => state.data.userData.jwt);

+  const availableTypes = restaurantTypes.map((type) => {
+    return <MenuItem key={type} value={type}>{type}</MenuItem>
+  });
+
  // HANDLERS

  const sendForm = () => {
@@ -244,7 +269,6 @@ export default function NewRestaurant() {
      nameValid: validator.isLength(state.name, { min: 1, max: 40 }),
      cityValid: validator.isLength(state.city, { min: 1, max: 40 }),
      adressValid: validator.isLength(state.name, { min: 1, max: 40 }),
-      typeValid: validator.isLength(state.type, { min: 1, max: 40 }),
      descriptionValid: validator.isLength(state.description, {
        min: 1,
        max: 400,
@@ -254,7 +278,6 @@ export default function NewRestaurant() {
      ...state,
      nameError: !validation.nameValid,
      cityError: !validation.cityValid,
-      typeError: !validation.typeValid,
      adressError: !validation.adressValid,
      descriptionError: !validation.descriptionValid,
    });
@@ -263,8 +286,7 @@ export default function NewRestaurant() {
      validation.nameValid &&
      validation.cityValid &&
      validation.adressValid &&
-      validation.descriptionValid &&
-      validation.typeValid
+      validation.descriptionValid
    );
  };

@@ -320,25 +342,23 @@ export default function NewRestaurant() {
                />
              </div>
              <div className="newRestaurant-content-fullwidth">
-                <TextField
-                  className={styles.textInputFullWidth}
-                  fullWidth
-                  value={state.type}
-                  error={state.typeError}
-                  label="Kuchnia"
-                  placeholder="np. Meksykańska"
+              <FormControl
                variant="outlined"
-                  onChange={(event) =>
-                    setState({ ...state, type: event.target.value })
-                  }
-                  InputProps={{
-                    startAdornment: (
-                      <InputAdornment position="start">
-                        <FastfoodIcon color="primary" />
-                      </InputAdornment>
-                    ),
-                  }}
-                />
+                required
+                fullWidth
+                className={styles.formControl}
+              >
+                <InputLabel id="category-select">Kuchnia</InputLabel>
+                <Select
+                  labelId="category-select"
+                  id="category"
+                  value={state.type}
+                  required
+                  onChange={(event) => setState({ ...state, type: event.target.value })}
+                >
+                  {availableTypes}
+                </Select>
+              </FormControl>
              </div>
              <div className="newRestaurant-content">
                <TextField
@@ -387,7 +407,7 @@ export default function NewRestaurant() {
                />
                 <div className="newRestaurant-content-fullwidth">
                 <div className="workingHours-container" style={{ marginTop: 14 }}>
-                <InputWorkingHoursSingle nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)} day="Lunch hours" /></div>
+                <InputLunchMenuHours nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)}/></div>
              </div>
                <div className="newRestaurant-content-fullwidth">
                  <TextField
--- a/src/components/EditRestaurant/EditRestaurantInfo.js
+++ b/src/components/EditRestaurant/EditRestaurantInfo.js
@@ -13,7 +13,6 @@ import InstagramIcon from "@material-ui/icons/Instagram";
 import LanguageIcon from "@material-ui/icons/Language";
 import FastfoodIcon from "@material-ui/icons/Fastfood";
 import LocationCityIcon from "@material-ui/icons/LocationCity";
-import InputWorkingHoursSingle from "../Input/InputWorkingHoursSingle";
 import Divider from "@material-ui/core/Divider";
 import Link from "@material-ui/core/Link";
 import { decodeTags } from "../../Services";
@@ -24,8 +23,12 @@ import { showBackdrop, hideBackdrop } from "../../actions/toggles.js";
 import { prepareTags } from "../../Services.js";
 import axios from "axios";
 import PasswordConfirmation from "../Dialogs/PasswordConfirmation";
-import { backend } from "../../config";
+import { backend, restaurantTypes } from "../../config";
 import InputLunchMenuHours from "../Input/InputLunchMenuHours";
+import MenuItem from "@material-ui/core/MenuItem";
+import FormControl from "@material-ui/core/FormControl";
+import Select from "@material-ui/core/Select";
+import InputLabel from "@material-ui/core/InputLabel";

 const useStyles = makeStyles((theme) => ({
  textInput: {
@@ -53,6 +56,24 @@ const useStyles = makeStyles((theme) => ({
  link: {
    cursor: "pointer",
  },
+  formControl: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+    minWidth: 100,
+    maxHeight: 400,
+    "& .MuiInputBase-root": {
+      color: "#bbbbbb",
+    },
+    "$ .MuiSelect-root": {
+      color: "#bbbbbb",
+    },
+    "& .MuiInputLabel-root": {
+      color: "#bbbbbb",
+    },
+  },
+  selectEmpty: {
+    marginTop: theme.spacing(2),
+  },
 }));

 const calculateCharLeft = (from) => {
@@ -130,6 +151,10 @@ export default function EditRestaurantInfo(props) {
    );
  };

+  const availableTypes = restaurantTypes.map((type) => {
+    return <MenuItem key={type} value={type}>{type}</MenuItem>
+  });
+
  const cancelChanges = () => {
    setState(initialState);
  };
@@ -243,28 +268,24 @@ export default function EditRestaurantInfo(props) {
          />
        </div>
        <div className="editRestaurant-fullWidth">
-          <TextField
-            className={styles.textInputFullWidth}
-            fullWidth
-            value={state.type}
-            error={state.typeError}
-            onChange={(event) =>
-              setState({ ...state, type: event.target.value })
-            }
-            InputLabelProps={{ shrink: true }}
-            InputProps={{
-              startAdornment: (
-                <InputAdornment position="start">
-                  <FastfoodIcon color="primary" />
-                </InputAdornment>
-              ),
-            }}
-            label="Kuchnia"
-            placeholder="np. Meksykańska"
+        <FormControl
                variant="outlined"
-          />
+                required
+                fullWidth
+                className={styles.formControl}
+              >
+                <InputLabel id="category-select">Kuchnia</InputLabel>
+                <Select
+                  labelId="category-select"
+                  id="category"
+                  value={state.type}
+                  required
+                  onChange={(event) => setState({ ...state, type: event.target.value })}
+                >
+                  {availableTypes}
+                </Select>
+              </FormControl>
        </div>
-
        <TextField
          className={styles.textInput}
          value={state.city}
@@ -341,10 +362,6 @@ export default function EditRestaurantInfo(props) {
          setHours={(hours) => setState({ ...state, workingHours: hours })}
          hours={state.workingHours}
        />
-        <div className="newRestaurant-content-fullwidth">
-                 <div className="workingHours-container" style={{ marginTop: 14 }}>
-                <InputWorkingHoursSingle nieczynne={!state.lunchHours} hours={state.lunchHours} changeValue={(value) => setLunchHours(value)} day="Lunch hours" /></div>
-              </div>
        <div className="editRestaurant-sectiontitle">
          <h4>Dane kontaktowe</h4>
          <Divider />
@@ -427,9 +444,9 @@ export default function EditRestaurantInfo(props) {
          <h4>Lunch menu</h4>
          <Divider />
          <InputLunchMenuHours
-            off={!state.lunchHours}
+            nieczynne={!state.lunchHours}
            hours={state.lunchHours}
-            changeValue={(value) => setState({ ...state, lunchHours: value })}
+            changeValue={setLunchHours}
          />
        </div>
        <div className="editRestaurant-sectiontitle">
--- a/src/components/Input/InputLunchMenuHours.js
+++ b/src/components/Input/InputLunchMenuHours.js
@@ -27,17 +27,17 @@ export default function InputWorkingHoursSingle(props) {
    props.changeValue(event.target.value);
  };
  const handleCheckbox = () => {
-    if (!props.off) {
+    if (!props.nieczynne) {
      props.changeValue("");
    } else {
-      props.changeValue("13:00 - 15:00");
+      props.changeValue("12:30 - 13:30");
    }
  };

  const classes = useStyles();
  return (
    <div className="workingHours-day">
-      <h5>Lunch menu</h5>
+      <h5>Lunch hours</h5>
      <TextField
        value={props.hours}
        variant="outlined"
@@ -48,9 +48,13 @@ export default function InputWorkingHoursSingle(props) {
      <FormControlLabel
        className={classes.checkbox}
        control={
-          <Checkbox onClick={handleCheckbox} checked={props.off} name="brak" />
+          <Checkbox
+            onClick={handleCheckbox}
+            checked={props.nieczynne}
+            name="nieczynne"
+          />
        }
-        label="Wyłącz"
+        label="Brak"
      />
    </div>
  );
--- a/src/components/Output/HomeScreen.js
+++ b/src/components/Output/HomeScreen.js
@@ -0,0 +1,29 @@
+import React from 'react';
+import LogoMain from "../Output/logoMain";
+import SearchPanel from "../Input/SearchPanel";
+import HelpIcon from '@material-ui/icons/Help';
+import appstore from "../../public/appstore.png";
+import googleplay from "../../public/googleplay.png";
+
+export default function HomeScreen() {
+    return <div className="hs">
+        <div className="hs-top">
+            <h5>Dowiedz się czym właściwie jest Menui</h5>
+            <div className="hs-top-icon"><HelpIcon/></div>
+        </div>
+        <div className="hs-center">
+            <LogoMain />
+            <SearchPanel />
+            <p className="darkParagraph">
+                Sprawdź co serwuje Twoja ulubiona restauracja.
+            </p>
+        </div>
+        <div className="hs-bottom">
+            <h4>Pobierz na telefon</h4>
+            <div>
+                <img className="hs-bottom-icon" src={appstore} alt="Get Menui from App Store" />
+                <img className="hs-bottom-icon" src={googleplay} alt="Get Menui from Google Play"/>
+            </div>
+        </div>
+    </div>
+}
--- a/src/config.js
+++ b/src/config.js
@@ -1 +1,37 @@
 export const backend = "https://menui.azurewebsites.net/";
+
+export const restaurantTypes = [
+    "afrykańska",
+    "arabska",
+    "bałkańska",
+    "belgijska", 
+    "brytyjska",
+    "chińska",
+    "chorwacka",
+    "czeska",
+    "dietetyczna",
+    "francuska",
+    "grecka",
+    "gruzińska",
+    "hiszpańska",
+    "indyjska",
+    "irlandzka",
+    "japońska",
+    "koreańska",
+    "koszerna",
+    "meksykańska",
+    "międzynarodowa",
+    "polska",
+    "rosyjska",
+    "skandynawska",
+    "śródziemnomorska",
+    "tajska",
+    "turecka",
+    "ukraińska",
+    "węgierska",
+    "wietnamska",
+    "włoska",
+    "żydowska",
+    "mieszane",
+    "inna",
+  ];
--- a/src/index.js
+++ b/src/index.js
@@ -20,7 +20,7 @@ const store = createStore(
  rootReducer(history),
  compose(
    applyMiddleware(routerMiddleware(history), thunk),
-    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() : f => f
  )
 );

--- a/src/public/appstore.png
+++ b/src/public/appstore.png
--- a/src/public/googleplay.png
+++ b/src/public/googleplay.png
--- a/src/styles/Home.scss
+++ b/src/styles/Home.scss
@@ -0,0 +1,36 @@
+.hs {
+  height: 100%;
+  display: flex;
+  flex-flow: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.hs-top {
+  display: flex;
+  cursor: pointer;
+  width: fit-content;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.315);
+  color: rgb(184, 184, 184);
+  border-radius: 8px;
+  h5 {
+    font-weight: 500;
+    margin-left: 18px;
+  }
+  transition: background-color 0.2s;
+}
+
+.hs-top:hover {
+  background-color: rgba(71, 71, 71, 0.315);
+}
+
+.hs-top-icon {
+  margin: 18px;
+}
+
+.hs-bottom-icon {
+  height: 3rem;
+  margin: 10px;
+  cursor: pointer;
+}