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

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

@@ -18,8 +18,7 @@ interface FormData {
totalBill: number;
noOfDependents: number;
avgBill: number;
ebPicture: string;
wbPicture: string;
billPicture: string;
userId: string;
}
@@ -150,8 +149,7 @@ export default function Ranking() {
<TableColumn onClick={handleSort}>
Average Bill {renderSortIndicator()}
</TableColumn>
<TableColumn>Electrical Bill Picture</TableColumn>
<TableColumn>Water Bill Picture</TableColumn>
<TableColumn>Bill Picture</TableColumn>
<TableColumn>Actions</TableColumn>
</TableHeader>
<TableBody>
@@ -166,10 +164,7 @@ export default function Ranking() {
<TableCell>{data.noOfDependents}</TableCell>
<TableCell>${data.avgBill.toFixed(2)}</TableCell>
<TableCell>
{data.ebPicture && <img src={`${config.serverAddress}/hbcform/ebPicture/${data.id}`} alt="Electrical Bill" className="w-full" />}
</TableCell>
<TableCell>
{data.wbPicture && <img src={`${config.serverAddress}/hbcform/wbPicture/${data.id}`} alt="Water Bill" className="w-full" />}
{data.billPicture && <img src={`${config.serverAddress}/hbcform/billPicture/${data.id}`} alt="bill picture" className="w-full" />}
</TableCell>
<TableCell className="flex flex-row">
<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),
allowNull: false,
},
ebPicture: {
type: DataTypes.BLOB("long"),
allowNull: true,
},
wbPicture: {
billPicture: {
type: DataTypes.BLOB("long"),
allowNull: true,
},

34
server/routes/hbcform.js
View File

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