feat: add option to use the path attribute via config.json

Signed-off-by: Stefan Dej <[email protected]>

.env.development.local.example

@@ -4,6 +4,9 @@ VUE_APP_HOSTNAME=printer.local
 # port from the moonraker instance
 VUE_APP_PORT=7125
 
+# route_prefix from the moonraker instance
+VUE_APP_PATH="/"
+
 # reconnect interval in ms
 VUE_APP_RECONNECT_INTERVAL=5000
 

public/config.json

@@ -3,6 +3,7 @@
     "defaultTheme": "dark",
     "hostname": null,
     "port": null,
+    "path": null,
     "instancesDB": "moonraker",
     "instances": []
 }

src/store/actions.ts

@@ -52,5 +52,6 @@ export const actions: ActionTree<RootState, RootState> = {
 
         if (payload.hostname) commit('socket/setData', { hostname: payload.hostname })
         if (payload.port) commit('socket/setData', { port: parseInt(payload.port.toString()) })
+        if (payload.path) commit('socket/setData', { route_prefix: payload.path })
     },
 }

src/store/socket/actions.ts

@@ -20,6 +20,7 @@ export const actions: ActionTree<SocketState, RootState> = {
         if ('$socket' in Vue.prototype) {
             const normPath = payload.path.replaceAll(/(^\/*)|(\/*$)/g, '')
             const path = normPath.length > 0 ? `/${normPath}` : ''
+
             await Vue.prototype.$socket.close()
             await Vue.prototype.$socket.setUrl(
                 state.protocol + '://' + payload.hostname + ':' + payload.port + path + '/websocket'

src/store/socket/getters.ts

@@ -4,11 +4,16 @@ import { RootState } from '@/store/types'
 
 export const getters: GetterTree<SocketState, RootState> = {
     getUrl: (state) => {
-        return '//' + state.hostname + (state.port !== 80 ? ':' + state.port : '') + state.path
+        const port = state.port !== 80 ? ':' + state.port : ''
+        const path = '/' + state.path.replace(/^\/|\/$/g, '')
+
+        return `//${state.hostname}${port}${path}`
     },
 
     getHostUrl: (state) => {
-        return (state.protocol === 'wss' ? 'https' : 'http') + '://' + state.hostname + '/'
+        const protocol = state.protocol === 'wss' ? 'https' : 'http'
+
+        return `${protocol}://${state.hostname}/`
     },
 
     getWebsocketUrl: (state, getters) => {

src/store/socket/index.ts

@@ -9,7 +9,7 @@ export const getDefaultState = (): SocketState => {
     const hostname = (import.meta.env.VUE_APP_HOSTNAME as string) || window.location.hostname
     const defaultPort = window.location.port || (window.location.protocol === 'https:' ? 443 : 80)
     const port = import.meta.env.VUE_APP_PORT ? Number(import.meta.env.VUE_APP_PORT) : Number(defaultPort)
-    const path = ''
+    const path = (import.meta.env.VUE_APP_PATH as string) || ''
 
     return {
         hostname,

src/store/types.ts

@@ -28,6 +28,7 @@ export interface ConfigJson {
     defaultTheme?: 'dark' | 'light'
     hostname?: string | null
     port?: string | number | null
+    path?: string | null
     instancesDB?: 'moonraker' | 'browser' | 'json'
     instances?: ConfigJsonInstance[]
 }