@ -14,6 +14,12 @@ import Stepper from "../../components/Stepper";
import UserInfo from "../dashboard2/UserInfo" ;
import { connect } from "react-redux" ;
import MobileRegister from './mobile'
import persian from "react-date-object/calendars/persian"
import persian _fa from "react-date-object/locales/persian_fa"
import DatePicker from "react-multi-date-picker" ;
import Checkbox from "../../components/Checkbox" ;
import { ostan } from "../../constants/states" ;
import { cities } from "../../constants/cities" ;
const Register = ( { activeLogin , isMobile } ) => {
@ -213,10 +219,7 @@ const Register = ({ activeLogin, isMobile }) => {
} ,
]
const grades = [
{
id : 0 ,
title : ''
} ,
{
id : 1 ,
title : 'پایه اول'
@ -269,6 +272,66 @@ const Register = ({ activeLogin, isMobile }) => {
]
const genders = [
{
id : 0 ,
title : 'جنسیت'
} ,
{
id : 1 ,
title : 'مذکر' ,
} ,
{
id : 2 ,
title : 'مونث' ,
}
]
const CostumeDatePickerInput = ( { openCalendar , value , handleValueChange , title } ) => {
return (
< Input
onFocus = { openCalendar }
value = { value }
onChange = { handleValueChange }
title = { title }
className = "w-52"
id = { 3 }
/ >
)
}
const madraks = [
{
id : 0 ,
title : 'مدرک تحصیلی'
} ,
{
id : 1 ,
title : 'ابتدایی'
} ,
{
id : 2 ,
title : 'دیپلم'
} ,
{
id : 3 ,
title : 'فوق دیپلم'
} ,
{
id : 4 ,
title : 'کارشناسی'
} ,
{
id : 5 ,
title : 'کارشناسی ارشد'
} ,
{
id : 6 ,
title : 'دکتری'
} ,
]
const [ selectedState , setSelectedState ] = useState ( null ) ;
const [ selectedCity , setSelectedCity ] = useState ( null ) ;
return (
isMobile ? < MobileRegister / > :
< div className = "flex justify-center mb-4" style = { { direction : 'rtl' , marginTop : '8.5%' , marginRight : '6.5%' , width : '93.5%' , marginRight : '6.5%' } } >
@ -328,23 +391,43 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 pb-6 border-b border-solid border-gray-200" >
< div className = "mb-4" >
< h1 className = "font-black" > مشخصات هویتی دانش آموز < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید < / p >
< / d i v >
< div className = "flex" >
< div className = "flex w-2/5 " >
< div className = "ml-2" >
< Input title = "نام" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 0 } / >
< Input title = "کدملی" borderType = "rounded" gapSize = "12" id = { 1 } type = 'number' / >
< Input title = "جنسیت" borderType = "rounded" gapSize = "16" id = { 2 } / >
< / d i v >
< div className = "mr-2" >
< Input title = "نام خانوادگی" borderType = "rounded" id = { 3 } direction = 'rtl' / >
< Input title = "تاریخ تولد" borderType = "rounded" gapSize = "16" id = { 4 } type = 'number' / >
< div className = "flex w-2/5 flex-wrap justify-between" >
< Input className = { 'w-52' } title = "نام" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 0 } value = { userInfo . name } onChange = { ( e ) => setUserInfo ( { ... userInfo , name : e . target . value } ) } / >
< Input className = { 'w-52' } title = "نام خانوادگی" borderType = "rounded" id = { 1 } direction = 'rtl' value = { userInfo . familyName } onChange = { ( e ) => setUserInfo ( { ... userInfo , familyName : e . target . value } ) } / >
< Input className = { 'w-52' } title = "کدملی" borderType = "rounded" gapSize = "12" id = { 2 } type = 'textNumber' max = { 10 } value = { userInfo . nationalId } onChange = { e => setUserInfo ( { ... userInfo , nationalId : e . target . value } ) } / >
{ /* <Input className={'w-52'} title="تاریخ تولد" borderType="rounded" gapSize="16" id={3} type='number' /> */ }
< DatePicker
format = "YYYY/MM/DD"
onChange = { ( e ) => setUserInfo ( { ... userInfo , birthDate : e . day } ) }
calendar = { persian }
locale = { persian _fa }
renderButton = { ( direction , handleClick ) => (
< button className = "text-blue-500 font-bold mx-2" onClick = { handleClick } >
{ direction === "right" ? ">" : "<" }
< / b u t t o n >
) }
render = { < CostumeDatePickerInput title = 'تاریخ تولد' / > }
/ >
< select className = "bg-white border border-solid border-gray-200 w-52 px-3 rounded text-gray-400 outline-red52 py-1 h-12 mt-6" >
{ genders . map ( ( item ) => (
< option key = { ` gender ${ item . id } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< / d i v >
< / d i v >
< div className = "w-3/5 flex justify-center" >
< div className = "w-3/5 flex flex-wrap justify-between" >
< div className = "w-2/5 mx-4" >
< FileInput title = "بارگزاری صفحه اول شناسنامه" id = { 1 } / >
< / d i v >
@ -359,7 +442,7 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 py-10 border-b flex items-center border-solid border-gray-200" >
< div className = "" >
< h1 className = "font-black" > پایه تحصیلی < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > لطفا پایه تحصیلی دانش آموز را وارد کنید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > لطفا پایه تحصیلی دانش آموز را وارد کنید < / p >
< / d i v >
< select className = "bg-white border border-solid border-gray-300 w-48 p-3 rounded-lg text-gray-400 outline-red52 mx-6" >
{ grades . map ( ( item ) => (
@ -370,19 +453,35 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 py-8 flex flex-col " >
< div className = "mb-4" >
< h1 className = "font-black" > مشخصات هویتی دانش آموز < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > اطلاعات هویتی دانش آموز را با دقت تکمیل و عکس مدارک را بارگزاری نمایید < / p >
< / d i v >
< div className = "flex justify-between items-center" >
< Input title = "نام مدرسه" borderType = "rounded" gapSize = "20" direction = 'rtl' id = { 5 } / >
< select className = "bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6" >
{ grades . map ( ( item ) => (
< option key = { ` Grade__ ${ item . id } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< Input title = "شهر" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 6 } / >
< Input title = "منطقه" borderType = "rounded" gapSize = "12" id = { 7 } type = 'number' / >
< Input title = "استان" borderType = "rounded" gapSize = "12" id = { 8 } type = 'number' / >
< div className = "flex justify-start flex-wrap items-center" >
< Input className = { 'w-64' } title = "نام مدرسه" borderType = "rounded" gapSize = "20" direction = 'rtl' id = { 4 } value = { userInfo . schoolName } onChange = { e => setUserInfo ( { ... userInfo , schoolName : e . target . value } ) } / >
< select
className = "bg-white border border-solid border-gray-200 w-48 p-3 rounded-md text-gray-400 outline-red52 mx-6 ml-3 mt-6"
onChange = { e => { setSelectedState ( e . target . value ) ; setUserInfo ( { ... userInfo , state : e . target . value } ) } } >
< option value = { null } > استان < / o p t i o n >
{
ostan . map ( ( item ) => < option value = { item . id } > { item . name } < / o p t i o n > )
}
< / s e l e c t >
{
selectedState !== null &&
< select
className = "bg-white border border-solid border-gray-200 w-48 p-3 rounded-md text-gray-400 outline-red52 mx-6 mr-3 mt-6"
onChange = { ( e ) => { setSelectedCity ( e . target . value ) ; setUserInfo ( { ... userInfo , city : e . target . value } ) } } >
< option value = { null } >
شهر
< / o p t i o n >
{
cities . filter ( itm => itm . ostan == selectedState ) . map ( ( city ) => < option value = { city . id } > { city . name } < / o p t i o n > )
}
< / s e l e c t >
}
{
selectedCity !== null && < Input className = { 'w-64' } title = "منطقه" borderType = "rounded" gapSize = "12" id = { 5 } type = 'number' / >
}
< / d i v >
< div className = "flex pt-10 justify-end" >
< div className = "w-40" >
@ -395,22 +494,7 @@ const Register = ({ activeLogin, isMobile }) => {
} else {
alert ( 'لطفا تمامی فیلد ها را پر کنید' )
}
setUserInfo ( prevState => {
return {
... prevState ,
name : document . getElementById ( 'Login-box-form-item-input-name0' ) . value ,
nationalId : document . getElementById ( 'Login-box-form-item-input-name1' ) . value ,
sex : document . getElementById ( 'Login-box-form-item-input-name2' ) . value ,
familyName : document . getElementById ( 'Login-box-form-item-input-name3' ) . value ,
birthDate : document . getElementById ( 'Login-box-form-item-input-name4' ) . value ,
schoolName : document . getElementById ( 'Login-box-form-item-input-name5' ) . value ,
city : document . getElementById ( 'Login-box-form-item-input-name6' ) . value ,
state : document . getElementById ( 'Login-box-form-item-input-name7' ) . value ,
}
} )
} } / >
< / d i v >
< / d i v >
@ -421,35 +505,39 @@ const Register = ({ activeLogin, isMobile }) => {
}
{
steps == 1 &&
< form >
< form className = "w-full" >
< div className = "w-full px-10 pb-6 border-b border-solid border-gray-200" >
< div className = "mb-4" >
< h1 className = "font-black" > مشخصات هویتی پدر < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > لطفا اطلاعات مربوط هویتی پدر را وارد کنید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > لطفا اطلاعات مربوط هویتی پدر را وارد کنید < / p >
< / d i v >
< div className = "flex" >
< div className = "flex flex-wrap justify-between " >
< Input title = "نام" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 0 } / >
< Input title = "کدملی" borderType = "rounded" gapSize = "12" id = { 1 } type = 'number' / >
< Input className = { 'w-52' } title = "نام" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 0 } value = { userInfo . fatherName } onChange = { e => setUserInfo ( { ... userInfo , fatherName : e . target . value } ) } / >
< Input className = { 'w-52' } title = "کدملی" borderType = "rounded" gapSize = "12" id = { 1 } type = 'number' value = { userInfo . fatherNationalId } onChange = { e => setUserInfo ( { ... userInfo , fatherNationalId : e . target . value } ) } / >
< Input title = "نام خانوادگی" borderType = "rounded" id = { 2 } direction = 'rtl' / >
< Input title = "مدرک نحصیلی" borderType = "rounded" gapSize = "20" id = { 3 } / >
< Input className = { 'w-52' } title = "نام خانوادگی" borderType = "rounded" id = { 2 } direction = 'rtl' value = { userInfo . fatherFamilyName } onChange = { e => setUserInfo ( { ... userInfo , fatherFamilyName : e . target . value } ) } / >
< select className = "bg-white border border-solid border-gray-200 w-52 px-3 rounded text-gray-400 outline-red52 py-1 h-12 mt-6" >
{ madraks . map ( ( item ) => (
< option key = { ` madraks ${ item . id } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< / d i v >
< div className = "flex" >
< div className = "flex flex-wrap justify-between " >
< Input title = "تلفن همراه" borderType = "rounded" type = 'number' id = { 4 } / >
< Input title = "شغل" borderType = "rounded" direction = 'rtl' gapSize = "8" id = { 5 } / >
< Input className = { 'w-52' } title = "تلفن همراه" borderType = "rounded" type = 'number' id = { 3 } value = { userInfo . fatherPhoneNumber } onChange = { e => setUserInfo ( { ... userInfo , fatherPhoneNumber : e . target . value } ) } / >
< Input className = { 'w-52' } title = "شغل" borderType = "rounded" direction = 'rtl' gapSize = "8" id = { 4 } value = { userInfo . fatherJob } onChange = { e => setUserInfo ( { ... userInfo , fatherJob : e . target . value } ) } / >
< Input title = "محل کار" borderType = "rounded" id = { 6 } direction = 'rtl' / >
< Input title = "تلفن محل کار" borderType = "rounded" gapSize = "28" id = { 7 } type = 'number' / >
< Input className = { 'w-52' } title = "محل کار" borderType = "rounded" id = { 5 } direction = 'rtl' value = { userInfo . fatherJobAddress } onChange = { e => setUserInfo ( { ... userInfo , fatherJobAddress : e . target . value } ) } / >
< Input className = { 'w-52' } title = "تلفن محل کار" borderType = "rounded" gapSize = "28" id = { 6 } type = 'number' value = { userInfo . fatherJobPhoneNumber } onChange = { e => setUserInfo ( { ... userInfo , fatherJobPhoneNumber : e . target . value } ) } / >
@ -462,31 +550,35 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 py-6 border-b border-solid border-gray-200" >
< div className = "mb-4" >
< h1 className = "font-black" > مشخصات هویتی مادر < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > لطفا اطلاعات مربوط هویتی مادر را وارد کنید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > لطفا اطلاعات مربوط هویتی مادر را وارد کنید < / p >
< / d i v >
< div className = "flex" >
< div className = "flex flex-wrap justify-between " >
< Input title = "نام" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 8 } / >
< Input title = "کدملی" borderType = "rounded" gapSize = "12" id = { 9 } type = 'number' / >
< Input className = { 'w-52' } title = "نام" borderType = "rounded" gapSize = "8" direction = 'rtl' id = { 7 } value = { userInfo . motherName } onChange = { e => setUserInfo ( { ... userInfo , motherName : e . target . value } ) } / >
< Input className = { 'w-52' } title = "کدملی" borderType = "rounded" gapSize = "12" id = { 8 } type = 'number' value = { userInfo . motherNationalId } onChange = { e => setUserInfo ( { ... userInfo , motherNationalId : e . target . value } ) } / >
< Input title = "نام خانوادگی" borderType = "rounded" id = { 10 } direction = 'rtl' / >
< Input title = "مدرک نحصیلی" borderType = "rounded" gapSize = "20" id = { 11 } / >
< Input className = { 'w-52' } title = "نام خانوادگی" borderType = "rounded" id = { 9 } direction = 'rtl' value = { userInfo . motherFamilyName } onChange = { e => setUserInfo ( { ... userInfo , motherFamilyName : e . target . value } ) } / >
< select className = "bg-white border border-solid border-gray-200 w-52 px-3 rounded text-gray-400 outline-red52 py-1 h-12 mt-6" >
{ madraks . map ( ( item ) => (
< option key = { ` madraks ${ item . id } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< / d i v >
< div className = "flex" >
< div className = "flex flex-wrap justify-between " >
< Input title = "تلفن همراه" borderType = "rounded" type = 'number' id = { 12 } / >
< Input title = "شغل" borderType = "rounded" direction = 'rtl' gapSize = "8" id = { 13 } / >
< Input className = { 'w-52' } title = "تلفن همراه" borderType = "rounded" type = 'number' id = { 10 } value = { userInfo . motherPhoneNumber } onChange = { e => setUserInfo ( { ... userInfo , motherPhoneNumber : e . target . value } ) } / >
< Input className = { 'w-52' } title = "شغل" borderType = "rounded" direction = 'rtl' gapSize = "8" id = { 11 } value = { userInfo . motherJob } onChange = { e => setUserInfo ( { ... userInfo , motherJob : e . target . value } ) } / >
< Input title = "محل کار" borderType = "rounded" id = { 14 } direction = 'rtl' / >
< Input title = "تلفن محل کار" borderType = "rounded" gapSize = "28" id = { 15 } type = 'number' / >
< Input className = { 'w-52' } title = "محل کار" borderType = "rounded" id = { 12 } direction = 'rtl' value = { userInfo . motherJobAddress } onChange = { e => setUserInfo ( { ... userInfo , motherJobAddress : e . target . value } ) } / >
< Input className = { 'w-52' } title = "تلفن محل کار" borderType = "rounded" gapSize = "28" id = { 13 } type = 'number' value = { userInfo . motherJobPhoneNumber } onChange = { e => setUserInfo ( { ... userInfo , motherJobPhoneNumber : e . target . value } ) } / >
@ -498,26 +590,21 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 py-8 flex flex-col " >
< div className = "mb-4" >
< h1 className = "font-black" > زندگی با خانواده < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > در این قسمت مشخص کنید دانشس آموز به همراه چه کسانی زندگی میکند < / p >
< / d i v >
< div className = "flex justify-between items-center" >
< div className = "w-4/5 flex" >
< select className = "bg-white border border-solid border-gray-200 w-full px-3 rounded text-gray-400 outline-red52 mx-2 h-12 mt-6" >
{ grades . map ( ( item ) => (
< option key = { ` Grade__ ${ item . id } ` } > { item . title } < / o p t i o n >
) ) }
< / s e l e c t >
< Input title = "تعداد افراد خانواده" borderType = "rounded" type = 'number' gapSize = "40" direction = 'rtl' id = { 16 } / >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > در این قسمت مشخص کنید دانشس آموز به همراه چه کسانی زندگی میکند < / p >
< / d i v >
< Input title = "نشانی محل سکونت" borderType = "rounded" gapSize = "40" id = { 17 } / >
< div className = "flex flex-wrap justify-start items-center" >
< Input className = { 'w-64 ml-2' } title = "تعداد افراد خانواده" borderType = "rounded" type = 'number' gapSize = "40" direction = 'rtl' id = { 14 } value = { userInfo . familyNumber } onChange = { e => setUserInfo ( { ... userInfo , familyNumber : e . target . value } ) } / >
< Input className = { 'w-64' } title = "تلفن ثابت" borderType = "rounded" type = 'number' gapSize = "40" direction = 'rtl' id = { 15 } value = { userInfo . homePhoneNumber } onChange = { e => setUserInfo ( { ... userInfo , homePhoneNumber : e . target . value } ) } / >
< Input title = "نشانی محل سکونت" borderType = "rounded" gapSize = "40" id = { 16 } value = { userInfo . address } onChange = { e => setUserInfo ( { ... userInfo , address : e . target . value } ) } / >
< / d i v >
< div className = "flex justify-start items-center" >
< div className = "w-2/5 flex" >
< Input title = "تلفن ثابت" borderType = "rounded" type = 'number' gapSize = "40" direction = 'rtl' id = { 18 } className = "w-1/2" / >
< Input title = "تعداد افراد خانواده" borderType = "rounded" type = 'number' gapSize = "40" direction = 'rtl' id = { 19 } className = "w-1/2" / >
< / d i v >
< / d i v >
@ -540,38 +627,9 @@ const Register = ({ activeLogin, isMobile }) => {
} else {
alert ( 'لطفا تمامی فیلد ها را پر کنید' )
}
setUserInfo ( prevState => {
return {
... prevState ,
fatherName : document . getElementById ( 'Login-box-form-item-input-name0' ) . value ,
fatherNationalId : document . getElementById ( 'Login-box-form-item-input-name1' ) . value ,
fatherFamilyName : document . getElementById ( 'Login-box-form-item-input-name2' ) . value ,
fatherMajor : document . getElementById ( 'Login-box-form-item-input-name3' ) . value ,
fatherPhoneNumber : document . getElementById ( 'Login-box-form-item-input-name4' ) . value ,
fatherJob : document . getElementById ( 'Login-box-form-item-input-name5' ) . value ,
fatherJobAddress : document . getElementById ( 'Login-box-form-item-input-name6' ) . value ,
fatherJobPhoneNumber : document . getElementById ( 'Login-box-form-item-input-name7' ) . value ,
motherName : document . getElementById ( 'Login-box-form-item-input-name8' ) . value ,
motherNationalId : document . getElementById ( 'Login-box-form-item-input-name9' ) . value ,
motherFamilyName : document . getElementById ( 'Login-box-form-item-input-name10' ) . value ,
motherMajor : document . getElementById ( 'Login-box-form-item-input-name11' ) . value ,
motherPhoneNumber : document . getElementById ( 'Login-box-form-item-input-name12' ) . value ,
motherJob : document . getElementById ( 'Login-box-form-item-input-name13' ) . value ,
motherJobAddress : document . getElementById ( 'Login-box-form-item-input-name14' ) . value ,
motherJobPhoneNumber : document . getElementById ( 'Login-box-form-item-input-name15' ) . value ,
familyNumber : document . getElementById ( 'Login-box-form-item-input-name16' ) . value ,
address : document . getElementById ( 'Login-box-form-item-input-name17' ) . value ,
homePhoneNumber : document . getElementById ( 'Login-box-form-item-input-name18' ) . value ,
}
} )
} } / >
< / d i v >
< / d i v >
@ -587,7 +645,7 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 pb-6 border-b border-solid border-gray-200" >
< div className = "mb-4" >
< h1 className = "font-black" > قوانین و مقررات ثبت نام < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > لطفا اطلاعات مربوط هویتی پدر را وارد کن ید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > لطفا قوانین و مقررات را مطالعه فرمای ید < / p >
< / d i v >
< p className = "text-gray-500" >
@ -607,7 +665,8 @@ const Register = ({ activeLogin, isMobile }) => {
< / d i v >
< div className = "flex items-center px-10 py-6" >
< input type = "checkbox" className = "w-6 h-6" / >
{ /* <input type="checkbox" className="w-6 h-6" />*/ }
< Checkbox name = { 'PARENTS_CHECKED' } / >
< label className = "mr-4 font-bold text-gray-500" >
اینجانبان
< span className = "text-red52 font-bold" > { userInfo . fatherName } { userInfo . fatherFamilyName } < / s p a n >
@ -644,7 +703,7 @@ const Register = ({ activeLogin, isMobile }) => {
< div className = "w-full px-10 pb-6 border-b border-solid border-gray-200" >
< div className = "mb-4 pb-4" >
< h1 className = "font-black" > تایید اطلاعات < / h 1 >
< p className = "font-bold text-gray-300 text-sm" > لطفا اطلاعاتی که وارد کرده اید را چک کنید < / p >
< p className = "font-bold text-gray-400 mt-2 leading-normal text-sm" > لطفا اطلاعاتی که وارد کرده اید را چک کنید < / p >
< / d i v >