Style changes

frontend/src/components/EditEventModal.jsx

@@ -0,0 +1,95 @@
+import React, {useState, useContext} from 'react';
+
+import Modal from '../components/Modal';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import {Context} from '../services/context';
+
+export default function EditEventModal({event, eventService, setShowEditModal}) {
+  const [eventInfo, setEventInfo] = useState(event);
+  const {setBad, setMessage} = useContext(Context);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    // Call your event service here to update the event
+
+    const res = await eventService.updateEvent(event.eventId, eventInfo);
+    if (res !== undefined) {
+      // Toast with success message
+      setMessage('Event updated successfully');
+    } else {
+      setBad(true);
+      setMessage('Failed to update event');
+    }
+  };
+
+  console.log('event', eventInfo);
+  // console.log(`${eventInfo.startDate} ${eventInfo.starttime}`);
+
+  const labelNames = 'flex flex-row justify-between basis-1/3';
+  const fieldNames = 'basis-2/3 rounded drop-shadow p-1';
+
+  return (
+    <Modal className='flex flex-col gap-2 p-4' backgroundColor='bg-white' blurOnClick={()=>setShowEditModal(false)}>
+      <div className='w-80'>
+        <div className='flex flex-row justify-between items-center w-full mb-4'>
+          <div className='w-5'>&nbsp;</div>
+          <p className='font-bold'>Edit Event</p>
+          <button className='w-5 bg-black text-white drop-shadow-xl' onClick={()=>setShowEditModal(false)}>X</button>
+        </div>
+        <form className='w-full text-left items-left flex flex-col gap-4' onSubmit={handleSubmit}>
+          <label className={`${labelNames}`}>
+            Name
+            <input className={`${fieldNames}`} type="text" value={eventInfo.name} onChange={(e) => setEventInfo({...eventInfo, name: e.target.value})} />
+          </label>
+          <label className={`${labelNames}`}>
+            Description
+            <textarea className={`${fieldNames} min-h-20 h-40`} value={eventInfo.description} onChange={(e) => setEventInfo({...eventInfo, description: e.target.value})} />
+          </label>
+          <label className={`${labelNames}`}>
+            Location
+            <input className={`${fieldNames}`} type='text' value={eventInfo.location} onChange={(e) => setEventInfo({...eventInfo, location: e.target.value})} />
+          </label>
+          <label className={`${labelNames}`}>
+            Start Date
+            <DatePicker
+              id='start-time'
+              name='start-time'
+              selected={eventInfo.starttime}
+              onChange={(dateTime) => setEventInfo({...eventInfo, starttime: dateTime})}
+              showTimeSelect
+              timeIntervals={15}
+              required
+              wrapperClassName={`${fieldNames}`}
+              className={`${fieldNames} w-full`}
+              timeCaption="Time"
+              dateFormat="M/dd/YYYY h:mm a"
+              popperPlacement='top'
+            />
+          </label>
+          <label className={`${labelNames}`}>
+            End Date
+            <DatePicker
+              id='end-time'
+              name='end-time'
+              selected={eventInfo.endtime}
+              onChange={(dateTime) => setEventInfo({...eventInfo, endtime: dateTime})}
+              showTimeSelect
+              timeIntervals={15}
+              wrapperClassName={`${fieldNames}`}
+              className={`${fieldNames} w-full`}
+              required
+              timeCaption="Time"
+              dateFormat="M/dd/YYYY h:mm a"
+            />
+          </label>
+          <label className={`${labelNames}`}>
+            Capacity
+            <input className={`${fieldNames}`} type='text' value={eventInfo.vendorCapacity} onChange={(e) => setEventInfo({...eventInfo, vendorCapacity: e.target.value})} />
+          </label>
+          <input type="submit" value="Submit" className='bg-blue mt-8 w-1/3 self-center rounded drop-shadow-lg py-1'/>
+        </form>
+      </div>
+    </Modal>
+  );
+}

frontend/src/components/EventVendorsDisplay.jsx

@@ -1,35 +1,36 @@
 import React from 'react';
 import VendorEventCard from './VendorEventCard';
 
