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

Status function change to auto update

Browse Source
This commit is contained in:
ZacTohZY
2024-08-12 19:06:26 +08:00
parent d89a58f809
commit 80a9e9edd3
7 changed files with 119 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
client/src/pages/CreateSchedulePage.tsx
View File

@@ -1,7 +1,6 @@
import { Formik, Form } from "formik";
import * as yup from "yup";
import { Button, Radio } from "@nextui-org/react";
import { NextUIFormikRadioGroup } from "../components/NextUIFormikRadioButton";
import { Button } from "@nextui-org/react";
import { NextUIFormikDatePicker } from "../components/NextUIFormikDatePicker";
import NextUIFormikInput from "../components/NextUIFormikInput";
import { useNavigate } from "react-router-dom";
@@ -18,14 +17,15 @@ const validationSchema = yup.object().shape({
status: yup.string().trim().required()
});
const initialValues: any = {
const initialValues = {
date: "",
time: "",
location: "",
postalCode: "",
status: ""
status: "Up coming" // Set the default status
};
export default function CreateSchedulePage() {
const navigate = useNavigate();
@@ -55,14 +55,9 @@ export default function CreateSchedulePage() {
}
data.dateTime = dateTime.toISOString();
data.location = data.location.trim();
if (typeof data.postalCode === 'string') {
data.postalCode = data.postalCode.trim();
}
data.status = data.status.trim();
data.postalCode = data.postalCode.trim();
data.status = "Up coming"; // Set status to "Up coming" explicitly
console.log("Data to be sent:", data);
@@ -74,8 +69,8 @@ export default function CreateSchedulePage() {
};
return (
<div className="w-full h-full pb-12 pt-10">
<div className="w-[400px] mx-auto p-6 bg-red-50 dark:bg-primary-950 border border-primary-100 rounded-2xl">
<div className="w-full h-full pb-12 pt-20">
<div className="w-[410px] mx-auto p-6 bg-red-50 dark:bg-primary-950 border border-primary-100 rounded-2xl">
<div>
<Button
isIconOnly
@@ -94,7 +89,7 @@ export default function CreateSchedulePage() {
onSubmit={handleSubmit}
>
{({ isValid, dirty }) => (
<Form className="flex flex-col gap-4 pt-5 items-center justify-center">
<Form className="flex flex-col gap-4 pt-5 ">
<div className="flex flex-col gap-5 w-[360px]">
<NextUIFormikDatePicker
label="Date"
@@ -120,15 +115,6 @@ export default function CreateSchedulePage() {
placeholder="123456"
/>
</div>
<NextUIFormikRadioGroup
label="Status"
name="status"
className="flex gap-2"
>
<Radio value="Up coming">Up coming</Radio>
<Radio value="On going">On going</Radio>
<Radio value="Ended">Ended</Radio>
</NextUIFormikRadioGroup>
<Button
type="submit"
color="primary"

25
client/src/pages/EditSchedulePage.tsx
View File

@@ -1,8 +1,7 @@
import { useState, useEffect } from "react";
import { Formik, Form } from "formik";
import * as yup from "yup";
import { Button, Radio } from "@nextui-org/react";
import { NextUIFormikRadioGroup } from "../components/NextUIFormikRadioButton";
import { Button } from "@nextui-org/react";
import { NextUIFormikDatePicker } from "../components/NextUIFormikDatePicker";
import NextUIFormikInput from "../components/NextUIFormikInput";
import { useNavigate, useParams } from "react-router-dom";
@@ -29,7 +28,6 @@ export default function EditSchedulePage() {
time: "",
location: "",
postalCode: "",
status: ""
});
useEffect(() => {
@@ -78,10 +76,6 @@ export default function EditSchedulePage() {
data.postalCode = data.postalCode.trim();
}
data.status = data.status.trim();
console.log("Data to be sent:", data);
instance.put(`/schedule/${id}`, data)
.then((res) => {
console.log(res.data);
@@ -93,8 +87,8 @@ export default function EditSchedulePage() {
};
return (
<div className="w-full h-full pb-12 pt-10">
<div className="w-[400px] mx-auto p-6 bg-red-50 dark:bg-primary-950 border border-primary-100 rounded-2xl">
<div className="w-full h-full pb-12 pt-20">
<div className="w-[410px] mx-auto p-6 bg-red-50 dark:bg-primary-950 border border-primary-100 rounded-2xl">
<div>
<Button
isIconOnly
@@ -114,7 +108,7 @@ export default function EditSchedulePage() {
onSubmit={handleSubmit}
>
{({ isValid, dirty }) => (
<Form className="flex flex-col gap-4 pt-5 items-center justify-center">
<Form className="flex flex-col gap-4 pt-4">
<div className="flex flex-col gap-5 w-[360px]">
<NextUIFormikDatePicker
label="Date"
@@ -140,17 +134,6 @@ export default function EditSchedulePage() {
placeholder="123456"
/>
</div>
<div>
<NextUIFormikRadioGroup
label="Status"
name="status"
className="flex gap-2"
>
<Radio value="Up coming">Up coming</Radio>
<Radio value="On going">On going</Radio>
<Radio value="Ended">Ended</Radio>
</NextUIFormikRadioGroup>
</div>
<Button
type="submit"
color="primary"

56
client/src/pages/ManageSchedulePage.tsx
View File

@@ -3,6 +3,7 @@ import { useEffect, useState } from 'react';
import instance from "../security/http";
import { PencilSquareIcon, PlusIcon, TrashDeleteIcon } from "../icons";
import { Table, TableHeader, TableColumn, TableBody, TableRow, TableCell, Button, Modal, ModalContent, ModalHeader, ModalBody, ModalFooter, useDisclosure, SortDescriptor, Link as NextUILink } from "@nextui-org/react";
import dayjs from 'dayjs';
interface Schedule {
id: number;
@@ -12,6 +13,12 @@ interface Schedule {
status: string;
}
const determineStatus = (dateTime: string): string => {
const now = dayjs();
const scheduleDateTime = dayjs(dateTime);
return scheduleDateTime.isAfter(now) ? "Up coming" : "Ended";
};
export default function ManageSchedulePage() {
const navigate = useNavigate();
const [scheduleList, setScheduleList] = useState<Schedule[]>([]);
@@ -25,33 +32,63 @@ export default function ManageSchedulePage() {
useEffect(() => {
instance.get("/schedule")
.then((res) => {
const schedules = res.data.map((schedule: Schedule) => ({
const schedules: Schedule[] = res.data.map((schedule: Schedule) => ({
...schedule,
dateTime: new Date(schedule.dateTime), // Convert to Date object
dateTime: new Date(schedule.dateTime),
status: determineStatus(schedule.dateTime),
}));
setScheduleList(schedules);
// Update status in the database
schedules.forEach((schedule: Schedule) => {
instance.patch(`/schedule/${schedule.id}/status`)
.catch((err) => {
console.error(`Error updating status for schedule ${schedule.id}:`, err.response ? err.response.data : err.message);
});
});
})
.catch((err) => {
console.error("Error fetching schedules:", err);
console.error("Error fetching schedules:", err.response ? err.response.data : err.message);
});
}, []);
useEffect(() => {
const interval = setInterval(() => {
setScheduleList(prevSchedules =>
prevSchedules.map((schedule: Schedule) => ({
...schedule,
status: determineStatus(schedule.dateTime),
}))
);
// Optionally update status in the database
scheduleList.forEach((schedule: Schedule) => {
instance.patch(`/schedule/${schedule.id}/status`)
.catch((err) => {
console.error(`Error updating status for schedule ${schedule.id}:`, err.response ? err.response.data : err.message);
});
});
}, 60000);
return () => clearInterval(interval);
}, [scheduleList]);
const handleEdit = (id: number) => {
navigate(`edit-schedule/${id}`);
};
const deleteSchedule = () => {
if (scheduleIdToDelete !== null) {
instance.delete(`/schedule/${scheduleIdToDelete}`)
.then((res) => {
console.log(res.data);
setScheduleList((prev) => prev.filter(schedule => schedule.id !== scheduleIdToDelete));
setScheduleList(prev => prev.filter((schedule: Schedule) => schedule.id !== scheduleIdToDelete));
onOpenChange();
setScheduleIdToDelete(null);
})
.catch((err) => {
console.error("Error deleting schedule:", err);
console.error("Error deleting schedule:", err.response ? err.response.data : err.message);
});
}
};
@@ -59,7 +96,7 @@ export default function ManageSchedulePage() {
const sortScheduleList = (list: Schedule[], descriptor: SortDescriptor) => {
const { column, direction } = descriptor;
const sortedList = [...list].sort((a, b) => {
const sortedList = [...list].sort((a: Schedule, b: Schedule) => {
switch (column) {
case "dateTime":
const dateA = new Date(a.dateTime);
@@ -121,7 +158,7 @@ export default function ManageSchedulePage() {
<TableColumn>Action</TableColumn>
</TableHeader>
<TableBody>
{sortedScheduleList.map((schedule) => (
{sortedScheduleList.map((schedule: 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>
@@ -171,6 +208,5 @@ export default function ManageSchedulePage() {
</ModalContent>
</Modal>
</div>
)
);
}