fluidd

1
<template>
2
  <v-row :dense="$vuetify.breakpoint.smAndDown">
3
    <template v-for="(container, containerIndex) in containers">
4
      <v-col
5
        v-if="inLayout || hasCards(container)"
6
        :key="`container${containerIndex}`"
7
        cols="12"
8
        md="6"
9
        :lg="columnSpan"
10
        :class="{ 'drag': inLayout }"
11
      >
12
        <app-draggable
13
          v-model="containers[containerIndex]"
14
          class="list-group"
15
          :options="{
16
            animation: 200,
17
            handle: '.handle',
18
            group: 'dashboard',
19
            disabled: !inLayout,
20
            ghostClass: 'ghost'
21
          }"
22
          target=":first-child"
23
          @end="handleUpdateLayout"
24
        >
25
          <transition-group
26
            type="transition"
27
            :name="!inLayout ? 'flip-list' : undefined"
28
          >
29
            <template v-for="c in container">
30
              <component
31
                :is="c.id"
32
                v-if="inLayout || (c.enabled && !filtered(c))"
33
                :key="c.id"
34
                :menu-collapsed="menuCollapsed"
35
                class="mb-2 mb-sm-4"
36
              />
37
            </template>
38
          </transition-group>
39
        </app-draggable>
40
      </v-col>
41
    </template>
42
  </v-row>
43
</template>
44

45
<script lang="ts">
46
import { Component, Mixins, Watch } from 'vue-property-decorator'
47
import StateMixin from '@/mixins/state'
48
import PrinterStatusCard from '@/components/widgets/status/PrinterStatusCard.vue'
49
import JobsCard from '@/components/widgets/jobs/JobsCard.vue'
50
import ToolheadCard from '@/components/widgets/toolhead/ToolheadCard.vue'
51
import TemperatureCard from '@/components/widgets/thermals/TemperatureCard.vue'
52
import CameraCard from '@/components/widgets/camera/CameraCard.vue'
53
import MacrosCard from '@/components/widgets/macros/MacrosCard.vue'
54
import ConsoleCard from '@/components/widgets/console/ConsoleCard.vue'
55
import OutputsCard from '@/components/widgets/outputs/OutputsCard.vue'
56
import PrinterLimitsCard from '@/components/widgets/limits/PrinterLimitsCard.vue'
57
import RetractCard from '@/components/widgets/retract/RetractCard.vue'
58
import type { LayoutConfig } from '@/store/layout/types'
59
import BedMeshCard from '@/components/widgets/bedmesh/BedMeshCard.vue'
60
import GcodePreviewCard from '@/components/widgets/gcode-preview/GcodePreviewCard.vue'
61
import JobQueueCard from '@/components/widgets/job-queue/JobQueueCard.vue'
62
import SpoolmanCard from '@/components/widgets/spoolman/SpoolmanCard.vue'
63
import SensorsCard from '@/components/widgets/sensors/SensorsCard.vue'
64
import RunoutSensorsCard from '@/components/widgets/runout-sensors/RunoutSensorsCard.vue'
65

