dashboard layout refactored

HelgeKeck · Aug 2, 2024 · ee1fc0b · ee1fc0b
1 parent 16f041f
commit ee1fc0b
Showing 1 changed file with 101 additions and 99 deletions.
diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue
@@ -7,7 +7,8 @@
       <v-col
         v-if="inLayout || hasCards(container)"
         :key="`container${containerIndex}`"
-        :cols="currColSpan[containerIndex]"
+        :cols="currColSpan"
+        :class="{ 'drag': inLayout }"
       >
         <app-draggable
           v-model="containers[containerIndex]"
@@ -88,51 +89,36 @@ export default class Dashboard extends Mixins(StateMixin) {
   @Ref('dashboard')
   readonly dashboardElement!: HTMLElement
 
-  menuCollapsed = false
-  containers: Array<LayoutConfig[]> = []
-
+  /**
+   * Lifecycle
+   */
   mounted () {
     this.onLayoutChange()
 
-    // window.addEventListener('resize', this.updateMenuCollapsed)
-    window.addEventListener('resize', throttle(this.updateMenuCollapsed, 500))
-
-    this.updateMenuCollapsed()
-  }
+    window.addEventListener('resize', throttle(this.onResize, 500))
 
-  currColSpan = [12, 12, 12, 12, 12, 12]
-
-  updateMenuCollapsed () {
-    let cols = Math.floor(window.innerWidth / this.minPanelWidth)
-    cols = Math.min(cols, Math.min(this.maxColumnCount, this.columnCount))
-    if (cols === 5) cols = 4
-    const nCols = 12 / cols
-    // let cols = 12
-    // if (window.innerWidth < 900) cols = 12
-    // else if (window.innerWidth >= 900 && window.innerWidth < 1800) cols = 6
-    // else if (window.innerWidth >= 1800 && window.innerWidth < 2800) cols = 3
-    // else cols = 2
-    // const nCols = Math.max(cols, 12 / this.columnCount)
-    if (cols === 4) this.currColSpan = [nCols, nCols, nCols, nCols, 6, 6]
-    else this.currColSpan = [nCols, nCols, nCols, nCols, nCols, nCols]
-    // if (this.currColSpan !== nCols) this.currColSpan = nCols
-    this.menuCollapsed = (window.innerWidth / this.columnCount) < 560
+    this.onResize()
   }
 
-  get minPanelWidth () {
-    return this.$store.state.config.uiSettings.general.minPanelWidth ?? 500
+  unmounted () {
+    window.removeEventListener('resize', this.onResize)
   }
 
-  get useSixColumns () {
-    return this.$store.state.config.uiSettings.general.useSixColumns ?? false
-  }
+  /**
+   * Layout
+   */
+  menuCollapsed = false
+  containers: Array<LayoutConfig[]> = []
+  currColSpan = 12
 
-  unmounted () {
-    window.removeEventListener('resize', this.updateMenuCollapsed)
-  }
+  onResize () {
+    let newColumnCount = Math.floor(window.innerWidth / this.minPanelWidth)
+    newColumnCount = Math.min(newColumnCount, Math.min(this.maxColumnCount, this.columnCount))
+    if (newColumnCount === 5) newColumnCount = 4
 
-  get maxColumnCount () {
-    return this.useSixColumns ? 6 : 4
+    const nCols = 12 / newColumnCount
+    this.currColSpan = nCols
+    this.menuCollapsed = (window.innerWidth / newColumnCount) < 560
   }
 
   get columnCount () {
@@ -144,65 +130,7 @@ export default class Dashboard extends Mixins(StateMixin) {
   onColumnCount (value: number) {
     this.$store.commit('config/setContainerColumnCount', value)
 
-    this.updateMenuCollapsed()
-  }
-
-  get hasCameras (): boolean {
-    return this.$store.getters['webcams/getEnabledWebcams'].length > 0
-  }
-
-  get hasHeatersOrTemperatureSensors () {
-    return (
-      this.$store.getters['printer/getHeaters'].length > 0 ||
-      this.$store.getters['printer/getOutputs'](['temperature_fan']).length > 0 ||
-      this.$store.getters['printer/getSensors'].length > 0
-    )
-  }
-
-  get hasSensors (): boolean {
-    return this.$store.getters['sensors/getSensors'].length > 0
-  }
-
-  get firmwareRetractionEnabled (): boolean {
-    return 'firmware_retraction' in this.$store.getters['printer/getPrinterSettings']()
-  }
-
-  get supportsJobQueue (): boolean {
-    return this.$store.getters['server/componentSupport']('job_queue')
-  }
-
-  get supportsBedMesh () {
-    return this.$store.getters['mesh/getSupportsBedMesh']
-  }
-
-  get supportsRunoutSensors () {
-    return this.$store.getters['printer/getRunoutSensors'].length > 0
-  }
-
-  get supportsSpoolman () {
-    return this.$store.getters['server/componentSupport']('spoolman')
-  }
-
-  get hasMacros () {
-    return this.$store.getters['macros/getVisibleMacros'].length > 0
-  }
-
-  get hasOutputs () {
-    return (
-      this.$store.getters['printer/getControllableFans'].length > 0 ||
-      this.$store.getters['printer/getUnctrollableFans'].length > 0 ||
-      this.$store.getters['printer/getPins'].length > 0 ||
-      this.$store.getters['printer/getAllLeds'].length > 0
-    )
-  }
-
-  get inLayout (): boolean {
-    return (this.$store.state.config.layoutMode)
-  }
-
-  get layout () {
-    const layoutName = this.$store.getters['layout/getSpecificLayoutName']
-    return this.$store.getters['layout/getLayout'](layoutName)
+    this.onResize()
   }
 
   @Watch('layout')
@@ -224,6 +152,10 @@ export default class Dashboard extends Mixins(StateMixin) {
     this.containers = containers.slice(0, this.maxColumnCount)
   }
 
+  hasCards (container: LayoutConfig[]) {
+    return container.some(card => card.enabled && !this.filtered(card))
+  }
+
   handleUpdateLayout () {
     if (this.useSixColumns) {
       this.$store.dispatch('layout/onLayoutChange', {
@@ -250,10 +182,6 @@ export default class Dashboard extends Mixins(StateMixin) {
     }
   }
 
-  hasCards (container: LayoutConfig[]) {
-    return container.some(card => card.enabled && !this.filtered(card))
-  }
-
   filtered (item: LayoutConfig) {
     // Take care of special cases.
     if (this.inLayout) return false
@@ -272,6 +200,80 @@ export default class Dashboard extends Mixins(StateMixin) {
     // Otherwise return the opposite of whatever the enabled state is.
     return !item.enabled
   }
+
+  /**
+   * Getters
+   */
+
+  get minPanelWidth () {
+    return this.$store.state.config.uiSettings.general.minPanelWidth ?? 500
+  }
+
+  get useSixColumns () {
+    return this.$store.state.config.uiSettings.general.useSixColumns ?? false
+  }
+
+  get maxColumnCount () {
+    return this.useSixColumns ? 6 : 4
+  }
+
+  get hasCameras (): boolean {
+    return this.$store.getters['webcams/getEnabledWebcams'].length > 0
+  }
+
+  get hasHeatersOrTemperatureSensors () {
+    return (
+      this.$store.getters['printer/getHeaters'].length > 0 ||
+      this.$store.getters['printer/getOutputs'](['temperature_fan']).length > 0 ||
+      this.$store.getters['printer/getSensors'].length > 0
+    )
+  }
+
+  get hasSensors (): boolean {
+    return this.$store.getters['sensors/getSensors'].length > 0
+  }
+
+  get firmwareRetractionEnabled (): boolean {
+    return 'firmware_retraction' in this.$store.getters['printer/getPrinterSettings']()
+  }
+
+  get supportsJobQueue (): boolean {
+    return this.$store.getters['server/componentSupport']('job_queue')
+  }
+
+  get supportsBedMesh () {
+    return this.$store.getters['mesh/getSupportsBedMesh']
+  }
+
+  get supportsRunoutSensors () {
+    return this.$store.getters['printer/getRunoutSensors'].length > 0
+  }
+
+  get supportsSpoolman () {
+    return this.$store.getters['server/componentSupport']('spoolman')
+  }
+
+  get hasMacros () {
+    return this.$store.getters['macros/getVisibleMacros'].length > 0
+  }
+
+  get hasOutputs () {
+    return (
+      this.$store.getters['printer/getControllableFans'].length > 0 ||
+      this.$store.getters['printer/getUnctrollableFans'].length > 0 ||
+      this.$store.getters['printer/getPins'].length > 0 ||
+      this.$store.getters['printer/getAllLeds'].length > 0
+    )
+  }
+
+  get inLayout (): boolean {
+    return (this.$store.state.config.layoutMode)
+  }
+
+  get layout () {
+    const layoutName = this.$store.getters['layout/getSpecificLayoutName']
+    return this.$store.getters['layout/getLayout'](layoutName)
+  }
 }
 </script>