+
 export default function EventVendorsDisplay({showApproved, requests, vendors, eventService}) {
   const createCardsAdmin = (reqs) => {
-    console.log('create cards admin');
+    // console.log('create cards admin');
     return reqs.map((req) => {
-      console.log('Request:', req);
-      console.log('Vendors:', vendors);
+      // console.log('Request:', req);
+      // console.log('Vendors:', vendors);
 
       if (vendors.length === 0) return <></>;
       if (showApproved === true && req.approved !== true) return <></>;
-      // if (showApproved === false && req.approved !== null) return <></>;
+      if (showApproved === false && ( req.approved !== null || req.approved !== false) ) return <></>;
 
 
       // Fetch the vendor's profile
       const res = vendors.filter((v) => v.id === req.vendorId)[0];
-      console.log('Vendor:', res);
+      // console.log('Vendor:', res);
 
       // Return the card
       return <VendorEventCard key={res.id} vendor={res} request={req} eventService={eventService}></VendorEventCard>;
     });
   };
 
   const createCards = (vends) => {
-    console.log('create cards');
+    // console.log('create cards');
     return vends.map((vendor)=> {
       return <VendorEventCard key={vendor.id} vendor={vendor} request={undefined} eventService={eventService}></VendorEventCard>;
     });
   };
 
-  return <div className='flex flex-wrap p-10'>
+  return <div className='flex flex-wrap p-5 gap-4 justify-center'>
     {
       requests.length > 0 ? createCardsAdmin(requests) : createCards(vendors)
     }

frontend/src/components/Modal.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export default function Modal({children, backgroundColor, blurOnClick}) {
+  return (<>
+    <div className='absolute backdrop-blur-md w-full h-full z-10' onClick={blurOnClick ? blurOnClick : ()=>{}}></div>
+    <div className={`absolute ${backgroundColor} z-20 rounded-lg drop-shadow-2xl flex flex-col gap-5 p-10 items-center top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 overflow-y-scroll`}>
+      {children}
+    </div>
+  </>);
+}
+
+Modal.propTypes = {
+  message: PropTypes.string,
+  setModal: PropTypes.func,
+};

frontend/src/components/VendorEventCard.jsx

@@ -1,13 +1,15 @@
 import React, {useContext} from 'react';
 
 import {Context} from '../services/context';
+import {useNavigate} from 'react-router-dom';
 
 
 export default function VendorEventCard({vendor, request, eventService}) {
   const {user, setMessage, setBad} = useContext(Context);
+  const navigate = useNavigate();
 
 
-  console.log('LoadingCard:', vendor, request);
+  // console.log('LoadingCard:', vendor, request);
 
   // Sets approved to value
   const updateRequest = async (value) => {
@@ -25,12 +27,12 @@ export default function VendorEventCard({vendor, request, eventService}) {
   const AdminButtons = () => {
     if (user && user.isadmin) {
       if (request && request.approved) { // Show buttons to reject or set to pending
-        return <div className='flex flex-row spacing-3'>
-          <button className='mt-3 text-gray-800 font-semibold drop-shadow-xl rounded-md bg-white w-24 click:text-white' onClick={() => updateRequest(false)}>Reject Request</button>
-          <button className='mt-3 text-gray-800 font-semibold drop-shadow-xl rounded-md bg-white w-24 click:text-white' onClick={() => updateRequest(undefined)}>Set Pending</button>
+        return <div className='flex flex-row gap-3'>
+          <button className='mt-3 text-white font-semibold drop-shadow-xl rounded-md bg-black w-24' onClick={() => updateRequest(false)}>Reject Request</button>
+          <button className='mt-3 text-white font-semibold drop-shadow-xl rounded-md bg-black w-24' onClick={() => updateRequest(undefined)}>Set Pending</button>
         </div>;
       } else { // Show buttons to reject or approve
-        return <div className='flex flex-row spacing-3'>
+        return <div className='flex flex-row gap-3'>
           <button className='mt-3 text-gray-800 font-semibold drop-shadow-xl rounded-md bg-white w-24 click:text-white' onClick={() => updateRequest(true)}>Approve</button>
           <button className='mt-3 text-gray-800 font-semibold drop-shadow-xl rounded-md bg-white w-24 click:text-white' onClick={() => updateRequest(false)}>Reject Request</button>
         </div>;
@@ -40,12 +42,12 @@ export default function VendorEventCard({vendor, request, eventService}) {
     }
   };
 
-  console.log('vendreq', request);
-  console.log('vendvend', vendor);
+  // console.log('vendreq', request);
+  // console.log('vendvend', vendor);
 
   return (
-    <div className='flex flex-col p-10 basis-1/2 items-center'>
-      <img src={vendor.image ? `/profilepics/${vendor.image}` : '/profile.webp'}></img>
+    <div className='flex flex-col px-7 py-8 basis-2/5 gap-4 items-center bg-slate-50 rounded-lg drop-shadow-lg'>
+      <img src={vendor.image ? `/profilepics/${vendor.image}` : '/profile.webp'} onClick={()=> navigate(`/vendors/${vendor.id}`)}></img>
       <p className='text-center'>{vendor.name}</p>
       {
         <AdminButtons></AdminButtons>

frontend/src/objects/Event.js

@@ -7,10 +7,8 @@ export default class Event {
     this.name = name;
     this.location = location;
     this.date = starttime.toLocaleDateString();
-    this.starttime = starttime.toLocaleTimeString();
-    this.endtime = endtime.toLocaleTimeString();
-    this.startDate = starttime.toLocaleDateString();
-    this.endDate = endtime.toLocaleDateString();
+    this.starttime = starttime;
+    this.endtime = endtime;
     this.description = description;
     this.vendorCapacity = vendorCapacity;
   }