Move origin handling to a separate page

components/pages/events/index.vue

@@ -1,6 +1,11 @@
 <template>
   <div>
     <app-loader :show="isLoading" />
+    <app-loader v-if="isSubmitting" overlay>
+      <p>
+        {{submitInfo}}
+      </p>
+    </app-loader>
     <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
       <v-layout row wrap v-if="!hasUser">
         <v-flex xs12>
@@ -18,19 +23,13 @@
               <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>
+            <v-tooltip top slot="prepend" v-if="hasUser">
+              <v-icon slot="activator" :disabled="!origin" 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">
@@ -79,10 +78,10 @@
     },
     data() {
       return {
-        title: "Evenemang",
         status: "loading",
         origin: undefined,
         origins: [],
+        submitInfo: "",
         submitError: "",
         user: undefined,
         snackbar: false,
@@ -122,11 +121,11 @@
       }
     },
     mounted() {
+      this.$store.commit('setTitle', 'Evenemang');
       const {range} = this.$route.query;
       this.range = range;
       this.fetchUser();
       this.fetchEvents();
-      this.$store.commit('setTitle', this.title);
     },
     watch: {
       "$route.query"() {
@@ -231,43 +230,23 @@
               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) {
+          this.submitInfo = 'Hämtar aktuell position';
+          this.status = 'submitting';
           window.navigator.geolocation.getCurrentPosition(pos => {
             fetchAddress({latlng: pos.coords.latitude + "," + pos.coords.longitude})
               .then(response => {
+                this.status = 'submitted';
                 this.origin = response.data.address;
                 this.fetchEvents();
               })
           })
         }
       }
-    },
-    head() {
-      return {
-        title: this.title
-      };
     }
   };
 </script>

components/pages/origins/index.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <app-loader :show="isLoading" />
+    <app-loader v-if="isSubmitting" overlay>
+      <p>
+        {{submitInfo}}
+      </p>
+    </app-loader>
+    <v-container fluid grid-list-md v-if="isReady || isSubmitting || isSubmitted" class="app-fade-in">
+      <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" :disabled="!origin" 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-container>
+  </div>
+</template>
+
+<script>
+  import {
+    findOrigins,
+    saveOrigin,
+    removeOrigin,
+    fetchAddress,
+  } from "~/utils/graph-client";
+
+  export default {
+    data() {
+      return {
+        status: "loading",
+        origin: undefined,
+        submitInfo: "",
+        snackbar: false,
+        snackColor: "success",
+        snackText: "",
+      };
+    },
+    computed: {
+      isLoading() {
+        return this.status === "loading";
+      },
+      isReady() {
+        return this.status === "ready";
+      },
+      isSubmitting() {
+        return this.status === "submitting";
+      },
+      isSubmitted() {
+        return this.status === "submitted";
+      },
+    },
+    mounted() {
+      this.$store.commit('setTitle', 'Startpunkter');
+      this.fetchOrigins();
+    },
+    methods: {
+      fetchOrigins() {
+        this.status = "loading";
+        findOrigins()
+            .then(this.originsFetched)
+            .catch(this.originsFailed);
+      },
+      originsFetched(response) {
+        if (response.errors) {
+          throw new Error("Fetch failed");
+        }
+        this.origins = response.data.origins;
+        this.status = "ready";
+      },
+      originsFailed() {
+        this.status = "load-failed";
+      },
+      saveOrigin(origin) {
+        this.submitInfo = 'Sparar startpunkt';
+        this.status = 'submitting';
+        saveOrigin({origin: origin})
+            .then(saved => {
+              this.status = 'submitted';
+              if (saved) {
+                this.origins = [];
+                this.origin = "";
+                this.fetchOrigins();
+              } else {
+                this.snackColor = 'error';
+                this.snackText = `${origin} kunde inte sparas`;
+                this.snackbar = true;
+              }
+            })
+            .catch(() => {
+              this.status = 'submit-failed';
+              this.snackColor = 'error';
+              this.snackText = `${origin} kunde inte sparas`;
+              this.snackbar = true;
+            })
+      },
+      removeOrigin(origin) {
+        this.submitInfo = 'Tar bort startpunkt';
+        this.status = 'submitting';
+        removeOrigin({origin: origin})
+            .then(removed => {
+              this.status = 'submitted';
+              if (removed) {
+                this.origins = [];
+                this.fetchOrigins();
+              } else {
+                this.snackColor = 'error';
+                this.snackText = `${origin} kunde inte tas bort`;
+                this.snackbar = true;
+              }
+            })
+            .catch(() => {
+              this.status = 'submit-failed';
+              this.snackColor = 'error';
+              this.snackText = `${origin} kunde inte tas bort`;
+              this.snackbar = true;
+            })
+      },
+      fetchAddress() {
+        if (window.navigator) {
+          this.submitInfo = 'Hämtar aktuell position';
+          this.status = 'submitting';
+          window.navigator.geolocation.getCurrentPosition(pos => {
+            fetchAddress({latlng: pos.coords.latitude + "," + pos.coords.longitude})
+                .then(response => {
+                  this.status = 'submitted';
+                  this.origin = response.data.address;
+                })
+          })
+        }
+      },
+    }
+  }
+</script>

