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 />
</Button>
</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
initialValues={initialValues}
validationSchema={validationSchema}
@@ -209,10 +209,10 @@ const CreateEventsPage = () => {
}}
/>
</div>
<div className="flex flex-row-reverse border">
<div className="flex flex-row-reverse">
<Button
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}
>
<p>Create Event</p>

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

@@ -122,7 +122,7 @@ const EditEventsPage = () => {
<ArrowUTurnLeftIcon />
</Button>
</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
initialValues={initialValues}
validationSchema={validationSchema}
@@ -185,10 +185,10 @@ const EditEventsPage = () => {
<div className="mb-4 flex flex-col ">
<EventsPicture eventId={id as string} editable/>
</div>
<div className="flex flex-row-reverse border">
<div className="flex flex-row-reverse">
<Button
type="submit"
className="bg-red-600 text-white text-xl"
className="bg-primary-600 text-white text-xl"
disabled={!isValid || !dirty || isSubmitting}
>
<p>Save</p>

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

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

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

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