feat: Direct link to specific printer via query parameter (#1837)

Co-authored-by: Stefan Dej <[email protected]>
mainsail-crew · Apr 27, 2024 · a196c41 · a196c41
1 parent 69bed88
commit a196c41
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 6 deletions.
diff --git a/src/components/TheSelectPrinterDialog.vue b/src/components/TheSelectPrinterDialog.vue
@@ -82,7 +82,7 @@
                             </v-col>
                         </v-row>
                         <v-row v-if="showOptionalSettings">
-                            <v-col class="col-12">
+                            <v-col :cols="6">
                                 <v-text-field
                                     v-model="dialogAddPrinter.path"
                                     :rules="[(v) => !v || v.startsWith('/') || 'Path must start with /']"
@@ -91,6 +91,14 @@
                                     outlined
                                     dense />
                             </v-col>
+                            <v-col :cols="6">
+                                <v-text-field
+                                    v-model="dialogAddPrinter.name"
+                                    :label="$t('SelectPrinterDialog.Name')"
+                                    outlined
+                                    hide-details="auto"
+                                    dense />
+                            </v-col>
                         </v-row>
                     </v-card-text>
                     <v-card-actions>
@@ -138,7 +146,7 @@
                             </v-col>
                         </v-row>
                         <v-row v-if="showOptionalSettings">
-                            <v-col class="col-12">
+                            <v-col :cols="6">
                                 <v-text-field
                                     v-model="dialogEditPrinter.path"
                                     :rules="[(v) => !v || v.startsWith('/') || 'Path must start with /']"
@@ -147,6 +155,14 @@
                                     outlined
                                     dense />
                             </v-col>
+                            <v-col :cols="6">
+                                <v-text-field
+                                    v-model="dialogEditPrinter.name"
+                                    :label="$t('SelectPrinterDialog.Name')"
+                                    outlined
+                                    hide-details="auto"
+                                    dense />
+                            </v-col>
                         </v-row>
                     </v-card-text>
                     <v-card-actions>
@@ -257,10 +273,10 @@ import {
     mdiCancel,
     mdiCheckboxMarkedCircle,
     mdiCloseThick,
-    mdiConnection,
-    mdiDelete,
     mdiCog,
     mdiCogOff,
+    mdiConnection,
+    mdiDelete,
     mdiPencil,
     mdiSync,
 } from '@mdi/js'
@@ -275,6 +291,7 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         hostname: '',
         port: 7125,
         path: '/',
+        name: '',
     }
     editPrinterValid = false
     dialogEditPrinter = {
@@ -283,6 +300,7 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         hostname: '',
         port: 0,
         path: '/',
+        name: '',
     }
     showOptionalSettings = false
 
@@ -327,6 +345,10 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         return this.$store.state.socket.path
     }
 
+    get name() {
+        return this.$store.state.printer
+    }
+
     get formatHostname() {
         return this.hostname + (this.port !== '' ? ':' + this.port : '') + (this.path !== '' ? this.path : '')
     }
@@ -391,20 +413,25 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
             hostname: this.dialogAddPrinter.hostname,
             port: this.dialogAddPrinter.port,
             path: this.dialogAddPrinter.path,
+            name: this.dialogAddPrinter.name,
         }
         this.$store.dispatch('gui/remoteprinters/store', { values })
 
         this.dialogAddPrinter.hostname = ''
         this.dialogAddPrinter.bool = false
         this.dialogAddPrinter.path = '/'
+        this.dialogAddPrinter.name = ''
     }
 
     editPrinter(printer: GuiRemoteprintersStatePrinter) {
         this.dialogEditPrinter.hostname = printer.hostname
         this.dialogEditPrinter.port = printer.port
         this.dialogEditPrinter.id = printer.id ?? ''
         this.dialogEditPrinter.path = printer.path ?? '/'
+        this.dialogEditPrinter.name = printer.name ?? ''
         this.dialogEditPrinter.bool = true
+
+        this.showOptionalSettings = printer.name ? printer.name.length > 0 : false
     }
 
     updatePrinter() {
@@ -413,6 +440,7 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
             port: this.dialogEditPrinter.port,
             path: this.dialogEditPrinter.path,
             id: this.dialogEditPrinter.id,
+            name: this.dialogEditPrinter.name,
         }
         this.$store.dispatch('gui/remoteprinters/update', {
             id: this.dialogEditPrinter.id,
@@ -464,7 +492,28 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
     }
 
     mounted() {
-        this.$store.dispatch('gui/remoteprinters/initFromLocalstorage')
+        this.$store.dispatch('gui/remoteprinters/initFromLocalstorage').then(() => {
+            if (!('printer' in this.$route.query)) return
+
+            let name = this.$route.query.printer.toString().toLowerCase()
+            let matching = this.printers.filter(
+                (printer: GuiRemoteprintersStatePrinter) => printer.name?.toLowerCase() === name
+            )
+
+            // no printers found with this name
+            if (matching.length == 0) {
+                window.console.error(`No printer with given name '${name}' found. Showing selection dialog instead.`)
+                return
+            }
+
+            // multiple printers found with this name
+            if (matching.length > 1) {
+                window.console.error(`Multiple printers with name '${name}' found. Showing selection dialog instead.`)
+                return
+            }
+
+            this.connect(matching[0])
+        })
     }
 }
 </script>
