refactor: change remoteMode to instancesDB in config.json

.env.development.local.example

@@ -7,8 +7,8 @@ VUE_APP_PORT=7125
 # reconnect interval in ms
 VUE_APP_RECONNECT_INTERVAL=5000
 
-# remote mode
-VUE_APP_REMOTE_MODE=false
+# where should mainsail read the instances (moonraker, browser or json)
+VUE_APP_INSTANCES_DB="moonraker"
 
 # defaults for multi language tests
 VUE_APP_I18N_LOCALE=en

public/config.json

@@ -1,8 +1,19 @@
 {
     "hostname": null,
     "port": null,
-    "remoteMode": false,
+    "instancesDB": "moonraker",
     "instances": [
-
+        {
+            "hostname": "192.168.0.210",
+            "port": 7125
+        },
+        {
+            "hostname": "192.168.0.211",
+            "port": 7125
+        },
+        {
+            "hostname": "192.168.0.212",
+            "port": 7125
+        }
     ]
 }

src/App.vue

@@ -40,7 +40,7 @@
             <the-fullscreen-upload></the-fullscreen-upload>
             <the-upload-snackbar></the-upload-snackbar>
         </template>
-        <the-select-printer-dialog v-else-if="remoteMode"></the-select-printer-dialog>
+        <the-select-printer-dialog v-else-if="instancesDB !== 'moonraker'"></the-select-printer-dialog>
         <the-connecting-dialog v-else></the-connecting-dialog>
     </v-app>
 </template>

src/components/TheSelectPrinterDialog.vue

@@ -173,31 +173,40 @@
                             </v-row>
                         </v-col>
                     </v-row>
-                    <v-row v-if="showCorsInfo">
-                        <v-col>
-                            <p v-if="printers.length === 0" class="text-center">
-                                {{ $t('SelectPrinterDialog.Hello') }}
-                            </p>
+                    <template v-if="instancesDB === 'browser'">
+                        <v-row v-if="showCorsInfo">
+                            <v-col>
+                                <p v-if="printers.length === 0" class="text-center">
+                                    {{ $t('SelectPrinterDialog.Hello') }}
+                                </p>
+                                <p class="text-center">
+                                    {{ $t('SelectPrinterDialog.RememberToAdd', { cors: currentUrl }) }}
+                                </p>
+                                <p class="text-center mb-0">
+                                    {{ $t('SelectPrinterDialog.YouCanFindMore') }}
+                                    <br />
+                                    <a href="https://docs.mainsail.xyz/remotemode" target="_blank">
+                                        https://docs.mainsail.xyz/remotemode
+                                    </a>
+                                    .
+                                </p>
+                            </v-col>
+                        </v-row>
+                        <v-row>
+                            <v-col class="text-center mt-0">
+                                <v-btn text color="primary" @click="createPrinter">
+                                    {{ $t('SelectPrinterDialog.AddPrinter') }}
+                                </v-btn>
+                            </v-col>
+                        </v-row>
+                    </template>
+                    <v-row v-else-if="instancesDB === 'json' && printers.length === 0">
+                        <v-col class="text-center mt-0">
                             <p class="text-center">
-                                {{ $t('SelectPrinterDialog.RememberToAdd', { cors: currentUrl }) }}
-                            </p>
-                            <p class="text-center mb-0">
-                                {{ $t('SelectPrinterDialog.YouCanFindMore') }}
-                                <br />
-                                <a href="https://docs.mainsail.xyz/remotemode" target="_blank">
-                                    https://docs.mainsail.xyz/remotemode
-                                </a>
-                                .
+                                {{ $t('SelectPrinterDialog.PleaseAddYourPrintersToConfigJson') }}
                             </p>
                         </v-col>
                     </v-row>
-                    <v-row v-if="canAddPrinters">
-                        <v-col class="text-center mt-0">
-                            <v-btn text color="primary" @click="createPrinter">
-                                {{ $t('SelectPrinterDialog.AddPrinter') }}
-                            </v-btn>
-                        </v-col>
-                    </v-row>
                 </v-card-text>
             </template>
         </panel>
