diff --git a/backend/src/schema/types/type/Location.gql b/backend/src/schema/types/type/Location.gql index fad24cc26..9cb5c970a 100644 --- a/backend/src/schema/types/type/Location.gql +++ b/backend/src/schema/types/type/Location.gql @@ -25,4 +25,3 @@ type LocationMapBox { type Query { queryLocations(place: String!, lang: String!): [LocationMapBox]! } - diff --git a/backend/src/schema/types/type/Post.gql b/backend/src/schema/types/type/Post.gql index 0a7277515..7e6d1d0e7 100644 --- a/backend/src/schema/types/type/Post.gql +++ b/backend/src/schema/types/type/Post.gql @@ -84,8 +84,8 @@ input _PostFilter { group: _GroupFilter postsInMyGroups: Boolean postType_in: [PostType] - eventStart_gte: String - eventEnd_gte: String + eventStart_gte: String + eventEnd_gte: String } enum _PostOrdering { diff --git a/deployment/configurations/stage.ocelot.social b/deployment/configurations/stage.ocelot.social index 350237c62..fdc2e52fa 160000 --- a/deployment/configurations/stage.ocelot.social +++ b/deployment/configurations/stage.ocelot.social @@ -1 +1 @@ -Subproject commit 350237c62dcff1a5c34f1e8d718f89b05ce3d33f +Subproject commit fdc2e52fa444b300e1c4736600bc0e9ae3314222 diff --git a/webapp/graphql/PostQuery.js b/webapp/graphql/PostQuery.js index 83eec2a30..29b7a1f07 100644 --- a/webapp/graphql/PostQuery.js +++ b/webapp/graphql/PostQuery.js @@ -77,6 +77,10 @@ export const filterPosts = (i18n) => { eventEnd eventVenue eventLocationName + eventLocation { + lng + lat + } eventIsOnline ...post ...postCounts diff --git a/webapp/locales/de.json b/webapp/locales/de.json index 585b78353..e1137deb7 100644 --- a/webapp/locales/de.json +++ b/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", diff --git a/webapp/locales/en.json b/webapp/locales/en.json index f3d4340dc..2e1e361ab 100644 --- a/webapp/locales/en.json +++ b/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", diff --git a/webapp/pages/map.vue b/webapp/pages/map.vue index 1a34cbda1..2bf1817f7 100644 --- a/webapp/pages/map.vue +++ b/webapp/pages/map.vue @@ -5,16 +5,15 @@ {{ $t('map.pageTitle') }}
- my position - {{ $t('position.my') }} - user - {{ $t('position.user') }} - group - {{ $t('position.group') }} + + + {{ $t('map.legend.' + type.id) }} +    +
@@ -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', - name: 'mapbox-marker-icon-20px-blue.png', + id: 'theUser', + icon: { + id: 'marker-orange', + legendName: 'mapbox-marker-icon-orange.svg', + mapName: 'mapbox-marker-icon-20px-orange.png', + }, }, { - id: 'marker-orange', - name: 'mapbox-marker-icon-20px-orange.png', + id: 'user', + icon: { + id: 'marker-green', + legendName: 'mapbox-marker-icon-green.svg', + mapName: 'mapbox-marker-icon-20px-green.png', + }, }, { - id: 'marker-green', - name: 'mapbox-marker-icon-20px-green.png', + id: 'group', + 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 = - e.features[0].properties.type === 'group' - ? this.$t('map.markerTypes.group') - : e.features[0].properties.type === 'user' - ? this.$t('map.markerTypes.user') - : this.$t('map.markerTypes.theUser') - const markerProfileLinkTitle = - (e.features[0].properties.type === 'group' ? '&' : '@') + e.features[0].properties.slug - const markerProfileLink = - (e.features[0].properties.type === 'group' ? '/group' : '/profile') + - `/${e.features[0].properties.id}/${e.features[0].properties.slug}` + const markerTypeLabel = this.$t(`map.markerTypes.${e.features[0].properties.type}`) + const markerProfile = { + theUser: { + linkTitle: '@' + e.features[0].properties.slug, + link: `/profile/${e.features[0].properties.id}/${e.features[0].properties.slug}`, + }, + user: { + linkTitle: '@' + e.features[0].properties.slug, + link: `/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 = `
@@ -258,11 +290,11 @@ export default {
` 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 ? `
- ${e.features[0].properties.about} + ${e.features[0].properties.description}
` : '' @@ -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) => { - if (error) throw error - this.map.addImage(marker.id, image) - resolve() - }) + this.map.loadImage( + 'img/mapbox/marker-icons/' + marker.icon.mapName, + (error, image) => { + 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', + }, }, }