Add origins and calculation of distance and duration

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>

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,
+        origin: undefined,
-        propertyId: undefined,
+        origins: [],
-        order: undefined,
-        orderId: undefined,
-        originalProperty: undefined,
-        selectedPackage: undefined,
-        selectedImages: [],
         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();
+              })
+          })
+        }
       }
     }
   };

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']

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": {

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' });

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';

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)
+    }
   `
 };

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 */

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 */

utils/graph-client/queryStrings.js

@@ -1,6 +1,6 @@
 export const eventQuery = `
-  query events($range: Range) {
+  query events($range: Range $origins: [String!]) {
-    events: Events(range: $range) {
+    events: Events(range: $range origins: $origins) {
       date
       time
       band {
@@ -13,8 +13,18 @@ export const eventQuery = `
         state
       }
       extraInfo
-      distance
+      distances {
-      duration
+        origin
+        distance
+        duration
+      }
     }
+    origins: Origins
+  }
+`;
+
+export const addressFromLatLngQuery = `
+  query adressFromLatLng($latlng: String!) {
+    address: AddressFromLatLng(latlng: $latlng)
   }
 `;

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"