From cab5a4e46d2f7d96c44ea34342754ce6a52a441c Mon Sep 17 00:00:00 2001 From: Julien Calixte Date: Sun, 15 Mar 2020 14:49:16 +0100 Subject: [PATCH] :sparkles: (transaction) possibility to change location --- src/components/EarthMap.vue | 104 +++++++++++++++++----- src/components/TransactionCreate.vue | 76 +++++++++++++++- src/services/MapService.ts | 29 +++++- src/styles/index.scss | 2 +- src/utils/index.ts | 6 -- src/views/transactions/TransactionNew.vue | 27 ++---- 6 files changed, 190 insertions(+), 54 deletions(-) diff --git a/src/components/EarthMap.vue b/src/components/EarthMap.vue index 5f29e83..8eb4afa 100644 --- a/src/components/EarthMap.vue +++ b/src/components/EarthMap.vue @@ -5,59 +5,115 @@ - \ No newline at end of file diff --git a/src/components/TransactionCreate.vue b/src/components/TransactionCreate.vue index ed668cf..c3b005d 100644 --- a/src/components/TransactionCreate.vue +++ b/src/components/TransactionCreate.vue @@ -94,15 +94,27 @@
-
-
+
+
+
+ +
@@ -176,6 +188,33 @@
+
+
+
+
+ +
+
+ + +
+
+
import('@/components/EarthMap.vue'), 'fab-button': () => import('@/components/FabButton.vue'), 'transaction-split': () => import('@/components/TransactionSplit.vue'), 'transaction-tag-update': () => @@ -226,13 +268,15 @@ export default class TransactionCreate extends Vue { public tag: TransactionTag = TransactionTag.None public today: string = formatDate(today) public date: string = formatDate(today) - public location: string = '' public currency: ICurrency | null = null public payBy: string = '' public payFor: ISplit[] = [] public maxAmount: number = 1000000 public noTag: string = TransactionTag.None public transactionTagLabel: typeof TransactionTagLabel = TransactionTagLabel + public displayLocationModal = false + public isSetLocation = false + public location: ILocation | null = null public async created(): Promise { this.setData(this.transaction) @@ -325,6 +369,29 @@ export default class TransactionCreate extends Vue { this.payFor.forEach((p: ISplit) => (p.weight = p.weight || 1)) } + public located(location: ILocation) { + this.location = location + } + + public async validLocation() { + try { + this.isSetLocation = true + if (this.location) { + const place = await MapService.getPlace(this.location) + const location = { + ...this.location, + place + } + this.$set(this.transaction, 'location', location) + } + } catch (error) { + this.$set(this.transaction, 'location', this.transaction.location) + } finally { + this.displayLocationModal = false + this.isSetLocation = false + } + } + public get payForUsers(): ISplit[] { return this.payFor.filter((p, index) => p.weight > 0) } @@ -394,4 +461,7 @@ export default class TransactionCreate extends Vue { .help { text-align: left; } +.set-location { + text-align: center; +} diff --git a/src/services/MapService.ts b/src/services/MapService.ts index 6eeb9c6..c3ca00a 100644 --- a/src/services/MapService.ts +++ b/src/services/MapService.ts @@ -4,7 +4,25 @@ import ILocationQuery from '@/models/ILocationQuery' class MapService { private key: string = process.env.VUE_APP_MAP_KEY || '' - public async getLocation(location: ILocation): Promise { + public async getPosition(): Promise { + const position = await this.getCurrentPosition() + if (!position) { + return null + } + const { coords } = position + const location = { + lat: coords.latitude, + lon: coords.longitude + } + const place = await this.getPlace(location) + + return { + ...location, + place + } + } + + public async getPlace(location: ILocation): Promise { const result = await fetch(this.url(location.lat, location.lon)) if (!result) { return '' @@ -25,6 +43,15 @@ class MapService { private url(latitude: number, longitude: number) { return `https://dev.virtualearth.net/REST/v1/Locations/${latitude},${longitude}?key=${this.key}` } + + private getCurrentPosition(): Promise { + return new Promise((resolve, reject) => { + if (!('geolocation' in navigator)) { + resolve(null) + } + return navigator.geolocation.getCurrentPosition(resolve, reject) + }) + } } export default new MapService() diff --git a/src/styles/index.scss b/src/styles/index.scss index e31f602..44222c6 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,9 +1,9 @@ // sass-lint:disable final-newline empty-line-between-blocks class-name-format no-url-protocols no-url-domains nesting-depth @charset 'utf-8'; @import url('https://fonts.googleapis.com/css?family=Nunito|Raleway|Open+Sans&display=swap'); +@import url('https://css.gg/c?=|pin-alt'); @import './framework'; @import './transitions'; - :root { --primary-color: #{$primary}; --primary-font-color: #{$main}; diff --git a/src/utils/index.ts b/src/utils/index.ts index 56b6d68..3b1e727 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -78,9 +78,3 @@ export const toHex = (text: string): string => { .join('') ) } - -export const getCurrentPosition = (options = {}): Promise => { - return new Promise((resolve, reject) => { - navigator.geolocation.getCurrentPosition(resolve, reject, options) - }) -} diff --git a/src/views/transactions/TransactionNew.vue b/src/views/transactions/TransactionNew.vue index 7da6c26..1be1b23 100644 --- a/src/views/transactions/TransactionNew.vue +++ b/src/views/transactions/TransactionNew.vue @@ -19,7 +19,6 @@ import ITransaction from '@/models/ITransaction' import IUser from '@/models/IUser' import accountService from '@/services/AccountService' import transactionService from '@/services/TransactionService' -import { getCurrentPosition } from '@/utils' import mapService from '@/services/MapService' const today: Date = new Date() @@ -48,25 +47,15 @@ export default class TransactionNew extends Vue { } try { - if ('geolocation' in navigator) { - getCurrentPosition().then(({ coords }) => { - mapService - .getLocation({ - lat: coords.latitude, - lon: coords.longitude - }) - .then((place) => { - if (!this.transaction) { - return - } - this.$set(this.transaction, 'location', { - lat: coords.latitude, - lon: coords.longitude, - place - }) - }) - }) + if (!this.transaction) { + return } + const location = await mapService.getPosition() + + if (!location) { + return + } + this.$set(this.transaction, 'location', { ...location }) } catch (error) { // tslint:disable-next-line: no-console console.error(error)