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