You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
126 lines
5.9 KiB
126 lines
5.9 KiB
import React,{useRef} from 'react';
|
|
import { useForm, SubmitHandler, FormProvider } from "react-hook-form";
|
|
import { Select, Input } from "./UX";
|
|
|
|
interface IFormInputs {
|
|
firstName: string
|
|
lastName: string
|
|
coach_telefon_number: string
|
|
body?: string[] | number[]
|
|
value: number
|
|
}
|
|
|
|
const defaultValues = {
|
|
name_team_coach: ``,
|
|
coach_telefon_number: ``,
|
|
email_address: '',
|
|
city_team: '',
|
|
training_institution_team: '',
|
|
team_name: '',
|
|
name_first_participant: '',
|
|
first_partial_class: 0,
|
|
name_second_participant: 'нет',
|
|
second_class: 0,
|
|
name_third_party : 'нет',
|
|
third_part_class : 0,
|
|
};
|
|
|
|
export const RegistrationForm = (props): JSX.Element => {
|
|
const form = useRef(null);
|
|
const methods = useForm({ defaultValues });
|
|
|
|
const onSubmit: SubmitHandler<IFormInputs> = data => {
|
|
fetch('/api/registration', { method: 'POST', body: Object.values(data) as any})
|
|
.then((data) => {
|
|
props.updateData(data);
|
|
})
|
|
methods.reset(defaultValues);
|
|
}
|
|
return (
|
|
<>
|
|
<div className="mt-10 sm:mt-0">
|
|
<div className="md:grid md:grid-cols-3 md:gap-6">
|
|
<div className="md:col-span-1">
|
|
<div className="px-4 sm:px-0">
|
|
<h3 className="text-lg font-medium leading-6">Регистрация команды</h3>
|
|
<p className="mt-1 text-sm">Введите актуальные данные команды</p>
|
|
<p className="mt-1 text-sm">От каждого учебного заведения может быть зарегистрированно неограниченое количеставо команд</p>
|
|
<p className="mt-1 text-sm"> Подписывайтесь на наш<a href="https://t.me/robotop_competition" className="text-blue-600 dark:text-blue-500 hover:underline"> Telegram канал </a>, что-бы быть в курсе новосте про соревнование </p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-5 md:mt-0 md:col-span-2">
|
|
<FormProvider {...methods} >
|
|
<form ref={form} onSubmit={methods.handleSubmit(onSubmit)}>
|
|
<div className="shadow overflow-hidden sm:rounded-md">
|
|
<div className="px-4 py-5 bg-white sm:p-6">
|
|
<div className="grid grid-cols-6 gap-6">
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Иван Иванович" name="name_team_coach" text="Введите ФИО тренера" additional={""}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="+79181234567" name="coach_telefon_number" text="Номер телефона тренера" additional={"valueAsNumber: true"} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="you@example.com" name="email_address" text="Email тренера" additional={`pattern: /^(([^<>()[]\\.,;:s@"]+(.[^<>()[]\\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/ })`} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Краснодар" name="city_team" text="Город команда" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-3">
|
|
<Input placeholder="МАОУ СОШ 103" name="training_institution_team" text="Учебное заведение команды" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-3">
|
|
<Input placeholder="Фиксики" name="team_name" text="Название команды" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Иван Иванович" name="name_first_participant" text="ФИО первого участника" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Select text={'Класс участника'} name={'first_partial_class'}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Петр Иванович / нет" name="name_second_participant" text="ФИО второго участника" additional={""} />
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Select text={'Класс участника'} name={'second_class'}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Дмитрий Иванович / нет" name="name_third_party" text="ФИО третьего участника" additional={""}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Select text={'Класс участника'} name={'third_part_class'}/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<div className="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
|
<button
|
|
type="submit"
|
|
className="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
|
|
>
|
|
Зарегистрировать команду
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</FormProvider>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default RegistrationForm;
|
|
|