From cb27abcba87ab9645c24e9069af43dd544f44788 Mon Sep 17 00:00:00 2001
From: ZacTohZY <zactoh0503@gmail.com>
Date: Fri, 28 Jun 2024 13:17:04 +0800
Subject: [PATCH] Added schedule page

---
 client/src/App.tsx                          |   2 +
 client/src/components/SpringboardButton.tsx |   6 +-
 client/src/pages/SchedulePage.tsx           | 109 ++++++++++++++++++++
 client/src/pages/SpringboardPage.tsx        |  10 +-
 server/models/Schedule.js                   |  24 +++++
 5 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 client/src/pages/SchedulePage.tsx
 create mode 100644 server/models/Schedule.js

diff --git a/client/src/App.tsx b/client/src/App.tsx
index d897151..6d0c2ab 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -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>
   );
 }
diff --git a/client/src/components/SpringboardButton.tsx b/client/src/components/SpringboardButton.tsx
index 5ae8bd8..a97b1fb 100644
--- a/client/src/components/SpringboardButton.tsx
+++ b/client/src/components/SpringboardButton.tsx
@@ -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>
diff --git a/client/src/pages/SchedulePage.tsx b/client/src/pages/SchedulePage.tsx
new file mode 100644
index 0000000..52b9a20
--- /dev/null
+++ b/client/src/pages/SchedulePage.tsx
@@ -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>
+      );
+    }
\ No newline at end of file
diff --git a/client/src/pages/SpringboardPage.tsx b/client/src/pages/SpringboardPage.tsx
index 2a8ed21..bc45935 100644
--- a/client/src/pages/SpringboardPage.tsx
+++ b/client/src/pages/SpringboardPage.tsx
@@ -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>
diff --git a/server/models/Schedule.js b/server/models/Schedule.js
new file mode 100644
index 0000000..b38a2d0
--- /dev/null
+++ b/server/models/Schedule.js
@@ -0,0 +1,24 @@
+module.exports = (sequelize, DataTypes) => {
+    const Schedule = sequelize.define("Schedule", {
+        dateTime: {
+            type: DataTypes.DATE,
+            allowNull: false
+        },
+        location: {
+            type: DataTypes.TEXT,
+            allowNull: false
+        },
+        postalCode: {
+            type: DataTypes.INTEGER(6),
+            allowNull: false
+        },
+        status: {
+            type: DataTypes.TEXT,
+            allowNull: false
+        },
+    },
+        {
+            tableName: 'schedule'
+        });
+    return Schedule;
+}
\ No newline at end of file