Merge pull request #1211 from focallocal/deploy-phm

Merge deploy-phm changes upstream
focallocal · Jan 21, 2025 · 3011dbb · 3011dbb
2 parents 0a7cd74 + 15c5dd0
commit 3011dbb
Show file tree

Hide file tree

Showing 7 changed files with 121 additions and 40 deletions.
diff --git a/imports/client/ui/pages/Map/EventsList/EventsListItem/index.js b/imports/client/ui/pages/Map/EventsList/EventsListItem/index.js
@@ -6,10 +6,12 @@ import './styles.scss'
 
 class ListItem extends Component {
   render () {
+
     const {
       item,
       userLocation,
-      userGravatar
+      userGravatar,
+      ishovered,
     } = this.props
 
     const {
@@ -18,28 +20,35 @@ class ListItem extends Component {
       address
     } = item
 
+    const listItemClass = `event-list-item clickable-list-item ${
+      ishovered ? "highlighted" : ""
+    }`;
+
     return (
-      <ListGroupItem className='event-list-item'>
+      <ListGroupItem 
+        id ={`event-${item._id}`}
+        className={listItemClass}
+        onClick={this.handleItemClick}
+      >
         <img src={userGravatar} className="rounded-circle float-left mr-2" alt=""/>
         <div>
           <div className='name'>{name}</div>
           <div className='categories'>{formatCategories(categories)}</div>
           <div className='distance'>{formatMilesFromLocation(userLocation, address.location.coordinates)}</div>
         </div>
-        <i className='fas fa-chevron-circle-right go-to' onClick={this.handleItemClick} />
       </ListGroupItem>
     )
   }
-
+      
   handleItemClick = () => {
-    this.props.onItemClick(this.props.item._id)
+     this.props.onItemClick(this.props.item._id)
   }
 }
 
 ListItem.propTypes = {
   item: PropTypes.object.isRequired,
   userLocation: PropTypes.any,
-  onItemClick: PropTypes.func.isRequired
+  onItemClick: PropTypes.func.isRequired,
 }
 
 export default ListItem
diff --git a/imports/client/ui/pages/Map/EventsList/EventsListItem/styles.scss b/imports/client/ui/pages/Map/EventsList/EventsListItem/styles.scss
@@ -18,6 +18,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
   }
+
 
   .name {
     font-weight: bolder;
@@ -42,7 +43,27 @@
     transition: color .15s ease;
 
     &:hover {
-      color: $primary-blue-hover;
+      //color: $primary-blue-hover;
     }
   }
+
+  &.highlighted{
+    font-size: 1.1em;
+    cursor: pointer;
+    transition: box-shadow,font-size  .35s ease-in-out;
+    transform: translateY(-1px);
+    box-shadow: rgba(93, 93, 93, 0.10) 0px 30px 40px -12px inset, 
+                rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
+
+  }
+}
+
+.event-list-item:hover{
+    font-size: 1.1em;
+    cursor: pointer;
+    transition: box-shadow, font-size .35s ease-in-out;
+    transform: translateY(-1px);
+    box-shadow: rgba(93, 93, 93, 0.10) 0px 30px 40px -12px inset,
+                rgba(0, 0, 0, 0.3) 10px 18px 36px -18px inset;
+
 }
