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>