123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443 |
- import React, {useState} from "react";
- import axios from "axios";
- import DateFnsUtils from '@date-io/date-fns';
- import {nb} from 'date-fns/locale'
- import {DateTimePicker, MuiPickersUtilsProvider} from '@material-ui/pickers';
- import {makeStyles} from '@material-ui/core/styles';
- import ReCAPTCHA from "react-google-recaptcha";
- import {
- Button,
- ButtonGroup,
- Container,
- Checkbox,
- CssBaseline,
- Dialog,
- DialogTitle,
- DialogContent,
- DialogActions,
- FormControl,
- FormControlLabel,
- FormGroup,
- Grid,
- IconButton,
- Paper,
- TextField,
- Typography,
- } from '@material-ui/core';
- import {
- Add,
- Remove,
- } from '@material-ui/icons'
- const useStyles = makeStyles((theme) => ({
- fieldset: {
- //border: 'none',
- marginBottom: theme.spacing(3),
- paddingBottom: theme.spacing(3),
- },
- form: {
- width: '100%',
- marginTop: theme.spacing(1),
- flexGrow: 1,
- },
- paper: {
- padding: theme.spacing(2),
- alignItems: 'center',
- display: 'flex',
- flexDirection: 'column',
- }
- }));
- const SubmitButton = (props) => {
- const [isApproved, setIsApproved] = useState(false);
- const recaptchaRef = React.createRef();
- const onChange = (value) => {
- console.log("Captcha value:", value);
- setIsApproved(true);
- }
- return (
- <React.Fragment>
- <center>
- <ReCAPTCHA
- onChange={onChange}
- onExpired={() => isApproved ? setIsApproved(false) : false}
- ref={recaptchaRef}
- sitekey={"6LfRxgAVAAAAALlMOyD5h_a6gvWulxGqCC5gKJvd"}
- size={"invisible"}
- />
- </center>
- <Button
- color={"primary"}
- variant={"contained"}
- fullWidth
- type={"submit"}
- onClick={(e) => {
- recaptchaRef.current.execute();
- }}
- >Send skjema</Button>
- </React.Fragment>
- );
- }
- const RegForm = (props) => {
- const classes = useStyles();
- const [inputs, updateInputs] = useState({
- dates: [{date: new Date(), duration: 0}],
- });
- const inputHandler = (event) => {
- const target = event.target
- updateInputs((prevState) => ({...prevState, [target.id]: target.value}));
- };
- const inputCategoryHandler = (type, event, category) => {
- const keys = Object.keys(inputs).filter(idx => idx == type);
- let arr = keys.length == 0 ? [] : inputs[keys[0]];
- if (event.target.checked)
- arr.push(category);
- else
- arr = arr.filter(item => item.id != category.id);
- updateInputs((prevState) => ({...prevState, [type]: arr}));
- }
- const dateAddHandler = (idx) => {
- inputs.dates.splice(idx, 0, {...inputs.dates[idx]});
- updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
- }
- const dateRemoveHandler = (idx) => {
- if (inputs.dates.length == 1)
- return;
- if (!inputs.dates[idx])
- return;
- updateInputs(prevState => ({...prevState, dates: [...inputs.dates.slice(0, idx), ...inputs.dates.slice(idx+1)]}));
- }
- const dateSaveHandler = (idx, e) => {
- if (!inputs.dates[idx])
- return;
- inputs.dates[idx].date = e;
- updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
- }
- const dateDurationSaveHandler = (idx, e) => {
- if (!inputs.dates[idx])
- return;
-
- const target = e.target;
- inputs.dates[idx].duration = parseInt(target.value, 10);
- updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
- }
- const submitHandler = (event) => {
- event.PreventDefault();
- console.log(event);
- }
- return (
- <Container component="main" maxWidth="md">
- <CssBaseline />
- <Paper className={classes.paper}>
- <form className={classes.form}>
- <FormControl component={"fieldset"} className={classes.fieldset}>
- <Typography component={"legend"} variant={"h5"}>
- Om arrangøren
- </Typography>
- <Grid container spacing={3}>
- <Grid item xs={12} sm={7} md={8}>
- <TextField
- id={"organizer"}
- label={"Navn på arrangør"}
- onChange={inputHandler}
- required
- fullWidth
- autoFocus
- />
- </Grid>
- <Grid item xs={12} sm={5} md={4}>
- <TextField
- id={"organization_number"}
- label={"Org.nummer"}
- onChange={inputHandler}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- id={"contact_name"}
- label={"Kontakt person"}
- onChange={inputHandler}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- id={"contact_email"}
- label={"Epostadresse"}
- onChange={inputHandler}
- type={"email"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- id={"contact_phone"}
- label={"Telefonnummer"}
- onChange={inputHandler}
- type={"tel"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- id={"contact_homepage"}
- label={"Hjemmesideadresse"}
- placeholder={"https:// ...."}
- required
- fullWidth
- />
- </Grid>
- </Grid>
- </FormControl>
- <FormControl component={"fieldset"} className={classes.fieldset}>
- <Typography component={"legend"} variant={"h5"}>
- Om arrangementet
- </Typography>
- <Grid container spacing={3}>
- <Grid item xs={12}>
- <TextField
- id={"event_name"}
- label={"Navn på arrangement"}
- onChange={inputHandler}
- required
- fullWidth
- />
- </Grid>
- {inputs.dates.map((date, idx) => (
- <React.Fragment key={idx}>
- <Grid item xs={6}>
- <MuiPickersUtilsProvider utils={DateFnsUtils} locale={nb}>
- <DateTimePicker
- fullWidth
- format={"do MMMM y HH:mm (h:mm a)"}
- ampm={false}
- value={date.date}
- onChange={e => dateSaveHandler(idx, e)}
- margin={"normal"}
- />
- </MuiPickersUtilsProvider>
- </Grid>
- <Grid item xs={4}>
- <TextField
- id={"event_duration"}
- label={"Varighet (timer)"}
- onChange={e => dateDurationSaveHandler(idx, e)}
- type={"number"}
- placeholder={"antall timer"}
- value={date.duration}
- fullWidth
- />
- </Grid>
- <Grid item xs={1}>
- <IconButton onClick={() => dateAddHandler(idx)}><Add /></IconButton>
- </Grid>
- <Grid item xs={1}>
- <IconButton onClick={() => dateRemoveHandler(idx)}><Remove /></IconButton>
- </Grid>
- </React.Fragment>
- ))}
- <Grid item xs={12} sm={8}>
- <TextField
- id={'event_location'}
- label={"Sted"}
- onChange={inputHandler}
- placeholder={"Hvor skjer arrangementet?"}
- fullWidth
- required
- />
- </Grid>
- <Grid item xs={12} sm={4}>
- <TextField
- id={"event_capacity"}
- label={"Kapasitet"}
- placeholder={"Antall personer"}
- onChange={inputHandler}
- type={"number"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12}>
- <TextField
- id={"event_description"}
- label={"Beskrivelse av arrangement"}
- onChange={inputHandler}
- placeholder={"Forklar detaljert om ditt arrangement - dette skal besøkende lese!"}
- multiline
- fullWidth
- required
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- id="event_photo"
- label={"Photo-link til arrangement"}
- onChange={inputHandler}
- placeholder={"Kan for eks. være en bilde-fil eller mappe med bilder i Dropbox."}
- fullWidth
- required
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <TextField
- id="event_booking"
- label={"Link til booking"}
- onChange={inputHandler}
- placeholder={"https:// ..."}
- fullWidth
- required
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <CategorySelection
- cid={"5ed0f77a42f75848a95ebf03"}
- category="Kategorier"
- name="categories"
- selected={inputs.categories || []}
- inputCategoryHandler={inputCategoryHandler}
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <CategorySelection
- cid={"5ed10cffd2b21cfb3b269088"}
- category="Målgrupper"
- name="audiences"
- selected={inputs.audiences || []}
- inputCategoryHandler={inputCategoryHandler}
- />
- </Grid>
- </Grid>
- </FormControl>
- <Grid container justify={"center"}>
- <Grid item xs={8}>
- <SubmitButton text={"Send skjema"}/>
- </Grid>
- </Grid>
- </form>
- </Paper>
- </Container>
- )
- }
- const CategorySelection = (props) => {
- const [error, setError] = useState(null);
- const [isLoading, setIsLoading] = useState(true);
- const [availableItems, setAvailableItems] = useState([]);
- React.useEffect(() => {
- axios.get("https://magy.giaever.online/tff/api/webflow_items?cid=" + props.cid)
- .then((response) => {
- const data = response.data['hydra:member'];
- setAvailableItems(response.data['hydra:member']);
- })
- .catch((error) => {
- setError(error);
- })
- .then(() => {
- setIsLoading(false);
- });
- }, []);
- return (
- <React.Fragment>
- <DialogCancelOk
- buttonDesc={isLoading ? `Laster ${props.category}` : `Velg ${props.category}`}
- buttonDisabled={isLoading}
- dialogTitle={`Velg ${props.category}`}
- >
- {isLoading ?
- <p>
- Laster...
- </p>
- :
- <FormGroup>
- {availableItems.map(item => <FormControlLabel
- key={item.id}
- control={
- <Checkbox
- checked={props.selected.filter(sitem => sitem.id == item.id).length > 0}
- value={item.id}
- onChange={() => props.inputCategoryHandler(props.name, event, item)}
- />
- }
- label={item.name}
- />
- )}
- </FormGroup>
- }
- </DialogCancelOk>
- <ul>{props.selected.map(item => <li key={item.id}>{item.name}</li>)}</ul>
- </React.Fragment>
- )
- }
- const DialogCancelOk = (props) => {
- const [open, setOpen] = useState(false);
- const handleClickOpen = () => {
- setOpen(true);
- };
- const handleClickClose = () => {
- setOpen(false);
- };
- return (
- <div>
- <Button
- fullWidth
- disabled={props.buttonDisabled}
- color={"secondary"}
- variant={props.buttonDisabled ? "outlined" : "contained"}
- onClick={handleClickOpen}>
- {props.buttonDesc}
- </Button>
- <Dialog
- disableBackdropClick
- disableEscapeKeyDown
- open={open}
- onClose={handleClickClose}
- >
- <DialogTitle>{props.dialogTitle}</DialogTitle>
- <DialogContent>
- {props.children}
- </DialogContent>
- <DialogActions>
- <Button onClick={handleClickClose} color={"primary"}>
- Ferdig
- </Button>
- </DialogActions>
- </Dialog>
- </div>
- )
- }
- export default RegForm;
|