260 lines
9.5 KiB
JavaScript
260 lines
9.5 KiB
JavaScript
import Checkbox from '@/Components/Checkbox';
|
|
import TextInput from '@/Components/TextInput';
|
|
import { Head, useForm } from '@inertiajs/react';
|
|
import { FormEventHandler, useState } from 'react';
|
|
import Timer from "@/Components/Timer";
|
|
|
|
const LanForm = ({opacity}) => {
|
|
const [showForm, setShowForm] = useState(true)
|
|
const [type, setType] = useState();
|
|
const [member, setMember] = useState();
|
|
const { data, setData, post, processing, errors, reset } = useForm({
|
|
member: 0,
|
|
first_name: '',
|
|
surname: '',
|
|
grade: '',
|
|
phone: '',
|
|
email: '',
|
|
guardian_name: '',
|
|
guardian_phone: '',
|
|
participating_type: '',
|
|
gdpr: '',
|
|
friends: '',
|
|
special_diet: '',
|
|
});
|
|
|
|
const RadioInput = ({label, value, checked, setter}) => {
|
|
return (
|
|
<label>
|
|
<input type="radio" checked={checked == value}
|
|
onChange={() => (setter(value), setData('participating_type', value))} />
|
|
<span>{label}</span>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
const RadioMember = ({label, value, checked, setter}) => {
|
|
return (
|
|
<label>
|
|
<input type="radio" checked={checked == value}
|
|
onChange={() => (setter(value), setData('member', value))} />
|
|
<span>{label}</span>
|
|
</label>
|
|
);
|
|
};
|
|
|
|
|
|
const submit = (e) => {
|
|
e.preventDefault()
|
|
post(route('register_participant'), {
|
|
onFinish: () => reset(),
|
|
});
|
|
}
|
|
|
|
return (
|
|
<section id="LanForm" className="LanForm">
|
|
<h1>
|
|
vBytes LAN
|
|
</h1>
|
|
{ ! showForm && <Timer />}
|
|
{showForm &&
|
|
<form onSubmit={submit}>
|
|
<p>Är du medlem i Vbytes? Medlemsskap krävs för att delta på lanet. Är du inte medlem i föreningen blir du det på www.vbytes.se</p>
|
|
<div className="field">
|
|
<label className="label">Är du medlem i vBytes?</label>
|
|
<div className="control">
|
|
<RadioMember label="Ja" value="0" checked={member} setter={setMember} />
|
|
<RadioMember label="Nej" value="1" checked={member} setter={setMember} />
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Deltagarens förnamn</label>
|
|
<div className="control">
|
|
<TextInput
|
|
required
|
|
className="input"
|
|
type="text"
|
|
name="first_name"
|
|
value={data.first_name}
|
|
//placeholder="Förnamn"
|
|
onChange={(e) => setData('first_name', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Deltagarens efternamn</label>
|
|
<div className="control">
|
|
<TextInput
|
|
required
|
|
className="input"
|
|
type="text"
|
|
name="surname"
|
|
value={data.surname}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('surname', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Jag går i klass:</label>
|
|
<div className="control">
|
|
<TextInput
|
|
required
|
|
className="input"
|
|
type="text"
|
|
name="grade"
|
|
value={data.grade}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('grade', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Mobilnummer deltagare</label>
|
|
<div className="control">
|
|
<TextInput
|
|
className="input"
|
|
type="text"
|
|
name="phone"
|
|
value={data.phone}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('phone', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">E-post deltagare</label>
|
|
<div className="control">
|
|
<TextInput
|
|
className="input"
|
|
type="text"
|
|
name="email"
|
|
value={data.email}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('email', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Vårnadshavares namn</label>
|
|
<div className="control">
|
|
<TextInput
|
|
required
|
|
className="input"
|
|
type="text"
|
|
name="guardian_name"
|
|
value={data.guardian_name}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('guardian_name', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Vårnadshavares epost</label>
|
|
<div className="control">
|
|
<TextInput
|
|
required
|
|
className="input"
|
|
type="text"
|
|
name="guardian_email"
|
|
value={data.guardian_email}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('guardian_email', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Vårnadshavares telefonnummer</label>
|
|
<div className="control">
|
|
<TextInput
|
|
required
|
|
className="input"
|
|
type="text"
|
|
name="guardian_phone"
|
|
value={data.guardian_phone}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('guardian_phone', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<label className="label">LAN-plats eller besöksplats</label>
|
|
<div className="control">
|
|
<RadioInput label="LAN" value="lan" checked={type} setter={setType} />
|
|
<RadioInput label="Besök" value="besök" checked={type} setter={setType} />
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Kompisar</label>
|
|
<div className="control">
|
|
<TextInput
|
|
className="input"
|
|
type="text"
|
|
name="friends"
|
|
value={data.friends}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('friends', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="field">
|
|
<label className="label">Specialkost</label>
|
|
<div className="control">
|
|
<TextInput
|
|
className="input"
|
|
type="text"
|
|
name="special_diet"
|
|
value={data.special_diet}
|
|
//placeholder="Namn"
|
|
onChange={(e) => setData('special_diet', e.target.value)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<div className="control">
|
|
<label className="checkbox">
|
|
<Checkbox
|
|
required
|
|
type="checkbox"
|
|
name="gdpr"
|
|
checked={data.gdpr}
|
|
onChange={(e) =>
|
|
setData(
|
|
'gdpr',
|
|
(e.target.checked || false),
|
|
)
|
|
}
|
|
/>
|
|
<span> GDPR</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field">
|
|
<div className="control">
|
|
<label className="checkbox">
|
|
<Checkbox type="checkbox" required/>
|
|
<span> Jag accepterar reglerna.</span>
|
|
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="field is-grouped btn">
|
|
<span class="btn__inner">
|
|
<span class="btn__label" data-label="Anmäl" data-hover="Go for it 🚀">
|
|
<span class="btn__label__background"></span>
|
|
</span>
|
|
</span>
|
|
<span class="btn__background"></span>
|
|
</div>
|
|
</form>
|
|
}
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default LanForm;
|
|
|