layouts/default.vue

@@ -19,6 +19,22 @@
             <v-list-tile-title v-html="user.name"></v-list-tile-title>
           </v-list-tile-content>
         </v-list-tile>
+        <v-list-tile>
+          <v-list-tile-action>
+            <v-icon>mdi-calendar-outline</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <nuxt-link to="/"><v-list-tile-title>Evenemang</v-list-tile-title></nuxt-link>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile v-if="hasUser">
+          <v-list-tile-action>
+            <v-icon>mdi-home</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <nuxt-link to="/origins/"><v-list-tile-title>Hantera startpunkter</v-list-tile-title></nuxt-link>
+          </v-list-tile-content>
+        </v-list-tile>
         <v-list-tile v-if="hasUser">
           <v-list-tile-action>
             <v-icon>exit_to_app</v-icon>

pages/index.vue

@@ -11,7 +11,7 @@ export default {
   },
   head() {
     return {
-      title: "Dancefinder - Events"
+      title: "Dancefinder - Evenemang"
     };
   }
 };

pages/origins.vue

@@ -0,0 +1,18 @@
+<template>
+  <origins />
+</template>
+
+<script>
+  import Origins from "~/components/pages/origins";
+
+  export default {
+    components: {
+      Origins
+    },
+    head() {
+      return {
+        title: "Dancefinder - Startpunkter"
+      };
+    }
+  };
+</script>

utils/graph-client/index.js

@@ -1,6 +1,7 @@
 export {
   findEvents,
   findEventsAndOrigins,
+  findOrigins,
   fetchAddress,
 } from './queries';
 

utils/graph-client/queries.js

@@ -2,11 +2,13 @@ import { createQuery } from './utils';
 import {
   eventsQuery,
   eventsAndOriginsQuery,
+  originsQuery,
   addressFromLatLngQuery,
 } from './queryStrings';
 
 /* eslint-disable max-len */
 export const findEvents = variables => createQuery(eventsQuery, variables);
 export const findEventsAndOrigins = variables => createQuery(eventsAndOriginsQuery, variables);
+export const findOrigins = () => createQuery(originsQuery);
 export const fetchAddress = variables => createQuery(addressFromLatLngQuery, variables);
 /* eslint-enable max-len */

utils/graph-client/queryStrings.js

@@ -33,6 +33,12 @@ export const eventsAndOriginsQuery = `
   }
 `;
 
+export const originsQuery = `
+  query origins {
+    origins: Origins
+  }
+`;
+
 export const addressFromLatLngQuery = `
   query adressFromLatLng($latlng: String!) {
     address: AddressFromLatLng(latlng: $latlng)