1<template>
2  <div>
3    <div v-if="eventLogData.length == 0">
4      {{ $t('overview.events.noHighEventsMsg') }}
5    </div>
6    <div v-else>
7      <!-- TODO: link to event log -->
8      <b-button variant="link" href="#">
9        {{ $t('overview.events.viewAllButton') }}
10      </b-button>
11      <b-table
12        head-variant="dark"
13        per-page="5"
14        sort-by="logId"
15        sort-desc
16        stacked="sm"
17        :items="eventLogData"
18        :fields="fields"
19      >
20        <template v-slot:cell(timestamp)="data">
21          {{ data.value | date('hh:MM:SS A') }} <br />
22          {{ data.value | date('dddd, MMM DD, YYYY') }}
23        </template>
24      </b-table>
25    </div>
26  </div>
27</template>
28
29<script>
30export default {
31  name: 'Events',
32  data() {
33    return {
34      fields: [
35        {
36          key: 'logId',
37          label: this.$t('overview.events.id')
38        },
39        {
40          key: 'eventID',
41          label: this.$t('overview.events.refCode')
42        },
43        {
44          key: 'timestamp',
45          label: this.$t('overview.events.date')
46        },
47        {
48          key: 'description',
49          label: this.$t('overview.events.description')
50        }
51      ]
52    };
53  },
54  computed: {
55    eventLogData() {
56      return this.$store.getters['eventLog/highPriorityEvents'];
57    }
58  },
59  created() {
60    this.getEventLogData();
61  },
62  methods: {
63    getEventLogData() {
64      this.$store.dispatch('eventLog/getEventLogData');
65    }
66  }
67};
68</script>
69
70<style lang="scss" scoped>
71.btn {
72  @include float-right;
73}
74</style>
75