66
@Component({
67
  components: {
68
    PrinterStatusCard,
69
    JobsCard,
70
    ToolheadCard,
71
    MacrosCard,
72
    TemperatureCard,
73
    CameraCard,
74
    PrinterLimitsCard,
75
    RetractCard,
76
    ConsoleCard,
77
    OutputsCard,
78
    BedMeshCard,
79
    GcodePreviewCard,
80
    JobQueueCard,
81
    SpoolmanCard,
82
    SensorsCard,
83
    RunoutSensorsCard
84
  }
85
})
86
export default class Dashboard extends Mixins(StateMixin) {
87
  menuCollapsed = false
88
  containers: Array<LayoutConfig[]> = []
89

90
  mounted () {
91
    this.onLayoutChange()
92

93
    window.addEventListener('resize', this.updateMenuCollapsed)
94

95
    this.updateMenuCollapsed()
96
  }
97

98
  unmounted () {
99
    window.removeEventListener('resize', this.updateMenuCollapsed)
100
  }
101

102
  get columnCount () {
103
    if (this.inLayout) return 4
104

105
    return this.containers.reduce((count, container) => +this.hasCards(container) + count, 0)
106
  }
107

108
  @Watch('columnCount')
109
  onColumnCount (value: number) {
110
    this.$store.commit('config/setContainerColumnCount', value)
111

112
    this.updateMenuCollapsed()
113
  }
114

115
  get columnSpan () {
116
    return 12 / this.columnCount
117
  }
118

119
  get hasCameras (): boolean {
120
    return this.$store.getters['webcams/getEnabledWebcams'].length > 0
121
  }
122

123
  get hasHeatersOrTemperatureSensors () {
124
    return (
125
      this.$store.getters['printer/getHeaters'].length > 0 ||
126
      this.$store.getters['printer/getOutputs'](['temperature_fan']).length > 0 ||
127
      this.$store.getters['printer/getSensors'].length > 0
128
    )
129
  }
130

131
  get hasSensors (): boolean {
132
    return this.$store.getters['sensors/getSensors'].length > 0
133
  }
134

135
  get firmwareRetractionEnabled (): boolean {
136
    return 'firmware_retraction' in this.$store.getters['printer/getPrinterSettings']()
137
  }
138

139
  get supportsJobQueue (): boolean {
140
    return this.$store.getters['server/componentSupport']('job_queue')
141
  }
142

143
  get supportsBedMesh () {
144
    return this.$store.getters['mesh/getSupportsBedMesh']
145
  }
146

147
  get supportsRunoutSensors () {
148
    return this.$store.getters['printer/getRunoutSensors'].length > 0
149
  }
150

151
  get supportsSpoolman () {
152
    return this.$store.getters['server/componentSupport']('spoolman')
153
  }
154

155
  get hasMacros () {
156
    return this.$store.getters['macros/getVisibleMacros'].length > 0
157
  }
158

159
  get hasOutputs () {
160
    return (
161
      this.$store.getters['printer/getAllFans'].length > 0 ||
162
      this.$store.getters['printer/getPins'].length > 0 ||
163
      this.$store.getters['printer/getAllLeds'].length > 0
164
    )
165
  }
166

167
  get inLayout (): boolean {
168
    return (this.$store.state.config.layoutMode)
169
  }
170

171
  get layout () {
172
    const layoutName = this.$store.getters['layout/getSpecificLayoutName']
173
    return this.$store.getters['layout/getLayout'](layoutName)
174
  }
175

176
  @Watch('layout')
177
  onLayoutChange () {
178
    const containers: Array<LayoutConfig[]> = []
179

180
    for (let index = 1; index <= 4; index++) {
181
      const container = this.layout[`container${index}`]
182

183
      if (container?.length > 0) {
184
        containers.push(container)
185
      }
186
    }
187

188
    while (containers.length < 4) {
189
      containers.push([])
190
    }
191

192
    this.containers = containers.slice(0, 4)
193
  }
194

195
  updateMenuCollapsed () {
196
    this.menuCollapsed = (this.$el.clientWidth / this.columnCount) < 560
197
  }
198

199
  handleUpdateLayout () {
200
    this.$store.dispatch('layout/onLayoutChange', {
201
      name: this.$store.getters['layout/getSpecificLayoutName'],
202
      value: {
203
        container1: this.containers[0],
204
        container2: this.containers[1],
205
        container3: this.containers[2],
206
        container4: this.containers[3]
207
      }
208
    })
209
  }
210

211
  hasCards (container: LayoutConfig[]) {
212
    return container.some(card => card.enabled && !this.filtered(card))
213
  }
214

215
  filtered (item: LayoutConfig) {
216
    // Take care of special cases.
217
    if (this.inLayout) return false
218
    if (item.id === 'camera-card' && !this.hasCameras) return true
219
    if (item.id === 'macros-card' && !this.hasMacros) return true
220
    if (item.id === 'outputs-card' && !this.hasOutputs) return true
221
    if (item.id === 'printer-status-card' && !this.klippyReady) return true
222
    if (item.id === 'job-queue-card' && !this.supportsJobQueue) return true
223
    if (item.id === 'retract-card' && !this.firmwareRetractionEnabled) return true
224
    if (item.id === 'bed-mesh-card' && !this.supportsBedMesh) return true
225
    if (item.id === 'runout-sensors-card' && !this.supportsRunoutSensors) return true
226
    if (item.id === 'spoolman-card' && !this.supportsSpoolman) return true
227
    if (item.id === 'sensors-card' && !this.hasSensors) return true
228
    if (item.id === 'temperature-card' && !this.hasHeatersOrTemperatureSensors) return true
229

230
    // Otherwise return the opposite of whatever the enabled state is.
231
    return !item.enabled
232
  }
233
}
234
</script>
235

236
<style lang="scss" scoped>
237
@import '@/scss/draggable.scss';
238
</style>
239