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

updated events, edit, create and details

Browse Source
This commit is contained in:
Harini312821
2024-08-12 22:11:34 +08:00
parent 0f005a1bb6
commit 5e535cc441
4 changed files with 42 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
client/src/pages/CreateEventsPage.tsx
View File

@@ -36,9 +36,12 @@ const validationSchema = Yup.object({
.required("Date is required"), .required("Date is required"),
time: Yup.string().required("Time is required"), time: Yup.string().required("Time is required"),
location: Yup.string().required("Location is required"), location: Yup.string().required("Location is required"),
category: Yup.string().required("Category is required"), category: Yup.string()
.oneOf(["Events", "Workshops", "Educational Talks"], "Invalid category")
.required("Category is required"),
slotsAvailable: Yup.number() slotsAvailable: Yup.number()
.integer() .integer()
.positive("Slots Avaliable must be greater than zero")
.required("Slots Available is required"), .required("Slots Available is required"),
evtPicture: Yup.mixed().required("Event picture is required"), evtPicture: Yup.mixed().required("Event picture is required"),
}); });
@@ -179,12 +182,16 @@ const CreateEventsPage = () => {
/> />
)} )}
</div> </div>
<NextUIFormikInput <NextUIFormikSelect
label="Category" label="Category"
name="category" name="category"
type="text"
placeholder="Enter event category" placeholder="Enter event category"
labelPlacement="inside" labelPlacement="inside"
options={[
{ key: "Events", label: "Events" },
{ key: "Workshops", label: "Workshops" },
{ key: "Educational Talks", label: "Educational Talks" },
]}
/> />
<NextUIFormikInput <NextUIFormikInput
label="Slots Available" label="Slots Available"

23
client/src/pages/EditEventsPage.tsx
View File

@@ -37,10 +37,9 @@ const validationSchema = Yup.object({
.required("Date is required"), .required("Date is required"),
time: Yup.string().required("Time is required"), time: Yup.string().required("Time is required"),
location: Yup.string().required("Location is required"), location: Yup.string().required("Location is required"),
category: Yup.string().required("Category is required"), category: Yup.string()
slotsAvailable: Yup.number() .oneOf(["Events", "Workshops", "Educational Talks"], "Invalid category")
.integer() .required("Category is required"),
.required("Slots Available is required"),
evtPicture: Yup.mixed(), // Make this optional if not required evtPicture: Yup.mixed(), // Make this optional if not required
}); });
@@ -81,7 +80,6 @@ const EditEventsPage = () => {
time: eventData?.time || "", time: eventData?.time || "",
location: eventData?.location || "", location: eventData?.location || "",
category: eventData?.category || "", category: eventData?.category || "",
slotsAvailable: eventData?.slotsAvailable || "",
}; };
const handleSubmit = async ( const handleSubmit = async (
@@ -173,19 +171,16 @@ const EditEventsPage = () => {
/> />
)} )}
</div> </div>
<NextUIFormikInput <NextUIFormikSelect
label="Category" label="Category"
name="category" name="category"
type="text"
placeholder="Enter event category" placeholder="Enter event category"
labelPlacement="inside" labelPlacement="inside"
/> options={[
<NextUIFormikInput { key: 'Events', label: 'Events' },
label="Slots Available" { key: 'Workshops', label: 'Workshops' },
name="slotsAvailable" { key: 'Educational Talks', label: 'Educational Talks' },
type="number" ]}
placeholder="Enter slots available"
labelPlacement="inside"
/> />
<div className="mb-4 flex flex-col "> <div className="mb-4 flex flex-col ">
<EventsPicture eventId={id as string} editable/> <EventsPicture eventId={id as string} editable/>

31
client/src/pages/EventDetailsPage.tsx
View File

