Skip to content

Commit

Permalink
Update ux when selecting location site (#338)
Browse files Browse the repository at this point in the history 
* Update ux when selecting location site

* Add minheight to contact us form
  • Loading branch information
@dimasciput
dimasciput authored Dec 4, 2023
1 parent 032d11c commit 927b3b5
Show file tree
Hide file tree
Showing 5 changed files with 74 additions and 35 deletions.
7 changes: 4 additions & 3 deletions django_project/minisass_frontend/src/components/ContactFormModal/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const ContactFormModal: React.FC<ContactFormModalProps> = ({ isOpen, onClose, on
});
};;


const CONTACT_US_API = globalVariables.baseUrl + '/authentication/api/contact-us'

const SendContactUsEmail = async (formData) => {
Expand All @@ -51,7 +51,7 @@ const ContactFormModal: React.FC<ContactFormModalProps> = ({ isOpen, onClose, on
'Content-Type': 'application/json',
},
});

if (response.status === 200) {
setResponseMessage('Email sent. Hang in there, we will contact you back soon.');
setIsError(false);
Expand Down Expand Up @@ -232,6 +232,7 @@ const ContactFormModal: React.FC<ContactFormModalProps> = ({ isOpen, onClose, on
value={formData.message}
onChange={handleInputChange}
style={{
minHeight: '123px',
width: '541px',
height: '123px',
borderRadius: '4px',
Expand All @@ -247,7 +248,7 @@ const ContactFormModal: React.FC<ContactFormModalProps> = ({ isOpen, onClose, on
alignItems: 'flex-end',
gap: '10px',
width: '541px',
height: '37px',
height: '37px'
}}
>
<Button
Expand Down
9 changes: 7 additions & 2 deletions django_project/minisass_frontend/src/components/CoordinatesInputForm/degreeInputs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,11 @@ export interface DegreeInputInterface {
label: string,
value: number;
onChange: React.Dispatch<React.SetStateAction<number>>;
disabled?: boolean
}

/** Degree input form. **/
function DegreeInput({ label, value, onChange }: DegreeInputInterface) {
function DegreeInput({ label, value, onChange, disabled }: DegreeInputInterface) {
const [currValue, setCurrValue] = useState(value)
const min = label === 'Latitude' ? -90 : -180
const max = -1 * min
Expand Down Expand Up @@ -39,6 +40,7 @@ function DegreeInput({ label, value, onChange }: DegreeInputInterface) {
id={label}
value={currValue}
type="number"
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"
Expand Down Expand Up @@ -78,22 +80,25 @@ export interface DegreeInputsInterface {
setLatitude: React.Dispatch<React.SetStateAction<number>>;
longitude: number,
setLongitude: React.Dispatch<React.SetStateAction<number>>;
disabled?: boolean
}

/** Degree input form. **/
export default function DegreeInputs(
{ latitude, setLatitude, longitude, setLongitude }: DegreeInputsInterface
{ latitude, setLatitude, longitude, setLongitude, disabled }: DegreeInputsInterface
) {
return <>
<DegreeInput
label='Latitude'
value={latitude}
onChange={setLatitude}
disabled={disabled}
/>
<DegreeInput
label='Longitude'
value={longitude}
onChange={setLongitude}
disabled={disabled}
/>
</>
}
18 changes: 14 additions & 4 deletions django_project/minisass_frontend/src/components/CoordinatesInputForm/dmsInput.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,18 @@ export interface DegreeInputSectionInterface {
min: number;
max: number;
onChange: (value: number) => void;
disabled?: boolean
}

/** Input Section **/
function DmsInputSection(
{ id, value, max, min, onChange }: DegreeInputSectionInterface
{ id, value, max, min, onChange, disabled }: DegreeInputSectionInterface
) {
return <Field
id={id}
value={value}
type="number"
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 dms-input"
wrapClassName="sm:w-full"
shape="round"
Expand Down Expand Up @@ -63,10 +65,11 @@ export interface DegreeInputInterface {
label: string,
value: ValueInterface;
onChange: (values: ValueInterface) => void;
disabled?: boolean
}

/** Degree input form. **/
function DmsInput({ label, value, onChange }: DegreeInputInterface) {
function DmsInput({ label, value, onChange, disabled }: DegreeInputInterface) {
const [currValue, setCurrValue] = useState(value)
const { degrees, minutes, seconds, cardinal } = currValue

Expand Down Expand Up @@ -94,6 +97,7 @@ function DmsInput({ label, value, onChange }: DegreeInputInterface) {
<DmsInputSection
id={label + 'degrees'}
value={degrees} min={0} max={18000}
disabled={disabled}
onChange={(val) => {
setCurrValue(
{
Expand All @@ -106,6 +110,7 @@ function DmsInput({ label, value, onChange }: DegreeInputInterface) {
<DmsInputSection
id={label + 'minutes'}
value={minutes} min={0} max={6000}
disabled={disabled}
onChange={(val) => {
setCurrValue(
{
Expand All @@ -118,6 +123,7 @@ function DmsInput({ label, value, onChange }: DegreeInputInterface) {
<DmsInputSection
id={label + 'seconds'}
value={seconds} min={0} max={7200}
disabled={disabled}
onChange={(val) => {
setCurrValue(
{
Expand All @@ -137,6 +143,7 @@ function DmsInput({ label, value, onChange }: DegreeInputInterface) {
size="xs"
variant="outline"
value={cardinal}
disabled={disabled}
style={{
width: '80px',
maxWidth: '80px',
Expand Down Expand Up @@ -173,26 +180,29 @@ export interface DmsInputsInterface {
setLatitude: (values: ValueInterface) => void;
longitude: ValueInterface,
setLongitude: (values: ValueInterface) => void;
disabled?: boolean
}

/** Degree input form. **/
export default function DmsInputs(
{ latitude, setLatitude, longitude, setLongitude }: DmsInputsInterface
{ latitude, setLatitude, longitude, setLongitude, disabled }: DmsInputsInterface
) {
return <>
<DmsInput
label='DMS latitude'
disabled={disabled}
value={latitude}
onChange={(val: ValueInterface) => {
setLatitude(val)
}}
/>
<DmsInput
label='DMS longitude'
disabled={disabled}
value={longitude}
onChange={(val: ValueInterface) => {
setLongitude(val)
}}
/>
</>
}
}
12 changes: 8 additions & 4 deletions django_project/minisass_frontend/src/components/CoordinatesInputForm/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ export interface Interface {
selectedCoordinates: {longitude: number, latitude: number},
handleMapClick: (longitude: number, latitude: number) => void;
selectOnMap: boolean;
disabled?: boolean;
}

const detailed = 10000

/** Coordinates input form. **/
export default function CoordinatesInputForm(
{ values, setFieldValue, defaultType, handleMapClick, selectedCoordinates, selectOnMap }: Interface
{ values, setFieldValue, defaultType, handleMapClick, selectedCoordinates, selectOnMap, disabled }: Interface
) {
const [type, setType] = useState<string>(defaultType)

Expand Down Expand Up @@ -69,10 +70,11 @@ export default function CoordinatesInputForm(
)}
{selectOnMap ?
(

<DegreeInputs
latitude={values.latitude}
latitude={values.latitude}
longitude={values.longitude}
disabled={disabled}
setLatitude={(value) => {
setFieldValue('latitude', value);
handleMapClick(Number(value), Number(values.longitude))
Expand All @@ -84,8 +86,9 @@ export default function CoordinatesInputForm(
/>) :
type === 'Degree' ?
<DegreeInputs
latitude={values.latitude}
latitude={values.latitude}
longitude={values.longitude}
disabled={disabled}
setLatitude={(value) => {
setFieldValue('latitude', value);
handleMapClick(Number(value), Number(values.longitude))
Expand All @@ -98,6 +101,7 @@ export default function CoordinatesInputForm(
:
<DmsInputs
latitude={convertToDMSLatitude(values.latitude)}
disabled={disabled}
setLatitude={(values_internal: ValueInterface) => {
setLatitude(
convertDmsToLatitude(
Expand Down
Loading

0 comments on commit 927b3b5

Please sign in to comment.