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

Removed one insert image

Browse Source
This commit is contained in:
ZacTohZY
2024-08-10 19:05:03 +08:00
parent 5f59a046d6
commit ea8ab16ae5
4 changed files with 27 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -36,8 +36,7 @@ const validationSchema = Yup.object({
.positive("Must be a positive value") .positive("Must be a positive value")
.max(99999.99, "Value is too large") .max(99999.99, "Value is too large")
.required("Average bill is a required field"), .required("Average bill is a required field"),
ebPicture: Yup.mixed().required("Electrical bill picture is required"), billPicture: Yup.mixed().required("Bill picture is required"),
wbPicture: Yup.mixed().required("Water bill picture is required"),
}); });
export default function HBFormPage() { export default function HBFormPage() {
@@ -49,15 +48,13 @@ export default function HBFormPage() {
totalBill: "", totalBill: "",
noOfDependents: "", noOfDependents: "",
avgBill: "", avgBill: "",
ebPicture: null, billPicture: null,
wbPicture: null,
userId: "", userId: "",
}); });
// Add state for image selection // Add state for image selection
const [imagesSelected, setImagesSelected] = useState({ const [imagesSelected, setImagesSelected] = useState({
ebPicture: false, billPicture: false,
wbPicture: false,
}); });
useEffect(() => { useEffect(() => {
@@ -112,12 +109,8 @@ export default function HBFormPage() {
formData.append("noOfDependents", values.noOfDependents); formData.append("noOfDependents", values.noOfDependents);
formData.append("avgBill", values.avgBill); formData.append("avgBill", values.avgBill);
if (values.ebPicture) { if (values.billPicture) {
formData.append("ebPicture", values.ebPicture); formData.append("billPicture", values.billPicture);
}
if (values.wbPicture) {
formData.append("wbPicture", values.wbPicture);
} }
if (userId != null) { if (userId != null) {
@@ -137,8 +130,7 @@ export default function HBFormPage() {
if (response.status === 200) { if (response.status === 200) {
console.log("Form created successfully:", response.data); console.log("Form created successfully:", response.data);
resetForm(); // Clear form after successful submit resetForm(); // Clear form after successful submit
setFieldValue("ebPicture", null); setFieldValue("billPicture", null);
setFieldValue("wbPicture", null);
navigate(-1); navigate(-1);
} else { } else {
console.error("Error creating form:", response.statusText); console.error("Error creating form:", response.statusText);
@@ -190,12 +182,8 @@ export default function HBFormPage() {
formData.append("noOfDependents", values.noOfDependents); formData.append("noOfDependents", values.noOfDependents);
formData.append("avgBill", values.avgBill); formData.append("avgBill", values.avgBill);
if (values.ebPicture) { if (values.billPicture) {
formData.append("ebPicture", values.ebPicture); formData.append("billPicture", values.billPicture);
}
if (values.wbPicture) {
formData.append("wbPicture", values.wbPicture);
} }
if (userId != null) { if (userId != null) {
@@ -216,8 +204,7 @@ export default function HBFormPage() {
if (response.status === 200) { if (response.status === 200) {
console.log("Form created successfully:", response.data); console.log("Form created successfully:", response.data);
resetForm(); // Clear form after successful submit resetForm(); // Clear form after successful submit
setFieldValue("ebPicture", null); setFieldValue("billPicture", null);
setFieldValue("wbPicture", null);
navigate(-1); navigate(-1);
} else { } else {
console.error("Error creating form:", response.statusText); console.error("Error creating form:", response.statusText);
@@ -242,7 +229,7 @@ export default function HBFormPage() {
return ( return (
<div className="w-full h-full pb-12"> <div className="w-full h-full pb-12">
<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="w-[680px] 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 />
@@ -268,13 +255,13 @@ export default function HBFormPage() {
}, [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.billPicture;
return ( return (
<Form> <Form>
<div className="flex flex-col gap-5"> <div className="flex flex-col">
<div className="flex flex-row gap-5"> <div className="flex flex-row gap-10">
<div className="flex flex-col gap-5 p-2 min-w-[180px] "> <div className="flex flex-col gap-10 p-2 min-w-[220px]">
<NextUIFormikInput <NextUIFormikInput
label="Electrical Bill" label="Electrical Bill"
name="electricalBill" name="electricalBill"
@@ -318,17 +305,10 @@ export default function HBFormPage() {
</div> </div>
<div className="flex flex-row gap-10"> <div className="flex flex-row gap-10">
<InsertImage <InsertImage
label="Electrical Bill Image" label=""
onImageSelected={(file) => { onImageSelected={(file) => {
setFieldValue("ebPicture", file); setFieldValue("billPicture", file);
handleImageSelection("ebPicture", file); handleImageSelection("billPicture", file);
}}
/>
<InsertImage
label="Water Bill Image"
onImageSelected={(file) => {
setFieldValue("wbPicture", file);
handleImageSelection("wbPicture", file);
}} }}
/> />
</div> </div>

11
client/src/pages/Ranking.tsx
View File

@@ -18,8 +18,7 @@ interface FormData {
totalBill: number; totalBill: number;
noOfDependents: number; noOfDependents: number;
avgBill: number; avgBill: number;
ebPicture: string; billPicture: string;
wbPicture: string;
userId: string; userId: string;
} }
@@ -150,8 +149,7 @@ export default function Ranking() {
<TableColumn onClick={handleSort}> <TableColumn onClick={handleSort}>
Average Bill {renderSortIndicator()} Average Bill {renderSortIndicator()}
</TableColumn> </TableColumn>
<TableColumn>Electrical Bill Picture</TableColumn> <TableColumn>Bill Picture</TableColumn>
<TableColumn>Water Bill Picture</TableColumn>
<TableColumn>Actions</TableColumn> <TableColumn>Actions</TableColumn>
</TableHeader> </TableHeader>
<TableBody> <TableBody>
@@ -166,10 +164,7 @@ export default function Ranking() {
<TableCell>{data.noOfDependents}</TableCell> <TableCell>{data.noOfDependents}</TableCell>
<TableCell>${data.avgBill.toFixed(2)}</TableCell> <TableCell>${data.avgBill.toFixed(2)}</TableCell>
<TableCell> <TableCell>
{data.ebPicture && <img src={`${config.serverAddress}/hbcform/ebPicture/${data.id}`} alt="Electrical Bill" className="w-full" />} {data.billPicture && <img src={`${config.serverAddress}/hbcform/billPicture/${data.id}`} alt="bill picture" className="w-full" />}
</TableCell>
<TableCell>
{data.wbPicture && <img src={`${config.serverAddress}/hbcform/wbPicture/${data.id}`} alt="Water Bill" className="w-full" />}
</TableCell> </TableCell>
<TableCell className="flex flex-row"> <TableCell className="flex flex-row">
<Button isIconOnly variant="light" className="text-blue-500" onClick={() => handleEmailClick(data.userEmail, data.userName)}><EmailIcon /></Button> <Button isIconOnly variant="light" className="text-blue-500" onClick={() => handleEmailClick(data.userEmail, data.userName)}><EmailIcon /></Button>

6
server/models/HBCform.js
View File

@@ -30,11 +30,7 @@ module.exports = (sequelize, DataTypes) => {
type: DataTypes.DECIMAL(7, 2), type: DataTypes.DECIMAL(7, 2),
allowNull: false, allowNull: false,
}, },
ebPicture: { billPicture: {
type: DataTypes.BLOB("long"),
allowNull: true,
},
wbPicture: {
type: DataTypes.BLOB("long"), type: DataTypes.BLOB("long"),
allowNull: true, allowNull: true,
}, },

34
server/routes/hbcform.js
View File

@@ -62,8 +62,7 @@ async function processFile(file) {
router.post( router.post(
"/", "/",
upload.fields([ upload.fields([
{ name: "ebPicture", maxCount: 1 }, { name: "billPicture", maxCount: 1 },
{ name: "wbPicture", maxCount: 1 },
]), ]),
async (req, res) => { async (req, res) => {
let data = req.body; let data = req.body;
@@ -83,14 +82,12 @@ router.post(
data = await validationSchema.validate(data, { abortEarly: false }); data = await validationSchema.validate(data, { abortEarly: false });
// Process the files // Process the files
const processedEbPicture = await processFile(files.ebPicture[0]); const processedbillPicture = await processFile(files.billPicture[0]);
const processedWbPicture = await processFile(files.wbPicture[0]);
// Save the form with processed files // Save the form with processed files
let result = await HBCform.create({ let result = await HBCform.create({
...data, ...data,
ebPicture: processedEbPicture, billPicture: processedbillPicture,
wbPicture: processedWbPicture,
}); });
res.json(result); res.json(result);
@@ -130,37 +127,18 @@ router.get("/:id", async (req, res) => {
res.json(hbcform); res.json(hbcform);
}); });
router.get("/ebPicture/:id", async (req, res) => { router.get("/billPicture/:id", async (req, res) => {
let id = req.params.id; let id = req.params.id;
let hbcform = await HBCform.findByPk(id); let hbcform = await HBCform.findByPk(id);
if (!hbcform || !hbcform.ebPicture) { if (!hbcform || !hbcform.billPicture) {
res.sendStatus(404); res.sendStatus(404);
return; return;
} }
try { try {
res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary
res.send(hbcform.ebPicture); res.send(hbcform.billPicture);
} catch (err) {
res
.status(500)
.json({ message: "Error retrieving electrical bill", error: err });
}
});
router.get("/wbPicture/:id", async (req, res) => {
let id = req.params.id;
let hbcform = await HBCform.findByPk(id);
if (!hbcform || !hbcform.wbPicture) {
res.sendStatus(404);
return;
}
try {
res.set("Content-Type", "image/jpeg"); // Adjust the content type as necessary
res.send(hbcform.wbPicture);
} catch (err) { } catch (err) {
res res
.status(500) .status(500)