refactor: rework the gui/heightmap store

src/components/.i18nignore

@@ -32,4 +32,18 @@ $t('App.TopCornerMenu.ConfirmationDialog.Description.ServiceRestart')
 $t('App.TopCornerMenu.ConfirmationDialog.Description.ServiceStop')
 $t('App.TopCornerMenu.ConfirmationDialog.Description.HostReboot')
 $t('App.TopCornerMenu.ConfirmationDialog.Description.HostShutdown')
-$t('Editor.Uploading')
+$t('ConnectionDialog.InitComponents.Announcements')
+$t('ConnectionDialog.InitComponents.Database')
+$t('ConnectionDialog.InitComponents.GcodeStore')
+$t('ConnectionDialog.InitComponents.History')
+$t('ConnectionDialog.InitComponents.JobQueue')
+$t('ConnectionDialog.InitComponents.Power')
+$t('ConnectionDialog.InitComponents.ProcStats')
+$t('ConnectionDialog.InitComponents.Sensor')
+$t('ConnectionDialog.InitComponents.ServerConfig')
+$t('ConnectionDialog.InitComponents.ServerInfo')
+$t('ConnectionDialog.InitComponents.Spoolman')
+$t('ConnectionDialog.InitComponents.SystemInfo')
+$t('ConnectionDialog.InitComponents.Timelapse')
+$t('ConnectionDialog.InitComponents.UpdateManager')
+$t('Editor.Uploading')

src/components/TheConnectingDialog.vue

@@ -1,14 +1,10 @@
 <template>
     <v-dialog v-model="showDialog" persistent :width="400">
         <panel :title="titleText" :icon="mdiConnection" card-class="the-connection-dialog" :margin-bottom="false">
-            <v-card-text v-if="connectingFailed" class="pt-5">
+            <v-card-text v-if="connectingFailed || initializationError" class="pt-5">
                 <connection-status :moonraker="false" />
-                <p class="text-center mt-3 mb-0">
-                    {{ $t('ConnectionDialog.CannotConnectTo', { host: formatHostname }) }}
-                </p>
-                <p v-if="connectionFailedMessage" class="text-center mt-1 red--text">
-                    {{ $t('ConnectionDialog.ErrorMessage', { message: connectionFailedMessage }) }}
-                </p>
+                <p class="text-center mt-3 mb-0">{{ errorMessageNeutral }}</p>
+                <p v-if="errorMessageRed" class="text-center mt-1 red--text">{{ errorMessageRed }}</p>
                 <template v-if="counter > 2">
                     <v-divider class="my-3" />
                     <p>{{ $t('ConnectionDialog.CheckMoonrakerLog') }}</p>
@@ -26,7 +22,13 @@
                 </div>
             </v-card-text>
             <v-card-text v-else class="pt-5">
-                <v-progress-linear :color="progressBarColor" indeterminate />
+                <v-progress-linear
+                    :color="progressBarColor"
+                    :indeterminate="initializationProgress === null"
+                    :value="initializationProgress ?? 0" />
+                <p v-if="initializationStepText" class="text-center mt-3 mb-0 text--secondary">
+                    {{ initializationStepText }}
+                </p>
             </v-card-text>
         </panel>
     </v-dialog>
@@ -82,8 +84,21 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return true
     }
 
+    get initializationProgress(): number | null {
+        return this.$store.state.socket.initializationProgress
+    }
+
+    get initializationError(): string | null {
+        return this.$store.state.socket.initializationError
+    }
+
+    get initializationStepText(): string | null {
+        return this.$store.state.socket.initializationStep
+    }
+
     get titleText() {
-        if (this.connectingFailed) return this.$t('ConnectionDialog.Failed', { host: this.formatHostname })
+        if (this.connectingFailed || this.initializationError)
+            return this.$t('ConnectionDialog.Failed', { host: this.formatHostname })
         if (this.isConnecting) return this.$t('ConnectionDialog.Connecting', { host: this.formatHostname })
         if (!this.guiIsReady) return this.$t('ConnectionDialog.Initializing')
 
@@ -94,15 +109,35 @@ export default class TheConnectingDialog extends Mixins(BaseMixin, ThemeMixin) {
         return this.$store.state.socket.connectionFailedMessage ?? null
     }
 
+    get errorMessageNeutral() {
+        if (this.initializationError) return this.$t('ConnectionDialog.InitializationFailed')
+
+        return this.$t('ConnectionDialog.CannotConnectTo', { host: this.formatHostname })
+    }
+
+    get errorMessageRed() {
+        if (this.initializationError)
+            return this.$t('ConnectionDialog.ErrorMessage', { message: this.initializationError })
+
+        if (this.connectionFailedMessage)
+            return this.$t('ConnectionDialog.ErrorMessage', { message: this.connectionFailedMessage })
+
+        return null
+    }
+
     get helpButtonUrl() {
-        if (!this.$store.state.socket.connectionFailedMessage) return null
+        if (!this.$store.state.socket.connectionFailedMessage && !this.initializationError) return null
 
-        return `https://docs.mainsail.xyz/faq/mainsail_errors/connection-${this.connectionFailedMessage?.toLowerCase()}`
+        const message = this.initializationError ?? this.connectionFailedMessage
+        if (!message) return null
+        const slug = encodeURIComponent(message.toLowerCase())
+        return `https://docs.mainsail.xyz/faq/mainsail_errors/connection-${slug}`
     }
 
     reconnect() {
         this.counter++
         this.$store.dispatch('socket/setData', { connectingFailed: false })
+        this.$store.dispatch('socket/resetInitialization')
         this.$socket.connect()
     }
 }

