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

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

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

263
server/routes/events.js
View File

@@ -1,178 +1,177 @@
const express = require('express'); const express = require("express");
const router = express.Router(); const router = express.Router();
const { Events } = require('../models'); const { Events } = require("../models");
const multer = require('multer'); const multer = require("multer");
const { Op } = require("sequelize"); const { Op } = require("sequelize");
const path = require('path'); const path = require("path");
const yup = require('yup'); const yup = require("yup");
const sharp = require("sharp"); const sharp = require("sharp");
const upload = multer({ storage: multer.memoryStorage() }); const upload = multer({ storage: multer.memoryStorage() });
router.get("/", async (req, res) => { router.get("/", async (req, res) => {
try { try {
// Extract filter criteria from query parameters // Extract filter criteria from query parameters
const { category, townCouncil, time } = req.query; const { category, townCouncil, time } = req.query;
// Log incoming parameters // Log incoming parameters
console.log("Filter Parameters:", { category, townCouncil, time }); console.log("Filter Parameters:", { category, townCouncil, time });
// Map time to category // Map time to category
const timeToCategory = (time) => { const timeToCategory = (time) => {
if (!time) return null; if (!time) return null;
const hour = new Date(time).getHours(); const hour = new Date(time).getHours();
if (hour < 12) return 'Morning'; if (hour < 12) return "Morning";
if (hour < 18) return 'Afternoon'; if (hour < 18) return "Afternoon";
return 'Evening'; return "Evening";
}; };
// Convert the time query parameter to a category // Convert the time query parameter to a category
const timeCategory = timeToCategory(time); const timeCategory = timeToCategory(time);
// Construct the filter object // Construct the filter object
let filter = {}; let filter = {};
if (category) filter.category = category; if (category) filter.category = category;
if (townCouncil) filter.townCouncil = townCouncil; if (townCouncil) filter.townCouncil = townCouncil;
if (timeCategory) filter.timeCategory = timeCategory; if (timeCategory) filter.timeCategory = timeCategory;
// Log constructed filter object // Log constructed filter object
console.log("Constructed Filter Object:", filter); console.log("Constructed Filter Object:", filter);
// Fetch filtered events from the database // Fetch filtered events from the database
const filteredEvents = await Events.findAll({ const filteredEvents = await Events.findAll({
where: { attributes: { exclude: ["evtPicture"] },
[Op.and]: [ where: {
category ? { category } : {}, [Op.and]: [
townCouncil ? { townCouncil } : {}, category ? { category } : {},
timeCategory ? { timeCategory } : {} townCouncil ? { townCouncil } : {},
] timeCategory ? { timeCategory } : {},
} ],
}); },
});
// Respond with the filtered events // Respond with the filtered events
res.json(filteredEvents); res.json(filteredEvents);
} catch (error) { } catch (error) {
console.error("Error fetching events:", error); console.error("Error fetching events:", error);
res.status(500).json({ message: "Internal Server Error" }); res.status(500).json({ message: "Internal Server Error" });
} }
}); });
router.post(
router.post("/", upload.fields([ "/",
{ name: 'evtPicture', maxCount: 1 }, upload.fields([{ name: "evtPicture", maxCount: 1 }]),
]), async (req, res) => { async (req, res) => {
let data = req.body; let data = req.body;
let files = req.files;// Log incoming data let files = req.files; // Log incoming data
let validationSchema = yup.object({ let validationSchema = yup.object({
title: yup.string().trim().min(3).max(100).required(), title: yup.string().trim().min(3).max(100).required(),
description: yup.string().trim().min(3).max(500).required(), description: yup.string().trim().min(3).max(500).required(),
date: yup.date().required(), date: yup.date().required(),
time: yup.string().required(), time: yup.string().required(),
location: yup.string().required(), location: yup.string().required(),
category: yup.string().required(), category: yup.string().required(),
slotsAvailable: yup.number().integer().required(), slotsAvailable: yup.number().integer().required(),
}); });
try { try {
data = await validationSchema.validate(data, { abortEarly: false }); data = await validationSchema.validate(data, { abortEarly: false });
// Process valid data // Process valid data
let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null; let evtPicture = files.evtPicture ? files.evtPicture[0].buffer : null;
if (evtPicture) { if (evtPicture) {
evtPicture = await sharp(evtPicture) evtPicture = await sharp(evtPicture).resize(800, 600).jpeg().toBuffer();
.resize(800, 600) }
.jpeg()
.toBuffer();
}
let result = await Events.create({ ...data, evtPicture}); let result = await Events.create({ ...data, evtPicture });
res.json(result); res.json(result);
} catch (err) { } catch (err) {
console.error("Validation error:", err); // Log the validation error console.error("Validation error:", err); // Log the validation error
res.status(400).json({ errors: err.errors }); res.status(400).json({ errors: err.errors });
} }
}); }
);
router.get("/", async (req, res) => {
try {
let list = await Events.findAll({
order: [['createdAt', 'DESC']],
});
res.json(list); router.get("/", async (req, res) => {
} catch (error) { try {
console.error("Error fetching events:", error); let list = await Events.findAll({
res.status(500).json({ message: "Internal Server Error" }); attributes: { exclude: ["evtPicture"] },
} order: [["createdAt", "DESC"]],
}); });
res.json(list);
} catch (error) {
console.error("Error fetching events:", error);
res.status(500).json({ message: "Internal Server Error" });
}
});
router.get("/:id", async (req, res) => { router.get("/:id", async (req, res) => {
const id = req.params.id; const id = req.params.id;
const event = await Events.findByPk(id); const event = await Events.findByPk(id, {
if (!event) { attributes: { exclude: ["evtPicture"] },
res.sendStatus(404); });
return; if (!event) {
} res.sendStatus(404);
res.json(event); return;
}
res.json(event);
}); });
router.get("/evtPicture/:id", async (req, res) => { router.get("/evtPicture/:id", async (req, res) => {
let id = req.params.id; let id = req.params.id;
let events = await Events.findByPk(id); let events = await Events.findByPk(id);
if (!events || !events.evtPicture) { if (!events || !events.evtPicture) {
res.sendStatus(404); res.sendStatus(404);
return; return;
} }
try { try {
res.set("Content-Type", "image/jpeg"); res.set("Content-Type", "image/jpeg");
res.send(events.evtPicture); res.send(events.evtPicture);
} catch (err) { } catch (err) {
res res.status(500).json({ message: "Error retrieving image", error: err });
.status(500) }
.json({ message: "Error retrieving image", error: err });
}
}); });
router.put("/:id", async (req, res) => { router.put("/:id", async (req, res) => {
const id = req.params.id; const id = req.params.id;
let data = req.body; let data = req.body;
const validationSchema = yup.object({ const validationSchema = yup.object({
title: yup.string().trim().min(3).max(100), title: yup.string().trim().min(3).max(100),
description: yup.string().trim().min(3).max(500), description: yup.string().trim().min(3).max(500),
date: yup.date(), date: yup.date(),
time: yup.string(), time: yup.string(),
location: yup.string(), location: yup.string(),
category: yup.string(), category: yup.string(),
slotsAvailable: yup.number().integer(), slotsAvailable: yup.number().integer(),
}); });
try { try {
data = await validationSchema.validate(data, { abortEarly: false }); data = await validationSchema.validate(data, { abortEarly: false });
const event = await Events.findByPk(id); const event = await Events.findByPk(id);
if (!event) { if (!event) {
return res.status(404).json({ message: "Event not found" }); return res.status(404).json({ message: "Event not found" });
}
await Events.update(data, { where: { id: id } });
res.json({ message: "Event updated successfully" });
} catch (err) {
res.status(400).json({ errors: err.errors });
} }
await Events.update(data, { where: { id: id } });
res.json({ message: "Event updated successfully" });
} catch (err) {
res.status(400).json({ errors: err.errors });
}
}); });
router.delete("/:id", async (req, res) => { router.delete("/:id", async (req, res) => {
const id = req.params.id; const id = req.params.id;
const event = await Events.findByPk(id); const event = await Events.findByPk(id);
if (!event) { if (!event) {
return res.status(404).json({ message: "Event not found" }); return res.status(404).json({ message: "Event not found" });
} }
await Events.destroy({ where: { id: id } }); await Events.destroy({ where: { id: id } });
res.json({ message: "Event deleted successfully" }); res.json({ message: "Event deleted successfully" });
}); });
module.exports = router; module.exports = router;