From 9997d7aca1e54a290aeeeb8c115647ea5d8b29a8 Mon Sep 17 00:00:00 2001 From: Matthias Date: Sun, 19 Dec 2021 20:14:35 +0100 Subject: [PATCH 01/32] First try bottom-nav --- src/App.vue | 4 +++- src/components/layout/NavFooter.vue | 28 ++++++++++++++++++++++++++++ src/router/index.ts | 5 +++++ 3 files changed, 36 insertions(+), 1 deletion(-) create mode 100644 src/components/layout/NavFooter.vue diff --git a/src/App.vue b/src/App.vue index 1d371ae2..bd2f9241 100644 --- a/src/App.vue +++ b/src/App.vue @@ -2,12 +2,14 @@
+
+ + diff --git a/src/router/index.ts b/src/router/index.ts index fbc87006..4cae13f5 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -42,6 +42,11 @@ const routes: Array = [ name: 'Freqtrade Dashboard', component: () => import(/* webpackChunkName: "dashboard" */ '@/views/Dashboard.vue'), }, + { + path: '/balance', + name: 'Freqtrade Balance', + component: () => import(/* webpackChunkName: "balance" */ '@/components/ftbot/Balance.vue'), + }, { path: '/settings', name: 'Freqtrade Settings', From 7f12e6a001b8ea84d20aca914fe0a2faf5182e8a Mon Sep 17 00:00:00 2001 From: Matthias Date: Mon, 20 Dec 2021 07:20:29 +0100 Subject: [PATCH 02/32] Don't show layout locking in Mobile view --- src/components/layout/NavBar.vue | 8 -------- 1 file changed, 8 deletions(-) diff --git a/src/components/layout/NavBar.vue b/src/components/layout/NavBar.vue index 910f9541..1efd10bc 100644 --- a/src/components/layout/NavBar.vue +++ b/src/components/layout/NavBar.vue @@ -75,7 +75,6 @@
  • - V: {{ getUiVersion }}
    {{ botName || 'No bot selected' }} @@ -86,13 +85,6 @@
    • Settings -
    - Lock layout -
    - - Reset Layout Date: Wed, 22 Dec 2021 06:44:09 +0100 Subject: [PATCH 03/32] Initial version of customTradeList --- package.json | 2 +- src/components/ftbot/CustomTradeList.vue | 243 ++++++++++++++++++ src/components/ftbot/CustomTradeListEntry.vue | 67 +++++ src/components/layout/NavFooter.vue | 3 + src/main.ts | 2 + src/router/index.ts | 5 + src/views/TradesList.vue | 44 ++++ 7 files changed, 365 insertions(+), 1 deletion(-) create mode 100644 src/components/ftbot/CustomTradeList.vue create mode 100644 src/components/ftbot/CustomTradeListEntry.vue create mode 100644 src/views/TradesList.vue diff --git a/package.json b/package.json index 906ee545..e61e3cc0 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ }, "dependencies": { "@cypress/vue": "^2.2.3", + "@vue/composition-api": "^1.4.3", "axios": "^0.24.0", "bootstrap": "^4.6.0", "bootstrap-vue": "^2.21.2", @@ -49,7 +50,6 @@ "@vue/cli-plugin-unit-jest": "~4.5.15", "@vue/cli-plugin-vuex": "~4.5.15", "@vue/cli-service": "~4.5.15", - "@vue/composition-api": "^1.4.3", "@vue/eslint-config-airbnb": "^5.1.0", "@vue/eslint-config-prettier": "^6.0.0", "@vue/eslint-config-typescript": "^5.1.0", diff --git a/src/components/ftbot/CustomTradeList.vue b/src/components/ftbot/CustomTradeList.vue new file mode 100644 index 00000000..ca0c3262 --- /dev/null +++ b/src/components/ftbot/CustomTradeList.vue @@ -0,0 +1,243 @@ + + + + + diff --git a/src/components/ftbot/CustomTradeListEntry.vue b/src/components/ftbot/CustomTradeListEntry.vue new file mode 100644 index 00000000..f280eafe --- /dev/null +++ b/src/components/ftbot/CustomTradeListEntry.vue @@ -0,0 +1,67 @@ + + + + + diff --git a/src/components/layout/NavFooter.vue b/src/components/layout/NavFooter.vue index 83929687..614cb429 100644 --- a/src/components/layout/NavFooter.vue +++ b/src/components/layout/NavFooter.vue @@ -5,6 +5,9 @@ Balance + + Trades + Dashboard diff --git a/src/main.ts b/src/main.ts index 3186db92..bc553e0c 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,5 +1,6 @@ import Vue from 'vue'; import './plugins/bootstrap-vue'; +import VueCompositionAPI from '@vue/composition-api'; import App from './App.vue'; import store from './store'; import router from './router'; @@ -9,6 +10,7 @@ initApi(store); Vue.config.productionTip = false; +Vue.use(VueCompositionAPI); new Vue({ store, router, diff --git a/src/router/index.ts b/src/router/index.ts index 4cae13f5..c42fb583 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -47,6 +47,11 @@ const routes: Array = [ name: 'Freqtrade Balance', component: () => import(/* webpackChunkName: "balance" */ '@/components/ftbot/Balance.vue'), }, + { + path: '/trades', + name: 'Freqtrade trade', + component: () => import(/* webpackChunkName: "balance" */ '@/views/TradesList.vue'), + }, { path: '/settings', name: 'Freqtrade Settings', diff --git a/src/views/TradesList.vue b/src/views/TradesList.vue new file mode 100644 index 00000000..a0647ed2 --- /dev/null +++ b/src/views/TradesList.vue @@ -0,0 +1,44 @@ + + + + + From a0f6cba2f43f257211506b3dfd800e915bee883e Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 23 Dec 2021 06:42:24 +0100 Subject: [PATCH 04/32] Improve profit symbol visual --- src/components/general/ProfitSymbol.vue | 2 +- src/components/general/ValuePair.vue | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/general/ProfitSymbol.vue b/src/components/general/ProfitSymbol.vue index 89614fde..ea14df2d 100644 --- a/src/components/general/ProfitSymbol.vue +++ b/src/components/general/ProfitSymbol.vue @@ -1,5 +1,5 @@ diff --git a/src/components/general/ValuePair.vue b/src/components/general/ValuePair.vue index 6650edf1..bbd8859e 100644 --- a/src/components/general/ValuePair.vue +++ b/src/components/general/ValuePair.vue @@ -19,7 +19,7 @@ export default Vue.extend({ }, classLabel: { type: String, - default: 'col-4 font-weight-bold', + default: 'col-4 font-weight-bold mb-0', }, classValue: { type: String, From f344b211f68913cd46c22bef1a429ff478afc9ef Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 23 Dec 2021 06:55:23 +0100 Subject: [PATCH 05/32] Improve mobile style --- src/components/ftbot/CustomTradeListEntry.vue | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/ftbot/CustomTradeListEntry.vue b/src/components/ftbot/CustomTradeListEntry.vue index f280eafe..ef486af0 100644 --- a/src/components/ftbot/CustomTradeListEntry.vue +++ b/src/components/ftbot/CustomTradeListEntry.vue @@ -11,9 +11,12 @@ {{ formatPrice(trade.close_rate || trade.current_rate || 0) }} - - - + + + +
    From 1578881e86a60f103c4e160df542cdd6678747c8 Mon Sep 17 00:00:00 2001 From: Matthias Date: Sat, 25 Dec 2021 10:01:50 +0100 Subject: [PATCH 06/32] DatetimeTZ should allow formatting date only --- src/components/general/DateTimeTZ.vue | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/general/DateTimeTZ.vue b/src/components/general/DateTimeTZ.vue index bb940ab1..c0de7091 100644 --- a/src/components/general/DateTimeTZ.vue +++ b/src/components/general/DateTimeTZ.vue @@ -3,7 +3,7 @@ diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue index d4c539d9..8833951c 100644 --- a/src/components/ftbot/TradeList.vue +++ b/src/components/ftbot/TradeList.vue @@ -24,45 +24,12 @@ -
    - - Forcesell - - - Forcesell limit - - - Forcesell market - - - - - Delete - -
    +     + diff --git a/src/router/index.ts b/src/router/index.ts index 7df1fb2a..ce4cad45 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -49,13 +49,19 @@ const routes: Array = [ }, { path: '/open_trades', - component: () => import(/* webpackChunkName: "balance" */ '@/views/TradesList.vue'), + component: () => import(/* webpackChunkName: "trades" */ '@/views/TradesList.vue'), }, + { path: '/trade_history', - component: () => import(/* webpackChunkName: "balance" */ '@/views/TradesList.vue'), + component: () => import(/* webpackChunkName: "trades" */ '@/views/TradesList.vue'), props: { history: true }, }, + { + path: '/pairlist', + component: () => + import(/* webpackChunkName: "pairlist" */ '@/components/ftbot/FTBotAPIPairList.vue'), + }, { path: '/settings', name: 'Freqtrade Settings', From 7bcc2e44acad743f9be0704bf5800be7835c4e0c Mon Sep 17 00:00:00 2001 From: Matthias Date: Sat, 25 Dec 2021 19:50:00 +0100 Subject: [PATCH 17/32] CustomTradeList - support pagination --- src/components/ftbot/CustomTradeList.vue | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/src/components/ftbot/CustomTradeList.vue b/src/components/ftbot/CustomTradeList.vue index 3891f77c..3c16cd37 100644 --- a/src/components/ftbot/CustomTradeList.vue +++ b/src/components/ftbot/CustomTradeList.vue @@ -2,7 +2,7 @@
    @@ -105,7 +105,14 @@ export default class CustomTradeList extends Vue { return this.trades.length; } - perPage = this.activeTrades ? 200 : 15; + perPage = this.activeTrades ? 200 : 25; + + get filteredTrades() { + return this.trades.slice( + (this.currentPage - 1) * this.perPage, + this.currentPage * this.perPage, + ); + } formatPriceWithDecimals(price) { return formatPrice(price, this.stakeCurrencyDecimals); @@ -188,14 +195,4 @@ export default class CustomTradeList extends Vue { margin-top: 0.125rem; margin-bottom: 0.125rem; } -.card-body { - padding: 0 0.2em; -} -.table-sm { - font-size: $fontsize-small; -} -.btn-xs { - padding: 0.1rem 0.25rem; - font-size: 0.75rem; -} From bd76da58b748e6eb0d0f1463932282fb721a283f Mon Sep 17 00:00:00 2001 From: Matthias Date: Sun, 26 Dec 2021 16:04:19 +0100 Subject: [PATCH 18/32] Fix tradeaction menu --- src/components/ftbot/CustomTradeListEntry.vue | 2 +- src/components/ftbot/TradeActions.vue | 25 ++++--------------- src/components/ftbot/TradeList.vue | 7 +----- 3 files changed, 7 insertions(+), 27 deletions(-) diff --git a/src/components/ftbot/CustomTradeListEntry.vue b/src/components/ftbot/CustomTradeListEntry.vue index b1eab526..8c622725 100644 --- a/src/components/ftbot/CustomTradeListEntry.vue +++ b/src/components/ftbot/CustomTradeListEntry.vue @@ -13,7 +13,7 @@ }} {{ formatPrice(trade.close_rate || trade.current_rate || 0) }} diff --git a/src/components/ftbot/TradeActions.vue b/src/components/ftbot/TradeActions.vue index 9a528df0..8cdfb66d 100644 --- a/src/components/ftbot/TradeActions.vue +++ b/src/components/ftbot/TradeActions.vue @@ -5,7 +5,7 @@ class="btn-xs text-left" size="sm" title="Forcesell" - @click="forcesellHandler(trade)" + @click="$emit('forceSell', trade)" > Forcesell @@ -14,7 +14,7 @@ class="btn-xs text-left" size="sm" title="Forcesell limit" - @click="forcesellHandler(trade, 'limit')" + @click="$emit('forceSell', trade, 'limit')" > Forcesell limit @@ -23,7 +23,7 @@ class="btn-xs text-left mt-1" size="sm" title="Forcesell market" - @click="forcesellHandler(trade, 'market')" + @click="$emit('forceSell', trade, 'market')" > Forcesell market @@ -60,23 +60,8 @@ export default defineComponent({ }, }, emits: ['forceSell', 'deleteTrade'], - setup(props, { emit, root }) { - const forcesellHandler = (item: Trade, ordertype: string | undefined = undefined) => { - root.$bvModal - .msgBoxConfirm(`Really222 forcesell trade ${item.trade_id} (Pair ${item.pair})?`) - .then((value: boolean) => { - if (value) { - console.log('emitting'); - emit('forceSell', item); - emit('forceSell', { item, ordertype }); - console.log('emittin2g'); - } - }); - }; - - return { - forcesellHandler, - }; + setup() { + return {}; }, }); diff --git a/src/components/ftbot/TradeList.vue b/src/components/ftbot/TradeList.vue index 8833951c..dd0210ce 100644 --- a/src/components/ftbot/TradeList.vue +++ b/src/components/ftbot/TradeList.vue @@ -195,12 +195,7 @@ export default class TradeList extends Vue { return formatPrice(price, this.stakeCurrencyDecimals); } - forcesellHandler(item: Trade) { - console.log(item); - } - - forcesellHandler2(item: Trade, ordertype: string | undefined = undefined) { - console.log('forcesell parent'); + forcesellHandler(item: Trade, ordertype: string | undefined = undefined) { this.$bvModal .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`) .then((value: boolean) => { From 74eaa6f49c9a6d6d25d84574aad9b04d9c81178c Mon Sep 17 00:00:00 2001 From: Matthias Date: Sun, 26 Dec 2021 16:27:30 +0100 Subject: [PATCH 19/32] Add responsive layout for Trading page --- src/store/modules/layout.ts | 13 +++++++++ src/views/Trading.vue | 55 +++++++++++++++++++++++++++++++++---- 2 files changed, 63 insertions(+), 5 deletions(-) diff --git a/src/store/modules/layout.ts b/src/store/modules/layout.ts index ecc3f36c..3f8a7307 100644 --- a/src/store/modules/layout.ts +++ b/src/store/modules/layout.ts @@ -19,6 +19,7 @@ export enum DashboardLayout { export enum LayoutGetters { getDashboardLayoutSm = 'getDashboardLayoutSm', getDashboardLayout = 'getDashboardLayout', + getTradingLayoutSm = 'getTradingLayoutSm', getTradingLayout = 'getTradingLayout', getLayoutLocked = 'getLayoutLocked', } @@ -45,6 +46,15 @@ const DEFAULT_TRADING_LAYOUT: GridItemData[] = [ { i: TradeLayout.tradeHistory, x: 3, y: 25, w: 9, h: 10 }, ]; +// Currently only multiPane is visible +const DEFAULT_TRADING_LAYOUT_SM: GridItemData[] = [ + { i: TradeLayout.multiPane, x: 0, y: 0, w: 12, h: 10 }, + { i: TradeLayout.chartView, x: 0, y: 10, w: 12, h: 0 }, + { i: TradeLayout.tradeDetail, x: 0, y: 19, w: 12, h: 0 }, + { i: TradeLayout.openTrades, x: 0, y: 8, w: 12, h: 0 }, + { i: TradeLayout.tradeHistory, x: 0, y: 25, w: 12, h: 0 }, +]; + const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [ { i: DashboardLayout.botComparison, x: 0, y: 0, w: 8, h: 6 } /* Bot Comparison */, { i: DashboardLayout.dailyChart, x: 8, y: 0, w: 4, h: 6 }, @@ -110,6 +120,9 @@ export default { [LayoutGetters.getDashboardLayout](state) { return state.dashboardLayout; }, + [LayoutGetters.getTradingLayoutSm]() { + return [...DEFAULT_TRADING_LAYOUT_SM]; + }, [LayoutGetters.getTradingLayout](state) { return state.tradingLayout; }, diff --git a/src/views/Trading.vue b/src/views/Trading.vue index afaae742..bf445425 100644 --- a/src/views/Trading.vue +++ b/src/views/Trading.vue @@ -5,11 +5,15 @@ :layout="gridLayout" :vertical-compact="false" :margin="[5, 5]" - :is-resizable="!getLayoutLocked" - :is-draggable="!getLayoutLocked" + :responsive-layouts="responsiveGridLayouts" + :is-resizable="!isLayoutLocked" + :is-draggable="!isLayoutLocked" + :responsive="true" @layout-updated="layoutUpdatedEvent" + @breakpoint-changed="breakpointChanged" > From 4c4ee4a6c4ea3f1e37deee2e1dabcd87890e1c6d Mon Sep 17 00:00:00 2001 From: Matthias Date: Tue, 28 Dec 2021 09:01:01 +0100 Subject: [PATCH 20/32] Fix "vue import" by resolving vue-demi to 0.12.1 --- package.json | 3 +++ yarn.lock | 7 +------ 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index 379da5af..8e0a93ab 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,9 @@ "cy:open-ct": "cypress open-ct", "cy:run-ct": "cypress run-ct" }, + "resolutions": { + "vue-demi": "0.12.1" + }, "dependencies": { "@cypress/vue": "^2.2.3", "@vue/composition-api": "^1.4.3", diff --git a/yarn.lock b/yarn.lock index 16166f8d..c2e235ae 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11370,16 +11370,11 @@ vue-class-component@^7.2.5: resolved "https://registry.yarnpkg.com/vue-class-component/-/vue-class-component-7.2.6.tgz#8471e037b8e4762f5a464686e19e5afc708502e4" integrity sha512-+eaQXVrAm/LldalI272PpDe3+i4mPis0ORiMYxF6Ae4hyuCh15W8Idet7wPUEs4N4YptgFHGys4UrgNQOMyO6w== -vue-demi@0.12.1: +vue-demi@0.12.1, vue-demi@^0.11.2: version "0.12.1" resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.12.1.tgz#f7e18efbecffd11ab069d1472d7a06e319b4174c" integrity sha512-QL3ny+wX8c6Xm1/EZylbgzdoDolye+VpCXRhI2hug9dJTP3OUJ3lmiKN3CsVV3mOJKwFi0nsstbgob0vG7aoIw== -vue-demi@^0.11.2: - version "0.11.2" - resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.11.2.tgz#faa06da53887c493a695b997f4fcb4784a667990" - integrity sha512-J+X8Au6BhQdcej6LY4O986634hZLu55L0ewU2j8my7WIKlu8cK0dqmdUxqVHHMd/cMrKKZ9SywB/id6aLhwCtA== - vue-echarts@^6.0.0: version "6.0.0" resolved "https://registry.yarnpkg.com/vue-echarts/-/vue-echarts-6.0.0.tgz#480263fc6ed2125b886bb1b7f05bf9273edee552" From ac948fcceea429d8c891ea387feddac39ac28040 Mon Sep 17 00:00:00 2001 From: Matthias Date: Thu, 30 Dec 2021 09:16:54 +0100 Subject: [PATCH 21/32] Fix margin issue --- src/components/ftbot/CustomTradeList.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/ftbot/CustomTradeList.vue b/src/components/ftbot/CustomTradeList.vue index 3c16cd37..83008578 100644 --- a/src/components/ftbot/CustomTradeList.vue +++ b/src/components/ftbot/CustomTradeList.vue @@ -1,5 +1,5 @@