From fc0e5462190b7a0a499b45c684166920152c6b9a Mon Sep 17 00:00:00 2001
From: Joakim Olsson <joakim@unbound.se>
Date: Sat, 2 Mar 2019 11:45:45 +0100
Subject: [PATCH] Add origins and calculation of distance and duration

---
 components/pages/events/Event/index.vue | 12 ++++
 components/pages/events/index.vue       | 93 ++++++++++++++++++++++---
 nuxt.config.js                          |  3 +-
 package.json                            |  1 +
 plugins/vue-numeral-filter.js           |  5 ++
 utils/graph-client/index.js             |  7 +-
 utils/graph-client/mutationStrings.js   | 30 +++++---
 utils/graph-client/mutations.js         |  8 +++
 utils/graph-client/queries.js           |  2 +
 utils/graph-client/queryStrings.js      | 18 +++--
 yarn.lock                               | 12 ++++
 11 files changed, 165 insertions(+), 26 deletions(-)
 create mode 100644 plugins/vue-numeral-filter.js

diff --git a/components/pages/events/Event/index.vue b/components/pages/events/Event/index.vue
index 7e01765..68efec5 100644
--- a/components/pages/events/Event/index.vue
+++ b/components/pages/events/Event/index.vue
@@ -14,6 +14,18 @@
         <v-flex xs12 sm6 md3><strong>Kommun:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('municipality', event.danceHall.municipality)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.municipality}}</v-flex>
         <v-flex xs12 sm6 md3><strong>Län:</strong> <a href="#" v-if="hasUser" @click.prevent="ignore('state', event.danceHall.state)"><v-icon small title="Dölj">mdi-eye-off</v-icon></a>&nbsp;{{event.danceHall.state}}</v-flex>
       </v-layout>
+      <v-layout row wrap v-for="distance in event.distances" :key="event.origin">
+        <v-flex xs12 sm6 md3>
+          <v-icon>mdi-home</v-icon>
+          <span><strong>{{distance.origin}}</strong></span>
+        </v-flex>
+        <v-flex xs12 sm6 md9>
+          <v-icon>mdi-car</v-icon>
+          <span>{{distance.distance / 1000 | numeral('0,0.00')}} km</span>
+          <v-icon>mdi-clock-outline</v-icon>
+          <span>{{distance.duration}}</span>
+        </v-flex>
+      </v-layout>
     </v-container>
   </v-card>
 </template>
diff --git a/components/pages/events/index.vue b/components/pages/events/index.vue
index 7a12429..226b7b0 100644
--- a/components/pages/events/index.vue
+++ b/components/pages/events/index.vue
@@ -7,6 +7,30 @@
           <p><b>OBS! Logga in för att kunna filtrera listan</b></p>
         </v-flex>
       </v-layout>
+      <v-layout row wrap>
+        <v-flex xs12>
+          <v-text-field
+              v-model="origin"
+              label="Startpunkt"
+              placeholder="Address/geokoordinat"
+          >
+            <v-tooltip top slot="append-outer">
+              <v-icon slot="activator" v-on:click="fetchAddress()">mdi-crosshairs-gps</v-icon>
+              <span>Hämta nuvarande position</span>
+            </v-tooltip>
+            <v-tooltip top slot="prepend">
+              <v-icon slot="activator" v-on:click="saveOrigin(origin)">mdi-bookmark-plus-outline</v-icon>
+              <span>Spara startpunkt</span>
+            </v-tooltip>
+          </v-text-field>
+        </v-flex>
+      </v-layout>
+      <v-layout row wrap v-for="origin in origins" :key="origin">
+        <v-flex xs12>
+          <v-icon v-on:click="removeOrigin(origin)">mdi-delete-outline</v-icon>
+          <span>{{origin}}</span>
+        </v-flex>
+      </v-layout>
       <v-layout row wrap>
         <v-flex>
           <v-btn-toggle v-if="$vuetify.breakpoint.smAndUp" v-model="range" mandatory @change="changeRange">
@@ -34,11 +58,14 @@
 <script>
   import {
     findEvents,
+    fetchAddress,
     ignoreBand,
     ignoreDanceHall,
     ignoreCity,
     ignoreMunicipality,
-    ignoreState
+    ignoreState,
+    saveOrigin,
+    removeOrigin
   } from "~/utils/graph-client";
 
   import auth from "~/utils/auth";
@@ -52,13 +79,8 @@
     data() {
       return {
         status: "loading",
-        property: undefined,
-        propertyId: undefined,
-        order: undefined,
-        orderId: undefined,
-        originalProperty: undefined,
-        selectedPackage: undefined,
-        selectedImages: [],
+        origin: undefined,
+        origins: [],
         submitError: "",
         user: undefined,
         snackbar: false,
@@ -114,7 +136,11 @@
     methods: {
       fetchEvents () {
         this.status = "loading";
-        findEvents({range: this.range})
+        const origins = this.origins;
+        if (this.origin) {
+          origins.push(this.origin);
+        }
+        findEvents({range: this.range, origins: origins.length > 0 ? origins : null})
             .then(this.eventsFetched)
             .catch(this.eventsFailed);
       },
@@ -123,6 +149,7 @@
           throw new Error("Fetch failed");
         }
         this.events = response.data.events;
+        this.origins = response.data.origins;
         this.status = "ready";
       },
       eventsFailed() {
@@ -175,8 +202,56 @@
           this.snackbar = true;
         }
       },
