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})
+        const variables = {range: this.range, origins: origins.length > 0 ? origins : null};
-            .then(this.eventsFetched)
+        if (this.hasUser) {
-            .catch(this.eventsFailed);
+          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>

layouts/default.vue

@@ -1,29 +1,54 @@
 <template>
   <v-app>
-    <!--<v-navigation-drawer app></v-navigation-drawer>-->
+    <v-navigation-drawer
-    <v-toolbar app>
+        v-model="left"
-      <v-toolbar-title>
+        temporary
-        <span v-if="!hasUser"><span @click="() => { doLogin(); }">Login</span></span>
+        app
-        <v-menu v-if="hasUser" offset-y>
+    >
-          <v-btn flat slot="activator" color="primary">
+      <v-list dense>
-            <v-avatar size="24" class="mr-2"><v-img :src="user.picture" /></v-avatar>
+        <v-list-tile v-if="!hasUser" @click="() => { doLogin(); }">
-            <span>{{user.name}}</span>
+          <v-list-tile-content>
-          </v-btn>
+            <v-list-tile-title>Login</v-list-tile-title>
-          <v-list>
+          </v-list-tile-content>
-            <v-list-tile>
+        </v-list-tile>
-              <v-list-tile-title flat><nuxt-link to="/logout/">Logga ut</nuxt-link></v-list-tile-title>
+        <v-list-tile avatar v-if="hasUser">
-            </v-list-tile>
+          <v-list-tile-avatar>
-          </v-list>
+            <v-img :src="user.picture" :alt="user.name"></v-img>
-        </v-menu>
+          </v-list-tile-avatar>
-      </v-toolbar-title>
+          <v-list-tile-content>
+            <v-list-tile-title v-html="user.name"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+        <v-list-tile v-if="hasUser">
+          <v-list-tile-action>
+            <v-icon>exit_to_app</v-icon>
+          </v-list-tile-action>
+          <v-list-tile-content>
+            <nuxt-link to="/logout/"><v-list-tile-title>Logga ut</v-list-tile-title></nuxt-link>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-list>
+    </v-navigation-drawer>
+    <v-toolbar app scroll-toolbar-off-screen>
+      <v-toolbar-side-icon v-on:click="left = !left"></v-toolbar-side-icon>
+      <v-toolbar-title v-html="title"></v-toolbar-title>
       <v-spacer></v-spacer>
+      <v-toolbar-items>
+        <v-list-tile avatar v-if="hasUser">
+          <v-list-tile-avatar>
+            <v-img :src="user.picture" :alt="user.name"></v-img>
+          </v-list-tile-avatar>
+          <v-list-tile-content>
+            <v-list-tile-title v-html="user.name"></v-list-tile-title>
+          </v-list-tile-content>
+        </v-list-tile>
+      </v-toolbar-items>
     </v-toolbar>
     <v-content>
       <v-container fluid>
         <nuxt />
       </v-container>
     </v-content>
-    <v-footer app></v-footer>
   </v-app>
 </template>
 
@@ -48,12 +73,16 @@ import auth from "~/utils/auth";
 export default {
   data() {
     return {
-      user: undefined
+      user: undefined,
+      left: false
     };
   },
   computed: {
     hasUser() {
       return this.user;
+    },
+    title() {
+      return this.$store.state.title;
     }
   },
   watch: {

store/index.js

@@ -0,0 +1,9 @@
+export const state = () => ({
+  title: ""
+});
+
+export const mutations = {
+  setTitle(state, title) {
+    state.title = title
+  }
+};

utils/graph-client/index.js

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

utils/graph-client/queries.js

@@ -1,10 +1,12 @@
 import { createQuery } from './utils';
 import {
-  eventQuery,
+  eventsQuery,
+  eventsAndOriginsQuery,
   addressFromLatLngQuery,
 } from './queryStrings';
 
 /* eslint-disable max-len */
-export const findEvents = variables => createQuery(eventQuery, variables);
+export const findEvents = variables => createQuery(eventsQuery, variables);
+export const findEventsAndOrigins = variables => createQuery(eventsAndOriginsQuery, variables);
 export const fetchAddress = variables => createQuery(addressFromLatLngQuery, variables);
 /* eslint-enable max-len */

utils/graph-client/queryStrings.js

@@ -1,5 +1,4 @@
 export const eventQuery = `
-  query events($range: Range $origins: [String!]) {
     events: Events(range: $range origins: $origins) {
       date
       time
@@ -19,6 +18,17 @@ export const eventQuery = `
         duration
       }
     }
+`;
+
+export const eventsQuery = `
+  query events($range: Range $origins: [String!]) {
+    ${eventQuery}
+  }
+`;
+
+export const eventsAndOriginsQuery = `
+  query events($range: Range $origins: [String!]) {
+    ${eventQuery}
     origins: Origins
   }
 `;