Merge branch 'master' into 6400-change-chat-style-and-lang

backend/src/schema/types/type/Location.gql

@@ -25,4 +25,3 @@ type LocationMapBox {
 type Query {
   queryLocations(place: String!, lang: String!): [LocationMapBox]!
 }
-

backend/src/schema/types/type/Post.gql

@@ -84,8 +84,8 @@ input _PostFilter {
   group: _GroupFilter
   postsInMyGroups: Boolean
   postType_in: [PostType]
-  eventStart_gte: String 
+  eventStart_gte: String
-  eventEnd_gte: String 
+  eventEnd_gte: String
 }
 
 enum _PostOrdering {

deployment/configurations/stage.ocelot.social

@@ -1 +1 @@
-Subproject commit 350237c62dcff1a5c34f1e8d718f89b05ce3d33f
+Subproject commit fdc2e52fa444b300e1c4736600bc0e9ae3314222

webapp/graphql/PostQuery.js

@@ -77,6 +77,10 @@ export const filterPosts = (i18n) => {
         eventEnd
         eventVenue
         eventLocationName
+        eventLocation {
+          lng
+          lat
+        }
         eventIsOnline
         ...post
         ...postCounts

webapp/locales/de.json

@@ -616,9 +616,16 @@
     "button": {
       "tooltip": "Landkarte anzeigen"
     },
-    "markerTypes": {
+    "legend": {
+      "event": "Veranstaltung",
       "group": "Gruppe",
-      "theUser": "deine Position",
+      "theUser": "Meine Position",
+      "user": "Nutzer"
+    },
+    "markerTypes": {
+      "event": "Veranstaltung",
+      "group": "Gruppe",
+      "theUser": "meine Position",
       "user": "Nutzer"
     },
     "pageTitle": "Landkarte",
@@ -727,11 +734,6 @@
     "title": "Benachrichtigungen",
     "user": "Nutzer"
   },
-  "position": {
-    "group": "Gruppe",
-    "my": "Meine Position",
-    "user": "Nutzer"
-  },
   "post": {
     "comment": {
       "reply": "Antworten",

webapp/locales/en.json

@@ -616,9 +616,16 @@
     "button": {
       "tooltip": "Show map"
     },
+    "legend": {
+      "event": "Event",
+      "group": "Group",
+      "theUser": "My position",
+      "user": "User"
+    },
     "markerTypes": {
+      "event": "event",
       "group": "group",
-      "theUser": "your position",
+      "theUser": "my position",
       "user": "user"
     },
     "pageTitle": "Map",
@@ -727,11 +734,6 @@
     "title": "Notifications",
     "user": "User"
   },
-  "position": {
-    "group": "Group",
-    "my": "My position",
-    "user": "User"
-  },
   "post": {
     "comment": {
       "reply": "Reply",

webapp/pages/map.vue

@@ -5,16 +5,15 @@
       <ds-heading tag="h1">{{ $t('map.pageTitle') }}</ds-heading>
       <small>
         <div>
-          <img
+          <span v-for="type in markers.types" :key="type.id">
-            alt="my position"
+            <img
-            src="/img/mapbox/marker-icons/mapbox-marker-icon-orange.svg"
+              :alt="$t('map.legend.' + type.id)"
-            width="15"
+              :src="'/img/mapbox/marker-icons/' + type.icon.legendName"
-          />
+              width="15"
-          {{ $t('position.my') }}
+            />
-          <img alt="user" src="/img/mapbox/marker-icons/mapbox-marker-icon-green.svg" width="15" />
+            {{ $t('map.legend.' + type.id) }}
-          {{ $t('position.user') }}
+            &nbsp;&nbsp;
-          <img alt="group" src="/img/mapbox/marker-icons/mapbox-marker-icon-blue.svg" width="15" />
+          </span>
-          {{ $t('position.group') }}
         </div>
       </small>
     </ds-space>
@@ -66,6 +65,7 @@ import '@mapbox/mapbox-gl-geocoder/dist/mapbox-gl-geocoder.css'
 import { mapGetters } from 'vuex'
 import { profileUserQuery, mapUserQuery } from '~/graphql/User'
 import { groupQuery } from '~/graphql/groups'
+import { filterPosts } from '~/graphql/PostQuery.js'
 import mobile from '~/mixins/mobile'
 import Empty from '~/components/Empty/Empty'
 import MapStylesButtons from '~/components/Map/MapStylesButtons'
@@ -95,19 +95,40 @@ export default {
       currentUserCoordinates: null,
       users: null,
       groups: null,
+      posts: null,
       markers: {
-        icons: [
+        types: [
           {
-            id: 'marker-blue',
+            id: 'theUser',
-            name: 'mapbox-marker-icon-20px-blue.png',
+            icon: {
+              id: 'marker-orange',
+              legendName: 'mapbox-marker-icon-orange.svg',
+              mapName: 'mapbox-marker-icon-20px-orange.png',
+            },
           },
           {
-            id: 'marker-orange',
+            id: 'user',
-            name: 'mapbox-marker-icon-20px-orange.png',
+            icon: {
+              id: 'marker-green',
+              legendName: 'mapbox-marker-icon-green.svg',
+              mapName: 'mapbox-marker-icon-20px-green.png',
+            },
           },
           {
-            id: 'marker-green',
+            id: 'group',
-            name: 'mapbox-marker-icon-20px-green.png',
+            icon: {
+              id: 'marker-red',
+              legendName: 'mapbox-marker-icon-red.svg',
+              mapName: 'mapbox-marker-icon-20px-red.png',
+            },
+          },
+          {
+            id: 'event',
+            icon: {
+              id: 'marker-purple',
+              legendName: 'mapbox-marker-icon-purple.svg',
+              mapName: 'mapbox-marker-icon-20px-purple.png',
+            },
           },
         ],
         isImagesLoaded: false,
@@ -137,7 +158,8 @@ export default {
         this.markers.isImagesLoaded &&
         this.currentUser &&
         this.users &&
-        this.groups
+        this.groups &&
+        this.posts
       )
     },
     styles() {
@@ -236,17 +258,27 @@ export default {
 
         // Copy coordinates array.
         const coordinates = e.features[0].geometry.coordinates.slice()
-        const markerTypeLabel =
+        const markerTypeLabel = this.$t(`map.markerTypes.${e.features[0].properties.type}`)
-          e.features[0].properties.type === 'group'
+        const markerProfile = {
-            ? this.$t('map.markerTypes.group')
+          theUser: {
-            : e.features[0].properties.type === 'user'
+            linkTitle: '@' + e.features[0].properties.slug,
-            ? this.$t('map.markerTypes.user')
+            link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
-            : this.$t('map.markerTypes.theUser')
+          },
-        const markerProfileLinkTitle =
+          user: {
-          (e.features[0].properties.type === 'group' ? '&' : '@') + e.features[0].properties.slug
+            linkTitle: '@' + e.features[0].properties.slug,
-        const markerProfileLink =
+            link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
-          (e.features[0].properties.type === 'group' ? '/group' : '/profile') +
+          },
-          `/${e.features[0].properties.id}/${e.features[0].properties.slug}`
+          group: {
+            linkTitle: '&' + e.features[0].properties.slug,
+            link: `/group/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
+          },
+          event: {
+            linkTitle: e.features[0].properties.slug,
+            link: `/post/${e.features[0].properties.id}/${e.features[0].properties.slug}`,
+          },
+        }
+        const markerProfileLinkTitle = markerProfile[e.features[0].properties.type].linkTitle
+        const markerProfileLink = markerProfile[e.features[0].properties.type].link
         let description = `
           <div>
             <div>
@@ -258,11 +290,11 @@ export default {
           </div>
            `
         description +=
-          e.features[0].properties.about && e.features[0].properties.about.length > 0
+          e.features[0].properties.description && e.features[0].properties.description.length > 0
             ? `
             <hr>
             <div>
-              ${e.features[0].properties.about}
+              ${e.features[0].properties.description}
             </div>`
             : ''
 
@@ -305,15 +337,18 @@ export default {
     },
     loadMarkersIconsAndAddMarkers() {
       Promise.all(
-        this.markers.icons.map(
+        this.markers.types.map(
           (marker) =>
             new Promise((resolve, reject) => {
               // our images have to be in the 'static/img/*' folder otherwise they are not reachable via URL
-              this.map.loadImage('img/mapbox/marker-icons/' + marker.name, (error, image) => {
+              this.map.loadImage(
-                if (error) throw error
+                'img/mapbox/marker-icons/' + marker.icon.mapName,
-                this.map.addImage(marker.id, image)
+                (error, image) => {
-                resolve()
+                  if (error) throw error
-              })
+                  this.map.addImage(marker.icon.id, image)
+                  resolve()
+                },
+              )
             }),
         ),
       ).then(() => {
@@ -337,7 +372,7 @@ export default {
                 id: user.id,
                 slug: user.slug,
                 name: user.name,
-                about: user.about ? user.about : undefined,
+                description: user.about ? user.about : undefined,
               },
               geometry: {
                 type: 'Point',
@@ -346,27 +381,6 @@ export default {
             })
           }
         })
-        // add markers for "groups"
-        this.groups.forEach((group) => {
-          if (group.location) {
-            this.markers.geoJSON.push({
-              type: 'Feature',
-              properties: {
-                type: 'group',
-                iconName: 'marker-blue',
-                iconRotate: 0.0,
-                id: group.id,
-                slug: group.slug,
-                name: group.name,
-                about: group.about ? group.about : undefined,
-              },
-              geometry: {
-                type: 'Point',
-                coordinates: this.getCoordinates(group.location),
-              },
-            })
-          }
-        })
         // add marker for "currentUser"
         if (this.currentUserCoordinates) {
           this.markers.geoJSON.push({
@@ -378,7 +392,7 @@ export default {
               id: this.currentUser.id,
               slug: this.currentUser.slug,
               name: this.currentUser.name,
-              about: this.currentUser.about ? this.currentUser.about : undefined,
+              description: this.currentUser.about ? this.currentUser.about : undefined,
             },
             geometry: {
               type: 'Point',
@@ -386,6 +400,48 @@ export default {
             },
           })
         }
+        // add markers for "groups"
+        this.groups.forEach((group) => {
+          if (group.location) {
+            this.markers.geoJSON.push({
+              type: 'Feature',
+              properties: {
+                type: 'group',
+                iconName: 'marker-red',
+                iconRotate: 0.0,
+                id: group.id,
+                slug: group.slug,
+                name: group.name,
+                description: group.about ? group.about : undefined,
+              },
+              geometry: {
+                type: 'Point',
+                coordinates: this.getCoordinates(group.location),
+              },
+            })
+          }
+        })
+        // add markers for "posts", post type "Event" with location coordinates
+        this.posts.forEach((post) => {
+          if (post.postType.includes('Event') && post.eventLocation) {
+            this.markers.geoJSON.push({
+              type: 'Feature',
+              properties: {
+                type: 'event',
+                iconName: 'marker-purple',
+                iconRotate: 0.0,
+                id: post.id,
+                slug: post.slug,
+                name: post.title,
+                description: post.contentExcerpt,
+              },
+              geometry: {
+                type: 'Point',
+                coordinates: this.getCoordinates(post.eventLocation),
+              },
+            })
+          }
+        })
 
         this.markers.isGeoJSON = true
       }
@@ -483,6 +539,24 @@ export default {
       },
       fetchPolicy: 'cache-and-network',
     },
+    Post: {
+      query() {
+        return filterPosts(this.$i18n)
+      },
+      variables() {
+        return {
+          filter: {
+            postType_in: ['Event'],
+            eventStart_gte: new Date(),
+            // would be good to just query for events with defined "eventLocation". couldn't get it working
+          },
+        }
+      },
+      update({ Post }) {
+        this.posts = Post
+      },
+      fetchPolicy: 'cache-and-network',
+    },
   },
 }
 </script>