+      saveOrigin(origin) {
+        saveOrigin({origin: origin})
+            .then(saved => {
+              if (saved) {
+                this.origins = [];
+                this.origin = "";
+                this.fetchEvents();
+              } else {
+                this.snackColor = 'error';
+                this.snackText = `${origin} kunde inte sparas`;
+                this.snackbar = true;
+              }
+            })
+            .catch(() => {
+              this.snackColor = 'error';
+              this.snackText = `${origin} kunde inte sparas`;
+              this.snackbar = true;
+            })
+      },
+      removeOrigin(origin) {
+        removeOrigin({origin: origin})
+            .then(removed => {
+              if (removed) {
+                this.origins = [];
+                this.fetchEvents();
+              } else {
+                this.snackColor = 'error';
+                this.snackText = `${origin} kunde inte tas bort`;
+                this.snackbar = true;
+              }
+            })
+            .catch(() => {
+              this.snackColor = 'error';
+              this.snackText = `${origin} kunde inte tas bort`;
+              this.snackbar = true;
+            })
+      },
       changeRange(range) {
         this.$router.push(`/?range=${range}`);
+      },
+      fetchAddress() {
+        if (window.navigator) {
+          window.navigator.geolocation.getCurrentPosition(pos => {
+            fetchAddress({latlng: pos.coords.latitude + "," + pos.coords.longitude})
+              .then(response => {
+                this.origin = response.data.address;
+                this.fetchEvents();
+              })
+          })
+        }
       }
     }
   };
