lychiyu/frequi_origin
1
0
Fork 0
mirror of https://github.com/freqtrade/frequi.git synced 2024-11-23 03:25:15 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Move layouts to store

Browse Source
This commit is contained in:
Matthias 2020-08-18 08:29:40 +02:00
parent 2f1942f48c
commit 829cb07745
4 changed files with 84 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/store/index.ts
View File

@ -4,6 +4,7 @@ import Vuex from 'vuex';
import userService from '@/shared/userService';
import ftbotModule from './modules/ftbot';
import alertsModule from './modules/alerts';
import layoutModule from './modules/layout';
const AUTO_REFRESH = 'ft_auto_refresh';
@ -19,6 +20,7 @@ export default new Vuex.Store({
modules: {
ftbot: ftbotModule,
alerts: alertsModule,
layout: layoutModule,
},
mutations: {
setPing(state, ping) {

53
src/store/modules/layout.ts Normal file
View File

@ -0,0 +1,53 @@
import { GridItemData } from 'vue-grid-layout';
const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
{ i: 'g-reloadControl', x: 0, y: 0, w: 4, h: 1 },
{ i: 'g-botControls', x: 0, y: 0, w: 4, h: 3 },
{ i: 'g-MultiPane', x: 0, y: 0, w: 4, h: 7 },
{ i: 'g-openTrades', x: 4, y: 0, w: 8, h: 5 },
{ i: 'g-tradeHistory', x: 4, y: 4, w: 8, h: 6 },
{ i: 'g-logView', x: 0, y: 9, w: 12, h: 3 },
];
const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
{ i: 'g-dailyChart', x: 0, y: 0, w: 4, h: 6 },
{ i: 'g-hourlyChart', x: 4, y: 0, w: 4, h: 6 },
{ i: 'g-cumChartChart', x: 0, y: 6, w: 4, h: 6 },
];
export default {
namespaced: true,
state: {
dashboardLayout: DEFAULT_DASHBOARD_LAYOUT,
tradingLayout: DEFAULT_TRADING_LAYOUT,
},
getters: {
getDashboardLayout(state) {
return state.dashboardLayout;
},
getTradingLayout(state) {
return state.tradingLayout;
},
},
mutations: {
setDashboardLayout(state, layout) {
console.log('set dashboard layout');
state.dashboardLayout = layout;
},
setTradingLayout(state, layout) {
state.tradingLayout = layout;
},
},
actions: {
resetDashboardLayout({ commit }) {
commit('setDashboardLayout', DEFAULT_DASHBOARD_LAYOUT);
},
resetTradingLayout({ commit }) {
commit('setTradingLayout', DEFAULT_TRADING_LAYOUT);
},
},
};

19
src/views/Dashboard.vue
View File

@ -47,6 +47,7 @@ import CumProfitChart from '@/components/charts/CumProfitChart.vue';
import { Trade, DailyReturnValue } from '@/types';
const ftbot = namespace('ftbot');
const layoutNs = namespace('layout');
@Component({
components: {
@ -57,7 +58,7 @@ const ftbot = namespace('ftbot');
CumProfitChart,
},
})
export default class Trading extends Vue {
export default class Dashboard extends Vue {
@ftbot.Getter closedTrades!: Trade[];
@ftbot.State dailyStats!: DailyReturnValue;
@ -66,19 +67,21 @@ export default class Trading extends Vue {
@ftbot.Action getTrades;
public gridLayout: GridItemData[] = [
{ i: 'g-dailyChart', x: 0, y: 0, w: 4, h: 6 },
{ i: 'g-hourlyChart', x: 4, y: 0, w: 4, h: 6 },
{ i: 'g-cumChartChart', x: 4, y: 0, w: 4, h: 6 },
];
@layoutNs.Getter getDashboardLayout!: GridItemData[];
@layoutNs.Mutation setDashboardLayout;
get gridLayout(): GridItemData[] {
return this.getDashboardLayout;
}
mounted() {
this.getDaily();
this.getTrades();
}
layoutUpdatedEvent(newLayout: GridItemData[]) {
console.log(newLayout);
layoutUpdatedEvent(newLayout) {
this.setDashboardLayout(newLayout);
}
}
</script>

27
src/views/Trading.vue
View File

@ -1,5 +1,10 @@
<template>
<GridLayout class="h-100 w-100" :row-height="50" :layout="gridLayout">
<GridLayout
class="h-100 w-100"
:row-height="50"
:layout="gridLayout"
@layout-updated="layoutUpdatedEvent"
>
<GridItem
:i="gridLayout[0].i"
:x="gridLayout[0].x"
@ -109,6 +114,7 @@ import { Trade } from '@/types';
import { UserStoreGetters } from '@/store/modules/ftbot';
const ftbot = namespace('ftbot');
const layoutNs = namespace('layout');
@Component({
components: {
@ -135,14 +141,17 @@ export default class Trading extends Vue {
@ftbot.Getter [UserStoreGetters.tradeDetail]!: Trade;
public gridLayout: GridItemData[] = [
{ i: 'g-reloadControl', x: 0, y: 0, w: 4, h: 1 },
{ i: 'g-botControls', x: 0, y: 0, w: 4, h: 3 },
{ i: 'g-MultiPane', x: 0, y: 0, w: 4, h: 7 },
{ i: 'g-openTrades', x: 4, y: 0, w: 8, h: 5 },
{ i: 'g-tradeHistory', x: 4, y: 4, w: 8, h: 6 },
{ i: 'g-logView', x: 0, y: 9, w: 12, h: 3 },
];
@layoutNs.Getter getTradingLayout!: GridItemData[];
@layoutNs.Mutation setTradingLayout;
get gridLayout(): GridItemData[] {
return this.getTradingLayout;
}
layoutUpdatedEvent(newLayout) {
this.setTradingLayout(newLayout);
}
}
</script>