@@ -131,13 +131,13 @@ const EventDetailsPage = () => {
<> <>
{event && <div className="w-full h-full p-8"> {event && <div className="w-full h-full p-8">
<Button <Button
className="mb-4 bg-gray-200 text-black rounded px-4 py-2 hover:bg-gray-300" className="mb-4 bg-gray-200 text-black hover:bg-gray-300"
onClick={() => navigate("/events")} // Navigate directly to the events page onClick={() => navigate("/events")} // Navigate directly to the events page
> >
<ArrowUTurnLeftIcon /> <ArrowUTurnLeftIcon />
Back to Events Back to Events
</Button> </Button>
<Card className="bg-white rounded-lg overflow-hidden border"> <Card>
<div className="flex"> <div className="flex">
{/* Event Image Section */} {/* Event Image Section */}
{event.evtPicture && ( {event.evtPicture && (
@@ -154,28 +154,28 @@ const EventDetailsPage = () => {
)} )}
{/* Event Details Section */} {/* Event Details Section */}
<div className="w-2/3 p-4"> <div className="w-2/3 p-4">
<CardHeader className="pb-0 pt-2"> <CardHeader className="opacity-75">
<h4 className="font-bold text-large">{event.title}</h4> <h4 className="font-bold text-large">{event.title}</h4>
</CardHeader> </CardHeader>
<CardBody className="pb-0 pt-2"> <CardBody>
<p className="text-gray-600 mt-4">{event.description}</p> <p className="text-white-600 mt-4 opacity-75">{event.description}</p>
<p className="text-gray-600 mt-2"> <p className="text-white-600 mt-2 opacity-75">
<strong>Date:</strong> {new Date(event.date).toLocaleDateString()} <strong>Date:</strong> {new Date(event.date).toLocaleDateString()}
</p> </p>
<p className="text-gray-600 mt-2"> <p className="text-white-600 mt-2 opacity-75">
<strong>Time:</strong> {event.time} <strong>Time:</strong> {event.time}
</p> </p>
<p className="text-gray-600 mt-2"> <p className="text-white-600 mt-2 opacity-75">
<strong>Location:</strong> {event.location} <strong>Location:</strong> {event.location}
</p> </p>
<p className="text-gray-600 mt-2"> <p className="text-white-600 mt-2 opacity-75">
<strong>Category:</strong> {event.category} <strong>Category:</strong> {event.category}
</p> </p>
<p className="text-gray-600 mt-2"> <p className="text-white-600 mt-2 opacity-75">
<strong>Slots Available:</strong> {event.slotsAvailable} <strong>Slots Available:</strong> {event.slotsAvailable}
</p> </p>
<Button <Button
className="mt-4 bg-red-500 text-white rounded px-4 py-2 hover:bg-red-600" className="mt-4 bg-red-500 text-white hover:bg-red-600"
onClick={() => handleRegister()} onClick={() => handleRegister()}
disabled={isRegistering} disabled={isRegistering}
> >
@@ -193,17 +193,16 @@ const EventDetailsPage = () => {
</h2> </h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{similarEvents.length === 0 ? ( {similarEvents.length === 0 ? (
<p className="text-gray-600">No similar events available.</p> <p className="text-white-600 opacity-75">No similar events available.</p>
) : ( ) : (
similarEvents.map((similarEvent: any) => ( similarEvents.map((similarEvent: any) => (
<Card <Card
key={similarEvent.id} key={similarEvent.id}
className="bg-white rounded-lg overflow-hidden border"
> >
<CardHeader className="pb-0 pt-2 px-4 flex-col items-start"> <CardHeader className="opacity-75">
<h4 className="font-bold text-large">{similarEvent.title}</h4> <h4 className="font-bold text-large">{similarEvent.title}</h4>
</CardHeader> </CardHeader>
<CardBody className="pb-0 pt-2 px-4 flex-col items-start"> <CardBody>
{similarEvent.evtPicture && ( {similarEvent.evtPicture && (
<div style={{ <div style={{
width: '450px', width: '450px',
@@ -232,7 +231,7 @@ const EventDetailsPage = () => {
</CardBody> </CardBody>
<CardFooter className="flex flex-col items-start p-4"> <CardFooter className="flex flex-col items-start p-4">
<Button <Button
className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700" className="bg-primary-600 text-white py-2 hover:bg-primar"
onClick={() => { onClick={() => {
console.log(`Navigating to event details for ID: ${similarEvent.id}`); console.log(`Navigating to event details for ID: ${similarEvent.id}`);
console.log("Access Token:", localStorage.getItem("accessToken")); console.log("Access Token:", localStorage.getItem("accessToken"));

18
client/src/pages/EventsPage.tsx
View File

@@ -25,7 +25,11 @@ interface Event {
const EventsPage: React.FC = () => { const EventsPage: React.FC = () => {
const [events, setEvents] = useState<Event[]>([]); const [events, setEvents] = useState<Event[]>([]);
const [filteredEvents, setFilteredEvents] = useState<Event[]>([]); const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
const [categories, setCategories] = useState<string[]>([]); const [categories, setCategories] = useState<string[]>([
"Events",
"Workshops",
"Educational Talks"
]);
const [townCouncils, setTownCouncils] = useState<string[]>([]); const [townCouncils, setTownCouncils] = useState<string[]>([]);
const [selectedCategory, setSelectedCategory] = useState<string>(""); const [selectedCategory, setSelectedCategory] = useState<string>("");
const [selectedTownCouncil, setSelectedTownCouncil] = useState<string>(""); const [selectedTownCouncil, setSelectedTownCouncil] = useState<string>("");
@@ -48,11 +52,6 @@ const EventsPage: React.FC = () => {
setEvents(futureEvents); setEvents(futureEvents);
setFilteredEvents(futureEvents); setFilteredEvents(futureEvents);
// Extract unique categories and locations from events
const uniqueCategories = Array.from(
new Set(res.data.map((event) => event.category).filter(Boolean))
);
setCategories(uniqueCategories);
} catch (error) { } catch (error) {
console.error("Failed to fetch events:", error); console.error("Failed to fetch events:", error);
} }
@@ -124,7 +123,6 @@ const EventsPage: React.FC = () => {
</option> </option>
))} ))}
</select> </select>
{townCouncils.length > 0 && ( {townCouncils.length > 0 && (
<select <select
value={selectedTownCouncil} value={selectedTownCouncil}
@@ -166,10 +164,10 @@ const EventsPage: React.FC = () => {
justifyContent: "space-between", justifyContent: "space-between",
}} }}
> >
<CardHeader className="pb-0 pt-2 px-4 flex-col items-start"> <CardHeader>
<h4 className="font-bold text-large">{event.title}</h4> <h4 className="font-bold text-large">{event.title}</h4>
</CardHeader> </CardHeader>
<CardBody className="pb-0 pt-2 px-4 flex-col items-start"> <CardBody>
<div <div
className="relative w-full" className="relative w-full"
style={{ style={{
@@ -194,7 +192,7 @@ const EventsPage: React.FC = () => {
className="flex flex-col items-start p-4" className="flex flex-col items-start p-4"
style={{ paddingTop: "0px" }} style={{ paddingTop: "0px" }}
> >
<p className="text-gray-600 mb-4">{event.description}</p> <p className="text-white-600 mb-4 opacity-70">{event.description}</p>
<Button <Button
className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700" className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
onClick={() => navigate(`/events/view/${event.id}`)} onClick={() => navigate(`/events/view/${event.id}`)}