image

2024-08-02 04:07:44 +08:00
parent 42cae27ec6
commit b0d13899be
5 changed files with 123 additions and 42 deletions
--- a/client/src/pages/CreateEventsPage.tsx
+++ b/client/src/pages/CreateEventsPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@nextui-org/react";
 import { Formik, Form } from "formik";
 import * as Yup from "yup";
@@ -7,6 +7,7 @@ import { useNavigate } from "react-router-dom";
 import NextUIFormikInput from "../components/NextUIFormikInput";
 import NextUIFormikTextarea from "../components/NextUIFormikTextarea";
 import config from "../config";
+import InsertImage from "../components/InsertImage";
 import { ArrowUTurnLeftIcon } from "../icons";

 // Validation schema
@@ -36,13 +37,12 @@ const validationSchema = Yup.object({
  slotsAvailable: Yup.number()
    .integer()
    .required("Slots Available is required"),
-  imageUrl: Yup.string()
-    .url("Invalid URL format")
-    .required("Image URL is required"),
+  evtPicture: Yup.mixed().required("Event picture is required"),
 });

 const CreateEventsPage = () => {
  const [townCouncils, setTownCouncils] = useState<string[]>([]);
+  const [imageFile, setImageFile] = useState<File | null>(null); // State to handle image file
  const navigate = useNavigate();

  useEffect(() => {
@@ -66,23 +66,41 @@ const CreateEventsPage = () => {
    location: "",
    category: "",
    slotsAvailable: "",
-    imageUrl: "",
+    evtPicture: null, // Initialize with null
  };

  const handleSubmit = async (
    values: any,
    { setSubmitting, resetForm, setFieldError }: any
  ) => {
-    console.log("Submitting form with values:", values); // Debug log
+    const formData = new FormData();
+    formData.append("title", values.title);
+    formData.append("description", values.description);
+    formData.append("date", values.date);
+    formData.append("time", values.time);
+    formData.append("location", values.location);
+    formData.append("category", values.category);
+    formData.append("slotsAvailable", values.slotsAvailable);
+
+    if (imageFile) {
+      formData.append("evtPicture", imageFile); // Append image file to form data
+    }
+
    try {
      const response = await axios.post(
        config.serverAddress + "/events",
-        values
+        formData,
+        {
+          headers: {
+            "Content-Type": "multipart/form-data",
+          },
+        }
      );
      console.log("Server response:", response); // Debug log
      if (response.status === 200 || response.status === 201) {
        console.log("Event created successfully:", response.data);
        resetForm(); // Clear form after successful submit
+        setImageFile(null); // Reset image file state
        navigate(-1);
      } else {
        console.error("Error creating event:", response.statusText);
@@ -173,18 +191,19 @@ const CreateEventsPage = () => {
                placeholder="Enter slots available"
                labelPlacement="inside"
              />
-              <NextUIFormikInput
-                label="Image URL"
-                name="imageUrl"
-                type="text"
-                placeholder="Enter image URL"
-                labelPlacement="inside"
-              />
+              <div className="mb-4">
+                <InsertImage
+                  onImageSelected={(file) => {
+                    setImageFile(file); // Set image file
+                    setFieldValue("evtPicture", file); // Set form field value
+                  }}
+                />
+              </div>
              <div className="flex flex-row-reverse border">
                <Button
                  type="submit"
                  className="bg-red-600 text-white text-xl w-1/6"
-                  disabled={!isValid || !dirty || isSubmitting}
+                  disabled={!isValid || !dirty || isSubmitting || !imageFile}
                >
                  <p>Create Event</p>
                </Button>
--- a/client/src/pages/EventsPage.tsx
+++ b/client/src/pages/EventsPage.tsx
@@ -19,7 +19,7 @@ interface Event {
  location: string;
  time: string;
  description: string;
-  imageUrl: string;
+  evtPicture: string; // Changed to evtPicture
 }

 const EventsPage: React.FC = () => {
@@ -110,7 +110,7 @@ const EventsPage: React.FC = () => {
              value={selectedTownCouncil}
              onChange={(e) => setSelectedTownCouncil(e.target.value)}
            >
-              <option value="">All location</option>
+              <option value="">All locations</option>
              {townCouncils.map((townCouncil) => (
                <option key={townCouncil} value={townCouncil}>
                  {townCouncil}
@@ -136,18 +136,32 @@ const EventsPage: React.FC = () => {
            <p className="text-gray-600">No events available.</p>
          ) : (
            filteredEvents.map((event) => (
-              <Card key={event.id}>
+              <Card key={event.id}
+              style={{
+                maxWidth: '600px',
+                height: 'auto',
+                minHeight: '300px',
+                display: 'flex',
+                flexDirection: 'column',
+              }}>
                <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">
-                  <Image
-                    alt={event.title}
-                    className="object-cover rounded-xl"
-                    src={event.imageUrl}
-                    width="100%"
-                    height={180}
-                  />
+                  {event.evtPicture && (
+                    <div className="relative w-full" style={{ paddingBottom: '56.25%' /* 16:9 aspect ratio */ }}>
+                      <Image
+                        alt={event.title}
+                        src={`${config.serverAddress}/events/evtPicture/${event.id}`}
+                        style={{
+                          height: '100%',
+                          width: '100%',
+                          objectFit: 'cover',
+                          borderRadius: '0.375rem',
+                        }}
+                      />
+                    </div>
+                  )}
                </CardBody>
                <CardFooter className="flex flex-col items-start p-4">
                  <p className="text-gray-600 mb-4">{event.description}</p>
--- a/client/src/pages/ManageEventsPage.tsx
+++ b/client/src/pages/ManageEventsPage.tsx
@@ -64,13 +64,30 @@ const ManageEventsPage = () => {
          {events.map((event) => (
            <TableRow key={event.id}>
              <TableCell>
-                <div className="flex items-center">
-                  <Avatar
-                    src={`${config.serverAddress}${event.imageUrl}`}
-                    className="mr-4"
-                  />
-                  {event.title}
+              <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>
              </TableCell>
              <TableCell>{new Date(event.date).toLocaleDateString()}</TableCell>
              <TableCell>{event.time}</TableCell>
--- a/server/models/Events.js
+++ b/server/models/Events.js
@@ -29,7 +29,11 @@ module.exports = (sequelize)  => {
    slotsAvailable: {
      type: DataTypes.INTEGER,
      allowNull: false,
-    }
+    },
+    evtPicture: {
+      type: DataTypes.BLOB("long"),
+      allowNull: true,
+    },
  }, {
    tableName: "events",
    timestamps: true,
--- a/server/routes/events.js
+++ b/server/routes/events.js
@@ -2,40 +2,48 @@ const express = require('express');
 const router = express.Router();
 const { Events } = require('../models');
 const multer = require('multer');
+const { Op } = require("sequelize");
 const path = require('path');
 const yup = require('yup');
+const sharp = require("sharp");
+
+const upload = multer({ storage: multer.memoryStorage() });
+
+router.post("/", upload.fields([
+    { name: 'evtPicture', maxCount: 1 },
+]), async (req, res) => {

-router.post("/", async (req, res) => {
    let data = req.body;
-    console.log("Incoming data:", data); // Log incoming data
-    const validationSchema = yup.object({
+    let files = req.files;// Log incoming data
+    
+    let validationSchema = yup.object({
        title: yup.string().trim().min(3).max(100).required(),
        description: yup.string().trim().min(3).max(500).required(),
        date: yup.date().required(),
        time: yup.string().required(),
        location: yup.string().required(),
        category: yup.string().required(),
-        imageUrl: yup.string(),
        slotsAvailable: yup.number().integer().required(),
    });

    try {
        data = await validationSchema.validate(data, { abortEarly: false });
-        console.log("Validated data:", data); // Log validated data
-        const result = await Events.create(data);
-        console.log("Event created:", result); // Log successful creation
+
+        // Process valid data
+        let evtPicture = files.evtPicture[0].buffer;
+
+        let result = await Events.create({ ...data, evtPicture });
+
        res.json(result);
    } catch (err) {
        console.error("Validation error:", err); // Log the validation error
        res.status(400).json({ errors: err.errors });
    }
 });
-
-const upload = multer({ storage: multer.memoryStorage() });
  
  router.get("/", async (req, res) => {
    try {
-      const list = await Events.findAll({
+      let list = await Events.findAll({
        order: [['createdAt', 'DESC']],
      });
      res.json(list);
@@ -55,6 +63,25 @@ router.get("/:id", async (req, res) => {
    res.json(event);
 });

+router.get("/evtPicture/:id", async (req, res) => {
+    let id = req.params.id;
+    let events = await Events.findByPk(id);
+
+    if (!events || !events.evtPicture) {
+        res.sendStatus(404);
+        return;
+    }
+
+    try {
+        res.set("Content-Type", "image/jpeg"); 
+        res.send(events.evtPicture);
+    } catch (err) {
+        res
+            .status(500)
+            .json({ message: "Error retrieving image", error: err });
+    }
+});
+
 router.put("/:id", async (req, res) => {
    const id = req.params.id;
    let data = req.body;