Add Restaurant work
This commit is contained in:
@@ -9,13 +9,26 @@ 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 validator from "validator";
|
||||
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";
|
||||
// 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";
|
||||
|
||||
const useStyles = makeStyles((theme) => ({
|
||||
root: {
|
||||
textAlign: "center",
|
||||
"& .MuiPaper-root": {
|
||||
minWidth: "30%",
|
||||
backgroundColor: "#262626",
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
@@ -27,24 +40,66 @@ const useStyles = makeStyles((theme) => ({
|
||||
top: theme.spacing(1),
|
||||
},
|
||||
textInput: {
|
||||
marginTop: "20px",
|
||||
marginBottom: "10px",
|
||||
width: "90%",
|
||||
margin: theme.spacing(2),
|
||||
"& .MuiInputBase-root": {
|
||||
color: "#01c3a9",
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
"& .MuiInputLabel-root": {
|
||||
color: "#bbbbbb",
|
||||
},
|
||||
},
|
||||
link: {
|
||||
fontSize: "0.9rem",
|
||||
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: "",
|
||||
hoursFrom: "",
|
||||
hoursTo: "",
|
||||
description: "",
|
||||
};
|
||||
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",
|
||||
];
|
||||
|
||||
return (
|
||||
<div>
|
||||
@@ -53,7 +108,172 @@ export default function NewRestaurant() {
|
||||
open={dialogOpen}
|
||||
aria-labelledby="newRestaurant-title"
|
||||
>
|
||||
<DialogTitle id="newRestaurant-title">Nowy Lokal</DialogTitle>
|
||||
<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>
|
||||
<Paper variant="outlined">
|
||||
<div className="newRestaurant-content">
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
required
|
||||
label="Nazwa lokalu"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
(state.restaurantName = event.target.value)
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<FastfoodIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
required
|
||||
label="Miasto"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
(state.restaurantName = event.target.value)
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<LocationCityIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
label="Otwarcie"
|
||||
type="time"
|
||||
defaultValue="07:00"
|
||||
onChange={(event) => (state.hoursFrom = event.target.value)}
|
||||
variant="outlined"
|
||||
className={styles.timePicker}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
inputProps={{
|
||||
step: 300, // 5 min
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
label="Zamknięcie"
|
||||
type="time"
|
||||
defaultValue="22:00"
|
||||
onChange={(event) => (state.hoursTo = event.target.value)}
|
||||
variant="outlined"
|
||||
className={styles.timePicker}
|
||||
InputLabelProps={{
|
||||
shrink: true,
|
||||
}}
|
||||
inputProps={{
|
||||
step: 300, // 5 min
|
||||
}}
|
||||
/>
|
||||
<div className="newRestaurant-content-fullwidth">
|
||||
<TextField
|
||||
className={styles.textInputFullWidth}
|
||||
fullWidth
|
||||
label="Opis"
|
||||
multiline
|
||||
rows={3}
|
||||
variant="outlined"
|
||||
/>
|
||||
<Autocomplete
|
||||
multiple
|
||||
options={availableTags}
|
||||
renderInput={(params) => (
|
||||
<TextField
|
||||
{...params}
|
||||
className={styles.textInputFullWidth}
|
||||
variant="outlined"
|
||||
label="Tagi"
|
||||
placeholder="Dodaj tagi"
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</div>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Telefon"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
(state.restaurantName = event.target.value)
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<PhoneIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Facebook"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
(state.restaurantName = event.target.value)
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<FacebookIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="Twitter"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
(state.restaurantName = event.target.value)
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<TwitterIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
<TextField
|
||||
className={styles.textInput}
|
||||
label="www"
|
||||
variant="outlined"
|
||||
onChange={(event) =>
|
||||
(state.restaurantName = event.target.value)
|
||||
}
|
||||
InputProps={{
|
||||
startAdornment: (
|
||||
<InputAdornment position="start">
|
||||
<LanguageIcon color="primary" />
|
||||
</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Paper>
|
||||
<ButtonSecondary text={activeStep === 2 ? "Dodaj lokal" : "Dalej"} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user