wip
parent
238fb238ff
commit
16c9718f19
Binary file not shown.
Binary file not shown.
|
|
@ -0,0 +1,8 @@
|
|||
uname,status,user,type,year,start_month,start_date,end_date,plan,klas,lang,phone,pass,anual,early_start_programme,toddlers,interakto,email,country,state,city,address,school
|
||||
name 1,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,1@email.com,IN,WB,Habra,sample road near landmark,individual
|
||||
name 5,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,5@email.com,IN,WB,Habra,sample road near landmark,individual
|
||||
name 4,published,,parent,,Feb,2023-05-14,2024-05-13,,IK2,,70000000011,,Jan,Feb,Mar,Jul,4@email.com,IN,WB,Habra,sample road near landmark,individual
|
||||
name 3,published,,parent,,Apr,2023-05-14,2024-05-13,,IK2,,70000000011,,Feb,Sept,Oct,Jul,3@email.com,IN,WB,Habra,sample road near landmark,individual
|
||||
name 2,published,,parent,,Apr,2023-05-14,2024-05-13,,IK2,,70000000011,,Feb,Sept,Oct,Jul,2@email.com,IN,WB,Habra,sample road near landmark,individual
|
||||
name 6,published,,parent,,Jun,2023-05-14,2024-05-13,,IK3,,70000000011,,Mar,Sept,Jul,Apr,6@email.com,BD,55,Lalmonirhat,sample road near landmark,individual
|
||||
teacher name,published,,teacher,,Apr,2023-05-15,2024-05-13,,IK2,,99999 99933,,Mar,0,0,0,t1@email.com,IN,WB,Barasat,,individual
|
||||
|
Binary file not shown.
|
|
@ -23,6 +23,7 @@ export default function addUserForm() {
|
|||
{lang: "kannada", value: false},
|
||||
{lang: "gujrati", value: false},
|
||||
])
|
||||
console.log(allLanguage.value)
|
||||
const [currentType, setCurrentType] = useState(typeParent)
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
|
|
@ -88,20 +89,25 @@ export default function addUserForm() {
|
|||
const data = {
|
||||
"status": "published",
|
||||
type: event.target.type.value,
|
||||
name: event.target.name.value,
|
||||
user: event.target.email.value,
|
||||
uname: event.target.uname.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value,
|
||||
city: event.target.city.value,
|
||||
phone: event.target.phone.value,
|
||||
email: event.target.email.value,
|
||||
school: event.target.schoolID.value,
|
||||
class: event.target.class.value,
|
||||
klas: event.target.klas.value,
|
||||
lang: event.target.lang.value,
|
||||
start_month: event.target.start_month.value,
|
||||
start_date: event.target.start_date.value,
|
||||
end_date: event.target.end_date.value,
|
||||
anual: event.target.anual.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
interakto: event.target.interakto.value,
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/enrolled_user'
|
||||
const endpoint = '/api/addUsers'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
|
|
@ -111,7 +117,8 @@ export default function addUserForm() {
|
|||
}
|
||||
const response = await fetch(endpoint, options)
|
||||
const result = await response.json()
|
||||
alert(`Is this your full name: ${result.data}`)
|
||||
console.log(result)
|
||||
// alert(`Is this your full name: ${result}`)
|
||||
}
|
||||
const handleOnLanguageChange = (e, v) => {
|
||||
let idx = allLanguage.findIndex(o => o.lang === e.target.value);
|
||||
|
|
@ -152,15 +159,12 @@ export default function addUserForm() {
|
|||
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'>
|
||||
<img src="/img/2.svg" alt=""/>
|
||||
<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>
|
||||
<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"
|
||||
onChange={handleTypeOnChange}
|
||||
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<select name="type" onChange={handleTypeOnChange} className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value={typeParent}>Parent</option>
|
||||
<option value="teacher">Teacher</option>
|
||||
<option value="coordinator">Coordinator</option>
|
||||
|
|
@ -169,7 +173,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"
|
||||
<input type="text" name="uname"
|
||||
className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
placeholder='Enter your Name'/>
|
||||
</div>
|
||||
|
|
@ -196,10 +200,10 @@ export default function addUserForm() {
|
|||
{
|
||||
allCities && allCities.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<label htmlFor="city" className='text-xl font-bold'>City</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="Cities" options={allCities} value={allCities[0].name}
|
||||
name="city" options={allCities} value={allCities[0].name}
|
||||
// onChange={() => {}}
|
||||
/>
|
||||
</div>}
|
||||
|
|
@ -222,7 +226,7 @@ export default function addUserForm() {
|
|||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="class" className='text-xl font-bold'>Class</label>
|
||||
<select name="class"
|
||||
<select name="klas"
|
||||
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="IK1">IK1</option>
|
||||
|
|
@ -235,8 +239,7 @@ export default function addUserForm() {
|
|||
<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]'>
|
||||
<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="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
|
|
@ -252,27 +255,61 @@ export default function addUserForm() {
|
|||
<option value="Dec">Dec</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="plan" 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="plan" 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="plan" 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="plan" 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="early_start_programme" className='text-xl font-bold'>Early Start Programme</label>
|
||||
<select name="early_start_programme" 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="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
||||
<select name="toddlers" 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="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
||||
<select name="interakto" 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="Jan">Jan</option>
|
||||
<option value="Feb">Feb</option>
|
||||
<option value="Mar">Mar</option>
|
||||
<option value="Apr">Apr</option>
|
||||
<option value="May">May</option>
|
||||
<option value="Jun">Jun</option>
|
||||
<option value="Jul">Jul</option>
|
||||
<option value="Aug">Aug</option>
|
||||
<option value="Sept">Sept</option>
|
||||
<option value="Oct">Oct</option>
|
||||
<option value="Nov">Nov</option>
|
||||
<option value="Dec">Dec</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'>
|
||||
|
|
@ -291,8 +328,7 @@ export default function addUserForm() {
|
|||
</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]'>
|
||||
<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">-Select-</option>
|
||||
<option value="Jan"> Jan</option>
|
||||
<option value="Feb"> Feb</option>
|
||||
|
|
|
|||
|
|
@ -1,132 +1,258 @@
|
|||
// https://management.beanstalkedu.com/items/school
|
||||
// import React from 'react';
|
||||
import { useId,useState, useEffect,useMemo } from 'react';
|
||||
import {useId, useState, useEffect, useMemo} from 'react';
|
||||
import Select from 'react-select'
|
||||
import countryList from 'react-select-country-list'
|
||||
import 'react-phone-number-input/style.css'
|
||||
import PhoneInput from 'react-phone-number-input'
|
||||
|
||||
|
||||
import NavBar from '../components/NavBar';
|
||||
// import { Inter } from 'next/font/google'
|
||||
|
||||
export default function addUserForm (){
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
let [individualValue=true, setindividualValue] = useState()
|
||||
const typeParent = "parent"
|
||||
|
||||
// console.log(phoneValue)
|
||||
const selectCountry = countryValue => {
|
||||
setCountryValue(countryValue)
|
||||
export default function addUserForm() {
|
||||
const [allLanguage, setLanguage] = useState([
|
||||
{lang: "Assamese", value: false},
|
||||
{lang: "Bengali", value: false},
|
||||
{lang: "English", value: false},
|
||||
{lang: "Hindi", value: false},
|
||||
{lang: "telegu", value: false},
|
||||
{lang: "Punjabi", value: false},
|
||||
{lang: "malayalam", value: false},
|
||||
{lang: "tamil", value: false},
|
||||
{lang: "kannada", value: false},
|
||||
{lang: "gujrati", value: false},
|
||||
])
|
||||
const [currentType, setCurrentType] = useState(typeParent)
|
||||
const [countryValue, setCountryValue] = useState('')
|
||||
const options = useMemo(() => countryList().getData(), [])
|
||||
const [phoneValue, setphoneValue] = useState()
|
||||
let [individualValue = true, setindividualValue] = useState()
|
||||
|
||||
const [allStates, setAllStates] = useState([])
|
||||
const [allCities, setAllCities] = useState([])
|
||||
|
||||
const handleSelectAllStates = stateCode => {
|
||||
setAllCities([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/city/?country=${countryValue.value}&state=${stateCode.value}`).then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("handleSelectAllStates:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.name
|
||||
|
||||
}
|
||||
})
|
||||
setAllCities(newData)
|
||||
})
|
||||
}
|
||||
|
||||
const selectCountry = countryValue => {
|
||||
setAllStates([])
|
||||
fetch(`https://api.siliconpin.com/v3/list/country/state/?country=${countryValue.value}`).then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("countryValue:", data, options)
|
||||
let newData = data && data.length > 0 && data.map(n => {
|
||||
return {
|
||||
label: n.name,
|
||||
value: n.iso2
|
||||
|
||||
}
|
||||
})
|
||||
setAllStates(newData)
|
||||
setAllCities([])
|
||||
})
|
||||
|
||||
setCountryValue(countryValue)
|
||||
}
|
||||
|
||||
const individual = (event) => {
|
||||
// console.log(event.target.schoolID.value)
|
||||
|
||||
setindividualValue(individualValue = false)
|
||||
}
|
||||
const [school, setSchool] = useState(null);
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
setSchool(data)
|
||||
|
||||
})
|
||||
}, [])
|
||||
// console.log(school);
|
||||
|
||||
const handleFormsubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status": "published",
|
||||
type: event.target.type.value,
|
||||
name: event.target.name.value,
|
||||
user: event.target.email.value,
|
||||
country: event.target.country.value,
|
||||
phone: event.target.phone.value,
|
||||
school: event.target.schoolID.value,
|
||||
class: event.target.class.value,
|
||||
lang: event.target.lang.value,
|
||||
start_month: event.target.start_month.value,
|
||||
start_date: event.target.start_date.value,
|
||||
end_date: event.target.end_date.value,
|
||||
anual: event.target.anual.value,
|
||||
}
|
||||
|
||||
const individual = (event) => {
|
||||
// console.log(event.target.schoolID.value)
|
||||
|
||||
setindividualValue(individualValue=false)
|
||||
const JSONdata = JSON.stringify(data)
|
||||
const endpoint = '/api/addUsers'
|
||||
const options = {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSONdata,
|
||||
}
|
||||
const [school, setSchool] = useState(null);
|
||||
useEffect(() => {
|
||||
fetch(`https://management.beanstalkedu.com/items/school`).
|
||||
then(res => res.json())
|
||||
.then(data => {
|
||||
setSchool(data)
|
||||
|
||||
})
|
||||
}, [])
|
||||
// console.log(school);
|
||||
const response = await fetch(endpoint, options)
|
||||
const result = await response.json()
|
||||
alert(`Is this your full name: ${result.data}`)
|
||||
}
|
||||
const handleOnLanguageChange = (e, v) => {
|
||||
let idx = allLanguage.findIndex(o => o.lang === e.target.value);
|
||||
let newAllLang = [...allLanguage]
|
||||
newAllLang[idx].value = true
|
||||
|
||||
const handleFormsubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
type: event.target.type.value,
|
||||
name: event.target.name.value,
|
||||
user: event.target.email.value,
|
||||
country: event.target.country.value,
|
||||
phone: event.target.phone.value,
|
||||
school: event.target.schoolID.value,
|
||||
class: event.target.class.value,
|
||||
lang: event.target.lang.value,
|
||||
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,
|
||||
|
||||
if ([typeParent, "teacher"].includes(currentType)) {
|
||||
let counter = 0
|
||||
newAllLang.forEach((n, idx) => {
|
||||
if (n.value) {
|
||||
counter++
|
||||
}
|
||||
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}`)
|
||||
})
|
||||
if (counter >= 2) {
|
||||
newAllLang.forEach((n, idx) => {
|
||||
newAllLang[idx].disabled = true
|
||||
})
|
||||
}
|
||||
}
|
||||
setLanguage(newAllLang)
|
||||
}
|
||||
const handleTypeOnChange = (e) => {
|
||||
let newAllLang = [...allLanguage]
|
||||
newAllLang.forEach((n, idx) => {
|
||||
newAllLang[idx].value = false
|
||||
newAllLang[idx].disabled = false
|
||||
})
|
||||
setLanguage(newAllLang)
|
||||
setCurrentType(e.target.value)
|
||||
}
|
||||
return (
|
||||
<main>
|
||||
<div>
|
||||
<NavBar />
|
||||
<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'>
|
||||
<img src="/img/2.svg" alt="" />
|
||||
<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]'>
|
||||
<option value="parent" >Parent</option>
|
||||
<option value="teacher">Teacher</option>
|
||||
<option value="coordinator">Coordinator</option>
|
||||
<option value="master">Master</option>
|
||||
</select>
|
||||
</div>
|
||||
<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'>
|
||||
<img src="/img/2.svg" alt=""/>
|
||||
<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"
|
||||
onChange={handleTypeOnChange}
|
||||
className=' bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value={typeParent}>Parent</option>
|
||||
<option value="teacher">Teacher</option>
|
||||
<option value="coordinator">Coordinator</option>
|
||||
<option value="master">Master</option>
|
||||
</select>
|
||||
</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]'
|
||||
placeholder='Enter your Name'/>
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
||||
<input type="email" name="email" 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'>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="country" instanceId={useId()} options={options} value={countryValue}
|
||||
onChange={selectCountry}/>
|
||||
</div>
|
||||
{allStates && allStates.length > 0 &&
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="state" options={allStates} value={allStates[0].name}
|
||||
onChange={handleSelectAllStates}/>
|
||||
</div>}
|
||||
{
|
||||
allCities && allCities.length > 0 &&
|
||||
<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]' />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="email" className='text-xl font-bold'>Email</label>
|
||||
<input type="email" name="email" 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'>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<Select className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' name="country" instanceId={useId()} options={options} value={countryValue} onChange={selectCountry} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<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]'>
|
||||
<option value="individual" > individual </option>
|
||||
{school && school.data.map(data=>
|
||||
<option value={data.id} key={data.id}>{data.name}</option>
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
{ individualValue &&
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<Select
|
||||
className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'
|
||||
name="Cities" options={allCities} value={allCities[0].name}
|
||||
// onChange={() => {}}
|
||||
/>
|
||||
</div>}
|
||||
<div className='flex flex-col w-full'>
|
||||
<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]'>
|
||||
<option value="individual"> individual</option>
|
||||
{school && school.data.map(data =>
|
||||
<option value={data.id} key={data.id}>{data.name}</option>
|
||||
)}
|
||||
</select>
|
||||
</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]'>
|
||||
<option value="0">-Select-</option>
|
||||
<option value="IK1">IK1</option>
|
||||
<option value="IK2">IK2</option>
|
||||
<option value="IK3">IK3</option>
|
||||
<option value="PG">PG</option>
|
||||
</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]'>
|
||||
<option value="0" >-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'>
|
||||
<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,93 +271,66 @@ 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 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="assamese">Assamese</label>
|
||||
<input type="checkbox" name="lang" value='Bengali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="bengali">Bengali</label>
|
||||
<input type="checkbox" name="lang" value='Bengali' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="english">English</label>
|
||||
<input type="checkbox" name="lang" value='English' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="hindi">Hindi</label>
|
||||
<input type="checkbox" name="lang" value='Hindi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="telegu">Telegu</label>
|
||||
<input type="checkbox" name="lang" value='telegu' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="Punjabi">Punjabi</label>
|
||||
<input type="checkbox" name="lang" value='Punjabi' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="malayalam">Malayalam</label>
|
||||
<input type="checkbox" name="lang" value='malayalam' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="tamil">Tamil</label>
|
||||
<input type="checkbox" name="lang" value='tamil' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<label className='cursor-pointer' htmlFor="kannada">Kannada</label>
|
||||
<input type="checkbox" name="lang" value='kannada' className='check-box'/>
|
||||
</div>
|
||||
<div className=''>
|
||||
<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>
|
||||
<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" >-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> */}
|
||||
<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'>
|
||||
{allLanguage && allLanguage.length && allLanguage.map(n => {
|
||||
return (
|
||||
<div key={n.lang} className=''>
|
||||
<label className='cursor-pointer'
|
||||
htmlFor="assamese">{n.lang}</label>
|
||||
<input type="checkbox" disabled={n.disabled} name="lang" value={n.lang} checked={n.value}
|
||||
onChange={handleOnLanguageChange}
|
||||
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>
|
||||
<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">-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'>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>
|
||||
{/* <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>
|
||||
}
|
||||
<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>
|
||||
{/* <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>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,43 @@
|
|||
export default function handler(req, res) {
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
|
||||
console.log(req.body)
|
||||
// Open a new database connection
|
||||
let uname, status, type, start_month, start_date, end_date, plan, klas, lang, phone, pass, anual, early_start_programme, toddlers, interakto, email, country, state, city, address, school="";
|
||||
|
||||
if(req.body.uname) uname =req.body.uname;
|
||||
if(req.body.status) status =req.body.status;
|
||||
// if(req.body.status) status ="published";
|
||||
if(req.body.type) type =req.body.type;
|
||||
if(req.body.start_month) start_month =req.body.start_month;
|
||||
if(req.body.start_date) start_date =req.body.start_date;
|
||||
if(req.body.end_date) end_date =req.body.end_date;
|
||||
if(req.body.plan) plan =req.body.plan;
|
||||
if(req.body.klas) klas =req.body.klas;
|
||||
if(req.body.lang) lang =req.body.lang;
|
||||
if(req.body.lang) lang =req.body.lang;
|
||||
if(req.body.phone) phone =req.body.phone;
|
||||
if(req.body.pass) pass =req.body.pass;
|
||||
if(req.body.anual) anual =req.body.anual;
|
||||
if(req.body.early_start_programme) early_start_programme =req.body.early_start_programme;
|
||||
if(req.body.toddlers) toddlers =req.body.toddlers;
|
||||
if(req.body.interakto) interakto =req.body.interakto;
|
||||
if(req.body.email) email =req.body.email;
|
||||
if(req.body.country) country =req.body.country;
|
||||
if(req.body.state) state =req.body.state;
|
||||
if(req.body.city) city =req.body.city;
|
||||
if(req.body.address) address =req.body.address;
|
||||
if(req.body.school) school =req.body.school;
|
||||
const db = new sqlite3.Database('data/appUser.db');
|
||||
db.run(`INSERT INTO user (uname, status, type, start_month, start_date, end_date, plan, klas, lang, phone, pass, anual, early_start_programme, toddlers, interakto, email, country, state, city, address, school ) VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`, [ uname, status, type, start_month, start_date, end_date, plan, klas, lang, phone, pass, anual, early_start_programme, toddlers, interakto, email, country, state, city, address, school],
|
||||
function(err) {
|
||||
if (err) {
|
||||
return console.log(err.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
db.close();
|
||||
|
||||
|
||||
res.status(200).json({ name: 'John Doe' });
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
const csv = require('csv-parser');
|
||||
const fs = require('fs');
|
||||
const sqlite3 = require('sqlite3').verbose();
|
||||
|
||||
// Open a new database connection
|
||||
const db = new sqlite3.Database('data/appUser.db');
|
||||
|
||||
// Create a new table in the database
|
||||
// db.run('CREATE TABLE mytable (column1 TEXT, column2 TEXT, column3 TEXT)');
|
||||
|
||||
// Read the CSV file and insert the data into the database
|
||||
fs.createReadStream('mycsvfile.csv')
|
||||
.pipe(csv())
|
||||
.on('data', (row) => {
|
||||
db.run(`INSERT INTO mytable (column1, column2, column3) VALUES (?, ?, ?)`, [row.column1, row.column2, row.column3]);
|
||||
})
|
||||
.on('end', () => {
|
||||
console.log('CSV file successfully imported into SQLite.');
|
||||
// Close the database connection
|
||||
db.close();
|
||||
});
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
import csv from 'csv-parser';
|
||||
import fs from 'fs';
|
||||
import sqlite3 from 'sqlite3';
|
||||
|
||||
export default function handler(req,res) {
|
||||
|
||||
|
||||
const DB_NAME = 'data/appUser.db';
|
||||
const TABLE_NAME = 'user';
|
||||
|
||||
// Open a connection to the SQLite database
|
||||
const db = new sqlite3.Database(DB_NAME);
|
||||
|
||||
fs.createReadStream('data/user.csv')
|
||||
.pipe(csv())
|
||||
.on('data', (data) => {
|
||||
const values = Object.values(data);
|
||||
const placeholders = values.map(() => '?').join(',');
|
||||
const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
|
||||
db.run(sql, values, (err) => {
|
||||
if (err) {
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
})
|
||||
.on('end', () => {
|
||||
console.log(`Data inserted successfully into table ${TABLE_NAME}`);
|
||||
|
||||
// Close the database connection
|
||||
db.close();
|
||||
});
|
||||
|
||||
|
||||
res.status(200).json({ name: 'John Doe' })
|
||||
}
|
||||
|
||||
|
|
@ -10,15 +10,17 @@ export const config = {
|
|||
const post = async (req, res) => {
|
||||
const form = new formidable.IncomingForm();
|
||||
form.parse(req, async function (err, fields, files) {
|
||||
await saveFile(files.file);
|
||||
// console.log(fields)
|
||||
await saveFile(files.file,fields.fName? fields.fName:files.file.originalFilename );
|
||||
return res.status(201).send("");
|
||||
});
|
||||
};
|
||||
|
||||
const saveFile = async (file) => {
|
||||
const saveFile = async (file,fName) => {
|
||||
// console.log(file.filepath)
|
||||
// console.log(fName)
|
||||
const data = fs.readFileSync(file.filepath);
|
||||
fs.writeFileSync(`./public/uploaded/${file.originalFilename}`, data);
|
||||
fs.writeFileSync(`./public/uploaded/${fName}`, data);
|
||||
fs.unlinkSync(file.filepath);
|
||||
return;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
import csv from 'csv-parser';
|
||||
import fs from 'fs';
|
||||
import sqlite3 from 'sqlite3';
|
||||
|
||||
export default function handler(req,res) {
|
||||
|
||||
|
||||
const DB_NAME = 'data/appUser.db';
|
||||
const TABLE_NAME = 'user';
|
||||
|
||||
// Open a connection to the SQLite database
|
||||
const db = new sqlite3.Database(DB_NAME);
|
||||
|
||||
const query = `SELECT * FROM ${TABLE_NAME}`;
|
||||
|
||||
function getAllRows(tableName) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const sql = `SELECT * FROM ${tableName}`;
|
||||
db.all(sql, [], (err, rows) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
const data = rows;
|
||||
resolve(data);
|
||||
});
|
||||
});
|
||||
};
|
||||
async function doSomething() {
|
||||
try {
|
||||
const returnData = await getAllRows('user');
|
||||
res.setHeader('Content-Type', 'application/json')
|
||||
res.status(200).json(returnData)
|
||||
// console.log(data);
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
doSomething();
|
||||
// const returnData = getAllRows('user');
|
||||
// console.log(getAllRows('user'));
|
||||
// const returnData= db.run('SELECT * FROM user');
|
||||
|
||||
// fs.createReadStream('data/user.csv')
|
||||
// .pipe(csv())
|
||||
// .on('data', (data) => {
|
||||
// const values = Object.values(data);
|
||||
// const placeholders = values.map(() => '?').join(',');
|
||||
// const sql = `INSERT INTO ${TABLE_NAME} (${Object.keys(data).join(',')}) VALUES (${placeholders})`;
|
||||
// db.run(sql, values, (err) => {
|
||||
// if (err) {
|
||||
// console.error(err);
|
||||
// }
|
||||
// });
|
||||
// })
|
||||
// .on('end', () => {
|
||||
// console.log(`Data inserted successfully into table ${TABLE_NAME}`);
|
||||
|
||||
// // Close the database connection
|
||||
// db.close();
|
||||
// });
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
import NavBar from '../components/NavBar'
|
||||
import { useId, useState, useEffect, useMemo } from 'react';
|
||||
import 'react-phone-number-input/style.css'
|
||||
import { useRouter } from 'next/router'
|
||||
|
||||
|
||||
export default function addSchoolForm() {
|
||||
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const [school, setSchool] = useState({});
|
||||
|
||||
useEffect(()=>{
|
||||
// if(router.query.school<1) {
|
||||
// const { sid } = router.query;
|
||||
// setSchool(sid)
|
||||
if(router.query.school && router.query.school>1 ){
|
||||
fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log(router.query.school); setSchool(data.data)
|
||||
})
|
||||
}
|
||||
|
||||
}, [router.query.school]);
|
||||
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
name: event.target.schoolName.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value,
|
||||
cities: event.target.cities.value,
|
||||
anual: event.target.anual.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
interakto: event.target.interakto.value,
|
||||
agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
school_agreement: event.target.school_agreement.value,
|
||||
school_contact_number: event.target.school_contact_number.value,
|
||||
school_email_id: event.target.school_email_id.value,
|
||||
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
console.log(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/school'
|
||||
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}`)
|
||||
alert(`School Saved`)
|
||||
}
|
||||
|
||||
|
||||
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'>
|
||||
<img src="/img/1.svg" alt="" />
|
||||
<p className='text-2xl md:text-4xl font-bold underline decoration-4 decoration-[#FE4501] pb-10'>School Registration Form</p>
|
||||
</div>
|
||||
<form className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school" className='text-xl font-bold'>School Name</label>
|
||||
<input type="text" value={school.name} onChange={e => setSchool(e.target.value)} name="schoolName" 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_email_id" className='text-xl font-bold'> Email ID</label>
|
||||
<input type="text" value={school.school_email_id} onChange={e => setSchool(e.target.value)} 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'>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<input type="text" value={school.country} onChange={e => setSchool(e.target.value)} name="country" />
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<input type="text" value={school.state} onChange={e => setSchool(e.target.value)} name="state" />
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<input type="text" value={school.cities} onChange={e => setSchool(e.target.value)} name="cities" />
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label>
|
||||
<input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)} name="school_contact_number" />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="anual" className='text-xl font-bold'>Anual</label>
|
||||
<input type="text" value={school.anual} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
||||
<input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
|
||||
<input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
||||
<input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
|
||||
<input type="date" name="agreement_expiry_date" value={school.agreement_expiry_date} onChange={e => setSchool(e.target.value)} id="agreement_expiry_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'>
|
||||
<input type="submit" value="Save" 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>
|
||||
)
|
||||
}
|
||||
|
|
@ -5,52 +5,20 @@ import { useRouter } from 'next/router'
|
|||
|
||||
|
||||
export default function addSchoolForm() {
|
||||
const router = useRouter();
|
||||
|
||||
const uploadToServer = async (event) => {
|
||||
const body = new FormData();
|
||||
body.append("file", agreement.files[0]);
|
||||
body.append("fName", `${router.query.school}.pdf`);
|
||||
const response = await fetch("/api/fileUpload", {
|
||||
method: "POST",
|
||||
body
|
||||
});
|
||||
};
|
||||
|
||||
const router = useRouter()
|
||||
// const sid= router.query.school
|
||||
// const query = useQuery();
|
||||
|
||||
|
||||
const [school, setSchool] = useState([]);
|
||||
// if(sid){console.log(sid)}
|
||||
// const getSchoolData = async (sid) => {
|
||||
|
||||
|
||||
// let getSchoolApi=`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`
|
||||
// console.log(sid)
|
||||
// const response = await fetch(getSchoolApi);
|
||||
// const data = await response.json();
|
||||
// let schoolData = data && data.length > 0
|
||||
// return setSchool(schoolData.data);
|
||||
|
||||
// }
|
||||
// console.log(sid)
|
||||
// useEffect(() => {
|
||||
// // async function getSchoolData() {
|
||||
// // // You can await here
|
||||
// // const response = await MyAPI.getData(someId);
|
||||
// // // ...
|
||||
// // }
|
||||
// // getSchoolData();
|
||||
// // if(!router.isReady) return;
|
||||
// // const { sid } = router.query;
|
||||
// // console.log(sid);
|
||||
// // // getSchoolData();
|
||||
// // let getSchoolApi=`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`
|
||||
// // console.log(sid)
|
||||
// // await fetch(getSchoolApi);
|
||||
// if (!query) {
|
||||
// return;
|
||||
// }
|
||||
// fetch(`https://management.beanstalkedu.com/items/school?filter[status][_eq]=published&school=${sid}`)
|
||||
// .then(res => res.json())
|
||||
// .then(data => {
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
// let newData = data && data.length > 0
|
||||
// setSchool(newData)
|
||||
// })
|
||||
// },[])
|
||||
const [school, setSchool] = useState({});
|
||||
|
||||
useEffect(()=>{
|
||||
// if(router.query.school<1) {
|
||||
// const { sid } = router.query;
|
||||
|
|
@ -59,53 +27,47 @@ export default function addSchoolForm() {
|
|||
fetch(`https://management.beanstalkedu.com/items/school/${router.query.school}`)
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
// console.log("handleSelectAllStates:", data, options)
|
||||
// let newData = data && data.length > 0
|
||||
console.log(router.query.school); setSchool(data.data)
|
||||
})
|
||||
}
|
||||
|
||||
}, [router.query.school]);
|
||||
|
||||
// console.log(school.data);
|
||||
// console.log(phoneValue)
|
||||
// const selectCountry = countryValue => {
|
||||
// setCountryValue(countryValue)
|
||||
// }
|
||||
// const handleSubmit = async (event) => {
|
||||
// event.preventDefault()
|
||||
// const data = {
|
||||
// "status":"published",
|
||||
// name: event.target.schoolName.value,
|
||||
// country: event.target.country.value,
|
||||
// state: event.target.state.value,
|
||||
// cities: event.target.cities.value,
|
||||
// anual: event.target.anual.value,
|
||||
// toddlers: event.target.toddlers.value,
|
||||
// early_start_programme: event.target.early_start_programme.value,
|
||||
// interakto: event.target.interakto.value,
|
||||
// agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
// school_agreement: event.target.school_agreement.value,
|
||||
// school_contact_number: event.target.school_contact_number.value,
|
||||
// school_email_id: event.target.school_email_id.value,
|
||||
const handleSubmit = async (event) => {
|
||||
event.preventDefault()
|
||||
const data = {
|
||||
"status":"published",
|
||||
name: event.target.schoolName.value,
|
||||
country: event.target.country.value,
|
||||
state: event.target.state.value,
|
||||
cities: event.target.cities.value,
|
||||
anual: event.target.anual.value,
|
||||
toddlers: event.target.toddlers.value,
|
||||
early_start_programme: event.target.early_start_programme.value,
|
||||
interakto: event.target.interakto.value,
|
||||
agreement_expiry_date: event.target.agreement_expiry_date.value,
|
||||
school_agreement: event.target.school_agreement.value,
|
||||
school_contact_number: event.target.school_contact_number.value,
|
||||
school_email_id: event.target.school_email_id.value,
|
||||
|
||||
// }
|
||||
// const JSONdata = JSON.stringify(data)
|
||||
// console.log(data)
|
||||
// const endpoint = 'https://management.beanstalkedu.com/items/school'
|
||||
// const options = {
|
||||
// method: 'POST',
|
||||
// headers: {
|
||||
// 'Content-Type': 'application/json',
|
||||
// },
|
||||
// body: JSONdata,
|
||||
// }
|
||||
// const response = await fetch(endpoint, options)
|
||||
}
|
||||
const JSONdata = JSON.stringify(data)
|
||||
console.log(data)
|
||||
const endpoint = 'https://management.beanstalkedu.com/items/school'
|
||||
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}`)
|
||||
alert(`School Saved`)
|
||||
}
|
||||
|
||||
// const result = await response.json()
|
||||
// // alert(`Is this your full name: ${result.data}`)
|
||||
// alert(`School Saved`)
|
||||
// }
|
||||
|
||||
return (
|
||||
<main>
|
||||
|
|
@ -120,115 +82,81 @@ export default function addSchoolForm() {
|
|||
<form className='w-full px-6 md:px-20'>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="school" className='text-xl font-bold'>School Name</label>
|
||||
<input type="text" value={school.name} name="schoolName" placeholder='School Name' className='border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="text" value={school.name} onChange={e => setSchool(e.target.value)} name="schoolName" 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_email_id" className='text-xl font-bold'> 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]' />
|
||||
<input type="text" value={school.school_email_id} onChange={e => setSchool(e.target.value)} 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'>
|
||||
<label htmlFor="country" className='text-xl font-bold'>Country</label>
|
||||
<input type="text" name="country" />
|
||||
<input type="text" value={school.country} onChange={e => setSchool(e.target.value)} name="country" />
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="state" className='text-xl font-bold'>State</label>
|
||||
<input type="text" name="state" />
|
||||
<input type="text" value={school.state} onChange={e => setSchool(e.target.value)} name="state" />
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="Cities" className='text-xl font-bold'>Cities</label>
|
||||
<input type="text" name="cities" />
|
||||
<input type="text" value={school.cities} onChange={e => setSchool(e.target.value)} name="cities" />
|
||||
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="phone" className='text-xl font-bold'> Phone</label>
|
||||
<input type="text" name="phone" />
|
||||
<label htmlFor="school_contact_number" className='text-xl font-bold'> Phone</label>
|
||||
<input type="text" value={school.school_contact_number} onChange={e => setSchool(e.target.value)} name="school_contact_number" />
|
||||
</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>
|
||||
<input type="text" value={school.anual} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="toddlers" className='text-xl font-bold'>Toddlers</label>
|
||||
<select name="toddlers" 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>
|
||||
<input type="text" name="toddlers" value={school.toddlers} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="early_start_programme" className='text-xl font-bold'>Early Start Program</label>
|
||||
<select name="early_start_programme" 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>
|
||||
<input type="text" name="early_start_programme" value={school.early_start_programme} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full pt-4'>
|
||||
<label htmlFor="interakto" className='text-xl font-bold'>Interakto</label>
|
||||
<select name="interakto" className='bg-white border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]'>
|
||||
<option value="na">-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="November"> November</option>
|
||||
<option value="December"> December</option>
|
||||
</select>
|
||||
<input type="text" name="interakto" value={school.interakto} onChange={e => setSchool(e.target.value)} />
|
||||
</div>
|
||||
<div className='flex flex-col w-full'>
|
||||
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Agreement Expiry Date</label>
|
||||
<input type="date" name="agreement_expiry_date" id="agreement_expiry_date" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<input type="date" name="agreement_expiry_date" value={school.agreement_expiry_date} onChange={e => setSchool(e.target.value)} id="agreement_expiry_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="school_agreement" className='text-xl font-bold pt-4'>Upload School Agreement</label>
|
||||
<input type="file" name="school_agreement" id="school_agreement" className=' border-2 border-[#FE4501] p-2 rounded-md focus:outline-none focus:border-2 focus:border-[#F2B705]' />
|
||||
<label htmlFor="agreement_expiry_date" className='text-xl font-bold pt-4'>Upload Agreement</label>
|
||||
<input type="file" name="agreement_expiry_date" />
|
||||
</div> */}
|
||||
<div className='flex justify-center pt-8'>
|
||||
{/* <a href="/school-list"><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'>Submit Now</button></a> */}
|
||||
{/* <div className='flex justify-center pt-8'>
|
||||
<input type="submit" value="Save" 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>
|
||||
</div> */}
|
||||
</form>
|
||||
|
||||
<div class="flex pt-6">
|
||||
<div class="flex-1 ">
|
||||
<input id="agreement" type="file" name="myImage" onChange={uploadToServer} />
|
||||
{/* <button
|
||||
className="rounded-full bg-[#FE4501] p-2 text-white"
|
||||
type="submit"
|
||||
onClick={uploadToServer}
|
||||
>
|
||||
Upload Agreement
|
||||
</button> */}
|
||||
</div>
|
||||
<div class="flex-1 ">
|
||||
<a href={'/uploaded/'+router.query.school+'.pdf'}><button
|
||||
className="rounded-full bg-[#FE4501] p-2 text-white"
|
||||
type="submit"
|
||||
onClick={uploadToServer}
|
||||
>
|
||||
Download Agreement
|
||||
</button></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,9 +6,10 @@ import NavBar from '../components/NavBar'
|
|||
export default function Modal() {
|
||||
const [user, setUser] = useState([]);
|
||||
const fetchData = async () => {
|
||||
const response = await fetch("https://management.beanstalkedu.com/items/enrolled_user?filter[status][_eq]=published");
|
||||
const response = await fetch("/api/listUsers");
|
||||
const data = await response.json();
|
||||
return setUser(data.data);
|
||||
console.log(data)
|
||||
return setUser(data);
|
||||
}
|
||||
// console.log(user)
|
||||
|
||||
|
|
@ -28,7 +29,7 @@ const fetchData = async () => {
|
|||
</a>
|
||||
</div>
|
||||
<div className='flex overflow-x-scroll xl:justify-center'>
|
||||
<table className=" text-center border-2 p-2 w-full">
|
||||
<table className=" text-center border-2 p-2 w-full">
|
||||
<thead className=''>
|
||||
<tr className='bg-[#FFF6F2] text-[#1D1D1D] text-xl whitespace-nowrap'>
|
||||
<th className="border-x-2 p-4">user Name</th>
|
||||
|
|
|
|||
Loading…
Reference in New Issue