387 lines
12 KiB
JavaScript
387 lines
12 KiB
JavaScript
import React, { useState } from "react";
|
|
import { makeStyles } from "@material-ui/core/styles";
|
|
import DialogTitle from "@material-ui/core/DialogTitle";
|
|
import DialogContent from "@material-ui/core/DialogContent";
|
|
import Dialog from "@material-ui/core/Dialog";
|
|
import Divider from "@material-ui/core/Divider";
|
|
import ButtonSecondary from "../Input/ButtonSecondary";
|
|
import IconButton from "@material-ui/core/IconButton";
|
|
import TextField from "@material-ui/core/TextField";
|
|
import CloseIcon from "@material-ui/icons/Close";
|
|
import { useSelector, useDispatch } from "react-redux";
|
|
import { hideNewRestaurantDialog } from "../../actions/toggles";
|
|
import Stepper from "@material-ui/core/Stepper";
|
|
import Step from "@material-ui/core/Step";
|
|
import StepLabel from "@material-ui/core/StepLabel";
|
|
import Paper from "@material-ui/core/Paper";
|
|
import Autocomplete from "@material-ui/lab/Autocomplete";
|
|
import InputAdornment from "@material-ui/core/InputAdornment";
|
|
import ImageUpload from "../Input/ImageUpload";
|
|
import validator from "validator";
|
|
// ICONS
|
|
import FastfoodIcon from "@material-ui/icons/Fastfood";
|
|
import LocationCityIcon from "@material-ui/icons/LocationCity";
|
|
import PhoneIcon from "@material-ui/icons/Phone";
|
|
import FacebookIcon from "@material-ui/icons/Facebook";
|
|
import TwitterIcon from "@material-ui/icons/Twitter";
|
|
import LanguageIcon from "@material-ui/icons/Language";
|
|
import ButtonPrimary from "../Input/ButtonPrimary";
|
|
|
|
// SETUP
|
|
|
|
const useStyles = makeStyles((theme) => ({
|
|
root: {
|
|
textAlign: "center",
|
|
"& .MuiPaper-root": {
|
|
minWidth: "30%",
|
|
backgroundColor: "#262626",
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
closeButton: {
|
|
color: "#bbbbbb",
|
|
position: "absolute",
|
|
right: theme.spacing(1),
|
|
top: theme.spacing(1),
|
|
},
|
|
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",
|
|
},
|
|
},
|
|
timePicker: {
|
|
margin: theme.spacing(2),
|
|
"& .MuiInputBase-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiInputLabel-root": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
stepLabel: {
|
|
"& .MuiStepLabel-label": {
|
|
color: "#bbbbbb",
|
|
},
|
|
"& .MuiStepLabel-active": {
|
|
color: "#bbbbbb",
|
|
},
|
|
},
|
|
}));
|
|
|
|
export default function NewRestaurant() {
|
|
const initialState = {
|
|
name: "",
|
|
city: "",
|
|
adress: "",
|
|
hoursFrom: "07:00",
|
|
hoursTo: "23:00",
|
|
description: "",
|
|
tags: [],
|
|
phone: "",
|
|
facebook: "",
|
|
twitter: "",
|
|
www: "",
|
|
nameError: false,
|
|
cityError: false,
|
|
adressError: false,
|
|
};
|
|
const steps = ["Informacje", "Zdjęcie", "Lokalizacja"];
|
|
const [state, setState] = useState(initialState);
|
|
const [activeStep, setActiveStep] = React.useState(0);
|
|
const styles = useStyles();
|
|
const dialogOpen = useSelector((state) => state.data.dialogs.newRestaurant);
|
|
const dispatch = useDispatch();
|
|
const availableTags = [
|
|
"Płatność kartą",
|
|
"Lubimy zwierzaki",
|
|
"Bezglutenowe",
|
|
"Wegańskie",
|
|
"Wegetariańskie",
|
|
"Podajemy alkohol",
|
|
"Dowozimy",
|
|
];
|
|
|
|
// HANDLERS
|
|
|
|
const handleNextButton = () => {
|
|
if (activeStep === 0) {
|
|
if (validateForm()) {
|
|
setActiveStep(1);
|
|
}
|
|
}
|
|
};
|
|
|
|
const handlePreviousButton = () => {
|
|
setActiveStep(activeStep - 1);
|
|
console.log(activeStep);
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const validation = {
|
|
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 }),
|
|
};
|
|
setState({
|
|
...state,
|
|
nameError: !validation.nameValid,
|
|
cityError: !validation.cityValid,
|
|
adressError: !validation.adressValid,
|
|
});
|
|
|
|
return (
|
|
validation.nameValid && validation.cityValid && validation.adressValid
|
|
);
|
|
};
|
|
|
|
// COMPONENTS
|
|
|
|
return (
|
|
<div>
|
|
<Dialog
|
|
className={styles.root}
|
|
open={dialogOpen}
|
|
aria-labelledby="newRestaurant-title"
|
|
>
|
|
<DialogTitle id="newRestaurant-title">Dodaj Lokal</DialogTitle>
|
|
<IconButton
|
|
className={styles.closeButton}
|
|
onClick={() => dispatch(hideNewRestaurantDialog())}
|
|
aria-label="close"
|
|
>
|
|
<CloseIcon />
|
|
</IconButton>
|
|
<Divider />
|
|
<DialogContent>
|
|
<Stepper activeStep={activeStep} alternativeLabel>
|
|
{steps.map((label) => (
|
|
<Step key={label}>
|
|
<StepLabel className={styles.stepLabel}>{label}</StepLabel>
|
|
</Step>
|
|
))}
|
|
</Stepper>
|
|
|
|
{activeStep === 0 && (
|
|
<Paper variant="outlined">
|
|
<div className="newRestaurant-content-fullwidth">
|
|
<TextField
|
|
className={styles.textInputFullWidth}
|
|
fullWidth
|
|
required
|
|
error={state.nameError}
|
|
value={state.name}
|
|
label="Nazwa lokalu"
|
|
variant="outlined"
|
|
onChange={(event) =>
|
|
setState({ ...state, name: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<FastfoodIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
<div className="newRestaurant-content">
|
|
<TextField
|
|
className={styles.textInput}
|
|
required
|
|
label="Miasto"
|
|
error={state.cityError}
|
|
value={state.city}
|
|
variant="outlined"
|
|
onChange={(event) =>
|
|
setState({ ...state, city: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LocationCityIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
required
|
|
label="Adres"
|
|
variant="outlined"
|
|
error={state.adressError}
|
|
value={state.adress}
|
|
onChange={(event) =>
|
|
setState({ ...state, adress: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LocationCityIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
label="Otwarcie"
|
|
type="time"
|
|
onChange={(event) =>
|
|
setState({ ...state, hoursFrom: event.target.value })
|
|
}
|
|
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
|
|
className={styles.textInputFullWidth}
|
|
fullWidth
|
|
label="Opis"
|
|
value={state.description}
|
|
onChange={(event) =>
|
|
setState({ ...state, description: event.target.value })
|
|
}
|
|
multiline
|
|
rows={3}
|
|
variant="outlined"
|
|
/>
|
|
<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="Dodaj tagi"
|
|
/>
|
|
)}
|
|
/>
|
|
</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.facebook}
|
|
onChange={(event) =>
|
|
setState({ ...state, facebook: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<FacebookIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
label="Twitter"
|
|
variant="outlined"
|
|
value={state.twitter}
|
|
onChange={(event) =>
|
|
setState({ ...state, twitter: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<TwitterIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
<TextField
|
|
className={styles.textInput}
|
|
label="www"
|
|
variant="outlined"
|
|
value={state.www}
|
|
onChange={(event) =>
|
|
setState({ ...state, www: event.target.value })
|
|
}
|
|
InputProps={{
|
|
startAdornment: (
|
|
<InputAdornment position="start">
|
|
<LanguageIcon color="primary" />
|
|
</InputAdornment>
|
|
),
|
|
}}
|
|
/>
|
|
</div>
|
|
</Paper>
|
|
)}
|
|
{activeStep === 1 && (
|
|
<Paper>
|
|
<h4>Dodaj zdjęcie lokalu.</h4>
|
|
<ImageUpload />
|
|
</Paper>
|
|
)}
|
|
{activeStep !== 0 && (
|
|
<ButtonPrimary onClick={handlePreviousButton} text="Cofnij" />
|
|
)}
|
|
<ButtonSecondary
|
|
onClick={handleNextButton}
|
|
text={activeStep === 2 ? "Dodaj lokal" : "Dalej"}
|
|
/>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
);
|
|
}
|