From ee1fc0b2f3c978e67b0b3ffcd690a108645ce844 Mon Sep 17 00:00:00 2001 From: HelgeKeck Date: Fri, 2 Aug 2024 19:54:37 +0200 Subject: [PATCH] dashboard layout refactored --- src/views/Dashboard.vue | 200 ++++++++++++++++++++-------------------- 1 file changed, 101 insertions(+), 99 deletions(-) diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index 1740c56355..29f8c8d48d 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -7,7 +7,8 @@ = [] - + /** + * 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 = [] + 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) + } }