From 3b202674a3fd213400f7f9e4cb5f2c56fd5ce6e1 Mon Sep 17 00:00:00 2001 From: Thomas Citharel Date: Fri, 22 Mar 2019 17:35:07 +0100 Subject: [PATCH] Add leaflet Fix build, make map component async and move computed to getter Signed-off-by: Thomas Citharel --- js/package-lock.json | 25 ++++++++++++++++++++ js/package.json | 3 +++ js/src/components/Map.vue | 44 +++++++++++++++++++++++++++++++++++ js/src/main.ts | 1 - js/src/types/address.model.ts | 19 +++++++-------- js/src/types/event.model.ts | 2 +- js/src/views/Event/Event.vue | 16 +++++++++++++ js/tsconfig.json | 5 ++-- 8 files changed, 100 insertions(+), 15 deletions(-) create mode 100644 js/src/components/Map.vue diff --git a/js/package-lock.json b/js/package-lock.json index 253ee9d6e..5a73f9ad2 100644 --- a/js/package-lock.json +++ b/js/package-lock.json @@ -1010,6 +1010,12 @@ "integrity": "sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g==", "dev": true }, + "@types/geojson": { + "version": "7946.0.7", + "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.7.tgz", + "integrity": "sha512-wE2v81i4C4Ol09RtsWFAqg3BUitWbHSpSlIo+bNdsCJijO9sjme+zm+73ZMCa/qMC8UEERxzGbvmr1cffo2SiQ==", + "dev": true + }, "@types/glob": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@types/glob/-/glob-7.1.1.tgz", @@ -1021,6 +1027,15 @@ "@types/node": "*" } }, + "@types/leaflet": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.4.3.tgz", + "integrity": "sha512-jFRBSsPHi1EwQSwrN0cOJLdPhwOZsRl4IMxvm/2ShLh0YM5GfCtQXCzsrv8RE7DWL+AykXdYSAd9bFLWbZT4CQ==", + "dev": true, + "requires": { + "@types/geojson": "*" + } + }, "@types/lodash": { "version": "4.14.123", "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.123.tgz", @@ -8044,6 +8059,11 @@ "invert-kv": "^1.0.0" } }, + "leaflet": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.4.0.tgz", + "integrity": "sha512-x9j9tGY1+PDLN9pcWTx9/y6C5nezoTMB8BLK5jTakx+H7bPlnbCHfi9Hjg+Qt36sgDz/cb9lrSpNQXmk45Tvhw==" + }, "levn": { "version": "0.3.0", "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", @@ -13973,6 +13993,11 @@ "resolved": "https://registry.npmjs.org/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.6.0.tgz", "integrity": "sha512-x3LV3wdmmERhVCYy3quqA57NJW7F3i6faas++pJQWtknWT+n7k30F4TVdHvCLn48peTJFRvCpxs3UuFPqgeELg==" }, + "vue2-leaflet": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/vue2-leaflet/-/vue2-leaflet-2.0.2.tgz", + "integrity": "sha512-8KAU0mbUp5CDwb5NBlpEoyCO/x+Rv1KeA4599HJqpHeOrzY0+PBoUabM80riUUWJWGhRi3yhV4DJ8Kf1QHRelQ==" + }, "vuex": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.1.0.tgz", diff --git a/js/package.json b/js/package.json index 41481304c..05c7ed5f5 100644 --- a/js/package.json +++ b/js/package.json @@ -22,6 +22,7 @@ "easygettext": "^2.7.0", "graphql": "^14.1.1", "graphql-tag": "^2.10.1", + "leaflet": "^1.4.0", "lodash": "^4.17.11", "material-design-icons": "^3.0.1", "ngeohash": "^0.6.3", @@ -34,10 +35,12 @@ "vue-property-decorator": "^8.1.0", "vue-router": "^3.0.2", "vue-simple-markdown": "^1.0.9", + "vue2-leaflet": "^2.0.2", "vuex": "^3.1.0" }, "devDependencies": { "@types/chai": "^4.1.7", + "@types/leaflet": "^1.4.3", "@types/lodash": "^4.14.123", "@types/mocha": "^5.2.6", "@vue/cli-plugin-babel": "^3.5.1", diff --git a/js/src/components/Map.vue b/js/src/components/Map.vue new file mode 100644 index 000000000..a8edc1a0b --- /dev/null +++ b/js/src/components/Map.vue @@ -0,0 +1,44 @@ + + + diff --git a/js/src/main.ts b/js/src/main.ts index b45563d96..11ebeb63c 100644 --- a/js/src/main.ts +++ b/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'; diff --git a/js/src/types/address.model.ts b/js/src/types/address.model.ts index f07d6f868..663ec425f 100644 --- a/js/src/types/address.model.ts +++ b/js/src/types/address.model.ts @@ -1,13 +1,10 @@ export interface IAddress { - description: string; - floor: string; - street: string; - locality: string; - postal_code: string; - region: string; - country: string; - geom: { - lat: number; - lon: number; - } + description: string; + floor: string; + street: string; + locality: string; + postal_code: string; + region: string; + country: string; + geom: string; } diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts index 75dae5797..3007d08d7 100644 --- a/js/src/types/event.model.ts +++ b/js/src/types/event.model.ts @@ -1,5 +1,5 @@ import { Actor, IActor } from './actor.model'; -import {IAddress} from "@/types/address.model"; +import { IAddress } from '@/types/address.model'; export enum EventStatus { TENTATIVE, diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue index f3cd74642..3aded9196 100644 --- a/js/src/views/Event/Event.vue +++ b/js/src/views/Event/Event.vue @@ -54,6 +54,12 @@ {{ event.physicalAddress.postal_code }} {{ event.physicalAddress.locality }}
{{ event.physicalAddress.region }} {{ event.physicalAddress.country }} +
+ +

You are an organizer. @@ -118,6 +124,9 @@ import { RouteName } from '@/router'; import 'vue-simple-markdown/dist/vue-simple-markdown.css'; @Component({ + components: { + 'map-leaflet': () => import('@/components/Map.vue'), + }, apollo: { event: { query: FETCH_EVENT, @@ -237,3 +246,10 @@ export default class Event extends Vue { } } + diff --git a/js/tsconfig.json b/js/tsconfig.json index 38ee4457f..64b38e254 100644 --- a/js/tsconfig.json +++ b/js/tsconfig.json @@ -15,7 +15,8 @@ "types": [ "webpack-env", "mocha", - "chai" + "chai", + "leaflet" ], "paths": { "@/*": [ @@ -39,4 +40,4 @@ "exclude": [ "node_modules" ] -} \ No newline at end of file +}