Added HBContest, HBForm
This commit is contained in:
ZacTohZY
@@ -14,6 +14,8 @@ import EventsPage from "./pages/EventsPage";
|
||||
import CreateEventsPage from "./pages/CreateEventsPage";
|
||||
import ManageEventsPage from "./pages/ManageEventsPage";
|
||||
import AdministratorSpringboard from "./pages/AdministratorSpringboard";
|
||||
import HBContestPage from "./pages/HBContestPage";
|
||||
import HBFormPage from "./pages/HBFormPage";
|
||||
import EditEventsPage from "./pages/EditEventsPage";
|
||||
|
||||
function App() {
|
||||
@@ -32,6 +34,8 @@ function App() {
|
||||
<Route element={<PostPage />} path="/post/:id" />
|
||||
<Route element={<SchedulePage />} path="/schedule" />
|
||||
<Route element={<EventsPage />} path="/events" />
|
||||
<Route element={<HBContestPage />} path="/contest" />
|
||||
<Route element={<HBFormPage />} path="/hbcform" />
|
||||
<Route element={<CreateEventsPage />} path="/createEvent" />
|
||||
<Route element={<ManageEventsPage />} path="/manageEvent" />
|
||||
<Route element={<EditEventsPage />} path="/editEvent/:id" />
|
||||
|
||||
31
client/src/components/InsertImage.tsx
Normal file
31
client/src/components/InsertImage.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import React, { useState } from 'react';
|
||||
|
||||
interface InsertImageProps {
|
||||
onImageSelected: (file: File) => void;
|
||||
}
|
||||
|
||||
const InsertImage: React.FC<InsertImageProps> = ({ onImageSelected }) => {
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const [previewImage, setPreviewImage] = useState<string>('');
|
||||
|
||||
const handleImageSelect = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const selectedFiles = event.target.files as FileList;
|
||||
const file = selectedFiles?.[0];
|
||||
if (file) {
|
||||
setSelectedFile(file);
|
||||
setPreviewImage(URL.createObjectURL(file));
|
||||
onImageSelected(file);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input type="file" onChange={handleImageSelect} />
|
||||
{selectedFile && (
|
||||
<img src={previewImage} alt="Selected Image" />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InsertImage;
|
||||
@@ -91,6 +91,15 @@ export default function NavigationBar() {
|
||||
>
|
||||
<p className="text-lg">Schedules</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
size="sm"
|
||||
onPress={() => {
|
||||
navigate("/contest");
|
||||
}}
|
||||
>
|
||||
<p className="text-lg">HB Contest</p>
|
||||
</Button>
|
||||
<Button
|
||||
variant="light"
|
||||
size="sm"
|
||||
|
||||
54
client/src/pages/HBContestPage.tsx
Normal file
54
client/src/pages/HBContestPage.tsx
Normal file
@@ -0,0 +1,54 @@
|
||||
import { Card, CardHeader, CardBody, CardFooter, Divider, Button } from "@nextui-org/react";
|
||||
import DefaultLayout from '../layouts/default';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
|
||||
export default function HBContestPage() {
|
||||
|
||||
let navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<section>
|
||||
<Card className="max-w-[800px] bg-red-50 mx-auto">
|
||||
<CardHeader className="flex gap-3">
|
||||
<div className="flex flex-col">
|
||||
<h2 className="text-md">Home Bill Contest</h2>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Divider />
|
||||
<CardBody>
|
||||
<p>This contest is to encourage residents to reduce the use of electricity and water usage.
|
||||
This contest would be won by the person with the lowest overall bill average.
|
||||
Join us in this important effort to create a more sustainable future for everyone.
|
||||
Participants would be required to input and upload their bills into the form to ensure integrity and honesty. </p>
|
||||
</CardBody>
|
||||
<Divider />
|
||||
<CardFooter>
|
||||
<div className="flex-col">
|
||||
<div>
|
||||
<h4>Winners</h4>
|
||||
<p>There will 3 winners for each month. Each winner will receive random food vouchers.</p>
|
||||
<p>1st: 3 vouchers</p>
|
||||
<p>2nd: 2 vouchers</p>
|
||||
<p>3rd: 1 voucher</p>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
className=" bg-red-500 dark:bg-red-700 text-white"
|
||||
size="lg"
|
||||
onPress={() => {
|
||||
navigate("/hbcform");
|
||||
}}
|
||||
>
|
||||
<p className="font-bold">Join</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
)
|
||||
}
|
||||
|
||||
168
client/src/pages/HBFormPage.tsx
Normal file
168
client/src/pages/HBFormPage.tsx
Normal file
@@ -0,0 +1,168 @@
|
||||
import DefaultLayout from '../layouts/default';
|
||||
import { Button } from '@nextui-org/react';
|
||||
import { ArrowUTurnLeftIcon } from '../icons';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Formik, Form } from 'formik';
|
||||
import * as Yup from 'yup';
|
||||
import config from '../config';
|
||||
import NextUIFormikInput from '../components/NextUIFormikInput';
|
||||
import axios from "axios";
|
||||
import InsertImage from '../components/InsertImage';
|
||||
|
||||
const validationSchema = Yup.object({
|
||||
electricalBill: Yup.number().positive().required(),
|
||||
waterBill: Yup.number().positive().required(),
|
||||
totalBill: Yup.number().positive().required(),
|
||||
noOfDependents: Yup.number().integer().positive().required(),
|
||||
});
|
||||
|
||||
export default function HBFormPage() {
|
||||
let navigate = useNavigate();
|
||||
|
||||
const initialValues: {
|
||||
id: string;
|
||||
electricalBill: string;
|
||||
waterBill: string;
|
||||
totalBill: string;
|
||||
noOfDependents: string;
|
||||
ebPicture: File | null;
|
||||
wbPicture: File | null;
|
||||
} = {
|
||||
id: '',
|
||||
electricalBill: '',
|
||||
waterBill: '',
|
||||
totalBill: '',
|
||||
noOfDependents: '',
|
||||
ebPicture: null,
|
||||
wbPicture: null,
|
||||
};
|
||||
|
||||
|
||||
const handleSubmit = async (
|
||||
values: any,
|
||||
{ setSubmitting, resetForm, setFieldError }: any
|
||||
) => {
|
||||
const formData = new FormData();
|
||||
formData.append('electricalBill', values.electricalBill);
|
||||
formData.append('waterBill', values.waterBill);
|
||||
formData.append('totalBill', values.totalBill);
|
||||
formData.append('noOfDependents', values.noOfDependents);
|
||||
|
||||
// Convert image files to blobs
|
||||
const ebPictureFile = values.ebPicture;
|
||||
const wbPictureFile = values.wbPicture;
|
||||
|
||||
if (ebPictureFile) {
|
||||
const ebPictureBlob = ebPictureFile.slice(0, ebPictureFile.size, ebPictureFile.type);
|
||||
formData.append('ebPicture', ebPictureBlob);
|
||||
}
|
||||
|
||||
if (wbPictureFile) {
|
||||
const wbPictureBlob = wbPictureFile.slice(0, wbPictureFile.size, wbPictureFile.type);
|
||||
formData.append('wbPicture', wbPictureBlob);
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await axios.post(config.serverAddress + "/hbcform", formData, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
if (response.status === 200) {
|
||||
console.log("Form created successfully:", response.data);
|
||||
resetForm(); // Clear form after successful submit
|
||||
navigate("/contest");
|
||||
} else {
|
||||
console.error("Error creating form:", response.statusText);
|
||||
}
|
||||
} catch (error: any) {
|
||||
if (error.response && error.response.data && error.response.data.field) {
|
||||
setFieldError(error.response.data.field, error.response.data.error);
|
||||
} else {
|
||||
console.error("Unexpected error:", error);
|
||||
}
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<DefaultLayout>
|
||||
<section className="w-8/12 mx-auto">
|
||||
<Button
|
||||
variant="light"
|
||||
onPress={() => navigate(-1)}
|
||||
>
|
||||
<ArrowUTurnLeftIcon />
|
||||
</Button>
|
||||
</section>
|
||||
<section className="w-7/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl max-h-m">
|
||||
<Formik
|
||||
initialValues={initialValues}
|
||||
validationSchema={validationSchema}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
{({ isValid, dirty, isSubmitting, setFieldValue }) => (
|
||||
<Form>
|
||||
<div className="flex flex-col gap-5">
|
||||
<div className="flex flex-row gap-10">
|
||||
<div className="flex flex-col gap-5">
|
||||
<NextUIFormikInput
|
||||
label="Electrical Bill"
|
||||
name="electricalBill"
|
||||
type="text"
|
||||
placeholder="$"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
<NextUIFormikInput
|
||||
label="Water Bill"
|
||||
name="waterBill"
|
||||
type="text"
|
||||
placeholder="$"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
<NextUIFormikInput
|
||||
label="Total Bill"
|
||||
name="totalBill"
|
||||
type="text"
|
||||
placeholder="$"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
<NextUIFormikInput
|
||||
label="Number of dependents"
|
||||
name="noOfDependents"
|
||||
type="text"
|
||||
placeholder="0"
|
||||
labelPlacement="inside"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex flex-row gap-10 max-w-xs max-h-xs">
|
||||
<InsertImage
|
||||
onImageSelected={(file) => {
|
||||
setFieldValue('ebPicture', file);
|
||||
}}
|
||||
/>
|
||||
<InsertImage
|
||||
onImageSelected={(file) => {
|
||||
setFieldValue('wbPicture', file);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-red-500 dark:bg-red-700 text-white"
|
||||
isDisabled={!isValid || !dirty || isSubmitting}
|
||||
>
|
||||
<p>Submit</p>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Form>
|
||||
)}
|
||||
</Formik>
|
||||
</section>
|
||||
</DefaultLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user