1<template>
2  <div>
3    <div v-if="eventLogData.length == 0">
4      {{ $t('pageOverview.events.noHighEventsMsg') }}
5    </div>
6    <div v-else>
7      <!-- TODO: link to event log -->
8      <b-button variant="link" href="#">
9        {{ $t('pageOverview.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          <div class="date-column">
22            {{ data.value | formatDate }} <br />
23            {{ data.value | formatTime }}
24          </div>
25        </template>
26      </b-table>
27    </div>
28  </div>
29</template>
30
31<script>
32export default {
33  name: 'Events',
34  data() {
35    return {
36      fields: [
37        {
38          key: 'logId',
39          label: this.$t('pageOverview.events.id')
40        },
41        {
42          key: 'eventID',
43          label: this.$t('pageOverview.events.refCode')
44        },
45        {
46          key: 'timestamp',
47          label: this.$t('pageOverview.events.date')
48        },
49        {
50          key: 'description',
51          label: this.$t('pageOverview.events.description')
52        }
53      ]
54    };
55  },
56  computed: {
57    eventLogData() {
58      return this.$store.getters['eventLog/highPriorityEvents'];
59    }
60  },
61  created() {
62    this.getEventLogData();
63  },
64  methods: {
65    getEventLogData() {
66      this.$store.dispatch('eventLog/getEventLogData');
67    }
68  }
69};
70</script>
71
72<style lang="scss" scoped>
73.btn {
74  @include float-right;
75}
76
77.date-column {
78  min-width: 200px;
79}
80</style>
81