src/components/mixins/base.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Component from 'vue-class-component'
 import { DateTimeFormatOptions } from 'vue-i18n'
 import { ServerPowerStateDevice } from '@/store/server/power/types'
+import { GuiViewport } from '@/store/gui/types'
 
 @Component
 export default class BaseMixin extends Vue {
@@ -26,7 +27,12 @@ export default class BaseMixin extends Vue {
     }
 
     get guiIsReady() {
-        return this.$store.state.socket.initializationList.length === 0
+        return (
+            this.$store.state.socket.initializationStep === null &&
+            this.$store.state.socket.initializationError === null &&
+            // TODO: remove after converting to async init server components
+            this.$store.state.socket.initializationList.length === 0
+        )
     }
 
     get klippyIsConnected(): boolean {
@@ -111,11 +117,12 @@ export default class BaseMixin extends Vue {
         return this.$vuetify.breakpoint.xl
     }
 
-    get viewport() {
+    get viewport(): GuiViewport {
         if (this.isMobile) return 'mobile'
         else if (this.isTablet) return 'tablet'
         else if (this.isDesktop) return 'desktop'
-        else return 'widescreen'
+
+        return 'widescreen'
     }
 
     get isTouchDevice() {

src/components/mixins/history.ts

@@ -29,7 +29,7 @@ export default class HistoryMixin extends Vue {
     }
 
     get moonrakerHistoryFields() {
-        const config = this.$store.state.server.config?.config ?? {}
+        const config = this.$store.state.server.config ?? {}
         const sensors = Object.keys(config).filter((key) => key.startsWith('sensor '))
         const historyFields: { desc: string; unit: string; provider: string; name: string; parameter: string }[] = []
 

src/components/mixins/webcam.ts

@@ -25,8 +25,8 @@ export default class WebcamMixin extends Mixins(BaseMixin) {
 
         if (baseUrl.startsWith('/webcam')) {
             const ports = [80]
-            ports.push(this.$store.state.server.config?.config?.server?.port ?? 7125)
-            ports.push(this.$store.state.server.config?.config?.server?.ssl_port ?? 7130)
+            ports.push(this.$store.getters['server/getConfigValue']('server', 'port', 7125))
+            ports.push(this.$store.getters['server/getConfigValue']('server', 'ssl_port', 7130))
 
             if (!ports.includes(this.hostPort)) url.port = this.hostPort.toString()
         }

src/components/panels/Gcodefiles/GcodefilesPanelHeaderSettings.vue

@@ -47,7 +47,7 @@
                         <v-col class="col-auto pl-0">
                             <v-icon
                                 :color="header.visible ? 'primary' : 'grey lighten-1'"
-                                @click.stop="changeMetadataVisible(header.value, !header.visible)">
+                                @click.stop="changeMetadataVisible(header.value)">
                                 {{ header.visible ? mdiCheckboxMarked : mdiCheckboxBlankOutline }}
                             </v-icon>
                         </v-col>
@@ -73,8 +73,14 @@ export default class GcodefilesPanelHeaderSettings extends Mixins(BaseMixin, Gco
     mdiCog = mdiCog
     mdiDragVertical = mdiDragVertical
 
-    changeMetadataVisible(name: string, value: boolean) {
-        this.$store.dispatch('gui/setGcodefilesMetadata', { name: name, value: value })
+    changeMetadataVisible(name: string) {
+        const value = [...(this.$store.state.gui.view.gcodefiles.hideMetadataColumns ?? [])]
+        const index = value.findIndex((value: string) => value === name)
+
+        if (index !== -1) value.splice(index, 1)
+        else value.push(name)
+
+        this.$store.dispatch('gui/saveSetting', { name: 'view.gcodefiles.hideMetadataColumns', value })
     }
 }
 </script>

src/components/panels/HistoryListPanel.vue

@@ -96,7 +96,7 @@
                                         hide-details
                                         :input-value="status.showInTable"
                                         :label="`${status.displayName} (${status.value})`"
-                                        @change="changeStatusVisible(status)" />
+                                        @change="changeStatusVisible(status.name)" />
                                 </v-list-item>
                                 <v-divider />
                             </template>
@@ -172,7 +172,7 @@
 import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '@/components/mixins/base'
 import { HistoryListPanelCol, HistoryListRowJob, ServerHistoryStateJob } from '@/store/server/history/types'
-import { caseInsensitiveSort, formatFilesize } from '@/plugins/helpers'
+import { caseInsensitiveSort, formatFilesize, toggleArrayItem } from '@/plugins/helpers'
 import Panel from '@/components/ui/Panel.vue'
 import {
     mdiCloseThick,
@@ -452,10 +452,6 @@ export default class HistoryListPanel extends Mixins(BaseMixin, HistoryMixin, Hi
         return this.$store.state.gui.view.history.hideColums ?? []
     }
 
-    set hideColums(newVal) {
-        this.$store.dispatch('gui/saveSetting', { name: 'view.history.hideColums', value: newVal })
-    }
-
     get showMaintenanceEntries() {
         return this.$store.state.gui.view.history.showMaintenanceEntries
     }
@@ -525,15 +521,15 @@ export default class HistoryListPanel extends Mixins(BaseMixin, HistoryMixin, Hi
     }
 
     changeColumnVisible(name: string) {
-        if (this.headers.filter((header) => header.value === name).length) {
-            let value = this.headers.filter((header) => header.value === name)[0].visible
+        const value = toggleArrayItem(this.hideColums, name)
 
-            this.$store.dispatch('gui/setHistoryColumns', { name: name, value: value })
-        }
+        this.$store.dispatch('gui/saveSetting', { name: 'view.history.hideColums', value })
     }
 
-    changeStatusVisible(status: any) {
-        this.$store.dispatch('gui/toggleStatusInHistoryList', status.name)
+    changeStatusVisible(status: string) {
+        const value = toggleArrayItem(this.$store.state.gui.view.history.hidePrintStatus, status)
+
+        this.$store.dispatch('gui/saveSetting', { name: 'view.history.hidePrintStatus', value })
     }
 
     exportHistory() {

src/components/panels/Miscellaneous/MoonrakerSensorValue.vue

@@ -27,11 +27,7 @@ export default class MoonrakerSensorValue extends Mixins(BaseMixin) {
     }
 
     get sensorConfig() {
-        const name = `sensor ${this.sensor}`
-        const serverConfig = this.$store.state.server.config?.config ?? {}
-        if (!(name in serverConfig)) return {}
-
-        return serverConfig[name]
+        return this.$store.getters['server/getConfigSection'](`sensor ${this.sensor}`, {})
     }
 
     get parameterConfig() {

src/components/panels/Temperature/TemperaturePanelListItemAdditionalSensorValue.vue

@@ -55,7 +55,7 @@ export default class TemperaturePanelListItemAdditionalSensorValue extends Mixin
     }
 
     get guiSetting() {
-        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+        return this.$store.getters['gui/getChartDataAdditionalSensorValue']({
             name: this.objectName,
             sensor: this.keyName,
         })

src/components/panels/Temperature/TemperaturePanelListItemEdit.vue

@@ -76,8 +76,9 @@ export default class TemperaturePanelListItemEdit extends Mixins(BaseMixin) {
     setChartColor(value: string | any): void {
         if (typeof value === 'object' && 'hex' in value) value = value.hex
 
-        this.$store.dispatch('gui/setChartColor', {
+        this.$store.dispatch('gui/setChartData', {
             objectName: this.objectName,
+            dataset: 'color',
             value,
         })
 

src/components/panels/Temperature/TemperaturePanelListItemEditAdditionalSensor.vue

@@ -17,14 +17,14 @@ export default class TemperaturePanelListItemEditAdditionalSensor extends Mixins
     @Prop({ type: String, required: true }) readonly additionalSensor!: string
 
     get value() {
-        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+        return this.$store.getters['gui/getChartDataAdditionalSensorValue']({
             name: this.objectName,
-            type: this.additionalSensor,
+            sensor: this.additionalSensor,
         })
     }
 
     set value(newVal) {
-        this.$store.dispatch('gui/setDatasetAdditionalSensorStatus', {
+        this.$store.dispatch('gui/setChartDataAdditionalSensorStatus', {
             objectName: this.objectName,
             dataset: this.additionalSensor,
             value: newVal,

src/components/panels/Temperature/TemperaturePanelListItemEditChartSerie.vue

@@ -28,7 +28,7 @@ export default class TemperaturePanelListItemEditChartSerie extends Mixins(BaseM
     }
 
     set value(newVal) {
-        this.$store.dispatch('gui/setChartDatasetStatus', {
+        this.$store.dispatch('gui/setChartData', {
             objectName: this.objectName,
             dataset: this.serieName,
             value: newVal,

src/components/panels/Temperature/TemperaturePanelListItemNevermoreValue.vue

@@ -126,7 +126,7 @@ export default class TemperaturePanelListItemNevermoreValue extends Mixins(BaseM
     }
 
     get guiSetting() {
-        return this.$store.getters['gui/getDatasetAdditionalSensorValue']({
+        return this.$store.getters['gui/getChartDataAdditionalSensorValue']({
             name: this.objectName,
             sensor: this.keyName,
         })

src/components/panels/Timelapse/TimelapseStatusPanel.vue

@@ -133,11 +133,11 @@ export default class TimelapseStatusPanel extends Mixins(BaseMixin, TimelapseMix
     }
 
     get existsSnapshoturlInMoonrakerConfig() {
-        return 'snapshoturl' in this.$store.state.server.config.orig.timelapse
+        return 'snapshoturl' in (this.$store.state.server.config_orig?.timelapse ?? {})
     }
 
     get moonrakerTimelapseConfig() {
-        return this.$store.state.server.config.config.timelapse ?? {}
+        return this.$store.getters['server/getConfigSection']('timelapse', {})
     }
 
     get camId() {

src/components/panels/WebcamPanel.vue

@@ -60,14 +60,17 @@ import Panel from '@/components/ui/Panel.vue'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
 import { mdiMenuDown, mdiViewGrid, mdiWebcam } from '@mdi/js'
 import WebcamMixin from '@/components/mixins/webcam'
+import { GuiState } from '@/store/gui/types'
+
+type WebcamPages = keyof GuiState['view']['webcam']['currentCam']
 
 @Component({
     components: {
         Panel,
     },
 })
 export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
-    @Prop({ default: 'dashboard' }) declare currentPage?: string
+    @Prop({ default: 'dashboard' }) declare currentPage?: WebcamPages
 
     mdiWebcam = mdiWebcam
     mdiMenuDown = mdiMenuDown
@@ -93,7 +96,8 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     set currentCamId(newVal: string) {
-        this.$store.dispatch('gui/setCurrentWebcam', { page: this.currentPage, value: newVal })
+        const key = `view.webcam.currentCam.${this.currentPage}`
+        this.$store.dispatch('gui/saveSetting', { name: key, value: newVal })
     }
 
     get currentCam(): any {

src/components/settings/SettingsMacrosTabSimple.vue

@@ -46,6 +46,7 @@ import BaseMixin from '../mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { mdiMagnify } from '@mdi/js'
 import { PrinterStateMacro } from '@/store/printer/types'
+import { toggleArrayItem } from '@/plugins/helpers'
 
 @Component({
     components: { SettingsRow },
@@ -73,11 +74,7 @@ export default class SettingsMacrosTabSimple extends Mixins(BaseMixin) {
     }
 
     changeMacroStatus(name: string) {
-        const hiddenMacros = [...this.hiddenMacros]
-
-        if (this.hiddenMacros.includes(name.toUpperCase()))
-            hiddenMacros.splice(hiddenMacros.indexOf(name.toUpperCase()), 1)
-        else hiddenMacros.push(name.toUpperCase())
+        const hiddenMacros = toggleArrayItem(this.hiddenMacros, name.toUpperCase())
 
         this.$store.dispatch('gui/macros/saveSetting', { name: 'hiddenMacros', value: hiddenMacros })
     }