diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index e4270e7b..36bf403c 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -48,6 +48,7 @@ import LoginModal from '@/views/LoginModal.vue'; import { State, Action, namespace } from 'vuex-class'; import userService from '@/shared/userService'; import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue'; +import { LayoutActions } from '@/store/modules/layout'; const ftbot = namespace('ftbot'); const layoutNs = namespace('layout'); @@ -66,9 +67,9 @@ export default class NavBar extends Vue { @ftbot.Action ping; - @layoutNs.Action resetDashboardLayout; + @layoutNs.Action [LayoutActions.resetDashboardLayout]; - @layoutNs.Action resetTradingLayout; + @layoutNs.Action [LayoutActions.resetTradingLayout]; mounted() { this.ping(); diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts index 04b63b0e..3bd08340 100644 --- a/src/store/modules/layout.ts +++ b/src/store/modules/layout.ts @@ -17,6 +17,23 @@ export enum DashboardLayout { cumChartChart = 'g-cumChartChart', } +export enum LayoutGetters { + getDashboardLayout = 'getDashboardLayout', + getTradingLayout = 'getTradingLayout', +} + +export enum LayoutActions { + setDashboardLayout = 'setDashboardLayout', + setTradingLayout = 'setTradingLayout', + resetDashboardLayout = 'resetDashboardLayout', + resetTradingLayout = 'resetTradingLayout', +} + +enum LayoutMutations { + setDashboardLayout = 'setDashboardLayout', + setTradingLayout = 'setTradingLayout', +} + // Define default layouts const DEFAULT_TRADING_LAYOUT: GridItemData[] = [ { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 4 }, @@ -68,33 +85,42 @@ export default { }, getters: { - getDashboardLayout(state) { + [LayoutGetters.getDashboardLayout](state) { return state.dashboardLayout; }, - getTradingLayout(state) { + [LayoutGetters.getTradingLayout](state) { return state.tradingLayout; }, }, mutations: { - setDashboardLayout(state, layout) { + [LayoutMutations.setDashboardLayout](state, layout) { console.log('set dashboard layout'); state.dashboardLayout = layout; localStorage.setItem(STORE_DASHBOARD_LAYOUT, JSON.stringify(layout)); }, - setTradingLayout(state, layout) { + [LayoutMutations.setTradingLayout](state, layout) { state.tradingLayout = layout; localStorage.setItem(STORE_TRADING_LAYOUT, JSON.stringify(layout)); }, }, actions: { - resetDashboardLayout({ commit }) { - commit('setDashboardLayout', JSON.parse(JSON.stringify(DEFAULT_DASHBOARD_LAYOUT))); + [LayoutActions.setDashboardLayout]({ commit }, layout) { + commit(LayoutMutations.setDashboardLayout, layout); + }, + [LayoutActions.setTradingLayout]({ commit }, layout) { + commit(LayoutMutations.setTradingLayout, layout); + }, + [LayoutActions.resetDashboardLayout]({ commit }) { + commit( + LayoutMutations.setDashboardLayout, + JSON.parse(JSON.stringify(DEFAULT_DASHBOARD_LAYOUT)), + ); }, - resetTradingLayout({ commit }) { - commit('setTradingLayout', JSON.parse(JSON.stringify(DEFAULT_TRADING_LAYOUT))); + [LayoutActions.resetTradingLayout]({ commit }) { + commit(LayoutMutations.setTradingLayout, JSON.parse(JSON.stringify(DEFAULT_TRADING_LAYOUT))); }, }, }; diff --git a/src/views/Dashboard.vue b/src/views/Dashboard.vue index e9b2453b..e8f6c169 100644 --- a/src/views/Dashboard.vue +++ b/src/views/Dashboard.vue @@ -109,7 +109,12 @@ import HourlyChart from '@/components/charts/HourlyChart.vue'; import CumProfitChart from '@/components/charts/CumProfitChart.vue'; import DraggableContainer from '@/components/layout/DraggableContainer.vue'; -import { DashboardLayout, findGridLayout } from '@/store/modules/layout'; +import { + DashboardLayout, + findGridLayout, + LayoutActions, + LayoutGetters, +} from '@/store/modules/layout'; import { Trade, DailyReturnValue, BalanceInterface, ProfitInterface, DailyPayload } from '@/types'; const ftbot = namespace('ftbot'); @@ -145,9 +150,9 @@ export default class Dashboard extends Vue { @ftbot.Action getTrades; - @layoutNs.Getter getDashboardLayout!: GridItemData[]; + @layoutNs.Getter [LayoutGetters.getDashboardLayout]!: GridItemData[]; - @layoutNs.Mutation setDashboardLayout; + @layoutNs.Action [LayoutActions.setDashboardLayout]; @ftbot.Action getOpenTrades; diff --git a/src/views/Trading.vue b/src/views/Trading.vue index 8bd283ce..d66c0ca5 100644 --- a/src/views/Trading.vue +++ b/src/views/Trading.vue @@ -151,7 +151,7 @@ import CandleChartContainer from '@/components/charts/CandleChartContainer.vue'; import { Trade } from '@/types'; import { BotStoreGetters } from '@/store/modules/ftbot'; -import { TradeLayout, findGridLayout } from '@/store/modules/layout'; +import { TradeLayout, findGridLayout, LayoutGetters, LayoutActions } from '@/store/modules/layout'; const ftbot = namespace('ftbot'); const layoutNs = namespace('layout'); @@ -189,9 +189,9 @@ export default class Trading extends Vue { @ftbot.State whitelist!: string[]; - @layoutNs.Getter getTradingLayout!: GridItemData[]; + @layoutNs.Getter [LayoutGetters.getTradingLayout]!: GridItemData[]; - @layoutNs.Mutation setTradingLayout; + @layoutNs.Action [LayoutActions.setTradingLayout]; get gridLayout(): GridItemData[] { return this.getTradingLayout;