Subhodip Ghosh 2023-05-09 18:47:24 +05:30
parent d75cd53e48
commit 7edd783dcb
2 changed files with 249 additions and 25 deletions

View File

@ -35,7 +35,7 @@ export default function addUserForm (){
}) })
}, []) }, [])
// console.log(school); // console.log(school);
const handleFormsubmit = async (event) => { const handleFormsubmit = async (event) => {
event.preventDefault() event.preventDefault()
@ -52,7 +52,7 @@ export default function addUserForm (){
start_month: event.target.start_month.value, start_month: event.target.start_month.value,
start_date: event.target.start_date.value, start_date: event.target.start_date.value,
end_date: event.target.end_date.value, end_date: event.target.end_date.value,
// user: event.target.user.value, anual: event.target.anual,
} }
const JSONdata = JSON.stringify(data) const JSONdata = JSON.stringify(data)
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user' 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> <p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>User Registration Form</p>
</div> </div>
<form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'> <form onSubmit={handleFormsubmit} action="" className='w-full px-6 md:px-20'>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="class" className='text-xl font-bold'>Type</label> <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]'> <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>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="name" className='text-xl font-bold'> Name</label> <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>
<div className='flex flex-col w-full'> <div className='flex flex-col w-full'>
<label htmlFor="email" className='text-xl font-bold'>Email</label> <label htmlFor="email" className='text-xl font-bold'>Email</label>
@ -104,29 +103,46 @@ export default function addUserForm (){
<label htmlFor="phone" className='text-xl font-bold'> Phone</label> <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}/> <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>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="" className='text-xl font-bold'>School name</label> <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]'> <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]'>
<option value="individual" > individual </option> <option value="individual"> individual </option>
{school && school.data.map(data=> {school && school.data.map(data=>
<option value={data.id} key={data.id}>{data.name}</option> <option value={data.id} key={data.id}>{data.name}</option>
)} )}
</select> </select>
</div> </div>
{ individualValue &&
<div>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="class" className='text-xl font-bold'>Class</label> <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]'> <select name="class" className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
<option value="0" >-Select-</option> <option value="0" >-Select-</option>
<option value="IK1">IK1</option> <option value="IK1">IK1</option>
<option value="IK2">IK2</option> <option value="IK2">IK2</option>
<option value="IK3">IK3</option> <option value="IK3">IK3</option>
<option value="PG">PG</option> <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> </select>
</div> </div>
<div className='flex flex-col w-full pt-4'> {/* <div className='flex flex-col w-full pt-4'>
<label htmlFor="plan" className='text-xl font-bold'>Plan</label> <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='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'> <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>&nbsp; <label className='cursor-pointer md:whitespace-nowrap' htmlFor="Early_Start_program">Early Start Program</label>&nbsp;
<input type="checkbox" name="plan" id="Early_Start_program" value='Early_Start_program' className='check-box'/> <input type="checkbox" name="plan" id="Early_Start_program" value='Early_Start_program' className='check-box'/>
</div> </div>
</div> </div>
</div> </div> */}
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="lang" className='text-xl font-bold'>Language</label> <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='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>&nbsp; <label className='cursor-pointer' htmlFor="gujrati">Gujrati</label>&nbsp;
<input type="checkbox" name="lang" value='gujrati' className='check-box'/> <input type="checkbox" name="lang" value='gujrati' className='check-box'/>
</div> </div>
</div> </div>
</div> </div>
<div className='flex flex-col w-full pt-4'> <div className='flex flex-col w-full pt-4'>
<label htmlFor="start_month" className='text-xl font-bold'>Start Month</label> <label htmlFor="start_month" className='text-xl font-bold'>Start Month</label>
@ -218,12 +230,11 @@ 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]' /> <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>
<div className='flex flex-col w-full'> <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]' /> <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> </div>
}
}
<div className='flex justify-center pt-8'> <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> <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>
{/* <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' /> */} {/* <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' /> */}

View File

@ -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>&nbsp;
<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>&nbsp;
<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>&nbsp;
<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>&nbsp;
<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>&nbsp;
<input type="checkbox" name="Bengali" id="Bengali" value='Bengali' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="English">English</label>&nbsp;
<input type="checkbox" name="English" id="English" value='English' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Hindi">Hindi</label>&nbsp;
<input type="checkbox" name="Hindi" id="Hindi" value='Hindi' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Urdu">Urdu</label>&nbsp;
<input type="checkbox" name="Urdu" id="Urdu" value='Urdu' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>&nbsp;
<input type="checkbox" name="Punjabi" id="Punjabi" value='Punjabi' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Telugu">Telugu</label>&nbsp;
<input type="checkbox" name="Telugu" id="Telugu" value='Telugu' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Marathi">Marathi</label>&nbsp;
<input type="checkbox" name="Marathi" id="Marathi" value='Marathi' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Nepali">Nepali</label>&nbsp;
<input type="checkbox" name="Nepali" id="Nepali" value='Nepali' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Kannada">Kannada</label>&nbsp;
<input type="checkbox" name="Kannada" id="Kannada" value='Kannada' className='check-box'/>
</div>
<div className=''>
<label className='cursor-pointer' htmlFor="Gujrati">Gujrati</label>&nbsp;
<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>
)
}