feat: add default moonraker instances to config.json (#695)

src/App.vue

@@ -84,10 +84,6 @@ export default class App extends Mixins(BaseMixin) {
         return this.$store.getters['getTitle']
     }
 
-    get remoteMode(): boolean {
-        return this.$store.state.socket.remoteMode ?? false
-    }
-
     get mainBackground(): string {
         return this.$store.getters['files/getMainBackground']
     }

src/components/TheSelectPrinterDialog.vue

@@ -157,7 +157,7 @@
                                             </v-icon>
                                         </v-col>
                                         <v-col>{{ getPrinterName(printer.id) }}</v-col>
-                                        <v-col class="col-auto pa-0">
+                                        <v-col v-if="canAddPrinters" class="col-auto pa-0">
                                             <v-btn
                                                 tile
                                                 text
@@ -190,7 +190,7 @@
                             </p>
                         </v-col>
                     </v-row>
-                    <v-row>
+                    <v-row v-if="canAddPrinters">
                         <v-col class="text-center mt-0">
                             <v-btn text color="primary" @click="dialogAddPrinter.bool = true">
                                 {{ $t('SelectPrinterDialog.AddPrinter') }}
@@ -252,6 +252,10 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
         return this.$store.getters['gui/remoteprinters/getRemoteprinters'] ?? []
     }
 
+    get canAddPrinters() {
+        return this.$store.state.configInstances.length === 0
+    }
+
     get protocol() {
         return this.$store.state.socket.protocol
     }

src/components/mixins/base.ts

@@ -12,7 +12,7 @@ export default class BaseMixin extends Vue {
     }
 
     get remoteMode() {
-        return this.$store.state.socket.remoteMode
+        return this.$store.state.remoteMode
     }
 
     get socketIsConnected(): boolean {

src/components/settings/SettingsRemotePrintersTab.vue

@@ -9,7 +9,7 @@
                         :title="formatPrinterName(printer)"
                         :loading="printer.socket.isConnecting"
                         :icon="printer.socket.isConnected ? mdiCheckboxMarkedCircle : mdiCancel">
-                        <v-btn small outlined @click="editPrinter(printer)">
+                        <v-btn small outlined :disabled="!canAddPrinters" @click="editPrinter(printer)">
                             <v-icon left small>{{ mdiPencil }}</v-icon>
                             {{ $t('Settings.Edit') }}
                         </v-btn>
@@ -18,14 +18,15 @@
                             outlined
                             class="ml-3 minwidth-0 px-2"
                             color="error"
+                            :disabled="!canAddPrinters"
                             @click="delPrinter(printer.id)">
                             <v-icon small>{{ mdiDelete }}</v-icon>
                         </v-btn>
                     </settings-row>
                 </div>
             </v-card-text>
             <v-card-actions class="d-flex justify-end">
-                <v-btn text color="primary" @click="createPrinter">
+                <v-btn text color="primary" :disabled="!canAddPrinters" @click="createPrinter">
                     {{ $t('Settings.RemotePrintersTab.AddPrinter') }}
                 </v-btn>
             </v-card-actions>
@@ -112,6 +113,10 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
         return this.$store.getters['gui/remoteprinters/getRemoteprinters'] ?? []
     }
 
+    get canAddPrinters() {
+        return this.$store.state.configInstances.length === 0
+    }
+
     get protocol() {
         return this.$store.state.socket.protocol ?? 'ws'
     }

src/main.ts

@@ -65,16 +65,16 @@ Vue.component('EChart', ECharts)
 //load config.json and init vue
 fetch('/config.json')
     .then((res) => res.json())
