diff --git a/components/Forms/BasicDetailsForm.js b/components/Forms/BasicDetailsForm.js index 7830d3f0..ae88534d 100644 --- a/components/Forms/BasicDetailsForm.js +++ b/components/Forms/BasicDetailsForm.js @@ -341,10 +341,14 @@ export function BasicDeatilsForm({ editMode }) { function handeBasicDetailsCreate(e) { e.preventDefault() + + const formData = new FormData(e.target) const data = Object.fromEntries(formData) + // Persist Data + /* const params = []; for(let [k, v] of formData) params.push(`${k}=${v}`) @@ -353,6 +357,8 @@ export function BasicDeatilsForm({ editMode }) { document.location.href = url + */ + fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/`, { method: 'POST', headers: { @@ -372,6 +378,12 @@ export function BasicDeatilsForm({ editMode }) { }) + const current_url = new URL(window.document.location.href) + + current_url.searchParams.set('formId', '1') + + window.document.location.href = url + } function handleNumberInputChange(e) { diff --git a/components/Forms/EditForm.js b/components/Forms/EditForm.js index 980dcf99..b27d2866 100644 --- a/components/Forms/EditForm.js +++ b/components/Forms/EditForm.js @@ -54,12 +54,10 @@ export function EditForm() { const [tabOpen, setTabOpen] = useState(null) - // Update facility ID in the store useEffect(() => { - - console.log({options}) + // console.log({options}) setFacilityId(options?.data?.id) }, []) @@ -130,21 +128,19 @@ export function EditForm() { value="basic_details" className="grow-1 py-1 px-4 tab-panel" > - - - {/* Geolocation */} + [geoJSON, setGeoJSON]} useGeoData={(type) => { switch (type) { diff --git a/components/Forms/Form.js b/components/Forms/Form.js index 9a6df124..38cd74bd 100644 --- a/components/Forms/Form.js +++ b/components/Forms/Form.js @@ -1,7 +1,7 @@ "use client" -import {useState, createContext} from 'react'; +import {createContext, useEffect, useState} from 'react'; import Box from '@mui/material/Box'; import Stepper from '@mui/material/Stepper'; @@ -51,13 +51,27 @@ key:'facility_id', value: 'null' }).actions.use(); +const [formId, setFormId] = useState('0') + + +useEffect(() => { + function setStateFromUrl() { + const url = new URL(window.document.location.href) + + setFormId(url.searchParams.get('formId')) + + } + + setStateFromUrl() +}, []) + // const [formId, setFormId] = useState(0); // -const [formId, setFormId] = useLocalStorageState({ - key: 'formId', - value: 0 -}).actions.use(); +// const [formId, setFormId] = useLocalStorageState({ +// key: 'formId', +// value: 0 +// }).actions.use(); const steps = [ diff --git a/components/Forms/GeolocationForm.js b/components/Forms/GeolocationForm.js index 0b031178..32c76d41 100644 --- a/components/Forms/GeolocationForm.js +++ b/components/Forms/GeolocationForm.js @@ -27,14 +27,10 @@ const _ = require('underscore'); export function GeolocationForm({useGeoJSON, useGeoData, mode}) { - const options = useContext(FormOptionsContext); + const _options = useContext(FormOptionsContext); + + // console.log({options}) - // // Constants - const formFields = { - collection_date: "", - latitude: "", - longitude: "" - } @@ -50,31 +46,140 @@ export function GeolocationForm({useGeoJSON, useGeoData, mode}) { facilityGeolocationData['latitude'] = [] } - const coordinates_id = options?.data?.coordinates; + // const coordinates_id = options?.data?.coordinates; //Context - const[facilityId, ____] = useContext(FacilityIdContext) + // const[facilityId, ____] = useContext(FacilityIdContext) // State - const [formId, setFormId] = useContext(FormContext); + // const [formId, setFormId] = useContext(FormContext); const [geoJSON, __] = useGeoJSON(); const [wardName, ___] = useGeoData('ward_data'); const [geoCenter, _____] = useGeoData('geo_data'); + const [options, setOptions] = useState(_options) const alert = useAlert(); - // Form Schema + // Event handlers + + function handleGeolocationPrevious() { + e.preventDefault() + + const url = new URL(window.document.location.href) - const handleGeolocationPrevious = useCallback(() => { - setFormId(`${parseInt(formId) - 1}`); + url.searchParams.set('formId', '0') + + window.document.location.href = url - }, []) + } + + function handleGeolocationFormSubmit() { + e.preventDefault() + + const formData = new FormData(e.target) + + const data = Object.fromEntries(formData) + + // Persist Data + /* + const params = []; + + for(let [k, v] of formData) params.push(`${k}=${v}`) + + const url = new URL(`${document.location.href}/?${params.join('&')}`) + + document.location.href = url + + */ + + fetch(`${process.env.NEXT_PUBLIC_API_URL}/facilities/facilities/`, { + method: 'POST', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json;charset=UTF-8', + 'Authorization': `Bearer ${options?.token}` + }, + body: JSON.stringify(data) + }) + .then(res => { + if (res.status == 201 || res.status == 200) { + alert.success('Facility Added Successfully') + } else { + alert.error('Unable to Add facility') + } + }) + + + + // Navigation + + const current_url = new URL(window.document.location.href) + + current_url.searchParams.set('formId', '2') + + window.document.location.href = url + + } + + + function handleInput(e) { + e.preventDefault() + const lat_long = [] + // const coordinates = [] + + if(e.target.name == 'latitude') { + + lat_long[0] = e.target.value; + lat_long[1] = document.getElementsByName('longitude')[0]?.value + + + setOptions({ + options: { + collection_date: '', + data: { + lat_long + } + + } + }) + } else if (e.target.name == 'longitude') { + + lat_long[0] = document.getElementsByName('latitude')[0]?.value + lat_long[1] = e.target.value; + + setOptions({ + options: { + collection_date: '', + data: { + lat_long, + } + + } + }) + } else { + + lat_long[0] = document.getElementsByName('longitude')[0]?.value + lat_long[1] = document.getElementsByName('latitude')[0]?.value + + setOptions({ + options: { + collection_date: e.target.value, + data: { + lat_long, + } + + } + }) + } + } + + // console.log({options}) @@ -84,8 +189,14 @@ export function GeolocationForm({useGeoJSON, useGeoData, mode}) { name='geolocation_form' className='flex flex-col w-full mt-4 items-start bg-blue-50 shadow-md p-3 justify-start gap-3' + onSubmit={handleGeolocationFormSubmit} > {/* Collection Date */} + { + JSON.stringify({ + options + }) + }
diff --git a/components/WardGISMap.js b/components/WardGISMap.js index a1265abb..0b9b5282 100644 --- a/components/WardGISMap.js +++ b/components/WardGISMap.js @@ -47,40 +47,40 @@ const WardGISMap = ({ markerCoordinates, geoJSON, center, ward }) => { } - // useEffect(() => { - // const lngs = [] - // const lats = [] + useEffect(() => { + const lngs = [] + const lats = [] - // const bounds = geoJSON.properties.bound.coordinates + const bounds = geoJSON.properties.bound.coordinates - // if (geoJSON) { + if (geoJSON) { - // for (let i = 0; i < bounds.length; i++){ - // lngs.push(bounds[i][0]) - // lats.push(bounds[i][1]) - // } - - // if( - // !(lngs.every(bound => markerCoordinates[1] < bound) && - // lats.every(bound => markerCoordinates[0] < bound)) - // ) { - - // // Not Out of Bound - // setIsOutOfBound(false) - - // console.log("[>>>>>] NoT of Bound") - // } - // else { - // //Out of Bound - // setIsOutOfBound(true) - // console.log("[>>>>>] Out of Bound") - // } + for (let i = 0; i < bounds.length; i++){ + lngs.push(bounds[i][0]) + lats.push(bounds[i][1]) + } + + if( + !(lngs.every(bound => markerCoordinates[1] < bound) && + lats.every(bound => markerCoordinates[0] < bound)) + ) { + + // Not Out of Bound + setIsOutOfBound(false) + + console.log("[>>>>>] NoT of Bound") + } + else { + //Out of Bound + setIsOutOfBound(true) + console.log("[>>>>>] Out of Bound") + } - // } + } - // }, [markerCoordinates, geoJSON]) + }, [markerCoordinates, geoJSON])