Timetable.vue 2.86 KB
Newer Older
Jonatan Zint's avatar
Jonatan Zint committed
1
2
<template lang="pug">
.timetable-wrapper
3
  q-spinner-cube.kyrene-loader(v-if="!READY", color="primary" size="6em")
Jonatan Zint's avatar
Jonatan Zint committed
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
  .timetable(v-if="READY")
    q-tabs(ref="tabs", class="bg-secondary text-white", dense="", v-model="activeTab")
      q-tab.items-center.justify-center(
        v-for="day in LIST_DAYS_WITH_EVENTS",
        :key="day"
        :name="day",
        @click="scrollTo(day)",
        :label="weekday(day)"
      )
    .legend
      .party  party
      .protest protest
      .action action
    .timetable-content(ref="content")
      Timelines
    

</template>

<style lang="stylus" scoped>
.timetable-wrapper
  height 100%
  display flex
  flex-direction column
.timetable
  display flex
  flex-direction column
  overflow hidden

  .timetable-content
    overflow auto
    display inline-grid
.legend
  width 100%

  div
    display: inline-flex
    width: 33.3333333%
    text-align: center
    justify-content: center
    align-items: center
  .action
    background: #fbc969
  .party
    background: #f669fb

  .protest
    background: #607d8b
</style>

<script>
import Timelines from "../components/Timelines";
import { viewEventHub } from "../common/event-hubs";
import moment from "moment";
import store from "../store/index";
import {
  TIMESLOT_DURATION,
  TIMESLOT_WIDTH,
  LIST_DAYS_WITH_EVENTS,
  START_DATE,
  GET_EVENT,
  READY
} from "../store/types";
import { mapGetters } from "vuex";

export default {
  name: "TimetablePage",
  beforeRouteEnter(to, from, next) {
    if (from.name === "event") {
      const event = store.getters[GET_EVENT](from.params.id);
      next(vm => {
        vm.startPos = event.date;
      });
    } else {
      next();
    }
  },
  components: {
    Timelines
  },
  computed: {
    ...mapGetters([
      LIST_DAYS_WITH_EVENTS,
      START_DATE,
      TIMESLOT_DURATION,
      TIMESLOT_WIDTH,
      READY
    ])
  },
  data() {
    return {
      activeTab: null,
      startPos: new Date()
    };
  },
  methods: {
    weekday(day) {
      return moment(day).format("dddd");
    },
    tabSelect() {
      this.scrollTo(this.$refs.tabs.activeTab);
    },
    scrollTo(date) {
      viewEventHub.$emit("scrollTo", date);
    },
    setActiveTab({ left }) {
      if (!this.$refs.tabs) {
        return;
      }
      const difference =
        (left / this[TIMESLOT_WIDTH]) * this[TIMESLOT_DURATION];
      const date = moment(this[START_DATE]);
      date.add(difference, "minutes");
      this.activeTab = date.format("YYYY-MM-DD");
    }
  },
  mounted() {
    viewEventHub.$on("scroll", this.setActiveTab);
    if (this[READY]) {
      setTimeout(() => this.scrollTo(this.startPos, true));
    }
  },
  destroy() {
    viewEventHub.$off("scroll", this.setActiveTab);
  },
  watch: {
    [READY](newVal) {
      if (newVal) {
        console.log("Schedule is now ready");
        setTimeout(() => this.scrollTo(this.startPos, true));
      }
    }
  }
};
</script>