wip
parent
d75cd53e48
commit
7edd783dcb
|
|
@ -52,7 +52,7 @@ export default function addUserForm (){
|
|||
start_month: event.target.start_month.value,
|
||||
start_date: event.target.start_date.value,
|
||||
end_date: event.target.end_date.value,
|
||||
// user: event.target.user.value,
|
||||
anual: event.target.anual,
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
||||
|
|
@ -78,7 +78,6 @@ export default function addUserForm (){
|
|||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User Registration Form</p>
|
||||
</div>
|
||||
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
||||
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Type</label>
|
||||
<select name="type" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
|
|
@ -90,7 +89,7 @@ export default function addUserForm (){
|
|||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="name" className='text-xl font-bold'> Name</label>
|
||||
<input type="text" name="name" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="text" name="name" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' placeholder='Enter your Name' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
||||
|
|
@ -104,7 +103,6 @@ export default function addUserForm (){
|
|||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||
<PhoneInput className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="phone" placeholder="Enter phone number" value={phoneValue} onChange={setphoneValue}/>
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
||||
<select name="schoolID" onChange={individual} className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
|
|
@ -114,8 +112,6 @@ export default function addUserForm (){
|
|||
)}
|
||||
</select>
|
||||
</div>
|
||||
{ individualValue &&
|
||||
<div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||
<select name="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
|
|
@ -126,7 +122,27 @@ export default function addUserForm (){
|
|||
<option value="PG">PG</option>
|
||||
</select>
|
||||
</div>
|
||||
{ individualValue &&
|
||||
<div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
||||
<select name="anual" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" >-NA-</option>
|
||||
<option value="January">January</option>
|
||||
<option value="February">February</option>
|
||||
<option value="March">March</option>
|
||||
<option value="April">April</option>
|
||||
<option value="May">May</option>
|
||||
<option value="June">June</option>
|
||||
<option value="July">July</option>
|
||||
<option value="August">August</option>
|
||||
<option value="September">September</option>
|
||||
<option value="October">October</option>
|
||||
<option value="November">November</option>
|
||||
<option value="December">December</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* <div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
|
|
@ -145,10 +161,8 @@ export default function addUserForm (){
|
|||
<label className='cursor-pointer md:whitespace-nowrap' htmlFor="Early_Start_program">Early Start Program</label>
|
||||
<input type="checkbox" name="plan" id="Early_Start_program" value='Early_Start_program' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div> */}
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
|
||||
|
|
@ -192,9 +206,7 @@ export default function addUserForm (){
|
|||
<label className='cursor-pointer' htmlFor="gujrati">Gujrati</label>
|
||||
<input type="checkbox" name="lang" value='gujrati' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
|
||||
|
|
@ -218,11 +230,10 @@ export default function addUserForm (){
|
|||
<input type="date" name="start_date" id="start_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="end_date" className='text-xl font-bold pt-4'>End Date</label>
|
||||
<label htmlFor="end_date" className='text-xl font-bold pt-4'>Subscription Expiry Date.</label>
|
||||
<input type="date" name="end_date" id="end_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
}
|
||||
<div className='flex justify-center pt-8'>
|
||||
<button type="submit" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Save</button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,213 @@
|
|||
// https://management.beanstalkedu.com/items/school
|
||||
// import React from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
|
||||
import NavBar from '../components/NavBar'
|
||||
import { type } from 'os';
|
||||
import { data } from 'autoprefixer';
|
||||
// import { Inter } from 'next/font/google'
|
||||
export default function addUserForm (){
|
||||
const [school, setSchool] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`).
|
||||
then(res => res.json())
|
||||
.then(data => {setSchool(data.data)
|
||||
})
|
||||
}, [])
|
||||
console.log(typeof school);
|
||||
const handleFormsubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
user: event.target.user.value,
|
||||
// user: event.target.user.value,
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSONdata,
|
||||
}
|
||||
const response = await fetch(endpoint, options)
|
||||
const result = await response.json()
|
||||
alert(`Is this your full name: ${result.data}`)
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
<NavBar />
|
||||
<section className='container mx-auto px-4 my-16 lg:px-28 xl:px-56 2xl:px-96'>
|
||||
<div className='flex flex-col justify-center place-items-center bg-[#FFF6F2] pt-6 pb-20 rounded-tl-[50px] rounded-br-[50px]'>
|
||||
<div className='flex flex-col justify-center place-items-center'>
|
||||
<svg className='rounded-full shadow-md ' width="100px" height="100px" viewBox="-3.12 -3.12 30.24 30.24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M11.4604 13.7299C13.0123 13.7299 14.2704 12.4718 14.2704 10.9199C14.2704 9.36794 13.0123 8.10986 11.4604 8.10986C9.90847 8.10986 8.65039 9.36794 8.65039 10.9199C8.65039 12.4718 9.90847 13.7299 11.4604 13.7299Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path opacity="0.4" d="M16.6495 20.1998C16.6495 17.8698 14.3295 15.9697 11.4595 15.9697C8.58953 15.9697 6.26953 17.8598 6.26953 20.1998" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M21 12.5C21 17.75 16.75 22 11.5 22C6.25 22 2 17.75 2 12.5C2 7.25 6.25 3 11.5 3C12.81 3 14.06 3.25999 15.2 3.73999C15.07 4.13999 15 4.56 15 5C15 5.75 15.21 6.46 15.58 7.06C15.78 7.4 16.04 7.70997 16.34 7.96997C17.04 8.60997 17.97 9 19 9C19.44 9 19.86 8.92998 20.25 8.78998C20.73 9.92998 21 11.19 21 12.5Z" stroke="#FE4501" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M23 5C23 5.32 22.96 5.62999 22.88 5.92999C22.79 6.32999 22.63 6.72 22.42 7.06C21.94 7.87 21.17 8.49998 20.25 8.78998C19.86 8.92998 19.44 9 19 9C17.97 9 17.04 8.60997 16.34 7.96997C16.04 7.70997 15.78 7.4 15.58 7.06C15.21 6.46 15 5.75 15 5C15 4.56 15.07 4.13999 15.2 3.73999C15.39 3.15999 15.71 2.64002 16.13 2.21002C16.86 1.46002 17.88 1 19 1C20.18 1 21.25 1.51002 21.97 2.33002C22.61 3.04002 23 3.98 23 5Z" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M20.4898 4.97998H17.5098" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> <path d="M19 3.52002V6.51001" stroke="#FE4501" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User Registration Form</p>
|
||||
</div>
|
||||
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="user" className='text-xl font-bold'>User Name</label>
|
||||
<input type="text" name="user" id="user" placeholder='ex. xyz@email.com' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
|
||||
|
||||
<label htmlFor="" className='text-xl font-bold'>School name</label>
|
||||
<select name="" id="" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
{/* {school.map(data=>
|
||||
<option value={data.name}>{data.name}</option>
|
||||
)} */}
|
||||
<option value="">{school.name}</option>
|
||||
</select>
|
||||
</div>
|
||||
{/* <div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school" className='text-xl font-bold'>School Name</label>
|
||||
<input type="text" name="school" id="school" placeholder='School Name' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div> */}
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school_contact_number" className='text-xl font-bold'>School Contact Number</label>
|
||||
<input type="text" name="school_contact_number" id="school_contact_number" placeholder='School Contact Number ' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="school_email_id" className='text-xl font-bold'>School Email ID</label>
|
||||
<input type="text" name="school_email_id" id="school_email_id" placeholder='School Email ID ' className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||
<select name="class" id="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="IK1">IK1</option>
|
||||
<option value="IK2">IK2</option>
|
||||
<option value="IK3">IK3</option>
|
||||
<option value="PG">PG</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2 '>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
<label className='cursor-pointer' htmlFor="Anual">Anual</label>
|
||||
<input type="checkbox" name="Anual" id="Anual" value='Anual' className='check-box'/>
|
||||
</div>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
<label className='cursor-pointer' htmlFor="Toddler">Toddler</label>
|
||||
<input type="checkbox" name="Toddler" id="Toddler" value='Toddler' className='check-box'/>
|
||||
</div>
|
||||
<div className='flex flex-row place-items-center'>
|
||||
<label className='cursor-pointer' htmlFor="Interakto">Interakto</label>
|
||||
<input type="checkbox" name="Interakto" id="Interakto" value='Interakto' className='check-box'/>
|
||||
</div>
|
||||
<div className='flex flex-row place-items-center col-span-2'>
|
||||
<label className='cursor-pointer md:whitespace-nowrap' htmlFor="Early_Start_program">Early Start Program</label>
|
||||
<input type="checkbox" name="Early_Start_program" id="Early_Start_program" value='Early_Start_program' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
{/* <div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="plan" className='text-xl font-bold'>Plan</label>
|
||||
<select name="plan" id="plan" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="Anual">Anual</option>
|
||||
<option value="Early-Start-Program">Early Start Program</option>
|
||||
<option value="Toddlers">Toddlers</option>
|
||||
<option value="Interakto">Interakto</option>
|
||||
</select>
|
||||
</div> */}
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="lang" className='text-xl font-bold'>Language</label>
|
||||
<div className='grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-y-2 pt-2'>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Bengali">Bengali</label>
|
||||
<input type="checkbox" name="Bengali" id="Bengali" value='Bengali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="English">English</label>
|
||||
<input type="checkbox" name="English" id="English" value='English' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Hindi">Hindi</label>
|
||||
<input type="checkbox" name="Hindi" id="Hindi" value='Hindi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Urdu">Urdu</label>
|
||||
<input type="checkbox" name="Urdu" id="Urdu" value='Urdu' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>
|
||||
<input type="checkbox" name="Punjabi" id="Punjabi" value='Punjabi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Telugu">Telugu</label>
|
||||
<input type="checkbox" name="Telugu" id="Telugu" value='Telugu' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Marathi">Marathi</label>
|
||||
<input type="checkbox" name="Marathi" id="Marathi" value='Marathi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Nepali">Nepali</label>
|
||||
<input type="checkbox" name="Nepali" id="Nepali" value='Nepali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Kannada">Kannada</label>
|
||||
<input type="checkbox" name="Kannada" id="Kannada" value='Kannada' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Gujrati">Gujrati</label>
|
||||
<input type="checkbox" name="Gujrati" id="Gujrati" value='Gujrati' className='check-box'/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/* <select name="lang" id="lang" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="" selected>-Select-</option>
|
||||
<option value="Bengali"> Bengali</option>
|
||||
<option value="English"> English</option>
|
||||
<option value="Hindi"> Hindi</option>
|
||||
<option value="Urdu"> Urdu</option>
|
||||
<option value="Punjabi"> Punjabi</option>
|
||||
<option value="Telugu"> Telugu</option>
|
||||
<option value="Marathi"> Marathi</option>
|
||||
<option value="Nepali"> Nepali</option>
|
||||
<option value="Kannada"> Kannada</option>
|
||||
<option value="Gujrati"> Gujrati</option>
|
||||
</select> */}
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
|
||||
<select name="start_month" id="start_month" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="0" selected>-Select-</option>
|
||||
<option value="January"> January</option>
|
||||
<option value="February"> February</option>
|
||||
<option value="March"> March</option>
|
||||
<option value="April"> April</option>
|
||||
<option value="May"> May</option>
|
||||
<option value="June"> June</option>
|
||||
<option value="July"> July</option>
|
||||
<option value="August"> August</option>
|
||||
<option value="September"> September</option>
|
||||
<option value="November"> November</option>
|
||||
<option value="December"> December</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="start_date" className='text-xl font-bold pt-4'>Start Date</label>
|
||||
<input type="date" name="start_date" id="start_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="end_date" className='text-xl font-bold pt-4'>End Date</label>
|
||||
<input type="date" name="end_date" id="end_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
</div>
|
||||
<div className='flex justify-center pt-8'>
|
||||
<button className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer'>Submit Now</button>
|
||||
{/* <input type="submit" value="Submit Now" className='bg-[#FE4501] hover:shadow-2xl hover:shadow-[#F2B705] p-2.5 rounded-lg px-10 rounded-tl-full rounded-br-full hover:scale-110 active:scale-75 duration-200 text-xl font-bold text-white cursor-pointer' /> */}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
Loading…
Reference in New Issue