|
@@ -16,6 +16,7 @@ import {
|
|
|
Dialog,
|
|
|
DialogTitle,
|
|
|
DialogContent,
|
|
|
+ DialogContentText,
|
|
|
DialogActions,
|
|
|
FormControl,
|
|
|
FormControlLabel,
|
|
@@ -27,6 +28,11 @@ import {
|
|
|
Typography,
|
|
|
} from '@material-ui/core';
|
|
|
|
|
|
+import {
|
|
|
+ Alert,
|
|
|
+ AlertTitle
|
|
|
+} from '@material-ui/lab';
|
|
|
+
|
|
|
import {
|
|
|
Add,
|
|
|
Remove,
|
|
@@ -51,22 +57,78 @@ const useStyles = makeStyles((theme) => ({
|
|
|
}
|
|
|
}));
|
|
|
|
|
|
-const SubmitButton = (props) => {
|
|
|
+const ReCaptchaSubmitButton = (props) => {
|
|
|
|
|
|
- const [isApproved, setIsApproved] = useState(false);
|
|
|
const recaptchaRef = React.createRef();
|
|
|
+ const [response, setResponse] = useState(null);
|
|
|
|
|
|
const onChange = (value) => {
|
|
|
- console.log("Captcha value:", value);
|
|
|
- setIsApproved(true);
|
|
|
+ if (value) {
|
|
|
+ const request = {
|
|
|
+ organizer: props.inputs.organizer || null,
|
|
|
+ organizationNumber: props.inputs.organization_number || null,
|
|
|
+ contactPerson: props.inputs.contact_name || null,
|
|
|
+ contactEmail: props.inputs.contact_email || null,
|
|
|
+ contactPhone: props.inputs.contact_phone || null,
|
|
|
+ websiteUrl: props.inputs.contact_homepage || null,
|
|
|
+ place: props.inputs.event_location || null,
|
|
|
+ capacity: props.inputs.event_capacity || null,
|
|
|
+ happensOn: props.inputs.dates || [],
|
|
|
+ title: props.inputs.event_name || null,
|
|
|
+ image: props.inputs.event_photo || null,
|
|
|
+ description: props.inputs.event_description || null,
|
|
|
+ bookingUrl: props.inputs.event_booking || null,
|
|
|
+ audiences: (props.inputs.audiences || []).map(i => i.id),
|
|
|
+ categories: (props.inputs.categories || []).map(i => i.id),
|
|
|
+ captcha: value,
|
|
|
+ };
|
|
|
+
|
|
|
+ axios.post("https://magy.giaever.online/tff/api/webflow_collection_events", request).then(resp => {
|
|
|
+ setResponse({type: 'success', title: "Takk for ditt bidrag!", description: "Vi ser frem til din deltagelse."});
|
|
|
+ props.clearHandler();
|
|
|
+ }).catch(err => {
|
|
|
+ if (err.response) {
|
|
|
+ setResponse({type: 'error', title: err.response.data['hydra:title'], description: err.response.data['hydra:description']});
|
|
|
+ } else if (err.request)
|
|
|
+ setResponse({type: 'error', title: "En feil oppstod.", description: "Vennligst prøv igjen senere."});
|
|
|
+ else
|
|
|
+ setResponse({type: 'error', title: "En feil oppstod,", description: err.message});
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<React.Fragment>
|
|
|
<center>
|
|
|
+ <Dialog open={response!= null} onClose={() => {
|
|
|
+ setResponse(null);
|
|
|
+ recaptchaRef.current.reset();
|
|
|
+ }}>
|
|
|
+ <DialogContent>
|
|
|
+ <Alert severity={response ? response.type : "info"}>
|
|
|
+ <AlertTitle>{response ? response.title : "unknown title"}</AlertTitle>
|
|
|
+ {response ? (
|
|
|
+ response.type == "error" ?
|
|
|
+ <ul>{response.description.split("\n").map((l, i) => <li key={i}>{l}</li>)}</ul>
|
|
|
+ :
|
|
|
+ response.description
|
|
|
+ )
|
|
|
+ : "this is the body"}
|
|
|
+ </Alert>
|
|
|
+ </DialogContent>
|
|
|
+ <DialogActions>
|
|
|
+ <Button onClick={() => {
|
|
|
+ setResponse(null);
|
|
|
+ recaptchaRef.current.reset();
|
|
|
+ if (response.type != 'error')
|
|
|
+ window.location.reload();
|
|
|
+ }} color="secondary">
|
|
|
+ Ok!
|
|
|
+ </Button>
|
|
|
+ </DialogActions>
|
|
|
+ </Dialog>
|
|
|
<ReCAPTCHA
|
|
|
onChange={onChange}
|
|
|
- onExpired={() => isApproved ? setIsApproved(false) : false}
|
|
|
ref={recaptchaRef}
|
|
|
sitekey={"6LfRxgAVAAAAALlMOyD5h_a6gvWulxGqCC5gKJvd"}
|
|
|
size={"invisible"}
|
|
@@ -78,6 +140,7 @@ const SubmitButton = (props) => {
|
|
|
fullWidth
|
|
|
type={"submit"}
|
|
|
onClick={(e) => {
|
|
|
+ e.preventDefault();
|
|
|
recaptchaRef.current.execute();
|
|
|
}}
|
|
|
>Send skjema</Button>
|
|
@@ -90,7 +153,7 @@ const RegForm = (props) => {
|
|
|
const classes = useStyles();
|
|
|
|
|
|
const [inputs, updateInputs] = useState({
|
|
|
- dates: [{date: new Date(), duration: 0}],
|
|
|
+ dates: [{date: new Date(), duration: 0.5}],
|
|
|
});
|
|
|
|
|
|
const inputHandler = (event) => {
|
|
@@ -98,7 +161,6 @@ const RegForm = (props) => {
|
|
|
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]];
|
|
@@ -138,21 +200,25 @@ const RegForm = (props) => {
|
|
|
return;
|
|
|
|
|
|
const target = e.target;
|
|
|
- inputs.dates[idx].duration = parseInt(target.value, 10);
|
|
|
+ inputs.dates[idx].duration = (target.value >= 0 ? target.value * 1.0 : 0.5).toFixed(2);
|
|
|
|
|
|
updateInputs((prevState) => ({...prevState, dates: inputs.dates}));
|
|
|
}
|
|
|
|
|
|
- const submitHandler = (event) => {
|
|
|
- event.PreventDefault();
|
|
|
- console.log(event);
|
|
|
+ let formRef = React.createRef();
|
|
|
+
|
|
|
+ const clearInputs = () => {
|
|
|
+ formRef.current.reset();
|
|
|
+ updateInputs((prevState) => ({
|
|
|
+ dates: [{date: new Date(), duration: 0.5}]
|
|
|
+ }));
|
|
|
}
|
|
|
|
|
|
return (
|
|
|
<Container component="main" maxWidth="md">
|
|
|
<CssBaseline />
|
|
|
<Paper className={classes.paper}>
|
|
|
- <form className={classes.form}>
|
|
|
+ <form className={classes.form} ref={formRef}>
|
|
|
<FormControl component={"fieldset"} className={classes.fieldset}>
|
|
|
<Typography component={"legend"} variant={"h5"}>
|
|
|
Om arrangøren
|
|
@@ -161,7 +227,7 @@ const RegForm = (props) => {
|
|
|
<Grid item xs={12} sm={7} md={8}>
|
|
|
<TextField
|
|
|
id={"organizer"}
|
|
|
- label={"Navn på arrangør"}
|
|
|
+ label={"Navn"}
|
|
|
onChange={inputHandler}
|
|
|
required
|
|
|
fullWidth
|
|
@@ -209,8 +275,9 @@ const RegForm = (props) => {
|
|
|
<Grid item xs={12} sm={6}>
|
|
|
<TextField
|
|
|
id={"contact_homepage"}
|
|
|
- label={"Hjemmesideadresse"}
|
|
|
+ label={"Hjemmesideadresse (husk «http://»)"}
|
|
|
placeholder={"https:// ...."}
|
|
|
+ onChange={inputHandler}
|
|
|
required
|
|
|
fullWidth
|
|
|
/>
|
|
@@ -225,7 +292,7 @@ const RegForm = (props) => {
|
|
|
<Grid item xs={12}>
|
|
|
<TextField
|
|
|
id={"event_name"}
|
|
|
- label={"Navn på arrangement"}
|
|
|
+ label={"Tittel på arrangement"}
|
|
|
onChange={inputHandler}
|
|
|
required
|
|
|
fullWidth
|
|
@@ -248,11 +315,12 @@ const RegForm = (props) => {
|
|
|
<Grid item xs={4}>
|
|
|
<TextField
|
|
|
id={"event_duration"}
|
|
|
- label={"Varighet (timer)"}
|
|
|
+ label={`Varighet (${date.duration} t = ${(date.duration * 60.0).toFixed(0)} min)`}
|
|
|
onChange={e => dateDurationSaveHandler(idx, e)}
|
|
|
+ inputProps={{step: 0.25}}
|
|
|
type={"number"}
|
|
|
placeholder={"antall timer"}
|
|
|
- value={date.duration}
|
|
|
+ value={date.duration ? date.duration : 0.5}
|
|
|
fullWidth
|
|
|
/>
|
|
|
</Grid>
|
|
@@ -278,9 +346,8 @@ const RegForm = (props) => {
|
|
|
<TextField
|
|
|
id={"event_capacity"}
|
|
|
label={"Kapasitet"}
|
|
|
- placeholder={"Antall personer"}
|
|
|
+ placeholder={"For eks. antall personer"}
|
|
|
onChange={inputHandler}
|
|
|
- type={"number"}
|
|
|
required
|
|
|
fullWidth
|
|
|
/>
|
|
@@ -299,7 +366,7 @@ const RegForm = (props) => {
|
|
|
<Grid item xs={12} sm={6}>
|
|
|
<TextField
|
|
|
id="event_photo"
|
|
|
- label={"Photo-link til arrangement"}
|
|
|
+ label={"Photo-link til arrangement (husk «http://»)"}
|
|
|
onChange={inputHandler}
|
|
|
placeholder={"Kan for eks. være en bilde-fil eller mappe med bilder i Dropbox."}
|
|
|
fullWidth
|
|
@@ -309,7 +376,7 @@ const RegForm = (props) => {
|
|
|
<Grid item xs={12} sm={6}>
|
|
|
<TextField
|
|
|
id="event_booking"
|
|
|
- label={"Link til booking"}
|
|
|
+ label={"Link til booking (husk «http://»)"}
|
|
|
onChange={inputHandler}
|
|
|
placeholder={"https:// ..."}
|
|
|
fullWidth
|
|
@@ -318,7 +385,7 @@ const RegForm = (props) => {
|
|
|
</Grid>
|
|
|
<Grid item xs={12} sm={6}>
|
|
|
<CategorySelection
|
|
|
- cid={"5ed0f77a42f75848a95ebf03"}
|
|
|
+ cid={"/tff/api/webflow_collection_categories"}
|
|
|
category="Kategorier"
|
|
|
name="categories"
|
|
|
selected={inputs.categories || []}
|
|
@@ -327,7 +394,7 @@ const RegForm = (props) => {
|
|
|
</Grid>
|
|
|
<Grid item xs={12} sm={6}>
|
|
|
<CategorySelection
|
|
|
- cid={"5ed10cffd2b21cfb3b269088"}
|
|
|
+ cid={"/tff/api/webflow_collection_audiences"}
|
|
|
category="Målgrupper"
|
|
|
name="audiences"
|
|
|
selected={inputs.audiences || []}
|
|
@@ -338,7 +405,10 @@ const RegForm = (props) => {
|
|
|
</FormControl>
|
|
|
<Grid container justify={"center"}>
|
|
|
<Grid item xs={8}>
|
|
|
- <SubmitButton text={"Send skjema"}/>
|
|
|
+ <ReCaptchaSubmitButton text={"Send skjema"}
|
|
|
+ inputs={inputs}
|
|
|
+ clearHandler={clearInputs}
|
|
|
+ />
|
|
|
</Grid>
|
|
|
</Grid>
|
|
|
</form>
|
|
@@ -353,7 +423,7 @@ const CategorySelection = (props) => {
|
|
|
const [availableItems, setAvailableItems] = useState([]);
|
|
|
|
|
|
React.useEffect(() => {
|
|
|
- axios.get("https://magy.giaever.online/tff/api/webflow_items?cid=" + props.cid)
|
|
|
+ axios.get("https://magy.giaever.online" + props.cid)
|
|
|
.then((response) => {
|
|
|
const data = response.data['hydra:member'];
|
|
|
setAvailableItems(response.data['hydra:member']);
|