From 6edc1c091136e40d33ea9b1b8f83136c5acebb57 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Cl=C3=A9ment=20W?= <git@clmntw.fr>
Date: Wed, 11 Oct 2023 01:35:50 +0200
Subject: [PATCH] feat: add settings for public url of the spoolman frontend

---
 src/components/TheSettingsMenu.vue            | 11 ++++
 .../dialogs/SpoolmanChangeSpoolDialog.vue     |  4 +-
 src/components/panels/SpoolmanPanel.vue       |  4 +-
 .../settings/SettingsSpoolmanTab.vue          | 54 +++++++++++++++++++
 src/locales/en.json                           |  4 ++
 5 files changed, 75 insertions(+), 2 deletions(-)
 create mode 100644 src/components/settings/SettingsSpoolmanTab.vue

diff --git a/src/components/TheSettingsMenu.vue b/src/components/TheSettingsMenu.vue
index ae4031e84..112d49fe9 100644
--- a/src/components/TheSettingsMenu.vue
+++ b/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
diff --git a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue b/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
index 8c6254dd9..bfd683244 100644
--- a/src/components/dialogs/SpoolmanChangeSpoolDialog.vue
+++ b/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() {
diff --git a/src/components/panels/SpoolmanPanel.vue b/src/components/panels/SpoolmanPanel.vue
index 054a8786d..5954810a8 100644
--- a/src/components/panels/SpoolmanPanel.vue
+++ b/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() {
diff --git a/src/components/settings/SettingsSpoolmanTab.vue b/src/components/settings/SettingsSpoolmanTab.vue
new file mode 100644
index 000000000..5bd0036bb
--- /dev/null
+++ b/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>
diff --git a/src/locales/en.json b/src/locales/en.json
index d37a31640..064ba3949 100644
--- a/src/locales/en.json
+++ b/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",