fluidd

1
<template>
2
  <div>
3
    <v-row>
4
      <v-col cols="12">
5
        <collapsable-card
6
          :title="$t('app.general.title.diagnostics')"
7
          icon="$chart"
8
        >
9
          <template #menu>
10
            <app-btn-collapse-group>
11
              <app-btn
12
                small
13
                @click="handleAddCard"
14
              >
15
                <v-icon
16
                  small
17
                  left
18
                >
19
                  $plus
20
                </v-icon>
21
                {{ $t('app.general.title.add_chart') }}
22
              </app-btn>
23
            </app-btn-collapse-group>
24
          </template>
25
        </collapsable-card>
26
      </v-col>
27
    </v-row>
28

29
    <v-row :dense="$vuetify.breakpoint.smAndDown">
30
      <template v-for="(container, containerIndex) in containers">
31
        <v-col
32
          v-if="inLayout || hasCards(container)"
33
          :key="`container${containerIndex}`"
34
          cols="12"
35
          md="6"
36
          :lg="columnSpan"
37
          :class="{ 'drag': inLayout }"
38
        >
39
          <app-draggable
40
            v-model="containers[containerIndex]"
41
            class="list-group"
42
            :options="{
43
              animation: 200,
44
              handle: '.handle',
45
              group: 'diagnostics',
46
              disabled: !inLayout,
47
              ghostClass: 'ghost'
48
            }"
49
            target=":first-child"
50
            @end.stop="updateLayout"
51
          >
52
            <transition-group
53
              type="transition"
54
              :name="!inLayout ? 'flip-list' : undefined"
55
            >
56
              <template v-for="c in container">
57
                <diagnostics-card
58
                  v-if="c.enabled || inLayout"
59
                  :key="c.id"
60
                  :config="c"
61
                  class="mb-2 mb-sm-4"
62
                  @edit="handleEditCard"
63
                />
64
              </template>
65
            </transition-group>
66
          </app-draggable>
67
        </v-col>
68
      </template>
69
    </v-row>
70

71
    <diagnostics-card-config-dialog
72
      v-if="dialogState.active"
73
      v-model="dialogState.active"
74
      :config="dialogState.card"
75
      @save="handleSaveCard"
76
      @delete="handleDeleteCard"
77
    />
78
  </div>
79
</template>
80

81
<script lang="ts">
82
import { Component, Mixins, Watch } from 'vue-property-decorator'
83
import { v4 as uuidv4 } from 'uuid'
84
import StateMixin from '@/mixins/state'
85
import type { DiagnosticsCardConfig, DiagnosticsCardContainer } from '@/store/diagnostics/types'
86
import DiagnosticsCard from '@/components/widgets/diagnostics/DiagnosticsCard.vue'
87
import DiagnosticsCardConfigDialog from '@/components/widgets/diagnostics/DiagnosticsCardConfigDialog.vue'
88
import type { LayoutConfig } from '@/store/layout/types'
89
import { defaultState } from '@/store/layout/state'
90

91
@Component({
92
  components: {
93
    DiagnosticsCard,
94
    DiagnosticsCardConfigDialog
95
  }
96
})
97
export default class Diagnostics extends Mixins(StateMixin) {
98
  dialogState: { active: boolean, card: DiagnosticsCardConfig | null } = {
99
    active: false,
100
    card: null
101
  }
102

103
  containers: Array<DiagnosticsCardConfig[]> = []
104

105
  mounted () {
106
    this.onLayoutChange()
107
  }
108

109
  handleAddCard () {
110
    const clonedDefaultCard = JSON.parse(JSON.stringify(defaultState().layouts.diagnostics.container1[0]))
111
    clonedDefaultCard.id = ''
112
    this.dialogState.card = clonedDefaultCard
113
    this.dialogState.active = true
114
  }
115

116
  handleEditCard (card: DiagnosticsCardConfig) {
117
    this.dialogState.card = JSON.parse(JSON.stringify(card))
118
    this.dialogState.active = true
119
  }
120

121
  handleDeleteCard (id: string) {
122
    for (const container of Object.values(this.layout)) {
123
      const index = container.findIndex(card => card.id === id)
124
      if (index > -1) {
125
        container.splice(index, 1)
126
        break
127
      }
128
    }
129

130
    this.updateLayout()
131
  }
132

133
  handleSaveCard (card: DiagnosticsCardConfig) {
134
    if (card.id === '') {
135
      card.id = uuidv4()
136
      this.layout.container1.push(card)
137
    } else {
138
      for (const container of Object.values(this.layout)) {
139
        const index = container.findIndex(existingCard => existingCard.id === card.id)
140
        if (index > -1) {
141
          container[index] = card
142
          break
143
        }
144
      }
145
    }
146

147
    this.updateLayout()
148
  }
149

150
  get columnCount () {
151
    if (this.inLayout) return 4
152

153
    return this.containers.reduce((count, container) => +this.hasCards(container) + count, 0)
154
  }
155

156
  get columnSpan () {
157
    return 12 / this.columnCount
158
  }
159

160
  get inLayout (): boolean {
161
    return (this.$store.state.config.layoutMode)
162
  }
163

164
  get layout (): DiagnosticsCardContainer {
165
    return this.$store.getters['layout/getLayout']('diagnostics')
166
  }
167

168
  @Watch('layout', { deep: true })
169
  onLayoutChange () {
170
    const containers = Object.values(this.layout)
171

172
    while (containers.length < 4) {
173
      containers.push([])
174
    }
175

176
    this.containers = containers.slice(0, 4)
177
  }
178

179
  updateLayout () {
180
    this.$store.dispatch('layout/onLayoutChange', {
181
      name: 'diagnostics',
182
      value: {
183
        container1: this.containers[0],
184
        container2: this.containers[1],
185
        container3: this.containers[2],
186
        container4: this.containers[3]
187
      }
188
    })
189
  }
190

191
  hasCards (container: LayoutConfig[]) {
192
    return container.some(card => card.enabled)
193
  }
194
}
195
</script>
196

197
<style lang="scss" scoped>
198
@import '@/scss/draggable.scss';
199
</style>
200