diff --git a/src/components/settings/SettingsRemotePrintersTab.vue b/src/components/settings/SettingsRemotePrintersTab.vue
@@ -75,6 +75,14 @@
                         outlined
                         dense />
                 </settings-row>
+                <template v-if="instancesDB !== 'moonraker'">
+                    <v-divider class="my-2" />
+                    <settings-row
+                        :title="$t('Settings.RemotePrintersTab.Name')"
+                        :sub-title="$t('Settings.RemotePrintersTab.NameDescription')">
+                        <v-text-field v-model="form.name" outlined hide-details="auto" dense />
+                    </settings-row>
+                </template>
             </v-card-text>
             <v-card-actions class="d-flex justify-end">
                 <v-btn text @click="form.bool = false">{{ $t('Settings.Cancel') }}</v-btn>
@@ -99,6 +107,7 @@ import { mdiCancel, mdiCheckboxMarkedCircle, mdiDelete, mdiPencil, mdiAlertOutli
 interface printerForm {
     bool: boolean
     hostname: string
+    name: string
     port: number
     path: string | null
     id: string | null
@@ -120,6 +129,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         hostname: '',
         port: 7125,
         path: '/',
+        name: '',
         id: null,
         namespace: null,
     }
@@ -144,6 +154,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         this.form.hostname = ''
         this.form.port = 7125
         this.form.path = '/'
+        this.form.name = ''
         this.form.id = null
         this.form.namespace = null
         this.form.bool = true
@@ -153,13 +164,15 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         const printer = {
             hostname: this.form.hostname,
             port: this.form.port,
+            name: this.form.name,
             path: this.form.path,
         }
 
         this.$store.dispatch('gui/remoteprinters/store', { values: printer })
 
         this.form.hostname = ''
         this.form.port = 7125
+        this.form.name = ''
         this.form.id = null
         this.form.bool = false
     }
@@ -169,13 +182,15 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         this.form.hostname = printer.hostname
         this.form.port = printer.port
         this.form.path = printer.path ?? '/'
+        this.form.name = printer.name ?? ''
         this.form.bool = true
     }
 
     updatePrinter() {
         const values = {
             hostname: this.form.hostname,
             port: this.form.port,
+            name: this.form.name,
             path: this.form.path,
         }
 
@@ -185,6 +200,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         this.form.hostname = ''
         this.form.port = 7125
         this.form.path = '/'
+        this.form.name = ''
         this.form.bool = false
     }
 

diff --git a/src/locales/en.json b/src/locales/en.json
@@ -832,6 +832,7 @@
         "HostnameInvalid": "invalid Hostname/IP",
         "HostnameIp": "Hostname/IP",
         "HostnameRequired": "Hostname is required",
+        "Name": "Name",
         "Path": "Path",
         "Port": "Port",
         "PortRequired": "Port is required",
@@ -1066,6 +1067,8 @@
             "AddPrinter": "Add Printer",
             "EditPrinter": "Edit Printer",
             "Hostname": "Hostname",
+            "Name": "Name",
+            "NameDescription": "This name will not be displayed in the GUI and will only used for redirects.",
             "Path": "Path",
             "Port": "Port",
             "RemotePrinters": "Printers",

diff --git a/src/store/gui/remoteprinters/actions.ts b/src/store/gui/remoteprinters/actions.ts
@@ -55,6 +55,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
                 printers.push({
                     hostname: state.printers[id].hostname,
                     port: state.printers[id].port,
+                    name: state.printers[id].name,
                     path: state.printers[id].path,
                     settings: state.printers[id].settings,
                 })
@@ -88,6 +89,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
                 hostname: payload.values.hostname ?? '',
                 port: payload.values.port ?? 7125,
                 path: payload.values.path ?? '',
+                name: payload.values.name,
             },
             { root: true }
         )

diff --git a/src/store/gui/remoteprinters/types.ts b/src/store/gui/remoteprinters/types.ts
@@ -11,6 +11,7 @@ export interface GuiRemoteprintersStatePrinter {
     hostname: string
     port: number
     path?: string | null
+    name?: string | null
     socket?: FarmPrinterStateSocket
     settings?: {
         [key: string]: any

diff --git a/src/store/socket/getters.ts b/src/store/socket/getters.ts
@@ -5,7 +5,10 @@ import { RootState } from '@/store/types'
 export const getters: GetterTree<SocketState, RootState> = {
     getUrl: (state) => {
         const port = state.port !== 80 ? ':' + state.port : ''
-        const path = '/' + state.path.replace(/^\/|\/$/g, '')
+        let path = '/' + state.path.replace(/^\/|\/$/g, '')
+
+        // remove last / in path
+        if (path.endsWith('/')) path = path.slice(0, -1)
 
         return `//${state.hostname}${port}${path}`
     },