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

Added schedule page

Browse Source
This commit is contained in:
ZacTohZY
2024-06-28 13:17:04 +08:00
parent 2186da902b
commit cb27abcba8
5 changed files with 149 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.tsx
View File

@@ -4,6 +4,7 @@ import SignUpPage from "./pages/SignUpPage";
import SignInPage from "./pages/SignInPage";
import SpringboardPage from "./pages/SpringboardPage";
import ManageUserAccountPage from "./pages/ManageUserAccountPage";
import SchedulePage from "./pages/SchedulePage";
function App() {
return (
@@ -16,6 +17,7 @@ function App() {
element={<ManageUserAccountPage />}
path="/manage-account/:accessToken"
/>
<Route element={<SchedulePage/>} path="/schedule"/>
</Routes>
);
}

6
client/src/components/SpringboardButton.tsx
View File

@@ -1,14 +1,18 @@
import { Button } from "@nextui-org/react";
import { useNavigate } from "react-router-dom";
export default function SpringboardButton({
title,
subtitle,
linkToPage,
}: {
title: string;
subtitle: string;
linkToPage: string;
}) {
const navigate = useNavigate();
return (
<Button className="border-4 border-red-500 bg-neutral-700 hover:bg-red-500 text-white">
<Button onPress={() => {navigate(linkToPage)}} className="border-4 border-red-500 bg-neutral-700 hover:bg-red-500 text-white">
<div className="flex flex-col justify-between w-full h-full py-4 px-2 text-left *:text-wrap mr-16">
<p className="text-2xl font-semibold">{title}</p>
<p>{subtitle}</p>

109
client/src/pages/SchedulePage.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { Card, CardBody, Table, TableBody, TableCell, TableColumn, TableHeader, TableRow } from '@nextui-org/react';
import DefaultLayout from "../layouts/default";
import { useEffect, useState } from 'react';
import axios from 'axios';
import config from '../config';
interface Schedule {
id: number;
dateTime: string;
location: string;
postalCode: string;
status: string;
}
export default function SchedulePage() {
const [scheduleList, setScheduleList] = useState<Schedule[]>([]);
useEffect(() => {
axios.get(config.serverAddress + '/schedule')
.then((res) => {
const schedules = res.data.map((schedule: Schedule) => ({
...schedule,
dateTime: new Date(schedule.dateTime), // Convert to Date object
}));
setScheduleList(schedules);
})
.catch((err) => {
console.error('Error fetching schedules:', err);
});
}, []);
return (
<DefaultLayout>
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
<h1>Karang Guni Schedule</h1>
<div className="flex flex-col gap-8">
<Table>
<TableHeader>
<TableColumn>Date</TableColumn>
<TableColumn>Time</TableColumn>
<TableColumn>Location</TableColumn>
<TableColumn>Postal Code</TableColumn>
<TableColumn>Status</TableColumn>
</TableHeader>
<TableBody>
{scheduleList.map((schedule) => (
<TableRow key={schedule.id}>
<TableCell>{((schedule.dateTime as unknown) as Date).toLocaleDateString()}</TableCell>
<TableCell>{((schedule.dateTime as unknown) as Date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}</TableCell>
<TableCell>{schedule.location}</TableCell>
<TableCell>{schedule.postalCode}</TableCell>
<TableCell>{schedule.status}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
<div>
<div>
<div className="flex flex-row gap-20 ">
<div>
<Card>
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
<ul>
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
<div>
<Card>
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
<ul>
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
<div>
<Card>
<CardBody>
<p className="text-lg">Paper</p>
<p className="text-xl">$0.05 to 0.20/KG</p>
<ul>
<li>Cardboard ($0.20/kg)</li>
<li>Newspaper and B&W ($0.11/kg)</li>
<li>Mix paper ($0.05/kg)</li>
</ul>
</CardBody>
</Card>
</div>
</div>
</div>
</div>
</div>
</section>
</DefaultLayout>
);
}

10
client/src/pages/SpringboardPage.tsx
View File

@@ -76,18 +76,26 @@ export default function SpringboardPage() {
<SpringboardButton
title="Community Forums"
subtitle="Be involved in discussions among your neighbourhood"
linkToPage=""
></SpringboardButton>
<SpringboardButton
title="Events"
subtitle="Participate in exciting upcoming events around Singapore"
linkToPage=""
></SpringboardButton>
<SpringboardButton
title="Home Bill Contest"
subtitle="Save resources, win vouchers!"
linkToPage=""
></SpringboardButton>
<SpringboardButton
<SpringboardButton
title="Karang Guni Scheduling"
subtitle="Arrange doorstep sales for your old gears with Karang Guni"
linkToPage="/schedule"
></SpringboardButton>
</div>
<div className="w-full h-[600px] bg-red-500"></div>