import "./Form.scss"; import React, { useEffect, useState } from "react"; import Map from "../Map/Map"; import axios from "axios"; import GovernmentForm from "./GovernmentForm"; import ResidentialForm from "./ResidentialForm"; import CellTowerForm from "./CellTowerForm"; import EnterpriseForm from "./EnterpriseForm"; import Select from "../select/select"; function Form({ text, paragraph, telangana, department, page }) { const [visibility, setVisibility] = useState(0); const [availability, setAvailability] = useState(0); const [pinDisabled, setPinDisabled] = useState(false); const [panchayatDisabled, setPanchayatDisabled] = useState(false); const [map, setMap] = useState(""); const [location, setLocation] = useState(""); const [position, setPosition] = useState({ lat: 18.1124372, lng: 79.01929969999999, }); const zoom = 15; const apiKey = "AIzaSyAVs-wCER__18LpKRb3ozA2pot15DGmels"; const [mandalOptions, setMandalOptions] = useState([]); const [isWithinTelangana, setIsWithinTelangana] = useState(0); const [isSearchDone, setIsSearchDone] = useState(0); const [noResults, setNoResults] = useState(0); const [yourDetails, setYourDetails] = useState([]); function handleDisable(e) { let selectedOption = e; if(selectedOption == 1){ setGram(null); setDistrictDisabled(true); setMandalDisabled(true); setOpt2PanchayatDisabled(true); setMapDisabled(true); setPinDisabled(false); setPanchayatDisabled(false); } if(selectedOption == 2){ setGram(null); setDistrictDisabled(false); setMandalDisabled(false); setOpt2PanchayatDisabled(false); setMapDisabled(true); setPinDisabled(true); setPanchayatDisabled(true); setPin(""); serGrams = { selected: null }; } if(selectedOption == 3){ setGram(null); setDistrictDisabled(true); setMandalDisabled(true); setOpt2PanchayatDisabled(true); setMapDisabled(false); setPinDisabled(true); setPanchayatDisabled(true); } }; //mandals array const mandals = [ "Adilabad", "Bhadradri Kothagudem", "Hanumakonda", "Hyderabad", "Jagitial", "Jangoan", "Jayashankar Bhupalapally", "Jogulamba Gadwal", "Kamareddy", "Karimnagar", "Khammam", "Kumuram Bheem Asifabad", "Mahabubabad", "Mancherial", "Medak", "Medchal Malkajgiri", "Mulugu", "Nagarkurnool", "Nalgonda", "Narayanpet", "Nirmal", "Nizamabad", "Peddapalli", "Rajanna Sircilla", "Ranga Reddy", "Sangareddy", "Siddipet", "Suryapet", "Vikarabad", "Wanaparthy", "Warangal", "Yadadri Bhuvanagiri", ]; const [pin, setPin] = useState(); const [gram, setGram] = useState(); const [mandal, setMandal] = useState(); const [district, setDistrict] = useState(); const [dept, setDept] = useState(); //for option 1 const [grams, setGrams] = useState([]); //filter and option functionalities function filterGramsbasedonPin() { if (pin > 500000) { const filteredData = telangana.filter(filterPin); var gp = []; filteredData.forEach((element) => { gp.push(element.__EMPTY_9); }); setGrams(gp); } function filterPin(item) { if (item.__EMPTY_10 === pin) { return true; } else { return false; } } } //for option 2 const [mandalam, setMandalam] = useState([]); function filterMandalbasedondistrict() { if (district !== null) { const filteredData = telangana.filter(filterMandal); var mandal = new Set(); filteredData.forEach((element) => { mandal.add(element.__EMPTY_5); }); var mandalArr = Array.from(mandal); setMandalam(mandalArr); } function filterMandal(item) { if (item.__EMPTY_1 === district) { return true; } else { return false; } } } const [grammam, setGrammam] = useState([]); function filterGrambasedonMandal() { if (mandal !== null) { const filteredData = telangana.filter(filterGramam); var gps = new Set(); filteredData.forEach((element) => { gps.add(element.__EMPTY_9); }); var gramam = Array.from(gps); setGrammam(gramam); } function filterGramam(item) { if (item.__EMPTY_5 === mandal) { return true; } else { return false; } } } //lgd fetching const [lgd, setLgd] = useState(0); function fetchLgd() { if (gram !== null) { const lgdCode = telangana.filter(getLGD); if (lgdCode.length > 0) { setLgd(lgdCode[0].__EMPTY_12); console.log(lgd); } } function getLGD(item) { if (item.__EMPTY_9 === gram) { return true; } else { return false; } } } //for department const [dep, setDep] = useState([]); function getDepartments() { var indDept = new Set(); department.forEach((element) => { indDept.add(element.__EMPTY_1); }); var depts = Array.from(indDept); setDep(depts); } useEffect(() => { getDepartments(); }, [visibility]); //for sundepartments const [subdept, setSubdept] = useState([]); function getSubDepartments() { if (dept !== null) { const filteredData = department.filter(filterSubDept); var subDept = new Set(); filteredData.forEach((element) => { subDept.add(element.__EMPTY); }); var subDeptArr = Array.from(subDept); setSubdept(subDeptArr); } function filterSubDept(item) { if (item.__EMPTY_1 === dept) { return true; } else { return false; } } } useEffect(() => { getSubDepartments(); }, [dept]); const continueHandler = (e) => { e.preventDefault(); setVisibility(!visibility); }; const availabilityHandler = (e) => { e.preventDefault(); setAvailability(1); }; const editHandler = () => { setVisibility(0); setAvailability(0); setPosition({ lat: 18.1124372, lng: 79.01929969999999 }); setIsWithinTelangana(0); setIsSearchDone(0); setNoResults(0); }; const renderMap = () => { const mapApi = `https://maps.googleapis.com/maps/api/geocode/json?address=${location}&key=${apiKey}`; if (location !== "") { let addressComponents = 0; setIsSearchDone(0); setIsWithinTelangana(0); setNoResults(0); axios .get(mapApi) .then(function (response) { // handle success console.log(response); const validatedSearch = response.data?.results.length > 0 ? validateSearch(response.data?.results) : { status: false, filteredIndex: [], type: "NoResult" }; console.log("validatedSearch: ", validatedSearch); if (validatedSearch.status) { let selectedIndex = 0; if (response.data.results.length > 1) { response.data.results.forEach((value, index) => { console.log("######## START ########"); console.log("Step: ", index); if (validatedSearch.filteredIndex.includes(index)) { if (value.address_components.length > addressComponents) { addressComponents = value.address_components.length; selectedIndex = index; console.log("Here Index: ", index); } } console.log("######## END ########"); }); } console.log("selectedIndex: ", selectedIndex); setPosition(response.data.results[selectedIndex].geometry.location); setIsWithinTelangana(1); } else { if (validatedSearch.type === "NoResult") { setNoResults(1); } } }) .catch(function (error) { // handle error console.log(error); }) .finally(function () { setIsSearchDone(1); }); } }; const validateSearch = (data) => { const result = { status: false, filteredIndex: [], type: "Validated" }; data.forEach((place, index) => { let foundState = false; let foundCountry = false; place.address_components.forEach((components) => { if (components.long_name === "Telangana") { foundState = true; } if (components.long_name === "India") { foundCountry = true; } }); if (foundState && foundCountry) { result.status = true; result.filteredIndex.push(index); } }); return result; }; const yourDetailsAllocator = () => { console.log('outside page:', page); switch(page) { case 'government': console.log('page:', page); setYourDetails([]); break; case 'residential': setYourDetails([]) break; case 'cellTower': setYourDetails([]) break; case 'enterprise': setYourDetails([]) break; default: setYourDetails([<>]); } } const checkAvailability = () => { const api = "http://localhost:3020"; console.log(govData); axios .request({ method: "GET", url: api, headers: { "content-type": "application/json", }, params: { type: "GP", lgdCode: "281242" }, data: { type: "GP", lgdCode: "281242", }, timeout: 50000, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.error(error); }); // fetch(api, { // Method: 'GET', // Headers: { // 'Content-Type': 'application/json' // }, // Body: { "type": "GP", "lgdCode": "281242" }, // Cache: 'default' // }).then(function(response) { // console.log(response); // }).catch(function (error) { // console.error(error); // }); }; const [govData, setGovData] = useState({ name: '', mobile: '', Department: '', SubDepartment: '', broadband: false, ill: false, ipvpn: false, other: '' }); const handleGovChange = (e) => { const { name, value } = e.target; setGovData((prevState) => ({ ...prevState, [name]: value, })); }; const handleForm = (e) => { e.preventDefault(); console.log(govData); }; useEffect(() => { renderMap(); }, [availability]); useEffect(() => { setLocation(map); }, [map]); useEffect(() => { checkAvailability(); yourDetailsAllocator(); }, []); useEffect(() => { filterGramsbasedonPin(); }, [pin]); useEffect(() => { filterMandalbasedondistrict(); }, [district]); useEffect(() => { fetchLgd(); }, [gram]); useEffect(() => { filterGrambasedonMandal(); }, [mandal]); return (

{text}

{paragraph}

setPin(e.target.value)} disabled={pinDisabled ? true : null} />
OR
setDistrict(e.target.value)} > {mandals.map((item, idx) => ( ))}
OR
setMap(e.target.value)} />
Edit
{ yourDetails }

No Results Found

{/* */}

T-Fiber Network is
available in your area.

To proceed,
Place order | Send enquiry | Call Us

); } export default Form;