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

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

@@ -37,10 +37,9 @@ const validationSchema = Yup.object({
.required("Date is required"),
time: Yup.string().required("Time is required"),
location: Yup.string().required("Location is required"),
category: Yup.string().required("Category is required"),
slotsAvailable: Yup.number()
.integer()
.required("Slots Available is required"),
category: Yup.string()
.oneOf(["Events", "Workshops", "Educational Talks"], "Invalid category")
.required("Category is required"),
evtPicture: Yup.mixed(), // Make this optional if not required
});
@@ -81,7 +80,6 @@ const EditEventsPage = () => {
time: eventData?.time || "",
location: eventData?.location || "",
category: eventData?.category || "",
slotsAvailable: eventData?.slotsAvailable || "",
};
const handleSubmit = async (
@@ -173,19 +171,16 @@ const EditEventsPage = () => {
/>
)}
</div>
<NextUIFormikInput
<NextUIFormikSelect
label="Category"
name="category"
type="text"
placeholder="Enter event category"
labelPlacement="inside"
/>
<NextUIFormikInput
label="Slots Available"
name="slotsAvailable"
type="number"
placeholder="Enter slots available"
labelPlacement="inside"
options={[
{ key: 'Events', label: 'Events' },
{ key: 'Workshops', label: 'Workshops' },
{ key: 'Educational Talks', label: 'Educational Talks' },
]}
/>
<div className="mb-4 flex flex-col ">
<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">
<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
>
<ArrowUTurnLeftIcon />
Back to Events
</Button>
<Card className="bg-white rounded-lg overflow-hidden border">
<Card>
<div className="flex">
{/* Event Image Section */}
{event.evtPicture && (
@@ -154,28 +154,28 @@ const EventDetailsPage = () => {
)}
{/* Event Details Section */}
<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>
</CardHeader>
<CardBody className="pb-0 pt-2">
<p className="text-gray-600 mt-4">{event.description}</p>
<p className="text-gray-600 mt-2">
<CardBody>
<p className="text-white-600 mt-4 opacity-75">{event.description}</p>
<p className="text-white-600 mt-2 opacity-75">
<strong>Date:</strong> {new Date(event.date).toLocaleDateString()}
</p>
<p className="text-gray-600 mt-2">
<p className="text-white-600 mt-2 opacity-75">
<strong>Time:</strong> {event.time}
</p>
<p className="text-gray-600 mt-2">
<p className="text-white-600 mt-2 opacity-75">
<strong>Location:</strong> {event.location}
</p>
<p className="text-gray-600 mt-2">
<p className="text-white-600 mt-2 opacity-75">
<strong>Category:</strong> {event.category}
</p>
<p className="text-gray-600 mt-2">
<p className="text-white-600 mt-2 opacity-75">
<strong>Slots Available:</strong> {event.slotsAvailable}
</p>
<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()}
disabled={isRegistering}
>
@@ -193,17 +193,16 @@ const EventDetailsPage = () => {
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{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) => (
<Card
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>
</CardHeader>
<CardBody className="pb-0 pt-2 px-4 flex-col items-start">
<CardBody>
{similarEvent.evtPicture && (
<div style={{
width: '450px',
@@ -232,7 +231,7 @@ const EventDetailsPage = () => {
</CardBody>
<CardFooter className="flex flex-col items-start p-4">
<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={() => {
console.log(`Navigating to event details for ID: ${similarEvent.id}`);
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 [events, setEvents] = 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 [selectedCategory, setSelectedCategory] = useState<string>("");
const [selectedTownCouncil, setSelectedTownCouncil] = useState<string>("");
@@ -48,11 +52,6 @@ const EventsPage: React.FC = () => {
setEvents(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) {
console.error("Failed to fetch events:", error);
}
@@ -124,7 +123,6 @@ const EventsPage: React.FC = () => {
</option>
))}
</select>
{townCouncils.length > 0 && (
<select
value={selectedTownCouncil}
@@ -166,10 +164,10 @@ const EventsPage: React.FC = () => {
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>
</CardHeader>
<CardBody className="pb-0 pt-2 px-4 flex-col items-start">
<CardBody>
<div
className="relative w-full"
style={{
@@ -194,7 +192,7 @@ const EventsPage: React.FC = () => {
className="flex flex-col items-start p-4"
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
className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"
onClick={() => navigate(`/events/view/${event.id}`)}