Fix up the handling of events and different schedules

.env.development

@@ -1 +1 @@
-VUE_APP_BACKEND_HOST=http://fxdeva16.factset.com:8090
+VUE_APP_BACKEND_HOST=http://localhost:8090

src/App.vue

@@ -27,13 +27,8 @@ import EventDialog from '@/components/EventDialog.vue';
   },
 })
 export default class Layout extends Vue {
-  @Action('fetchScheds') public fetchScheds!: () => Promise<void>;
   @Getter('auth/admin') public isAdmin!: boolean;
 
   public drawer = null;
-
-  public mounted() {
-    this.fetchScheds();
-  }
 }
 </script>

src/components/NavBar.vue

@@ -54,20 +54,17 @@ export default class NavBar extends Vue {
   @State('schedules') public items!: Schedule[];
   @Getter('auth/userfavs') public userfavs!: number[];
   @Mutation('showModal') public showModal!: (payload: {ev: Event, color: string}) => void;
-
-  public get select(): number {
-    return this.items.findIndex((s) => s.id === this.$route.params.id);
-  }
+  @Getter('curSchedule') public curSchedule!: Schedule;
 
   public get favs(): Event[] {
-    if (this.items.length <= this.select) { return []; }
+    if (!this.items.length) { return []; }
 
-    return this.items[this.select].events.filter((e) => this.userfavs.includes(e.id))
+    return this.curSchedule.events.filter((e) => this.userfavs.includes(e.id))
       .sort((a, b) => a.start.diff(b.start));
   }
 
   public eventColor(ev: Event): string {
-    return this.items[this.select].colorMap[ev.room];
+    return this.curSchedule.colorMap[ev.room];
   }
 }
 </script>

src/mixins/grid-mixin.ts

@@ -1,12 +1,26 @@
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
 import { Schedule } from '@/api/schedule';
+import { Mutation, Action } from 'vuex-class';
 import moment from 'moment';
 
 @Component
 export default class GridMixin extends Vue {
   @Prop(Number) public id!: number;
+  @Action('fetchScheds') public fetchScheds!: () => Promise<void>;
+  @Mutation('setCurSchedule') public setSched!: (id: number) => void;
+
   public pixelHeight = 50;
 
+  public async mounted() {
+    await this.fetchScheds();
+    this.setSched(this.id);
+  }
+
+  @Watch('id')
+  public load(val: number) {
+    this.setSched(this.id);
+  }
+
   public get times(): string[] {
     if (!this.sched) { return []; }
     return this.sched.times();

src/router.ts

@@ -1,31 +1,3 @@
-<<<<<<< Updated upstream
-import Vue from 'vue';
-import VueRouter, { Route } from 'vue-router';
-Vue.use(VueRouter);
-
-export default new VueRouter({
-  mode: 'history',
-  base: process.env.BASE_URL,
-  routes: [
-    { path: '/', redirect: '/rooms' },
-    {
-      path: '/rooms', name: 'home',
-      component: () => import(/* webpackChunkName: "group-app" */ '@/views/RoomGrid.vue'),
-    },
-    {
-      path: '/agenda', name: 'agenda',
-      component: () => import(/* webpackChunkName: "group-app" */ '@/views/Agenda.vue'),
-    },
-    {
-      path: '/events', name: 'events',
-      component: () => import(/* webpackChunkName: "group-app" */ '@/views/Events.vue'),
-    },
-    {
-      path: '/callback', component: () => import(/* webpackChunkName: "group-auth" */ '@/views/Auth.vue'), name: 'auth',
-    },
-  ],
-});
-=======
 import Vue from 'vue';
 import VueRouter, { Route } from 'vue-router';
 Vue.use(VueRouter);
@@ -53,8 +25,8 @@ export default new VueRouter({
       component: () => import(/* webpackChunkName: "group-app" */ '@/views/Events.vue'),
     },
     {
-      path: '/callback', component: () => import(/* webpackChunkName: "group-auth" */ '@/views/Auth.vue'), name: 'auth',
+      path: '/callback', component: () => import(/* webpackChunkName: "group-auth" */ '@/views/Auth.vue'),
+      name: 'auth',
     },
   ],
 });
->>>>>>> Stashed changes

src/store/index.ts

@@ -15,6 +15,7 @@ export default new Vuex.Store<RootState>({
   },
   state: {
     schedules: [],
+    curSchedule: 0,
     showModal: false,
     modalEvent: null,
     modalColor: '',
@@ -23,8 +24,15 @@ export default new Vuex.Store<RootState>({
     getScheduleById: (state) => (id: number) => {
       return state.schedules.find((s) => s.id === id);
     },
+    curSchedule(state: RootState): Schedule {
+      return state.schedules[state.curSchedule];
+    },
   },
   mutations: {
+    setCurSchedule(state: RootState, id: number) {
+      state.curSchedule = state.schedules.findIndex((s) => s.id === id);
+      state.schedules[state.curSchedule].loadEvents();
+    },
     setScheds(state: RootState, scheds: Schedule[]) {
       state.schedules = scheds;
     },

src/store/states.ts

@@ -22,4 +22,5 @@ export interface RootState {
   showModal: boolean;
   modalEvent: Event | null;
   modalColor: string;
+  curSchedule: number;
 }