feat: add settings for public url of the spoolman frontend

src/components/TheSettingsMenu.vue

@@ -100,8 +100,10 @@ import {
     mdiWebcam,
     mdiDipSwitch,
     mdiMenu,
+    mdiAdjust,
 } from '@mdi/js'
 import SettingsMiscellaneousTab from '@/components/settings/SettingsMiscellaneousTab.vue'
+import SettingsSpoolmanTab from '@/components/settings/SettingsSpoolmanTab.vue'
 @Component({
     components: {
         Panel,
@@ -113,6 +115,7 @@ import SettingsMiscellaneousTab from '@/components/settings/SettingsMiscellaneou
         SettingsMacrosTab,
         SettingsWebcamsTab,
         SettingsGeneralTab,
+        SettingsSpoolmanTab,
         SettingsDashboardTab,
         SettingsGCodeViewerTab,
         SettingsEditorTab,
@@ -212,6 +215,14 @@ export default class TheSettingsMenu extends Mixins(BaseMixin) {
             })
         }
 
+        if (this.moonrakerComponents.includes('spoolman')) {
+            tabs.push({
+                icon: mdiAdjust,
+                name: 'spoolman',
+                title: this.$t('Settings.SpoolmanTab.Spoolman'),
+            })
+        }
+
         return tabs.sort((a, b) => {
             if (a.name === 'general') return -1
             if (b.name === 'general') return 1

src/components/dialogs/SpoolmanChangeSpoolDialog.vue

@@ -119,7 +119,9 @@ export default class SpoolmanChangeSpoolDialog extends Mixins(BaseMixin) {
     }
 
     get spoolManagerUrl() {
-        return this.$store.state.server.config.config?.spoolman?.server ?? null
+        return this.$store.state.gui.general.spoolmanUrl === ''
+            ? this.$store.state.server.config.config?.spoolman?.server ?? null
+            : this.$store.state.gui.general.spoolmanUrl ?? null
     }
 
     openSpoolManager() {

src/components/panels/SpoolmanPanel.vue

@@ -90,7 +90,9 @@ export default class SpoolmanPanel extends Mixins(BaseMixin) {
     }
 
     get spoolManagerUrl() {
-        return this.$store.state.server.config.config?.spoolman?.server ?? null
+        return this.$store.state.gui.general.spoolmanUrl === ''
+            ? this.$store.state.server.config.config?.spoolman?.server ?? null
+            : this.$store.state.gui.general.spoolmanUrl ?? null
     }
 
     openSpoolManager() {

src/components/settings/SettingsSpoolmanTab.vue

@@ -0,0 +1,54 @@
+<template>
+    <div>
+        <v-card flat>
+            <v-card-text>
+                <settings-row :title="$t('Settings.SpoolmanTab.WebURL')">
+                    <v-text-field v-model="spoolmanUrl" hide-details outlined dense></v-text-field>
+                </settings-row>
+            </v-card-text>
+        </v-card>
+    </div>
+</template>
+
+<script lang="ts">
+import Component from 'vue-class-component'
+import { Mixins } from 'vue-property-decorator'
+import BaseMixin from '@/components/mixins/base'
+import SettingsRow from '@/components/settings/SettingsRow.vue'
+import Panel from '@/components/ui/Panel.vue'
+
+@Component({
+    components: {
+        Panel,
+        SettingsRow,
+    },
+})
+export default class SettingsSpoolmanTab extends Mixins(BaseMixin) {
+    availableLanguages: { text: string; value: string }[] = []
+
+    async created() {
+        const locales = import.meta.glob<string>('../../locales/*.json', { import: 'title' })
+        const languages: { text: string; value: string }[] = []
+
+        for (const file in locales) {
+            const langKey = file.slice(file.lastIndexOf('.') - 2, file.lastIndexOf('.'))
+            const title = await locales[file]()
+
+            languages.push({
+                text: title,
+                value: langKey,
+            })
+        }
+
+        this.availableLanguages = languages
+    }
+
+    get spoolmanUrl() {
+        return this.$store.state.gui.general.spoolmanUrl
+    }
+
+    set spoolmanUrl(newVal) {
+        this.$store.dispatch('gui/saveSetting', { name: 'general.spoolmanUrl', value: newVal })
+    }
+}
+</script>

src/locales/en.json

@@ -1018,6 +1018,10 @@
             "UpdatePrinter": "Update Printer",
             "UseConfigJson": "InstanceDB = JSON detected. Please use the config.json to modify the printers list."
         },
+        "SpoolmanTab": {
+            "Spoolman": "Spoolman",
+            "WebURL": "URL of the Spoolman Frontend"
+        },
         "Store": "store",
         "TimelapseTab": {
             "Autorender": "Autorender",