diff --git a/src/App.vue b/src/App.vue index 685700feb..cdde20358 100644 --- a/src/App.vue +++ b/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'] } diff --git a/src/components/TheSelectPrinterDialog.vue b/src/components/TheSelectPrinterDialog.vue index 89364ffea..b9b576aa6 100644 --- a/src/components/TheSelectPrinterDialog.vue +++ b/src/components/TheSelectPrinterDialog.vue @@ -157,7 +157,7 @@ {{ getPrinterName(printer.id) }} - + - + {{ $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 } diff --git a/src/components/mixins/base.ts b/src/components/mixins/base.ts index 1c085ab1f..25da160c3 100644 --- a/src/components/mixins/base.ts +++ b/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 { diff --git a/src/components/settings/SettingsRemotePrintersTab.vue b/src/components/settings/SettingsRemotePrintersTab.vue index 54512a5dc..28c3e4e21 100644 --- a/src/components/settings/SettingsRemotePrintersTab.vue +++ b/src/components/settings/SettingsRemotePrintersTab.vue @@ -9,7 +9,7 @@ :title="formatPrinterName(printer)" :loading="printer.socket.isConnecting" :icon="printer.socket.isConnected ? mdiCheckboxMarkedCircle : mdiCancel"> - + {{ mdiPencil }} {{ $t('Settings.Edit') }} @@ -18,6 +18,7 @@ outlined class="ml-3 minwidth-0 px-2" color="error" + :disabled="!canAddPrinters" @click="delPrinter(printer.id)"> {{ mdiDelete }} @@ -25,7 +26,7 @@ - + {{ $t('Settings.RemotePrintersTab.AddPrinter') }} @@ -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' } diff --git a/src/main.ts b/src/main.ts index 696584abf..5c38fd14e 100644 --- a/src/main.ts +++ b/src/main.ts @@ -65,8 +65,8 @@ 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, { @@ -74,7 +74,7 @@ fetch('/config.json') store: store, }) - if (!store?.state?.socket?.remoteMode) Vue.$socket.connect() + if (!store?.state?.remoteMode) Vue.$socket.connect() new Vue({ vuetify, diff --git a/src/store/actions.ts b/src/store/actions.ts index 46de4f44f..78549e7c3 100644 --- a/src/store/actions.ts +++ b/src/store/actions.ts @@ -1,6 +1,7 @@ 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 = { switchToDashboard() { @@ -8,7 +9,7 @@ export const actions: ActionTree = { }, 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 = { 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) + } + } + }, } diff --git a/src/store/gui/actions.ts b/src/store/gui/actions.ts index d941f4814..9753da5da 100644 --- a/src/store/gui/actions.ts +++ b/src/store/gui/actions.ts @@ -25,8 +25,7 @@ export const actions: ActionTree = { 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 } diff --git a/src/store/gui/remoteprinters/actions.ts b/src/store/gui/remoteprinters/actions.ts index e153851e5..452b1ebd1 100644 --- a/src/store/gui/remoteprinters/actions.ts +++ b/src/store/gui/remoteprinters/actions.ts @@ -13,8 +13,9 @@ export const actions: ActionTree = { 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 = { }, 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 = { 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', diff --git a/src/store/index.ts b/src/store/index.ts index e1d96c9d0..8820032b4 100644 --- a/src/store/index.ts +++ b/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: [], } } diff --git a/src/store/mutations.ts b/src/store/mutations.ts index 18e461e0b..8827a6122 100644 --- a/src/store/mutations.ts +++ b/src/store/mutations.ts @@ -6,4 +6,12 @@ export const mutations: MutationTree = { setNaviDrawer(state, payload) { Vue.set(state, 'naviDrawer', payload) }, + + setRemoteMode(state, payload) { + Vue.set(state, 'remoteMode', payload) + }, + + setConfigInstances(state, payload) { + Vue.set(state, 'configInstances', payload) + }, } diff --git a/src/store/socket/actions.ts b/src/store/socket/actions.ts index 5abea30b8..383d00e93 100644 --- a/src/store/socket/actions.ts +++ b/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 = { reset({ commit }) { diff --git a/src/store/socket/index.ts b/src/store/socket/index.ts index 268f55704..7c265b448 100644 --- a/src/store/socket/index.ts +++ b/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', diff --git a/src/store/socket/types.ts b/src/store/socket/types.ts index e630a9d07..b36206466 100644 --- a/src/store/socket/types.ts +++ b/src/store/socket/types.ts @@ -1,5 +1,4 @@ export interface SocketState { - remoteMode: boolean hostname: string port: number protocol: string diff --git a/src/store/types.ts b/src/store/types.ts index 2cb03baf2..08812aacd 100644 --- a/src/store/types.ts +++ b/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 +}