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.
115 lines
5.8 KiB
115 lines
5.8 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[]
|
|
}
|
|
|
|
const alerError = (props) => {
|
|
return <p className="mt-2 text-sm text-red-600 dark:text-red-500 font-medium">{props}</p>
|
|
}
|
|
|
|
export const RegistrationForm = (props): JSX.Element => {
|
|
const form = useRef(null);
|
|
const methods = useForm();
|
|
const { register, handleSubmit, reset, formState: { errors } } = useForm();
|
|
|
|
const onSubmit: SubmitHandler<IFormInputs> = data => {
|
|
fetch('/api/registration', { method: 'POST', body: JSON.stringify(Object.values(data)) })
|
|
.then(props.updateData(2))
|
|
reset();
|
|
|
|
console.log(JSON.stringify(Object.values(data)));
|
|
}
|
|
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={""} value={''}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="+79181234567" name="coach_telefon_number" text="Номер телефона тренера" additional={"valueAsNumber: true"} value={''}/>
|
|
</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,}))$/ })'} value={''}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Краснодар" name="city_team" text="Город команда" additional={""} value={''}/>
|
|
</div>
|
|
|
|
<div className="col-span-3">
|
|
<Input placeholder="МАОУ СОШ 103" name="training_institution_team" text="Учебное заведение команды" additional={""} value={''}/>
|
|
</div>
|
|
|
|
<div className="col-span-3">
|
|
<Input placeholder="Фиксики" name="team_name" text="Название команды" additional={""} value={''}/>
|
|
</div>
|
|
|
|
<div className="col-span-6 sm:col-span-3">
|
|
<Input placeholder="Иванов Иван Иванович" name="name_first_participant" text="ФИО первого участника" additional={""} value={''} />
|
|
</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={""} value={'нет'}/>
|
|
</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={""} value={'нет'}/>
|
|
</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;
|
|
|