@@ -254,7 +263,7 @@ export default class TheSelectPrinterDialog extends Mixins(BaseMixin) {
     }
 
     get canAddPrinters() {
-        return this.$store.state.configInstances.length === 0
+        return this.instancesDB !== 'json'
     }
 
     get protocol() {

src/components/mixins/base.ts

@@ -11,8 +11,8 @@ export default class BaseMixin extends Vue {
         return this.$store.getters['socket/getHostUrl']
     }
 
-    get remoteMode() {
-        return this.$store.state.remoteMode
+    get instancesDB() {
+        return this.$store.state.instancesDB ?? 'moonraker'
     }
 
     get socketIsConnected(): boolean {

src/components/settings/SettingsRemotePrintersTab.vue

@@ -3,6 +3,9 @@
         <v-card v-if="!form.bool" flat>
             <v-card-text>
                 <h3 class="text-h5 mb-3">{{ $t('Settings.RemotePrintersTab.RemotePrinters') }}</h3>
+                <v-alert v-if="!canAddPrinters" :icon="mdiAlertOutline" type="warning" text>
+                    {{ $t('Settings.RemotePrintersTab.UseConfigJson') }}
+                </v-alert>
                 <div v-for="(printer, index) in printers" :key="printer.id">
                     <v-divider v-if="index" class="my-2"></v-divider>
                     <settings-row
@@ -82,7 +85,7 @@ import { Component, Mixins } from 'vue-property-decorator'
 import BaseMixin from '../mixins/base'
 import SettingsRow from '@/components/settings/SettingsRow.vue'
 import { GuiRemoteprintersStatePrinter } from '@/store/gui/remoteprinters/types'
-import { mdiCancel, mdiCheckboxMarkedCircle, mdiDelete, mdiPencil } from '@mdi/js'
+import { mdiCancel, mdiCheckboxMarkedCircle, mdiDelete, mdiPencil, mdiAlertOutline } from '@mdi/js'
 
 interface printerForm {
     bool: boolean
@@ -100,6 +103,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
     mdiCancel = mdiCancel
     mdiPencil = mdiPencil
     mdiDelete = mdiDelete
+    mdiAlertOutline = mdiAlertOutline
 
     private form: printerForm = {
         bool: false,
@@ -114,7 +118,7 @@ export default class SettingsRemotePrintersTab extends Mixins(BaseMixin) {
     }
 
     get canAddPrinters() {
-        return this.$store.state.configInstances.length === 0
+        return this.$store.state.instancesDB !== 'json'
     }
 
     get protocol() {

src/components/ui/PrinterSelector.vue

@@ -38,7 +38,10 @@ export default class PrinterSelector extends Mixins(BaseMixin) {
     mdiChevronDown = mdiChevronDown
 
     get displayMenuPoint() {
-        return (this.remoteMode && this.countPrinters > 1) || (!this.remoteMode && this.countPrinters)
+        return (
+            (this.instancesDB !== 'moonraker' && this.countPrinters > 1) ||
+            (this.instancesDB === 'moonraker' && this.countPrinters)
+        )
     }
 
     get printers() {

src/locales/en.json

@@ -654,6 +654,7 @@
         "HostnameInvalid": "invalid Hostname/IP",
         "HostnameIp": "Hostname/IP",
         "HostnameRequired": "Hostname is required",
+        "PleaseAddYourPrintersToConfigJson": "Please add your Printers to your config.json.",
         "Port": "Port",
         "PortRequired": "Port is required",
         "RememberToAdd": "Please remember to add '{cors}' in moonraker.conf within 'cors_domains'.",
@@ -834,7 +835,8 @@
             "Hostname": "Hostname",
             "Port": "Port",
             "RemotePrinters": "Printers",
-            "UpdatePrinter": "Update Printer"
+            "UpdatePrinter": "Update Printer",
+            "UseConfigJson": "InstanceDB = JSON detected. Please use the config.json to modify the printers list."
         },
         "TimelapseTab": {
             "Autorender": "Autorender",

src/main.ts

@@ -89,7 +89,7 @@ const initLoad = async () => {
 
     const url = store.getters['socket/getWebsocketUrl']
     Vue.use(WebSocketPlugin, { url, store })
-    if (!store?.state?.remoteMode) Vue.$socket.connect()
+    if (store?.state?.instancesDB === 'moonraker') Vue.$socket.connect()
 }
 
 initLoad()

src/store/actions.ts

@@ -8,8 +8,6 @@ export const actions: ActionTree<RootState, RootState> = {
     },
 
     changePrinter({ dispatch, getters, state }, payload) {
-        const remoteMode = state.remoteMode
-
         dispatch('files/reset')
         dispatch('gui/reset')
         dispatch('printer/reset')
@@ -32,11 +30,21 @@ export const actions: ActionTree<RootState, RootState> = {
      * This function will parse the config.json content and config mainsail
      */
     importConfigJson({ commit, dispatch }, payload: ConfigJson) {
-        const remoteMode = payload.remoteMode ?? false
-        if (remoteMode) {
-            commit('setRemoteMode', true)
-
-            if ('instances' in payload && Array.isArray(payload.instances) && payload.instances.length) {
+        type RootStateInstancesDbType = 'moonraker' | 'browser' | 'json'
+        let instancesDB: RootStateInstancesDbType = payload.instancesDB ?? 'moonraker'
+        if (document.location.hostname === 'my.mainsail.xyz') instancesDB = 'browser'
+        if (import.meta.env.VUE_APP_INSTANCES_DB)
+            instancesDB = import.meta.env.VUE_APP_INSTANCES_DB as RootStateInstancesDbType
+
+        if (instancesDB !== 'moonraker') {
+            commit('setInstancesDB', instancesDB)
+
+            if (
+                instancesDB === 'json' &&
+                'instances' in payload &&
+                Array.isArray(payload.instances) &&
+                payload.instances.length
+            ) {
                 commit('setConfigInstances', payload.instances)
             }
 

src/store/gui/actions.ts

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

src/store/gui/remoteprinters/actions.ts

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

src/store/index.ts

@@ -18,20 +18,11 @@ 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,
+        instancesDB: 'moonraker',
         configInstances: [],
     }
 }

src/store/mutations.ts

@@ -7,8 +7,8 @@ export const mutations: MutationTree<RootState> = {
         Vue.set(state, 'naviDrawer', payload)
     },
 
-    setRemoteMode(state, payload) {
-        Vue.set(state, 'remoteMode', payload)
+    setInstancesDB(state, payload) {
+        Vue.set(state, 'instancesDB', payload)
     },
 
     setConfigInstances(state, payload) {

src/store/types.ts

@@ -8,7 +8,7 @@ export interface RootState {
     packageVersion: string
     debugMode: boolean
     naviDrawer: boolean | null
-    remoteMode: boolean
+    instancesDB: 'moonraker' | 'browser' | 'json'
     configInstances: ConfigJsonInstance[]
 
     socket?: SocketState
@@ -27,7 +27,7 @@ export interface RootStateDependency {
 export interface ConfigJson {
     hostname?: string | null
     port?: string | number | null
-    remoteMode?: boolean
+    instancesDB?: 'moonraker' | 'browser' | 'json'
     instances?: ConfigJsonInstance[]
 }