-    .then((file) => {
-        store.commit('socket/setData', file)
+    .then(async (file) => {
+        await store.dispatch('importConfigJson', file)
 
         const url = store.getters['socket/getWebsocketUrl']
         Vue.use(WebSocketPlugin, {
             url: url,
             store: store,
         })
 
-        if (!store?.state?.socket?.remoteMode) Vue.$socket.connect()
+        if (!store?.state?.remoteMode) Vue.$socket.connect()
 
         new Vue({
             vuetify,

src/store/actions.ts

@@ -1,14 +1,15 @@
 import router from '@/plugins/router'
 import { ActionTree } from 'vuex'
-import { RootState } from './types'
+import { ConfigJson, RootState } from './types'
+import { v4 as uuidv4 } from 'uuid'
 
 export const actions: ActionTree<RootState, RootState> = {
     switchToDashboard() {
         router.push('/')
     },
 
     changePrinter({ dispatch, getters, state }, payload) {
-        const remoteMode = state.socket?.remoteMode
+        const remoteMode = state.remoteMode
 
         dispatch('files/reset')
         dispatch('gui/reset')
@@ -21,11 +22,27 @@ export const actions: ActionTree<RootState, RootState> = {
         dispatch('socket/setSocket', {
             hostname: printerSocket.hostname,
             port: printerSocket.port,
-            remoteMode: remoteMode,
         })
     },
 
     setNaviDrawer({ commit }, payload) {
         commit('setNaviDrawer', payload)
     },
+
+    /**
+     * This function will parse the config.json content and config mainsail
+     * @param commit - vuex commit
+     * @param dispatch - vuex dispatch
+     * @param payload - content of config.json as a object
+     */
+    importConfigJson({ commit, dispatch }, payload: ConfigJson) {
+        const remoteMode = 'remoteMode' in payload ? payload.remoteMode : false
+        if (remoteMode) {
+            commit('setRemoteMode', true)
+
+            if ('instances' in payload && Array.isArray(payload.instances) && payload.instances.length) {
+                commit('setConfigInstances', payload.instances)
+            }
+        }
+    },
 }

src/store/gui/actions.ts

@@ -25,8 +25,7 @@ export const actions: ActionTree<GuiState, RootState> = {
         const mainsailUrl = baseUrl + '?namespace=mainsail'
 
         if ('remoteprinters' in payload.value) {
-            if (!rootState.socket?.remoteMode)
-                dispatch('remoteprinters/initStore', payload.value.remoteprinters.printers)
+            if (!rootState.remoteMode) dispatch('remoteprinters/initStore', payload.value.remoteprinters.printers)
             delete payload.value.remoteprinters
         }
 

src/store/gui/remoteprinters/actions.ts

@@ -13,8 +13,9 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
         commit('reset')
     },
 
-    initFromLocalstorage({ dispatch }) {
-        const value = JSON.parse(localStorage.getItem('printers') ?? '{}')
+    initFromLocalstorage({ dispatch, rootState }) {
+        let value = rootState.configInstances ?? []
+        if (value.length === 0) value = JSON.parse(localStorage.getItem('printers') ?? '{}')
         if (Array.isArray(value)) {
             const printers: any = {}
 
@@ -46,7 +47,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
     },
 
     upload({ state, rootState }, id) {
-        if (rootState.socket?.remoteMode) {
+        if (rootState.remoteMode) {
             const printers: any[] = []
 
             Object.keys(state.printers).forEach((id: string) => {
@@ -111,7 +112,7 @@ export const actions: ActionTree<GuiRemoteprintersState, RootState> = {
         commit('delete', id)
         dispatch('farm/unregisterPrinter', id, { root: true })
 
-        if (rootState.socket?.remoteMode) dispatch('upload')
+        if (rootState.remoteMode) dispatch('upload')
         else {
             Vue.$socket.emit('server.database.delete_item', {
                 namespace: 'mainsail',

src/store/index.ts

@@ -3,7 +3,7 @@ import Vuex from 'vuex'
 import { actions } from '@/store/actions'
 import { mutations } from '@/store/mutations'
 import { getters } from '@/store/getters'
-import { RootState } from './types'
+import { ConfigJsonInstance, RootState } from './types'
 
 // load modules
 import { socket } from '@/store/socket'
@@ -18,10 +18,21 @@ import { gcodeviewer } from '@/store/gcodeviewer'
 Vue.use(Vuex)
 
 export const getDefaultState = (): RootState => {
+    let remoteMode = false
+
+    if (
+        document.location.hostname === 'my.mainsail.xyz' ||
+        String(import.meta.env.VUE_APP_REMOTE_MODE).toLowerCase() === 'true' ||
+        String(import.meta.env.VUE_APP_REMOTE_MODE) === '1'
+    )
+        remoteMode = true
+
     return {
         packageVersion: (import.meta.env.PACKAGE_VERSION as string) || '0.0.0',
         debugMode: (import.meta.env.VUE_APP_DEBUG_MODE as boolean) || false,
         naviDrawer: null,
+        remoteMode,
+        configInstances: [],
     }
 }
 

src/store/mutations.ts

@@ -6,4 +6,12 @@ export const mutations: MutationTree<RootState> = {
     setNaviDrawer(state, payload) {
         Vue.set(state, 'naviDrawer', payload)
     },
+
+    setRemoteMode(state, payload) {
+        Vue.set(state, 'remoteMode', payload)
+    },
+
+    setConfigInstances(state, payload) {
+        Vue.set(state, 'configInstances', payload)
+    },
 }

src/store/socket/actions.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import { ActionTree } from 'vuex'
 import { SocketState } from '@/store/socket/types'
 import { RootState } from '@/store/types'
+import { v4 as uuidv4 } from 'uuid'
 
 export const actions: ActionTree<SocketState, RootState> = {
     reset({ commit }) {

src/store/socket/index.ts

@@ -6,27 +6,11 @@ import { getters } from '@/store/socket/getters'
 import { RootState } from '@/store/types'
 
 export const getDefaultState = (): SocketState => {
-    let remoteMode: boolean
-    let hostname: string
-    let port: number
-
-    if (
-        document.location.hostname === 'my.mainsail.xyz' ||
-        String(import.meta.env.VUE_APP_REMOTE_MODE).toLowerCase() === 'true' ||
-        String(import.meta.env.VUE_APP_REMOTE_MODE) === '1'
-    ) {
-        remoteMode = true
-        hostname = ''
-        port = 7125
-    } else {
-        remoteMode = false
-        hostname = (import.meta.env.VUE_APP_HOSTNAME as string) || window.location.hostname
-        const defaultPort = window.location.port || (window.location.protocol === 'https:' ? 443 : 80)
-        port = import.meta.env.VUE_APP_PORT ? Number(import.meta.env.VUE_APP_PORT) : Number(defaultPort)
-    }
+    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)
 
     return {
-        remoteMode,
         hostname,
         port,
         protocol: document.location.protocol === 'https:' ? 'wss' : 'ws',

src/store/socket/types.ts

@@ -1,5 +1,4 @@
 export interface SocketState {
-    remoteMode: boolean
     hostname: string
     port: number
     protocol: string

src/store/types.ts

@@ -8,6 +8,8 @@ export interface RootState {
     packageVersion: string
     debugMode: boolean
     naviDrawer: boolean | null
+    remoteMode: boolean
+    configInstances: ConfigJsonInstance[]
 
     socket?: SocketState
     gui?: GuiState
@@ -21,3 +23,13 @@ export interface RootStateDependency {
     installedVersion: string
     neededVersion: string
 }
+
+export interface ConfigJson {
+    remoteMode?: boolean
+    instances?: ConfigJsonInstance[]
+}
+
+export interface ConfigJsonInstance {
+    hostname: string
+    port?: number
+}