diff --git a/imports/client/ui/pages/Map/EventsList/index.js b/imports/client/ui/pages/Map/EventsList/index.js
@@ -13,7 +13,7 @@ import './styles.scss'
 
 class EventsList extends Component {
   state = {
-    events: []
+    events: [],
   }
 
   static getDerivedStateFromProps (nextProps, prevState) {
@@ -39,7 +39,7 @@ class EventsList extends Component {
     const {
       isFetching,
       userLocation,
-      history
+      history,
     } = this.props
 
     const currentEventProp = this.props.currentEvent
@@ -53,13 +53,15 @@ class EventsList extends Component {
           </div>
           <ListGroup>
             {events && events.map((event, index) => {
+              const ishovered = this.props.hoveredEvent === event._id ;
               return (
                 <EventsListItem
                   key={index}
                   item={event}
                   userLocation={userLocation}
                   userGravatar={Gravatar.isSpecialCategorySelected(event.categories) ? Gravatar.getGravatar(event.organiser.name, 50) : ''}
                   onItemClick={this.props.onItemClick}
+                  ishovered={ishovered} 
                 />
               )
             })}

diff --git a/imports/client/ui/pages/Map/EventsList/styles.scss b/imports/client/ui/pages/Map/EventsList/styles.scss
@@ -5,7 +5,7 @@
   top: 0;
   left: 0;
   width: $map-events-list-width;
-  height: 100vh;
+  //height: 100vh;
   background: #fff;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
   overflow: auto;

diff --git a/imports/client/ui/pages/Map/MarkerWrapper/index.js b/imports/client/ui/pages/Map/MarkerWrapper/index.js
@@ -37,13 +37,24 @@ class MarkerWrapper extends Component {
     )
   }
 
-  handleMouseOver = () => this.setState({
-    hovered: true
-  })
 
-  handleMouseOut = () => this.setState({
-    hovered: false
-  })
+  handleMouseOver = () => {
+    const {_id} = this.props.event;
+    const correspondingEvent = document.getElementById(`event-${_id}`);
+    this.setState({hovered: true })
+    this.props.onMarkerHover(_id);
+    if(correspondingEvent){
+      correspondingEvent.scrollIntoView({
+        behavior:'smooth',
+        block: "end" 
+      });
+    }
+  }
+
+  handleMouseOut = () => {
+    this.setState({hovered: false})
+    this.props.onMarkerLeave();
+  }
 
   handleClick = () => {
     this.props.onMarkerClick(this.props.event._id)

diff --git a/imports/client/ui/pages/Map/index.js b/imports/client/ui/pages/Map/index.js
@@ -42,7 +42,9 @@ class MapComponent_ extends Component {
       userLocation: { lat: 40.71084185899232, lng: -73.9266585638803 },
       zoom: 3,
       mapRadius: null,
-      showPastEvents: false
+      showPastEvents: false,
+      hoveredEvent: null,
+      isHovered: false
     }
   }
 
@@ -97,16 +99,21 @@ class MapComponent_ extends Component {
       isFetching,
       showFilters,
       userLocation,
-      zoom
+      zoom,
+      hoveredEvent,
+      isHovered
+
     } = this.state
 
     const { history } = this.props
 
     const { MainMenu } = i18n
 
     const events_ = filteredEvents || events
-
+    
     return (
+
+
       <GoogleMap
         ref={ref => this.map = ref}
         center={center}
@@ -131,6 +138,8 @@ class MapComponent_ extends Component {
               event={event}
               isCurrent={currentEvent === event._id}
               onMarkerClick={this.onMarkerClick}
+              onMarkerHover={this.onMarkerHover}
+              onMarkerLeave={this.onMarkerLeave}
               position={ensureUniquePosition(this.memoizeLocations, event, events_)}
             />
           )}
@@ -145,8 +154,10 @@ class MapComponent_ extends Component {
         <EventsList
           currentEvent={currentEvent}
           events={events_}
-          isFetching={isFetching}
+          isFetching={isFetching} 
           onItemClick={this.onMarkerClick}
+          hoveredEvent={this.state.hoveredEvent}
+          isHovered={this.state.isHovered}
           openMoreInfo={this.openMoreInfo}
           userLocation={userLocation}
           removeCurrentEvent={this.removeCurrentEvent}
@@ -175,6 +186,19 @@ class MapComponent_ extends Component {
     )
   }
 
+  onMarkerHover = (_id) => {
+    this.setState({
+      hoveredEvent: _id,
+      isHovered: true
+    });
+  }
+
+  onMarkerLeave = () => {
+    this.setState({
+      hoveredEvent: null
+    });
+  }
+
   onMarkerClick = (_id) => {
     const { latLng, overlapping: ol } = this.memoizeLocations[_id]
     const cachedSet = this.memoizeLocations[`${latLng.lng}${latLng.lat}`]

diff --git a/server/development/events.js b/server/development/events.js
@@ -6,46 +6,60 @@ import { Meteor } from 'meteor/meteor'
 import Events from '/imports/both/collections/events'
 import faker from 'faker'
 
-// if (Meteor.isDevelopment) {
-//   Meteor.methods({
-//     'upsertFake' () {
-//       for (let i = 0; i < 20; i++) {
-//         Events.upsert({ _id: `fake-id-${i}`}, {
-//           $set: generateEvent()
-//         })
-//       }
-//     }
-//   })
-//
-//   Meteor.call('upsertFake')
-// }
-
+/*
+ if (Meteor.isDevelopment) {
+   Meteor.methods({
+     'upsertFake' () {
+       for (let i = 0; i < 20; i++) {
+         Events.upsert({ _id: `fake-id-${i}`}, {
+           $set: generateEvent()
+         })
+       }
+     }
+   })
+   Meteor.call('upsertFake')
+}
+*/
 function generateEvent () {
   return {
     'organiser': {
       _id: faker.random.uuid(),
       name: faker.name.findName()
     },
     'categories': [
-      { 'name': 'Pillow Fight 4Connection', 'color': '#d50000' },
-      { 'name': 'Take a Smile', 'color': '#33691e' }
+      { 'name': 'Pillow Fight 4Connection'},
+      { 'name': 'Take a Smile'}
     ],
     'name': 'Test Event!',
     'address': {
       name: 'fake address',
-      lat: parseFloat(faker.address.latitude()),
-      lng: parseFloat(faker.address.longitude())
+      location: {
+        // Include the necessary properties for the location object
+        type: 'Point',  // Example type, adjust based on your application
+        coordinates: [
+          parseFloat(faker.address.longitude()),
+          parseFloat(faker.address.latitude())
+        ]
+      },
     },
-    'findHints': faker.lorem.sentence(15),
+    'findHints': faker.lorem.sentence(5),
     'startingDate': faker.date.future(),
     'startingTime': '16:00',
     'endingDate': faker.date.future(),
     'endingTime': '23:00',
-    'overview': faker.lorem.sentences(15),
+    'overview': faker.lorem.sentences(5),
     'description': faker.lorem.sentences(8),
     'engagement': {
       'limit': faker.random.number({ max: 300 }),
       'attendees': []
+    },
+    'when': {
+      'startingDate': faker.date.future(),
+      'endingDate': faker.date.future(),
+      'startingTime': '16:00',
+      'endingTime': '23:00',
+      'multipleDays': false, // or set to the appropriate value
+      'repeat': false // or set to the appropriate value
     }
   }
 }