wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update HBFormPage css

Browse Source
This commit is contained in:
ZacTohZY
2024-08-06 02:46:52 +08:00
parent cedc506c4b
commit 3a0622e3ca
2 changed files with 103 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
client/src/components/InsertImage.tsx
View File

@@ -1,10 +1,11 @@
import React, { useState } from 'react'; import React, { useState } from "react";
interface InsertImageProps { interface InsertImageProps {
label: string;
onImageSelected: (file: File | null) => void; onImageSelected: (file: File | null) => void;
} }
const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => { const InsertImage: React.FC<InsertImageProps> = ({ label, onImageSelected }) => {
const [selectedFile, setSelectedFile] = useState<File | null>(null); const [selectedFile, setSelectedFile] = useState<File | null>(null);
const [previewImage, setPreviewImage] = useState<string>(''); const [previewImage, setPreviewImage] = useState<string>('');
@@ -19,8 +20,9 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
return ( return (
<div <div
className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md" className="flex flex-col items-center p-5 bg-white dark:bg-zinc-800 rounded-md"
style={{ width: 400, height: 500 }} style={{ width: 350, height: 530 }}
> >
<label className="mb-2 font-bold text-xl">{label}</label>
<input <input
type="file" type="file"
onChange={handleImageSelect} onChange={handleImageSelect}
@@ -37,4 +39,4 @@ const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
); );
}; };
export default InsertImage; export default InsertImage;

190
client/src/pages/HBFormPage.tsx
View File

@@ -148,111 +148,115 @@ export default function HBFormPage() {
}; };
return ( return (
<div className="w-full h-full"> <div className="w-full h-full pb-12">
<section className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px"> <div className="w-8/12 mx-auto p-6 bg-red-100 dark:bg-red-950 border border-primary-100 rounded-2xl h-600px">
<div className="py-2"> <div className="py-2">
<Button variant="light" onPress={() => navigate(-1)}> <Button variant="light" onPress={() => navigate(-1)}>
<ArrowUTurnLeftIcon /> <ArrowUTurnLeftIcon />
</Button> </Button>
</div> </div>
<Formik <div className="flex-grow overflow-y-auto">
initialValues={initialValues} <Formik
validationSchema={validationSchema} initialValues={initialValues}
onSubmit={handleSubmit} validationSchema={validationSchema}
> onSubmit={handleSubmit}
{({ isValid, dirty, isSubmitting, setFieldValue, values }) => { >
// Calculate the total bill {({ isValid, dirty, isSubmitting, setFieldValue, values }) => {
useEffect(() => { // Calculate the total bill
const totalBill = Number(values.electricalBill) + Number(values.waterBill); useEffect(() => {
setFieldValue("totalBill", totalBill.toFixed(2)); const totalBill = Number(values.electricalBill) + Number(values.waterBill);
setFieldValue("totalBill", totalBill.toFixed(2));
const avgBill = Number(values.noOfDependents) > 0 const avgBill = Number(values.noOfDependents) > 0
? totalBill / Number(values.noOfDependents) ? totalBill / Number(values.noOfDependents)
: 0; : 0;
setFieldValue("avgBill", avgBill.toFixed(2)); setFieldValue("avgBill", avgBill.toFixed(2));
}, [values.electricalBill, values.waterBill, values.noOfDependents, setFieldValue]); }, [values.electricalBill, values.waterBill, values.noOfDependents, setFieldValue]);
// Disabled the submit button because the images field are not selected // Disabled the submit button because the images field are not selected
const isSubmitDisabled = !imagesSelected.ebPicture || !imagesSelected.wbPicture; const isSubmitDisabled = !imagesSelected.ebPicture || !imagesSelected.wbPicture;
return ( return (
<Form> <Form>
<div className="flex flex-col gap-5"> <div className="flex flex-col gap-5">
<div className="flex flex-row gap-10"> <div className="flex flex-row gap-5">
<div className="flex flex-col gap-5 p-1"> <div className="flex flex-col gap-5 p-2 min-w-[180px] ">
<NextUIFormikInput <NextUIFormikInput
label="Electrical Bill" label="Electrical Bill"
name="electricalBill" name="electricalBill"
type="text" type="text"
placeholder="0.00" placeholder="0.00"
labelPlacement="inside" labelPlacement="inside"
setFieldValue={setFieldValue} setFieldValue={setFieldValue}
/> />
<NextUIFormikInput <NextUIFormikInput
label="Water Bill" label="Water Bill"
name="waterBill" name="waterBill"
type="text" type="text"
placeholder="0.00" placeholder="0.00"
labelPlacement="inside" labelPlacement="inside"
setFieldValue={setFieldValue} setFieldValue={setFieldValue}
/> />
<NextUIFormikInput <NextUIFormikInput
label="Total Bill" label="Total Bill"
name="totalBill" name="totalBill"
type="text" type="text"
placeholder="0.00" placeholder="0.00"
labelPlacement="inside" labelPlacement="inside"
readOnly={true} readOnly={true}
/> />
<NextUIFormikInput <NextUIFormikInput
label="Number of dependents" label="Number of dependents"
name="noOfDependents" name="noOfDependents"
type="text" type="text"
placeholder="0" placeholder="0"
labelPlacement="inside" labelPlacement="inside"
setFieldValue={setFieldValue} setFieldValue={setFieldValue}
/> />
<NextUIFormikInput <NextUIFormikInput
label="Average Bill" label="Average Bill"
name="avgBill" name="avgBill"
type="text" type="text"
placeholder="0" placeholder="0"
labelPlacement="inside" labelPlacement="inside"
readOnly={true} readOnly={true}
/> />
</div>
<div className="flex flex-row gap-10">
<InsertImage
label="Electrical Bill Image"
onImageSelected={(file) => {
setFieldValue("ebPicture", file);
handleImageSelection("ebPicture", file);
}}
/>
<InsertImage
label="Water Bill Image"
onImageSelected={(file) => {
setFieldValue("wbPicture", file);
handleImageSelection("wbPicture", file);
}}
/>
</div>
</div> </div>
<div className="flex flex-row max-w-xs h-[500px] gap-10"> <div>
<InsertImage <Button
onImageSelected={(file) => { type="submit"
setFieldValue("ebPicture", file); className="bg-red-400 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-900 text-white"
handleImageSelection("ebPicture", file); size="lg"
}} isDisabled={!isValid || !dirty || isSubmitting || isSubmitDisabled}
/> >
<InsertImage <p>Submit</p>
onImageSelected={(file) => { </Button>
setFieldValue("wbPicture", file);
handleImageSelection("wbPicture", file);
}}
/>
</div> </div>
</div> </div>
<div> </Form>
<Button );
type="submit" }}
className="bg-red-400 hover:bg-red-700 dark:bg-red-700 dark:hover:bg-red-900 text-white" </Formik>
size="lg" </div>
isDisabled={!isValid || !dirty || isSubmitting || isSubmitDisabled} </div>
>
<p>Submit</p>
</Button>
</div>
</div>
</Form>
);
}}
</Formik>
</section>
</div> </div>
); );
} }