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

similar events image and styling

Browse Source
This commit is contained in:
Harini312821
2024-08-12 23:30:31 +08:00
parent 7ce3f74e67
commit 5b66a2df9d
4 changed files with 50 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -134,7 +134,7 @@ const CreateEventsPage = () => {
<ArrowUTurnLeftIcon /> <ArrowUTurnLeftIcon />
</Button> </Button>
</section> </section>
<section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl"> <section className="w-8/12 mx-auto p-5 bg-primary-100 border border-none rounded-2xl">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@@ -209,10 +209,10 @@ const CreateEventsPage = () => {
}} }}
/> />
</div> </div>
<div className="flex flex-row-reverse border"> <div className="flex flex-row-reverse">
<Button <Button
type="submit" type="submit"
className="bg-red-600 text-white text-xl w-1/6" className="bg-primary-600 text-white text-xl w-1/6"
disabled={!isValid || !dirty || isSubmitting || !imageFile} disabled={!isValid || !dirty || isSubmitting || !imageFile}
> >
<p>Create Event</p> <p>Create Event</p>

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

@@ -122,7 +122,7 @@ const EditEventsPage = () => {
<ArrowUTurnLeftIcon /> <ArrowUTurnLeftIcon />
</Button> </Button>
</section> </section>
<section className="w-8/12 mx-auto p-5 bg-red-100 border border-none rounded-2xl"> <section className="w-8/12 mx-auto p-5 bg-primary-100 border border-none rounded-2xl">
<Formik <Formik
initialValues={initialValues} initialValues={initialValues}
validationSchema={validationSchema} validationSchema={validationSchema}
@@ -185,10 +185,10 @@ const EditEventsPage = () => {
<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/>
</div> </div>
<div className="flex flex-row-reverse border"> <div className="flex flex-row-reverse">
<Button <Button
type="submit" type="submit"
className="bg-red-600 text-white text-xl" className="bg-primary-600 text-white text-xl"
disabled={!isValid || !dirty || isSubmitting} disabled={!isValid || !dirty || isSubmitting}
> >
<p>Save</p> <p>Save</p>

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

@@ -13,6 +13,8 @@ import {
ModalHeader, ModalHeader,
ModalBody, ModalBody,
ModalFooter, ModalFooter,
Image,
Chip
} from "@nextui-org/react"; } from "@nextui-org/react";
import { ArrowUTurnLeftIcon } from "../icons"; // Make sure this path is correct import { ArrowUTurnLeftIcon } from "../icons"; // Make sure this path is correct
@@ -140,22 +142,18 @@ const EventDetailsPage = () => {
<Card> <Card>
<div className="flex"> <div className="flex">
{/* Event Image Section */} {/* Event Image Section */}
{event.evtPicture && ( <div className="w-1/3 p-4">
<div className="w-1/3 p-4">
<img <img
src={`${config.serverAddress}/events/evtPicture/${event.id}`} src={`${config.serverAddress}/events/evtPicture/${event.id}`}
alt="Event Picture" alt="Event Picture"
className="w-full h-auto rounded-lg" className="w-full h-auto rounded-lg object-cover"
style={{
objectFit: 'cover',
}}
/> />
</div> </div>
)}
{/* Event Details Section */} {/* Event Details Section */}
<div className="w-2/3 p-4"> <div className="w-2/3 p-4">
<CardHeader className="opacity-75"> <CardHeader className="opacity-75">
<h4 className="font-bold text-large">{event.title}</h4> <h4 className="font-bold text-3xl">{event.title}</h4>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<p className="text-white-600 mt-4 opacity-75">{event.description}</p> <p className="text-white-600 mt-4 opacity-75">{event.description}</p>
@@ -175,7 +173,7 @@ const EventDetailsPage = () => {
<strong>Slots Available:</strong> {event.slotsAvailable} <strong>Slots Available:</strong> {event.slotsAvailable}
</p> </p>
<Button <Button
className="mt-4 bg-red-500 text-white hover:bg-red-600" className="mt-4 bg-primary-500 text-white hover:bg-primary-600"
onClick={() => handleRegister()} onClick={() => handleRegister()}
disabled={isRegistering} disabled={isRegistering}
> >
@@ -198,49 +196,36 @@ const EventDetailsPage = () => {
similarEvents.map((similarEvent: any) => ( similarEvents.map((similarEvent: any) => (
<Card <Card
key={similarEvent.id} key={similarEvent.id}
className="p-4 min-w-80 flex flex-col justify-between gap-4"
> >
<CardHeader className="opacity-75"> <div className="flex flex-col gap-4">
<h4 className="font-bold text-large">{similarEvent.title}</h4> <img
</CardHeader> alt={similarEvent.title}
<CardBody> src={`${config.serverAddress}/events/evtPicture/${similarEvent.id}`}
{similarEvent.evtPicture && ( className="rounded-xl h-48 object-cover"
<div style={{ />
width: '450px', <div className="flex flex-col gap-2">
height: '300px', <p className="text-xl font-bold text-wrap overflow-hidden overflow-ellipsis whitespace-nowrap">
overflow: 'hidden', {similarEvent.title}
borderRadius: '8px', </p>
position: 'relative' <p className="text-wrap overflow-hidden overflow-ellipsis line-clamp-2">
}}> {similarEvent.description}
<img </p>
src={`${config.serverAddress}/events/evtPicture/${similarEvent.id}`} <div className="flex flex-row gap-2">
alt="Event Picture" <Chip>{similarEvent.category}</Chip>
style={{ <Chip>{similarEvent.time}</Chip>
width: '100%',
height: '100%',
objectFit: 'cover',
position: 'absolute',
top: 0,
left: 0
}}
onError={(e) => {
e.currentTarget.src = '/path/to/placeholder-image.png'; // Fallback image if loading fails
}}
/>
</div> </div>
)} </div>
</CardBody> </div>
<CardFooter className="flex flex-col items-start p-4"> <Button
<Button color="primary"
className="bg-primary-600 text-white py-2 hover:bg-primar" variant="flat"
onClick={() => { onClick={() => {
console.log(`Navigating to event details for ID: ${similarEvent.id}`); navigate(`/events/view/${similarEvent.id}`);
console.log("Access Token:", localStorage.getItem("accessToken")); }}
navigate(`/events/view/${similarEvent.id}`); >
}} Visit
> </Button>
View event details
</Button>
</CardFooter>
</Card> </Card>
)) ))
)} )}

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

