parent
e328e5bc6c
commit
b82d0a4902
@ -0,0 +1,137 @@ |
||||
import React,{useRef} from 'react'; |
||||
import { useForm, SubmitHandler, FormProvider } from "react-hook-form"; |
||||
import { Select, Input, Link_str, SelectNominations } from "./UX"; |
||||
import Link from 'next/link'; |
||||
|
||||
interface IFormInputs { |
||||
name_team_coach: string, |
||||
coach_telefon_number: string, |
||||
nominations: string, |
||||
city_team: string, |
||||
training_institution_team: string, |
||||
team_name: string, |
||||
name_first_participant: string, |
||||
first_partial_class: number, |
||||
name_second_participant: string, |
||||
second_class: number, |
||||
name_third_party: string, |
||||
third_part_class: number, |
||||
body?: string[] | number[] |
||||
} |
||||
|
||||
const defaultValues = { |
||||
name_team_coach: '', |
||||
coach_telefon_number: '', |
||||
nominations: '0', |
||||
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: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">Регистрация команд идет до 22.05.2023</p> |
||||
<p className="mt-1 text-sm">Введите актуальные данные команды</p> |
||||
<p className="mt-1 text-sm">От каждого учебного заведения может быть зарегистрировано неограниченное количество команд</p> |
||||
<p className="mt-1 text-sm"> Подписывайтесь на наш |
||||
<Link_str href="https://t.me/robotop_competition"> Telegram канал</Link_str> |
||||
, чтобы быть в курсе новостей про соревнование </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="ivan@mail.ru" name="city_team" text="E-mail тренера" 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"> |
||||
<SelectNominations text={'Номинация'} name={'nominations'}/> |
||||
</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> |
||||
</div> |
||||
<div className="px-4 py-3 bg-gray-50 text-left sm:px-6"> |
||||
<label className="form-check-label inline-block text-gray-800" > |
||||
Нажимая на кнопку "Зарегистрировать команду", настоящим участники (их законные представители) и тренер (руководитель) подтверждают свое согласие на обработку персональных данных МАОУ СОШ № 103 |
||||
</label> |
||||
<Link href={`/competition_pub/consent_of_the_legal_representative.docx`}> |
||||
<a className="buttonMargin inline-block px-2 py-2 rounded-md text-white dark:text-white bg-blue-600 hover:bg-blue-700 hover:text-white dark:hover:text-white" >Скачать согласие законного представителя </a> |
||||
</Link> |
||||
</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; |
||||
@ -0,0 +1,28 @@ |
||||
import React from 'react'; |
||||
import { useFormContext } from "react-hook-form"; |
||||
|
||||
type Props = { |
||||
text: string; |
||||
name: string; |
||||
placeholder: string; |
||||
additional: string; |
||||
} |
||||
|
||||
export const InputPass: React.FC<Props> = ({text, name, placeholder, additional}) => { |
||||
const { register } = useFormContext(); |
||||
const options = {required: true, maxLength: 80, additional}; |
||||
return( |
||||
<> |
||||
<label htmlFor={name} className="block text-sm font-medium text-gray-700"> |
||||
{text} |
||||
</label> |
||||
<input |
||||
{...register(name, options )} |
||||
name={name} |
||||
type="password" |
||||
placeholder={placeholder} |
||||
className="mt-1 block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" |
||||
/> |
||||
</> |
||||
) |
||||
} |
||||
@ -0,0 +1,113 @@ |
||||
import React,{useRef} from 'react'; |
||||
import { useForm, SubmitHandler, FormProvider } from "react-hook-form"; |
||||
import { Select, Input, Link_str, SelectNominations } from "./UX"; |
||||
|
||||
interface IFormInputs { |
||||
name_team_coach: string, |
||||
coach_telefon_number: string, |
||||
nominations: string, |
||||
city_team: string, |
||||
training_institution_team: string, |
||||
team_name: string, |
||||
name_first_participant: string, |
||||
first_partial_class: number, |
||||
name_second_participant: string, |
||||
second_class: number, |
||||
name_third_party: string, |
||||
third_part_class: number, |
||||
body?: string[] | number[] |
||||
} |
||||
|
||||
const defaultValues = { |
||||
name_team_coach: '', |
||||
coach_telefon_number: '', |
||||
nominations: '0', |
||||
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 UserForm = (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"> |
||||
<p>Личный кабинет</p> |
||||
<div className="tabs"> |
||||
<a className="tab tab-bordered tab-active">Команды</a>
|
||||
<a className="tab tab-bordered ">Персональные данные</a>
|
||||
</div> |
||||
<div className="md:gap-6"> |
||||
|
||||
<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="team_name" text="Название команды" additional={""} /> |
||||
</div> |
||||
|
||||
<div className="col-span-6 sm:col-span-3"> |
||||
<SelectNominations text={'Номинация'} name={'nominations'}/> |
||||
</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> |
||||
</div> |
||||
<div className="px-4 py-3 bg-gray-50 text-left sm:px-6"> |
||||
<label className="form-check-label inline-block text-gray-800" > |
||||
Нажимая на кнопку "Зарегистрировать команду", настоящим участники (их законные представители) и тренер (руководитель) подтверждают свое согласие на обработку персональных данных МАОУ СОШ № 103 |
||||
</label> |
||||
|
||||
</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 UserForm; |
||||
Loading…
Reference in new issue