Merge branch 'feature/event-maps' into 'master'

Feature/event maps

See merge request framasoft/mobilizon!105

js/src/components/Map.vue

@@ -0,0 +1,44 @@
+<template>
+    <div style="height: 100%; width: 100%">
+        <l-map
+                :zoom="16"
+                style="height: 80%; width: 100%"
+                :center="[lat, lon]"
+        >
+            <l-tile-layer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png"></l-tile-layer>
+            <l-marker :lat-lng="[lat, lon]" >
+                <l-popup v-if="popup">{{ popup }}</l-popup>
+            </l-marker>
+        </l-map>
+    </div>
+</template>
+
+<script lang="ts">
+import { Icon }  from 'leaflet';
+import 'leaflet/dist/leaflet.css';
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { LMap, LTileLayer, LMarker, LPopup } from 'vue2-leaflet';
+
+@Component({
+  components: { LTileLayer, LMap, LMarker, LPopup },
+})
+export default class Event extends Vue {
+  @Prop({ type: String, required: true }) coords!: string;
+  @Prop({ type: String, required: false }) popup!: string;
+
+  mounted() {
+    // this part resolve an issue where the markers would not appear
+    // @ts-ignore
+    delete Icon.Default.prototype._getIconUrl;
+
+    Icon.Default.mergeOptions({
+      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
+      iconUrl: require('leaflet/dist/images/marker-icon.png'),
+      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+    });
+  }
+
+  get lat() { return this.$props.coords.split(';')[0]; }
+  get lon() { return this.$props.coords.split(';')[1]; }
+}
+</script>

js/src/graphql/event.ts

@@ -29,6 +29,16 @@ export const FETCH_EVENT = gql`
       category,
       # online_address,
       # phone_address,
+      physicalAddress {
+        description,
+        floor,
+        street,
+        locality,
+        postal_code,
+        region,
+        country,
+        geom
+      }
       organizerActor {
         avatarUrl,
         preferredUsername,
@@ -64,6 +74,9 @@ export const FETCH_EVENTS = gql`
       publishAt,
       # online_address,
       # phone_address,
+      physicalAddress {
+        description
+      }
       organizerActor {
         avatarUrl,
         preferredUsername,

js/src/main.ts

@@ -1,7 +1,6 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
 import Vue from 'vue';
-// import * as VueGoogleMaps from 'vue2-google-maps';
 import VueSimpleMarkdown from 'vue-simple-markdown';
 import Buefy from 'buefy';
 import 'buefy/dist/buefy.css';

js/src/types/address.model.ts

@@ -0,0 +1,10 @@
+export interface IAddress {
+  description: string;
+  floor: string;
+  street: string;
+  locality: string;
+  postal_code: string;
+  region: string;
+  country: string;
+  geom: string;
+}

js/src/types/event.model.ts

@@ -1,4 +1,5 @@
 import { Actor, IActor } from './actor.model';
+import { IAddress } from '@/types/address.model';
 
 export enum EventStatus {
   TENTATIVE,
@@ -67,8 +68,9 @@ export interface IEvent {
   attributedTo: IActor;
   participants: IParticipant[];
 
-  // online_address: Address;
-  // phone_address: string;
+  onlineAddress?: string;
+  phoneAddress?: string;
+  physicalAddress?: IAddress;
 }
 
 
@@ -90,4 +92,6 @@ export class EventModel implements IEvent {
   visibility: EventVisibility = EventVisibility.PUBLIC;
   attributedTo: IActor = new Actor();
   organizerActor: IActor = new Actor();
+  onlineAddress: string = '';
+  phoneAddress: string = '';
 }

js/src/views/Event/Event.vue

@@ -46,6 +46,21 @@
           <div>
             <span>{{ event.beginsOn | formatDate }} - {{ event.endsOn | formatDate }}</span>
           </div>
+          <div class="address" v-if="event.physicalAddress">
+            <h3 class="subtitle">Adresse</h3>
+            <address>
+              <span>{{ event.physicalAddress.description }}</span><br>
+              <span>{{ event.physicalAddress.floor }} {{ event.physicalAddress.street }}</span><br>
+              <span>{{ event.physicalAddress.postal_code }} {{ event.physicalAddress.locality }}</span><br>
+              <span>{{ event.physicalAddress.region }} {{ event.physicalAddress.country }}</span>
+            </address>
+            <div class="map">
+              <map-leaflet
+                :coords="event.physicalAddress.geom"
+                :popup="event.physicalAddress.description"
+              />
+            </div>
+          </div>
           <p v-if="actorIsOrganizer()">
             <translate>You are an organizer.</translate>
           </p>
@@ -110,6 +125,9 @@ import 'vue-simple-markdown/dist/vue-simple-markdown.css';
 import { GRAPHQL_API_ENDPOINT } from '@/api/_entrypoint';
 
 @Component({
+  components: {
+    'map-leaflet': () => import('@/components/Map.vue'),
+  },
   apollo: {
     event: {
       query: FETCH_EVENT,
@@ -225,3 +243,10 @@ export default class Event extends Vue {
   }
 }
 </script>
+<style lang="scss">
+  .address div.map {
+    height: 400px;
+    width: 400px;
+    padding: 25px 35px;
+  }
+</style>

js/src/views/Group/Create.vue

@@ -76,11 +76,11 @@ export default class CreateGroup extends Vue {
         latitude: addressData.latitude,
         longitude: addressData.longitude,
       },
-      addressCountry: addressData.country,
-      addressLocality: addressData.city,
-      addressRegion: addressData.administrative_area_level_1,
-      postalCode: addressData.postal_code,
-      streetAddress: `${addressData.street_number} ${addressData.route}`,
+      country: addressData.country,
+      locality: addressData.city,
+      region: addressData.administrative_area_level_1,
+      postal_code: addressData.postal_code,
+      street: `${addressData.street_number} ${addressData.route}`,
     };
   }
 }