diff --git a/nuxt.config.js b/nuxt.config.js
index 16e047e..86bdd02 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -26,7 +26,8 @@ module.exports = {
     {src: '~/plugins/vuetify.js', ssr: false},
     {src: '~/plugins/graph-routing.js', ssr: false},
     {src: '~/plugins/app-components.js', ssr: false},
-    {src: '~/plugins/vue-lazyload.js', ssr: false}
+    {src: '~/plugins/vue-lazyload.js', ssr: false},
+    {src: '~/plugins/vue-numeral-filter.js', ssr: false}
   ],
   router: {
     middleware: ['auth']
diff --git a/package.json b/package.json
index 4f172c4..7d9890c 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "sass-loader": "^7.0.3",
     "vue": "^2.5.22",
     "vue-lazyload": "^1.2.6",
+    "vue-numeral-filter": "^1.1.1",
     "vuetify": "^1.4.2"
   },
   "scripts": {
diff --git a/plugins/vue-numeral-filter.js b/plugins/vue-numeral-filter.js
new file mode 100644
index 0000000..e8688ae
--- /dev/null
+++ b/plugins/vue-numeral-filter.js
@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import vueNumeralFilterInstaller from 'vue-numeral-filter';
+
+// TODO: Switch to sv-se when PR (https://github.com/adamwdraper/Numeral-js/pull/534) is merged
+Vue.use(vueNumeralFilterInstaller, { locale: 'no' });
diff --git a/utils/graph-client/index.js b/utils/graph-client/index.js
index 78b4f98..eab1f02 100644
--- a/utils/graph-client/index.js
+++ b/utils/graph-client/index.js
@@ -1,5 +1,6 @@
 export {
-  findEvents
+  findEvents,
+  fetchAddress,
 } from './queries';
 
 export {
@@ -7,5 +8,7 @@ export {
   ignoreDanceHall,
   ignoreCity,
   ignoreMunicipality,
-  ignoreState
+  ignoreState,
+  saveOrigin,
+  removeOrigin
 } from './mutations';
diff --git a/utils/graph-client/mutationStrings.js b/utils/graph-client/mutationStrings.js
index 4402dfb..4cf5ab2 100644
--- a/utils/graph-client/mutationStrings.js
+++ b/utils/graph-client/mutationStrings.js
@@ -1,27 +1,37 @@
 module.exports = {
   ignoreBandMutation: `
     mutation IgnoreBand($name: String!) {
-        ignore: IgnoreBand(name: $name)
-      }
+      ignore: IgnoreBand(name: $name)
+    }
   `,
   ignoreDanceHallMutation: `
     mutation IgnoreDanceHall($name: String!) {
-        ignore: IgnoreDanceHall(name: $name)
-      }
+      ignore: IgnoreDanceHall(name: $name)
+    }
   `,
   ignoreCityMutation: `
     mutation IgnoreCity($name: String!) {
-        ignore: IgnoreCity(name: $name)
-      }
+      ignore: IgnoreCity(name: $name)
+    }
   `,
   ignoreMunicipalityMutation: `
     mutation IgnoreMunicipality($name: String!) {
-        ignore: IgnoreMunicipality(name: $name)
-      }
+      ignore: IgnoreMunicipality(name: $name)
+    }
   `,
   ignoreStateMutation: `
     mutation IgnoreState($name: String!) {
-        ignore: IgnoreState(name: $name)
-      }
+      ignore: IgnoreState(name: $name)
+    }
+  `,
+  saveOriginMutation: `
+    mutation SaveOrigin($origin: String!) {
+      saved: SaveOrigin(origin: $origin)
+    }
+  `,
+  removeOriginMutation: `
+    mutation RemoveOrigin($origin: String!) {
+      removed: RemoveOrigin(origin: $origin)
+    }
   `
 };
diff --git a/utils/graph-client/mutations.js b/utils/graph-client/mutations.js
index 49893ee..b0ffcdf 100644
--- a/utils/graph-client/mutations.js
+++ b/utils/graph-client/mutations.js
@@ -5,6 +5,8 @@ import {
   ignoreCityMutation,
   ignoreMunicipalityMutation,
   ignoreStateMutation,
+  saveOriginMutation,
+  removeOriginMutation
 } from './mutationStrings';
 
 /* eslint-disable max-len */
@@ -23,4 +25,10 @@ export const ignoreMunicipality = variables => {
 export const ignoreState = variables => {
   return createQuery(ignoreStateMutation, variables)
 };
+export const saveOrigin = variables => {
+  return createQuery(saveOriginMutation, variables)
+};
+export const removeOrigin = variables => {
+  return createQuery(removeOriginMutation, variables)
+};
 /* eslint-enable max-len */
diff --git a/utils/graph-client/queries.js b/utils/graph-client/queries.js
index e1096b1..274c8c3 100644
--- a/utils/graph-client/queries.js
+++ b/utils/graph-client/queries.js
@@ -1,8 +1,10 @@
 import { createQuery } from './utils';
 import {
   eventQuery,
+  addressFromLatLngQuery,
 } from './queryStrings';
 
 /* eslint-disable max-len */
 export const findEvents = variables => createQuery(eventQuery, variables);
+export const fetchAddress = variables => createQuery(addressFromLatLngQuery, variables);
 /* eslint-enable max-len */
diff --git a/utils/graph-client/queryStrings.js b/utils/graph-client/queryStrings.js
index c95c1d6..4f84856 100644
--- a/utils/graph-client/queryStrings.js
+++ b/utils/graph-client/queryStrings.js
@@ -1,6 +1,6 @@
 export const eventQuery = `
-  query events($range: Range) {
-    events: Events(range: $range) {
+  query events($range: Range $origins: [String!]) {
+    events: Events(range: $range origins: $origins) {
       date
       time
       band {
@@ -13,8 +13,18 @@ export const eventQuery = `
         state
       }
       extraInfo
-      distance
-      duration
+      distances {
+        origin
+        distance
+        duration
+      }
     }
+    origins: Origins
+  }
+`;
+
+export const addressFromLatLngQuery = `
+  query adressFromLatLng($latlng: String!) {
+    address: AddressFromLatLng(latlng: $latlng)
   }
 `;
diff --git a/yarn.lock b/yarn.lock
index a957dc5..dd90c47 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5690,6 +5690,11 @@ number-is-nan@^1.0.0:
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
   integrity sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=
 
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/numeral/-/numeral-2.0.6.tgz#4ad080936d443c2561aed9f2197efffe25f4e506"
+  integrity sha1-StCAk21EPCVhrtnyGX7//iX05QY=
+
 nuxt@^2.0.0:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/nuxt/-/nuxt-2.4.2.tgz#72e377e1cad3c607f7ec900511f73ecd6259d0ac"
@@ -8483,6 +8488,13 @@ vue-no-ssr@^1.1.1:
   resolved "https://registry.yarnpkg.com/vue-no-ssr/-/vue-no-ssr-1.1.1.tgz#875f3be6fb0ae41568a837f3ac1a80eaa137b998"
   integrity sha512-ZMjqRpWabMPqPc7gIrG0Nw6vRf1+itwf0Itft7LbMXs2g3Zs/NFmevjZGN1x7K3Q95GmIjWbQZTVerxiBxI+0g==
 
+vue-numeral-filter@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/vue-numeral-filter/-/vue-numeral-filter-1.1.1.tgz#dc717c7d86cb10d2fc370ef992bcac80fb9fc666"
+  integrity sha512-QRrvadev2W0PRWHJbLsnOGq4eK0CQmfdyIFy+A4J8dxPNYe1W1W/AqNLFH7paV0lh0pvVPVczgXuOvA/X12T1A==
+  dependencies:
+    numeral "^2.0.6"
+
 vue-router@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.2.tgz#dedc67afe6c4e2bc25682c8b1c2a8c0d7c7e56be"