123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- import React, {useState} from "react";
- import axios from "axios";
- import {
- Button,
- Container,
- CssBaseline,
- Dialog,
- DialogTitle,
- DialogContent,
- DialogActions,
- Grid,
- Paper,
- TextField,
- Typography,
- } from '@material-ui/core';
- import {makeStyles} from '@material-ui/core/styles';
- const useStyles = makeStyles((theme) => ({
- fieldset: {
- border: 'none',
- //borderBottom: '1px solid',
- },
- form: {
- width: '100%',
- marginTop: theme.spacing(1),
- flexGrow: 1,
- },
- paper: {
- padding: theme.spacing(2),
- alignItems: 'center',
- display: 'flex',
- flexDirection: 'column',
- }
- }));
- const RegForm = (props) => {
- const classes = useStyles();
- return (
- <Container component="main" maxWidth="md">
- <CssBaseline />
- <Paper className={classes.paper}>
- <Typography component={"h1"} variant={"h5"}>
- Registrer ditt event
- </Typography>
- <form className={classes.form} noValidate>
- <fieldset className={classes.fieldset}>
- <Grid container spacing={3}>
- <Grid item xs={12}>
- <TextField
- id={"organizer"}
- label={"Arrangør"}
- name={"organizer"}
- variant={"outlined"}
- margin={"normal"}
- required
- fullWidth
- autoFocus
- />
- </Grid>
- <Grid item xs={12} sm={4}>
- <TextField
- id={"contact_name"}
- label={"Kontakt person"}
- name={"contact_name"}
- variant={"outlined"}
- margin={"normal"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={4}>
- <TextField
- id={"contact_email"}
- label={"Epostadresse"}
- name={"contact_email"}
- variant={"outlined"}
- margin={"normal"}
- type={"email"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={4}>
- <TextField
- id={"contact_phone"}
- label={"Telefonnummer"}
- name={"contact_phone"}
- variant={"outlined"}
- margin={"normal"}
- type={"tel"}
- required
- fullWidth
- />
- </Grid>
- </Grid>
- </fieldset>
- <fieldset className={classes.fieldset}>
- <legend>Arrangement</legend>
- <Grid container spacing={3}>
- <Grid item xs={12} sm={8}>
- <TextField
- id={"event_name"}
- label={"Navn på arrangement"}
- name={"event_name"}
- variant={"outlined"}
- margin={"normal"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={4}>
- <TextField
- id={"event_capacity"}
- label={"Kapasitet"}
- name={"event_capacity"}
- variant={"outlined"}
- margin={"normal"}
- type={"number"}
- required
- fullWidth
- />
- </Grid>
- <Grid item xs={12} sm={6}>
- <Categories cid={"5ed0f77a42f75848a95ebf03"} />
- </Grid>
- <Grid item xs={12} sm={6}>
- </Grid>
- </Grid>
- </fieldset>
- </form>
- </Paper>
- </Container>
- )
- }
- const Categories = (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(data);
- })
- .catch((error) => {
- console.log(error);
- setError(error);
- })
- .then(() => {
- console.log("DONE");
- setIsLoading(false);
- });
- }, []);
- return (
- <DialogCancelOk
- buttonDesc={isLoading ? "Laster kategorier" : "Velg kategori"}
- buttonDisabled={isLoading}
- dialogTitle={"Velg kategori(er)"}
- >
- {isLoading ?
- <p>Laster...</p>
- :
- <ul>{availableItems.map(item => <li key={item.id}>{item.name}</li>)}</ul>
- }
- </DialogCancelOk>
- )
- }
- 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={"outlined"}
- 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"}>
- Avbryt
- </Button>
- <Button onClick={handleClickClose} color={"primary"}>
- Ferdig
- </Button>
- </DialogActions>
- </Dialog>
- </div>
- )
- }
- export default RegForm;
|