Merge pull request #50 from Blueprint-Boulder/47-page-for-all-events

47 page for all events

frontend/src/index.js

@@ -13,6 +13,7 @@ import {createBrowserRouter, Navigate, RouterProvider} from 'react-router-dom';
 import Register from './routes/register';
 import ResetPassword from './routes/reset_password';
 import MockVendorService from './services/MockServices/MockVendorService.js';
+import MockEventService from './services/MockServices/MockEventService.js';
 // import MockLoginService from './services/MockServices/MockLoginService';
 import handleRegister from './services/handleRegister.js';
 import {handleLoginVendor} from './services/handleLogin.js';
@@ -27,6 +28,7 @@ const session = true;
 // Setup the mock vendor service
 if (config.environment === 'dev') {
   MockVendorService.init();
+  MockEventService.init();
 }
 
 const router = createBrowserRouter([
@@ -57,7 +59,7 @@ const router = createBrowserRouter([
       },
       {
         path: '/events',
-        element: session ? <Events/> : <Navigate to="/login" />,
+        element: session ? <Events EventService={MockEventService}/> : <Navigate to="/login" />,
       },
       {
         path: '/vendors',

frontend/src/objects/Event.js

@@ -0,0 +1,22 @@
+class Event {
+  constructor(eventId, name, location, datetime, description, vendorCapacity, durationHours = 2) {
+    this.eventId = eventId;
+    this.name = name;
+    this.location = location;
+    this.date = datetime.toLocaleDateString();
+    this.startTime = datetime.toLocaleTimeString();
+
+    // Create a new Date object for the end time
+    const endTime = new Date(datetime.getTime() + durationHours * 60 * 60 * 1000);
+    this.endTime = endTime.toLocaleTimeString();
+
+    this.description = description;
+    this.vendorCapacity = vendorCapacity;
+  }
+
+  get json() {
+    return JSON.stringify(this);
+  }
+}
+
+module.exports = Event;

frontend/src/routes/events.jsx

@@ -1,6 +1,42 @@
 import React from 'react';
-export default function Events() {
+import {useState} from 'react';
+import PropTypes from 'prop-types';
+
+export default function Events({EventService}) {
+  const [events] = useState(EventService.getEvents());
+
+  const eventDisplay = (event) => (
+    // event name, date, starttime, endtime, description, location in a single row
+    <div className="bg-white shadow-lg rounded-lg p-4 max-w-sm mx-auto bm-4">
+      <div className="mt-2">
+        <div className="text-lg font-semibold text-gray-900">{event.name}</div>
+        <div className="text-grey-5">{event.description}</div>
+        <div className="mt-3 text-grey-5">{event.date} • {event.startTime} - {event.endTime}</div>
+        <div className="mt-1 text-sm text-grey-5">
+          <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 inline-block mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M12 2C8.13401 2 5 5.13401 5 9C5 14.25 12 22 12 22C12 22 19 14.25 19 9C19 5.13401 15.866 2 12 2ZM12 11C10.3431 11 9 9.65685 9 8C9 6.34315 10.3431 5 12 5C13.6569 5 15 6.34315 15 8C15 9.65685 13.6569 11 12 11Z" />
+          </svg>
+          {event.location}
+        </div>
+      </div>
+    </div>
+  );
+
   return (
-    <div>You are on the events route</div>
+    // display in a single column
+    <div className='w-full mx-auto flex flex-col justify-center pb-16'>
+      <h1 className='color-white text-2xl text-center my-3 font-semibold'>Events</h1>
+      <div className='flex flex-col space-y-4'>
+        {
+          events && (Array.isArray(events) ? events.map((event, i) => (
+            <li className='[list-style:none]' key={i}>{eventDisplay(event)}</li>
+          )) : eventDisplay(events))
+        }
+      </div>
+    </div>
   );
 }
+
+Events.propTypes = {
+  EventService: PropTypes.func.isRequired,
+};

frontend/src/routes/root.jsx

@@ -27,7 +27,7 @@ export default function Root({admin}) {
   }, []);
 
   return (
-    <div className="bg-grey-1 w-screen flex h-screen flex-col justify-between">
+    <div className="bg-grey-1 w-screen flex min-h-screen flex-col">
       {message && <Alert content = {message} bad ={bad}/>}
       <Header admin={admin}/>
       <Outlet/>

frontend/src/services/MockServices/MockEventService.js

@@ -0,0 +1,42 @@
+import Event from '../../objects/Event';
+
+export default class MockEventService {
+  static mockEvents = [];
+
+  static init() {
+    if (this.mockEvents === undefined || this.mockEvents.length === 0) {
+      this.mockEvents = [
+        new Event(1, 'Music Festival', 'Central Park, NY', new Date(2023, 5, 20, 16, 0), 'A festival of music and arts.', 50, 4),
+        new Event(2, 'Tech Conference', 'Convention Center, SF', new Date(2023, 6, 15, 9, 0), 'A conference for tech enthusiasts.', 100, 8),
+        new Event(3, 'Food Fair', 'Downtown, LA', new Date(2023, 7, 10, 11, 0), 'A fair showcasing local food vendors.', 30, 3),
+        new Event(4, 'Book Expo', 'Library, Boston', new Date(2023, 8, 5, 10, 0), 'An expo for book lovers.', 40, 5),
+        new Event(5, 'Film Festival', 'Cinema, Austin', new Date(2023, 9, 1, 13, 0), 'A festival showcasing independent films.', 60, 6),
+        new Event(6, 'Art Exhibition', 'Museum, Chicago', new Date(2023, 10, 25, 14, 0), 'An exhibition of contemporary art.', 20, 2),
+        new Event(7, 'Craft Market', 'Town Square, Portland', new Date(2023, 11, 20, 10, 0), 'A market for local crafts.', 35, 4),
+        new Event(8, 'Comedy Night', 'Theater, Seattle', new Date(2023, 0, 15, 20, 0), 'A night of stand-up comedy.', 15, 3),
+        new Event(9, 'Poetry Reading', 'Cafe, Denver', new Date(2023, 1, 10, 19, 0), 'A reading by local poets.', 10, 2),
+        new Event(10, 'Dance Workshop', 'Studio, Miami', new Date(2023, 2, 7, 18, 0), 'A workshop for dance enthusiasts.', 25, 3),
+      ];
+    }
+  }
+
+  static getEvents() {
+    return this.mockEvents;
+  }
+
+  static getEvent(id) {
+    return this.mockEvents.find((event) => event.event_id === id);
+  }
+
+  static addEvent(event) {
+    this.mockEvents.push(event);
+  }
+
+  static deleteEvent(id) {
+    this.mockEvents = this.mockEvents.filter((event) => event.event_id !== id);
+  }
+
+  static updateEvent(event) {
+    this.mockEvents = this.mockEvents.map((e) => e.event_id === event.event_id ? event : e);
+  }
+}

frontend/tailwind.config.js

@@ -12,6 +12,9 @@ module.exports = {
       'grey': {
         1: '#E8E3E2',
         2: '#C6BAB7',
+        3: '#A49A97',
+        4: '#827A78',
+        5: '#625B59',
       },
       'black': '#382E2D',
       'white': '#F8F6F6',