From 1e4e9a3ee7541c7b5ceb35ab272e7d06f8fced26 Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Wed, 13 Dec 2023 23:04:31 +0100
Subject: [PATCH] fix: printer farm background image

Signed-off-by: Stefan Dej <meteyou@gmail.com>
---
 src/components/TheSidebar.vue              |  6 ++---
 src/components/mixins/theme.ts             |  4 ++++
 src/components/panels/FarmPrinterPanel.vue | 27 ++++++++++++----------
 src/store/farm/printer/getters.ts          |  4 ++--
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/src/components/TheSidebar.vue b/src/components/TheSidebar.vue
index 533281d93..17a655459 100644
--- a/src/components/TheSidebar.vue
+++ b/src/components/TheSidebar.vue
@@ -56,6 +56,7 @@ import { navigationWidth, topbarHeight } from '@/store/variables'
 import MainsailLogo from '@/components/ui/MainsailLogo.vue'
 import SidebarItem from '@/components/ui/SidebarItem.vue'
 import NavigationMixin from '@/components/mixins/navigation'
+import ThemeMixin from '@/components/mixins/theme'
 
 @Component({
     components: {
@@ -65,7 +66,7 @@ import NavigationMixin from '@/components/mixins/navigation'
         MainsailLogo,
     },
 })
-export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
+export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin, ThemeMixin) {
     navigationWidth = navigationWidth
     topbarHeight = topbarHeight
 
@@ -82,8 +83,7 @@ export default class TheSidebar extends Mixins(NavigationMixin, BaseMixin) {
     }
 
     get sidebarBackground(): string {
-        const defaultBg = this.$vuetify.theme.dark ? '/img/sidebar-background.svg' : '/img/sidebar-background-light.svg'
-        return this.$store.getters['files/getCustomSidebarBackground'] ?? defaultBg
+        return this.$store.getters['files/getCustomSidebarBackground'] ?? this.sidebarBgImage
     }
 
     get currentPage(): string {
diff --git a/src/components/mixins/theme.ts b/src/components/mixins/theme.ts
index 4b9b649a9..fee4bfb5b 100644
--- a/src/components/mixins/theme.ts
+++ b/src/components/mixins/theme.ts
@@ -40,4 +40,8 @@ export default class ThemeMixin extends Vue {
     get progressBarColor() {
         return this.$vuetify.theme.dark ? 'white' : 'primary'
     }
+
+    get sidebarBgImage() {
+        return this.$vuetify.theme.dark ? '/img/sidebar-background.svg' : '/img/sidebar-background-light.svg'
+    }
 }
diff --git a/src/components/panels/FarmPrinterPanel.vue b/src/components/panels/FarmPrinterPanel.vue
index 00125b2c4..bcfb55959 100644
--- a/src/components/panels/FarmPrinterPanel.vue
+++ b/src/components/panels/FarmPrinterPanel.vue
@@ -57,15 +57,17 @@
                             style="background-color: rgba(0, 0, 0, 0.3); backdrop-filter: blur(3px)">
                             <v-row>
                                 <v-col class="col-auto pr-0 d-flex align-center" style="width: 58px">
-                                    <template v-if="printer_logo">
-                                        <img :src="printer_logo" style="width: 100%" class="my-auto" alt="Logo" />
-                                    </template>
-                                    <template v-else>
-                                        <mainsail-logo
-                                            :color="printerLogoColor"
-                                            style="width: 100%"
-                                            class="my-auto"></mainsail-logo>
-                                    </template>
+                                    <img
+                                        v-if="printer_logo"
+                                        :src="printer_logo"
+                                        style="width: 100%"
+                                        class="my-auto"
+                                        alt="Logo" />
+                                    <mainsail-logo
+                                        v-else
+                                        :color="printerLogoColor"
+                                        style="width: 100%"
+                                        class="my-auto" />
                                 </v-col>
                                 <v-col class="col" style="width: 100px">
                                     <h3 class="font-weight-regular">{{ printer_status }}</h3>
@@ -121,6 +123,7 @@ import { Debounce } from 'vue-debounce-decorator'
 import WebcamMixin from '@/components/mixins/webcam'
 import WebcamWrapper from '@/components/webcams/WebcamWrapper.vue'
 import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
+import ThemeMixin from '@/components/mixins/theme'
 
 @Component({
     components: {
@@ -129,7 +132,7 @@ import { GuiWebcamStateWebcam } from '@/store/gui/webcams/types'
         'mainsail-logo': MainsailLogo,
     },
 })
-export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
+export default class FarmPrinterPanel extends Mixins(BaseMixin, ThemeMixin, WebcamMixin) {
     mdiPrinter3d = mdiPrinter3d
     mdiWebcam = mdiWebcam
     mdiMenuDown = mdiMenuDown
@@ -176,9 +179,9 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get printer_image() {
-        if (this.currentWebcam) return '/img/sidebar-background.svg'
+        if (this.currentWebcam) return this.sidebarBgImage
 
-        return this.$store.getters['farm/' + this.printer._namespace + '/getImage']
+        return this.$store.getters['farm/' + this.printer._namespace + '/getImage'] ?? this.sidebarBgImage
     }
 
     get printer_logo() {
diff --git a/src/store/farm/printer/getters.ts b/src/store/farm/printer/getters.ts
index 2b135b1a6..2c425fc85 100644
--- a/src/store/farm/printer/getters.ts
+++ b/src/store/farm/printer/getters.ts
@@ -125,7 +125,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
     getImage: (state) => {
         if (state.current_file.filename && state.current_file.thumbnails?.length) {
             const indexLastDir = state.current_file.filename.lastIndexOf('/')
-            const dir = indexLastDir !== -1 ? state.current_file.filename.substr(0, indexLastDir) + '/' : ''
+            const dir = indexLastDir !== -1 ? state.current_file.filename.substring(0, indexLastDir) + '/' : ''
             const thumbnail = state.current_file.thumbnails.find((thumb) => thumb.width >= thumbnailBigMin)
 
             if (thumbnail && 'relative_path' in thumbnail)
@@ -140,7 +140,7 @@ export const getters: GetterTree<FarmPrinterState, any> = {
                 )
         }
 
-        return '/img/sidebar-background.svg'
+        return null
     },
 
     getThemeFileUrl: (state) => (acceptName: string, acceptExtensions: string[]) => {