@@ -14,7 +14,7 @@ import {
ModalFooter, ModalFooter,
} from "@nextui-org/react"; } from "@nextui-org/react";
import { useNavigate } from "react-router-dom"; import { useNavigate } from "react-router-dom";
import { PencilSquareIcon, TrashIcon } from "../icons"; import { PencilSquareIcon, TrashDeleteIcon } from "../icons";
import axios from "axios"; import axios from "axios";
import config from "../config"; import config from "../config";
@@ -62,7 +62,7 @@ const ManageEventsPage = () => {
return ( return (
<div className="w-full h-full"> <div className="w-full h-full">
<div className="mb-6"> <div className="mb-6">
<h2 className="text-3xl font-semibold text-red-600">Manage Events</h2> <h2 className="text-3xl font-semibold text-primary-600">Manage Events</h2>
</div> </div>
<Table aria-label="Manage Events Table"> <Table aria-label="Manage Events Table">
<TableHeader> <TableHeader>
@@ -116,20 +116,20 @@ const ManageEventsPage = () => {
<TableCell> <TableCell>
<div className="flex space-x-2"> <div className="flex space-x-2">
<Button <Button
size="sm" isIconOnly
variant="flat" variant="light"
color="primary" color="success"
onPress={() => handleEdit(event.id)} onPress={() => handleEdit(event.id)}
> >
<PencilSquareIcon /> <PencilSquareIcon />
</Button> </Button>
<Button <Button
size="sm" isIconOnly
variant="flat" variant="light"
color="danger" color="danger"
onPress={() => handleDeleteClick(event.id)} onPress={() => handleDeleteClick(event.id)}
> >
<TrashIcon /> <TrashDeleteIcon />
</Button> </Button>
</div> </div>
</TableCell> </TableCell>
@@ -138,7 +138,7 @@ const ManageEventsPage = () => {
</TableBody> </TableBody>
</Table> </Table>
<Button <Button
className="mt-6 bg-red-600 text-white" className="mt-6 bg-primary-600 text-white"
onPress={() => navigate("createEvent")} onPress={() => navigate("createEvent")}
> >
Add events Add events