EVLogViewer.vue 2.71 KB
Newer Older
janis.streib's avatar
janis.streib committed
1
<template>
janis.streib's avatar
janis.streib committed
2
3
  <b-modal size="xl" ok-title="Schließen" :title="'Eventlog: ' + title" :ok-only="true" :id="modal_id"
           @show="fetchData()">
4
5
6
7
8
9
10
11
    <b-form @submit="fetchData">
      <b-input-group prepend="# Transaktionen">
        <b-form-input type="number" v-model="top_n"/>
        <b-input-group-append>
          <b-button type="submit" variant="success" @click="fetchData">Aktualisieren</b-button>
        </b-input-group-append>
      </b-input-group>
    </b-form>
janis.streib's avatar
janis.streib committed
12
13
    <Loading :data="[records]">
      <b-table :responsive="true" striped :items="records" :fields="table_fields">
gj4210's avatar
gj4210 committed
14
15
16
        <template v-slot:cell(data)="data">
          <span style="white-space: pre">{{ data.item.data }}</span>
        </template>
janis.streib's avatar
janis.streib committed
17
18
19
20
21
22
23
24
25
26
27
28
        <template v-slot:cell(type)="data">
          {{ record_types[data.item.type].action }}
        </template>
      </b-table>
    </Loading>
  </b-modal>
</template>

<script>
import EVLogService from '@/api-services/evlog.service'
import Loading from '@/components/Loading'
import apiutil from '@/util/apiutil'
gj4210's avatar
gj4210 committed
29
import '@/util/colorutil'
janis.streib's avatar
janis.streib committed
30
31
32
33
34
35
36
37

export default {
  name: 'EVLogViewer',
  components: {Loading},
  data() {
    return {
      records: null,
      record_types: {},
gj4210's avatar
gj4210 committed
38
      top_n: 25,
janis.streib's avatar
janis.streib committed
39
      table_fields: [
gj4210's avatar
gj4210 committed
40
41
42
43
44
        {
          key: 'ta',
          label: '',
          tdAttr: this.ta_color
        },
janis.streib's avatar
janis.streib committed
45
46
47
48
49
50
51
52
53
54
55
        {
          key: 'data',
          label: 'Beschreibung'
        },
        {
          key: 'type',
          label: 'Aktionstyp'
        },
        {
          key: 'ta_timestamp',
          label: 'Zeit',
gj4210's avatar
gj4210 committed
56
57
          sortable: true,
          formatter: this.formatDate
janis.streib's avatar
janis.streib committed
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
        },
        {
          key: 'mgr_login_name',
          label: 'Account',
          sortable: true
        }
      ]
    }
  },
  props: {
    title: {
      required: true
    },
    modal_id: {
      required: true
janis.streib's avatar
janis.streib committed
73
74
75
76
77
78
79
80
81
    },
    ref_obj_fq: {
      required: true
    },
    refobj_id_field: {
      required: true
    },
    refobj_id_value: {
      required: true
janis.streib's avatar
janis.streib committed
82
83
84
    }
  },
  methods: {
85
86
87
88
    async fetchData(ev) {
      if (ev) {
        ev.preventDefault()
      }
janis.streib's avatar
janis.streib committed
89
      this.records = null
gj4210's avatar
gj4210 committed
90
      const res = await EVLogService.getByFK(this.$store.state.netdb_axios_config, this.ref_obj_fq, this.refobj_id_field, this.refobj_id_value, parseInt(this.top_n))
janis.streib's avatar
janis.streib committed
91
92
      this.records = res.data[1]
      this.record_types = apiutil.dict_by_value_of_array(res.data[2], 'short_name')
gj4210's avatar
gj4210 committed
93
94
95
96
      window.console.log(this.records)
    },
    ta_color(value, key, item, type) {
      return {style: 'background: ' + item.ta_timestamp.toHSL({lit: [30, 40]})}
gj4210's avatar
gj4210 committed
97
98
99
100
101
102
    },
    formatDate(value, key, item) {
      if (value == null) {
        return 'N/A'
      }
      return new Date(Date.parse(value)).toLocaleString('de-DE')
janis.streib's avatar
janis.streib committed
103
104
105
106
107
108
109
    }
  }
}
</script>

<style scoped>
</style>