refactor: use moonraker webcam api instead of direct DB access (#1445)

src/components/panels/FarmPrinterPanel.vue

@@ -2,10 +2,8 @@
     <panel
         :icon="mdiPrinter3d"
         :title="printer_name"
-        :card-class="
-            'farmprinter-panel ' +
-            (!printer.socket.isConnected && !printer.socket.isConnecting ? 'disabledPrinter' : '')
-        "
+        card-class="farmprinter-panel"
+        :class="panelClass"
         :loading="printer.socket.isConnecting"
         :toolbar-color="isCurrentPrinter ? 'primary' : ''">
         <template #buttons>
@@ -17,7 +15,7 @@
                     </v-btn>
                 </template>
                 <v-list dense class="py-0">
-                    <v-list-item link @click="currentCamId = 'off'">
+                    <v-list-item link @click="currentCamName = 'off'">
                         <v-list-item-icon class="mr-2">
                             <v-icon small class="mt-1">{{ mdiWebcamOff }}</v-icon>
                         </v-list-item-icon>
@@ -27,9 +25,9 @@
                     </v-list-item>
                     <v-list-item
                         v-for="webcam of printer_webcams"
-                        :key="webcam.index"
+                        :key="webcam.name"
                         link
-                        @click="currentCamId = webcam.id">
+                        @click="currentCamName = webcam.name">
                         <v-list-item-icon class="mr-2">
                             <v-icon small class="mt-1">{{ convertWebcamIcon(webcam.icon) }}</v-icon>
                         </v-list-item-icon>
@@ -47,7 +45,7 @@
                         <div
                             v-if="
                                 printer.socket.isConnected &&
-                                currentCamId !== 'off' &&
+                                currentCamName !== 'off' &&
                                 currentWebcam &&
                                 'service' in currentWebcam
                             "
@@ -122,6 +120,7 @@ import { mdiPrinter3d, mdiWebcam, mdiMenuDown, mdiWebcamOff, mdiFileOutline } fr
 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'
 
 @Component({
     components: {
@@ -156,12 +155,12 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
         return this.$store.getters['farm/' + this.printer._namespace + '/isCurrentPrinter']
     }
 
-    get currentCamId() {
-        return this.$store.getters['farm/' + this.printer._namespace + '/getSetting']('currentCamId', 'off')
+    get currentCamName() {
+        return this.$store.getters['farm/' + this.printer._namespace + '/getSetting']('currentCamName', 'off')
     }
 
-    set currentCamId(newVal) {
-        this.$store.dispatch('farm/' + this.printer._namespace + '/setSettings', { currentCamId: newVal })
+    set currentCamName(newVal) {
+        this.$store.dispatch('farm/' + this.printer._namespace + '/setSettings', { currentCamName: newVal })
     }
 
     get printer_name() {
@@ -199,18 +198,30 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get showWebcamSwitch() {
-        return this.printer.socket.isConnected && this.printer_webcams.length > 0
+        if (this.printer_webcams.length == 0) return false
+
+        return this.printer.socket.isConnected
     }
 
-    get printer_webcams() {
+    get printer_webcams(): GuiWebcamStateWebcam[] {
         return this.$store.getters['farm/' + this.printer._namespace + '/getPrinterWebcams']
     }
 
-    get currentWebcam() {
-        const currentCam = this.printer_webcams.find((webcam: any) => webcam.id === this.currentCamId)
+    get currentWebcam(): GuiWebcamStateWebcam | null {
+        const currentCam = this.printer_webcams?.find(
+            (webcam: GuiWebcamStateWebcam) => webcam.name === this.currentCamName
+        )
         if (currentCam) return currentCam
 
-        return false
+        return null
+    }
+
+    get panelClass(): string[] {
+        let output = []
+
+        if (!this.printer.socket.isConnected && !this.printer.socket.isConnecting) output.push('disabledPrinter')
+
+        return output
     }
 
     clickPrinter() {
@@ -268,10 +279,8 @@ export default class FarmPrinterPanel extends Mixins(BaseMixin, WebcamMixin) {
 .v-overlay {
     top: 48px;
 }
-</style>
 
-<style>
-.farmprinter-panel {
+::v-deep .farmprinter-panel {
     position: relative;
 }
 </style>

src/components/panels/WebcamPanel.vue

@@ -28,7 +28,7 @@
                             <v-list-item-title>{{ $t('Panels.WebcamPanel.All') }}</v-list-item-title>
                         </v-list-item-content>
                     </v-list-item>
-                    <v-list-item v-for="webcam of webcams" :key="webcam.id" link @click="currentCamId = webcam.id">
+                    <v-list-item v-for="webcam of webcams" :key="webcam.name" link @click="currentCamId = webcam.name">
                         <v-list-item-icon class="mr-2">
                             <v-icon small class="mt-1">{{ convertWebcamIcon(webcam.icon) }}</v-icon>
                         </v-list-item-icon>
@@ -77,13 +77,14 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
         return this.$store.getters['gui/webcams/getWebcams']
     }
 
+    // id changed to name with the refactoring of using moonraker webcam API
     get currentCamId(): string {
-        if (this.webcams.length === 1) return this.webcams[0].id ?? 'all'
+        if (this.webcams.length === 1) return this.webcams[0].name ?? 'all'
 
         let currentCamId = this.$store.state.gui.view.webcam.currentCam[this.currentPage ?? ''] ?? 'all'
-        if (this.webcams.findIndex((webcam: GuiWebcamStateWebcam) => webcam.id === currentCamId) !== -1)
+        if (this.webcams.findIndex((webcam: GuiWebcamStateWebcam) => webcam.name === currentCamId) !== -1)
             return currentCamId
-        else if (currentCamId !== undefined && this.webcams.length === 1) return this.webcams[0].id ?? ''
+        else if (currentCamId !== undefined && this.webcams.length === 1) return this.webcams[0].name ?? ''
         else return 'all'
     }
 
@@ -92,7 +93,7 @@ export default class WebcamPanel extends Mixins(BaseMixin, WebcamMixin) {
     }
 
     get currentCam(): any {
-        const cam = this.webcams.find((cam: GuiWebcamStateWebcam) => cam.id === this.currentCamId)
+        const cam = this.webcams.find((cam: GuiWebcamStateWebcam) => cam.name === this.currentCamId)
 
         return (
             cam ?? {

src/components/settings/SettingsGeneralTab.vue

@@ -129,12 +129,6 @@
                                 hide-details
                                 class="mt-0"
                                 @change="changeNamespace('timelapse')"></v-checkbox>
-                            <v-checkbox
-                                v-if="availableNamespaces.includes('webcams')"
-                                :label="$t('Settings.GeneralTab.DbWebcams')"
-                                hide-details
-                                class="mt-0"
-                                @change="changeNamespace('webcams')"></v-checkbox>
                         </v-col>
                     </v-row>
                     <v-row>
@@ -180,12 +174,6 @@
                                 hide-details
                                 class="mt-0"
                                 @change="changeNamespace('timelapse')"></v-checkbox>
-                            <v-checkbox
-                                v-if="availableNamespaces.includes('webcams')"
-                                :label="$t('Settings.GeneralTab.DbWebcams')"
-                                hide-details
-                                class="mt-0"
-                                @change="changeNamespace('webcams')"></v-checkbox>
                             <v-checkbox
                                 v-if="moonrakerComponents.includes('history')"
                                 :label="$t('Settings.GeneralTab.DbHistoryJobs')"
@@ -345,10 +333,6 @@ export default class SettingsGeneralTab extends Mixins(BaseMixin) {
                 name: 'view',
                 label: this.$t('Settings.GeneralTab.DbView').toString(),
             },
-            {
-                name: 'webcams',
-                label: this.$t('Settings.WebcamsTab.Webcams').toString(),
-            },
         ]
     }