EVLogViewer.vue 2.87 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
    <b-form @submit="fetchData">
gj4210's avatar
gj4210 committed
5
      <b-input-group prepend="# Transaktionen" class="shadow">
6
7
8
9
10
        <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>
gj4210's avatar
gj4210 committed
11
      <FilterInput v-model="filter"/>
12
    </b-form>
janis.streib's avatar
janis.streib committed
13
    <Loading :data="[records]">
gj4210's avatar
gj4210 committed
14
      <b-table :responsive="true" striped :items="records" :fields="table_fields" :filter="filter">
gj4210's avatar
gj4210 committed
15
        <template v-slot:cell(data)="data">
gj4210's avatar
gj4210 committed
16
          <span style="white-space: pre-wrap">{{ data.item.data }}</span>
gj4210's avatar
gj4210 committed
17
        </template>
janis.streib's avatar
janis.streib committed
18
19
20
21
22
23
24
25
26
27
28
29
        <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
30
import FilterInput from '@/components/FilterInput'
gj4210's avatar
gj4210 committed
31
import '@/util/colorutil'
janis.streib's avatar
janis.streib committed
32
33
34

export default {
  name: 'EVLogViewer',
gj4210's avatar
gj4210 committed
35
  components: {Loading, FilterInput},
janis.streib's avatar
janis.streib committed
36
37
38
39
  data() {
    return {
      records: null,
      record_types: {},
gj4210's avatar
gj4210 committed
40
      top_n: 25,
janis.streib's avatar
janis.streib committed
41
      table_fields: [
gj4210's avatar
gj4210 committed
42
43
44
45
46
        {
          key: 'ta',
          label: '',
          tdAttr: this.ta_color
        },
janis.streib's avatar
janis.streib committed
47
48
49
50
51
52
53
54
55
56
57
        {
          key: 'data',
          label: 'Beschreibung'
        },
        {
          key: 'type',
          label: 'Aktionstyp'
        },
        {
          key: 'ta_timestamp',
          label: 'Zeit',
gj4210's avatar
gj4210 committed
58
59
          sortable: true,
          formatter: this.formatDate
janis.streib's avatar
janis.streib committed
60
61
62
63
64
65
        },
        {
          key: 'mgr_login_name',
          label: 'Account',
          sortable: true
        }
gj4210's avatar
gj4210 committed
66
67
      ],
      filter: ''
janis.streib's avatar
janis.streib committed
68
69
70
71
72
73
74
75
    }
  },
  props: {
    title: {
      required: true
    },
    modal_id: {
      required: true
janis.streib's avatar
janis.streib committed
76
77
78
79
80
81
82
83
84
    },
    ref_obj_fq: {
      required: true
    },
    refobj_id_field: {
      required: true
    },
    refobj_id_value: {
      required: true
janis.streib's avatar
janis.streib committed
85
86
87
    }
  },
  methods: {
88
89
90
91
    async fetchData(ev) {
      if (ev) {
        ev.preventDefault()
      }
janis.streib's avatar
janis.streib committed
92
      this.records = null
gj4210's avatar
gj4210 committed
93
      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
94
95
      this.records = res.data[1]
      this.record_types = apiutil.dict_by_value_of_array(res.data[2], 'short_name')
gj4210's avatar
gj4210 committed
96
97
98
99
      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
100
101
102
103
104
105
    },
    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
106
107
108
109
110
111
112
    }
  }
}
</script>

<style scoped>
</style>