Skip to content

Commit

Permalink
patch: test is value changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@tinashechiraya
tinashechiraya authored Mar 1, 2024
1 parent 96c3bfb commit 0b54138
Showing 1 changed file with 103 additions and 112 deletions.
215 changes: 103 additions & 112 deletions django_project/minisass_frontend/src/components/CoordinatesInputForm/degreeInputs.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,160 +1,151 @@
import React, { useEffect, useState } from 'react';
import { Text } from "../Text";
import { Field } from "formik";
import {debounce} from '@mui/material/utils';
import {globalVariables} from "../../utils";
import { debounce } from '@mui/material/utils';
import { globalVariables } from "../../utils";
import axios from "axios";


export interface DegreeInputInterface {
label: string,
label: string;
value: number;
onChange: React.Dispatch<React.SetStateAction<number>>;
disabled?: boolean
disabled?: boolean;
}

/** Degree input form. **/
function DegreeInput({ label, value, onChange, disabled }: DegreeInputInterface) {
const [currValue, setCurrValue] = useState(value)
const min = label === 'Latitude' ? -90 : -180
const max = -1 * min

const [currValue, setCurrValue] = useState(value);

const convertToSixDecimals = React.useMemo(
() =>
debounce(
(
value: number
) => {
setCurrValue(Number(value).toFixed(6))
(value: number) => {
setCurrValue(Number(value).toFixed(6));
},
1000,
),
[],
);


useEffect(() => {
if (!isNaN(currValue)) {
onChange(currValue)
onChange(currValue);
}
}, [currValue]);

// useEffect(() => {
// if (value) {
// convertToSixDecimals(value)
// }
// }, [value]);

return <div
className="flex sm:flex-col flex-row gap-3 items-center justify-between w-[541px] sm:w-full"
style={{ marginBottom: "2%" }}
>
<Text
className="text-gray-800 text-lg tracking-[0.15px] w-auto"
>
{label}:
</Text>
<Field
id={label}
value={currValue}
type="number"
onBlur={(evt) => {
convertToSixDecimals(evt.target.value)
}}
disabled={disabled}
className="!placeholder:text-black-900_99 !text-black-900_99 font-raleway md:h-auto p-0 sm:h-auto text-base text-left tracking-[0.50px] w-full"
wrapClassName="sm:w-full"
shape="round"
color="black_900_3a"
size="xs"
variant="outline"
min={min}
max={max}
placeholder="0.000000"
step={0.0001}
style={{
width: '300px',
maxWidth: '300px',
height: '40px',
border: `1px solid ${!currValue ? 'red' : 'rgba(0, 0, 0, 0.23)'}`,
borderRadius: '4px',
padding: '8px 12px',
marginRight: '-2%'
}}
onChange={(evt) => {
let value = evt.target.value
if (!isNaN(parseFloat(evt.target.value))) {
if (value > max) {
value = max
} else if (value < min) {
value = min
}, [currValue, onChange]);

return (
<div className="flex sm:flex-col flex-row gap-3 items-center justify-between w-[541px] sm:w-full" style={{ marginBottom: "2%" }}>
<Text className="text-gray-800 text-lg tracking-[0.15px] w-auto">
{label}:
</Text>
<Field
id={label}
value={currValue}
type="number"
onBlur={(evt) => {
convertToSixDecimals(evt.target.value);
}}
disabled={disabled}
className="!placeholder:text-black-900_99 !text-black-900_99 font-raleway md:h-auto p-0 sm:h-auto text-base text-left tracking-[0.50px] w-full"
wrapClassName="sm:w-full"
shape="round"
color="black_900_3a"
size="xs"
variant="outline"
placeholder="0.000000"
step={0.0001}
style={{
width: '300px',
maxWidth: '300px',
height: '40px',
border: `1px solid ${!currValue ? 'red' : 'rgba(0, 0, 0, 0.23)'}`,
borderRadius: '4px',
padding: '8px 12px',
marginRight: '-2%'
}}
onChange={(evt) => {
let value = evt.target.value;
if (!isNaN(parseFloat(evt.target.value))) {
const min = label === 'Latitude' ? -90 : -180;
const max = -1 * min;
if (value > max) {
value = max;
} else if (value < min) {
value = min;
}
}
}
setCurrValue(value)
}}
/>
</div>
setCurrValue(value);
}}
/>
</div>
);
}

export interface DegreeInputsInterface {
latitude: number,
latitude: number;
setLatitude: React.Dispatch<React.SetStateAction<number>>;
longitude: number,
longitude: number;
setLongitude: React.Dispatch<React.SetStateAction<number>>;
disabled?: boolean
disabled?: boolean;
}

/** Degree input form. **/
export default function DegreeInputs(
{ latitude, setLatitude, longitude, setLongitude, disabled }: DegreeInputsInterface
) {
const [valueChanged, setValueChanged] = useState(false);

const checkSiteIsLand = React.useMemo(
() =>
debounce(
(
lat: number,
long: number,
) => {
if (lat != 0 || long != 0) {
(
async () => {
try {
const response = await axios.get(`${globalVariables.baseUrl}/monitor/sites/is-land/${lat}/${long}/`);

if(response.status == 200){
if (!response.data.is_land)
alert('Your points seem to be in the sea or not on land masses!')
(lat: number, long: number) => {
if (lat !== 0 || long !== 0) {
(
async () => {
try {
const response = await axios.get(`${globalVariables.baseUrl}/monitor/sites/is-land/${lat}/${long}/`);
if (response.status === 200) {
if (!response.data.is_land) {
alert('Your points seem to be in the sea or not on land masses!');
}
}
} catch (error) {
console.error('Error checking site land:', error);
}

} catch (error) {

}
}
)()
)();
}
},
1000,
),
[],
[]
);

useEffect(() => {
checkSiteIsLand(latitude, longitude)
}, [latitude, longitude]);

return <>
<DegreeInput
label='Latitude'
value={latitude}
onChange={setLatitude}
disabled={disabled}
/>
<DegreeInput
label='Longitude'
value={longitude}
onChange={setLongitude}
disabled={disabled}
/>
</>
if (valueChanged) {
checkSiteIsLand(latitude, longitude);
setValueChanged(false);
}
}, [valueChanged]);

return (
<>
<DegreeInput
label='Latitude'
value={latitude}
onChange={(value) => {
setLatitude(value);
setValueChanged(true);
}}
disabled={disabled}
/>
<DegreeInput
label='Longitude'
value={longitude}
onChange={(value) => {
setLongitude(value);
setValueChanged(true);
}}
disabled={disabled}
/>
</>
);
}

0 comments on commit 0b54138

Please sign in to comment.