Add toolbar and navigation drawer

components/pages/events/Event/index.vue

@@ -15,11 +15,11 @@
         <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-flex xs12 sm6>
           <v-icon>mdi-home</v-icon>
           <span><strong>{{distance.origin}}</strong></span>
         </v-flex>
-        <v-flex xs12 sm6 md9>
+        <v-flex xs12 sm6>
           <v-icon>mdi-car</v-icon>
           <span>{{distance.distance / 1000 | numeral('0,0.00')}} km</span>
           <v-icon>mdi-clock-outline</v-icon>

components/pages/events/index.vue

@@ -58,6 +58,7 @@
 <script>
   import {
     findEvents,
+    findEventsAndOrigins,
     fetchAddress,
     ignoreBand,
     ignoreDanceHall,
@@ -78,6 +79,7 @@
     },
     data() {
       return {
+        title: "Evenemang",
         status: "loading",
         origin: undefined,
         origins: [],
@@ -122,15 +124,16 @@
     mounted() {
       const {range} = this.$route.query;
       this.range = range;
-      this.fetchEvents();
       this.fetchUser();
+      this.fetchEvents();
+      this.$store.commit('setTitle', this.title);
     },
     watch: {
       "$route.query"() {
         const {range} = this.$route.query;
         this.range = range;
-        this.fetchEvents();
         this.fetchUser();
+        this.fetchEvents();
       }
     },
     methods: {
@@ -140,16 +143,23 @@
         if (this.origin) {
           origins.push(this.origin);
         }
-        findEvents({range: this.range, origins: origins.length > 0 ? origins : null})
-            .then(this.eventsFetched)
-            .catch(this.eventsFailed);
+        const variables = {range: this.range, origins: origins.length > 0 ? origins : null};
+        if (this.hasUser) {
+          findEventsAndOrigins(variables)
+              .then(this.eventsFetched)
+              .catch(this.eventsFailed);
+        } else {
+          findEvents(variables)
+              .then(this.eventsFetched)
+              .catch(this.eventsFailed);
+        }
       },
       eventsFetched(response) {
         if (response.errors) {
           throw new Error("Fetch failed");
         }
         this.events = response.data.events;
-        this.origins = response.data.origins;
+        this.origins = response.data.origins || [];
         this.status = "ready";
       },
       eventsFailed() {
@@ -253,6 +263,11 @@
           })
         }
       }
+    },
+    head() {
+      return {
+        title: this.title
+      };
     }
   };
 </script>