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

events API optimization

Browse Source
This commit is contained in:
Adam C
2024-08-02 20:15:02 +08:00
parent cc84eedbff
commit 2d25096cea
3 changed files with 209 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -77,12 +77,14 @@ const EventsPage: React.FC = () => {
const matchTownCouncil = selectedTownCouncil
? event.location === selectedTownCouncil
: true;
const matchTime = selectedTime
? event.time.toLowerCase().trim() === selectedTime.toLowerCase().trim()
: true;
const matchTime = selectedTime
? event.time.toLowerCase().trim() === selectedTime.toLowerCase().trim()
: true;
console.log('Event Time:', event.time);
console.log(`Filtering: ${event.title} | Category: ${matchCategory} | Town Council: ${matchTownCouncil} | Time: ${matchTime}`);
console.log("Event Time:", event.time);
console.log(
`Filtering: ${event.title} | Category: ${matchCategory} | Town Council: ${matchTownCouncil} | Time: ${matchTime}`
);
return matchCategory && matchTownCouncil && matchTime;
});
@@ -141,34 +143,44 @@ const EventsPage: React.FC = () => {
<p className="text-gray-600">No events available.</p>
) : (
filteredEvents.map((event) => (
<Card key={event.id}
style={{
maxWidth: '600px',
minHeight: '300px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'space-between',
}}>
<Card
key={event.id}
style={{
maxWidth: "600px",
minHeight: "300px",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
}}
>
<CardHeader className="pb-0 pt-2 px-4 flex-col items-start">
<h4 className="font-bold text-large">{event.title}</h4>
</CardHeader>
<CardBody className="pb-0 pt-2 px-4 flex-col items-start">
{event.evtPicture && (
<div className="relative w-full" style={{ paddingBottom: '0%', overflow: "hidden",marginBottom: '0px' /* 16:9 aspect ratio */ }}>
<Image
alt={event.title}
src={`${config.serverAddress}/events/evtPicture/${event.id}`}
style={{
height: '430px',
width: '100%',
objectFit: 'cover',
borderRadius: '0.375rem',
}}
/>
</div>
)}
<div
className="relative w-full"
style={{
paddingBottom: "0%",
overflow: "hidden",
marginBottom: "0px" /* 16:9 aspect ratio */,
}}
>
<Image
alt={event.title}
src={`${config.serverAddress}/events/evtPicture/${event.id}`}
style={{
height: "430px",
width: "100%",
objectFit: "cover",
borderRadius: "0.375rem",
}}
/>
</div>
</CardBody>
<CardFooter className="flex flex-col items-start p-4"style={{ paddingTop: '0px' }}>
<CardFooter
className="flex flex-col items-start p-4"
style={{ paddingTop: "0px" }}
>
<p className="text-gray-600 mb-4">{event.description}</p>
<Button
className="bg-primary-600 text-white rounded px-4 py-2 hover:bg-primary-700"

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

@@ -77,30 +77,34 @@ const ManageEventsPage = () => {
{events.map((event) => (
<TableRow key={event.id}>
<TableCell>
<div><span>{event.title}</span></div>
<div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
{event.evtPicture && (
<div style={{
width: '100px',
height: '100px',
overflow: 'hidden',
borderRadius: '8px',
position: 'relative'
}}>
<img
src={`${config.serverAddress}/events/evtPicture/${event.id}`}
alt="Event Picture"
style={{
width: '100%',
height: '100%',
objectFit: 'cover',
position: 'absolute',
top: 0,
left: 0
}}
/>
</div>
)}
<div>
<span>{event.title}</span>
</div>
<div
style={{ display: "flex", alignItems: "center", gap: "10px" }}
>
<div
style={{
width: "100px",
height: "100px",
overflow: "hidden",
borderRadius: "8px",
position: "relative",
}}
>
<img
src={`${config.serverAddress}/events/evtPicture/${event.id}`}
alt="Event Picture"
style={{
width: "100%",
height: "100%",
objectFit: "cover",
position: "absolute",
top: 0,
left: 0,
}}
/>
</div>
</div>
</TableCell>
<TableCell>{new Date(event.date).toLocaleDateString()}</TableCell>
@@ -149,15 +153,20 @@ const ManageEventsPage = () => {
<ModalContent>
{(onClose) => (
<>
<ModalHeader className="flex flex-col gap-1">Delete Event</ModalHeader>
<ModalHeader className="flex flex-col gap-1">
Delete Event
</ModalHeader>
<ModalBody>
<p>Are you sure you want to delete this event?</p>
</ModalBody>
<ModalFooter>
<Button onPress={onClose}>
Cancel
</Button>
<Button onPress={() => { deleteEvent(); onClose(); }}>
<Button onPress={onClose}>Cancel</Button>
<Button
onPress={() => {
deleteEvent();
onClose();
}}
>
Delete
</Button>
</ModalFooter>