mirror of
https://github.com/freqtrade/frequi.git
synced 2024-09-20 09:31:10 +00:00
Rebased to master, merged Dailystats and deleted unused files
This commit is contained in:
Paul D. Mendes
parent
47bf21cdc8
commit
4910fa8227
|
|
@ -1,130 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="container-fluid">
|
|
||||||
<div class="row">
|
|
||||||
<div class="row col-md-4">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<b-form-checkbox v-model="autoRefresh" size="lg" switch>AutoRefresh</b-form-checkbox>
|
|
||||||
<BotControls class="mt-3" />
|
|
||||||
</div>
|
|
||||||
<div class="col-md-12">
|
|
||||||
<b-tabs content-class="mt-3" class="mt-3">
|
|
||||||
<b-tab title="Status" active>
|
|
||||||
<BotStatus />
|
|
||||||
</b-tab>
|
|
||||||
<b-tab title="Performance">
|
|
||||||
<Performance class="performance-view" />
|
|
||||||
</b-tab>
|
|
||||||
<b-tab title="Balance" lazy>
|
|
||||||
<Balance />
|
|
||||||
</b-tab>
|
|
||||||
<b-tab title="Daily Stats" lazy>
|
|
||||||
<DailyStats />
|
|
||||||
</b-tab>
|
|
||||||
|
|
||||||
<b-tab title="Whitelist"> </b-tab>
|
|
||||||
</b-tabs>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="col-md-8">
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<TradeList
|
|
||||||
class="open-trades"
|
|
||||||
:trades="openTrades"
|
|
||||||
title="Open trades"
|
|
||||||
v-bind:activeTrades="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-12">
|
|
||||||
<TradeList class="trade-history" :trades="closedtrades" title="Trade history" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import { mapActions, mapState, mapGetters } from 'vuex';
|
|
||||||
|
|
||||||
import TradeList from './TradeList.vue';
|
|
||||||
import Performance from './Performance.vue';
|
|
||||||
import BotControls from './BotControls.vue';
|
|
||||||
import BotStatus from './BotStatus.vue';
|
|
||||||
import Balance from './Balance.vue';
|
|
||||||
import DailyStats from './DailyStats.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'TradeView',
|
|
||||||
components: { TradeList, Performance, BotControls, BotStatus, Balance, DailyStats },
|
|
||||||
created() {
|
|
||||||
this.refreshAll();
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
autoRefresh: true,
|
|
||||||
refresh_interval: null,
|
|
||||||
refresh_interval_slow: null,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
...mapState('ftbot', ['open_trades']),
|
|
||||||
...mapGetters('ftbot', ['openTrades', 'closedtrades']),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions(['refreshSlow', 'refreshFrequent', 'refreshAll']),
|
|
||||||
// ...mapActions('ftbot', ['getTrades', 'getProfit', 'getState']),
|
|
||||||
startRefresh() {
|
|
||||||
console.log(`Starting automatic refresh.`);
|
|
||||||
this.refreshFrequent();
|
|
||||||
this.refresh_interval = setInterval(() => {
|
|
||||||
this.refreshFrequent();
|
|
||||||
}, 5000);
|
|
||||||
this.refreshSlow();
|
|
||||||
this.refresh_interval_slow = setInterval(() => {
|
|
||||||
this.refreshSlow();
|
|
||||||
}, 60000);
|
|
||||||
},
|
|
||||||
stopRefresh() {
|
|
||||||
console.log(`Stopping automatic refresh.`);
|
|
||||||
clearInterval(this.refresh_interval);
|
|
||||||
clearInterval(this.refresh_interval_slow);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.startRefresh();
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.stopRefresh();
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
autoRefresh(val) {
|
|
||||||
if (val) {
|
|
||||||
this.startRefresh();
|
|
||||||
} else {
|
|
||||||
this.stopRefresh();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.open-trades {
|
|
||||||
max-height: 300px;
|
|
||||||
min-height: 250px;
|
|
||||||
}
|
|
||||||
.trade-history {
|
|
||||||
min-height: 300px;
|
|
||||||
max-height: 500px;
|
|
||||||
}
|
|
||||||
.performance-view {
|
|
||||||
max-height: 500px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -15,6 +15,7 @@ export default {
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
header {
|
header {
|
||||||
|
padding-bottom: 1em;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,77 +0,0 @@
|
||||||
<template>
|
|
||||||
<header class="bg-secondary">
|
|
||||||
<nav class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
|
|
||||||
<h3 class="text-white header-title">
|
|
||||||
<img class="logo" src="@/assets/freqtrade-logo.png" alt />
|
|
||||||
Freqtrade UI
|
|
||||||
</h3>
|
|
||||||
<ul class="navbar-nav mr-auto">
|
|
||||||
<li>
|
|
||||||
<router-link exact to="/" >Home</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/trade">Trade</router-link>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<router-link to="/about">About</router-link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<ul class="navbar-nav ">
|
|
||||||
<li class="nav-item" v-if="loggedIn">
|
|
||||||
<router-link to="/" v-on:click.native="logout()">Logout</router-link>
|
|
||||||
</li>
|
|
||||||
<li class="nav-item" v-else>
|
|
||||||
<!-- should open Modal window! -->
|
|
||||||
<Login />
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</header>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
|
|
||||||
import { mapActions, mapState } from 'vuex';
|
|
||||||
import Login from '@/views/Login.vue';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: "Header",
|
|
||||||
components: {Login},
|
|
||||||
computed: {
|
|
||||||
...mapState('user', ['loggedIn']),
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
...mapActions('user', ['logout']),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.logo {
|
|
||||||
vertical-align: middle;
|
|
||||||
height: 30px;
|
|
||||||
}
|
|
||||||
.header-title {
|
|
||||||
margin-right: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
#nav {
|
|
||||||
padding: 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 3px;
|
|
||||||
display: flex;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
margin-right: 15px;
|
|
||||||
}
|
|
||||||
.router-link-active {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
nav a {
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -16,7 +16,7 @@ Vue.use(VueRouter)
|
||||||
// route level code-splitting
|
// route level code-splitting
|
||||||
// this generates a separate chunk (about.[hash].js) for this route
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
// which is lazy-loaded when the route is visited.
|
// which is lazy-loaded when the route is visited.
|
||||||
component: () => import(/* webpackChunkName: "about" */ '@/components/ftbot/TradeView.vue')
|
component: () => import(/* webpackChunkName: "about" */ '@/views/Trade.vue')
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/about',
|
path: '/about',
|
||||||
|
|
|
||||||
|
|
@ -16,9 +16,13 @@
|
||||||
<b-tab title="Performance">
|
<b-tab title="Performance">
|
||||||
<Performance class="performance-view" />
|
<Performance class="performance-view" />
|
||||||
</b-tab>
|
</b-tab>
|
||||||
<b-tab title="Balance">
|
<b-tab title="Balance" lazy>
|
||||||
<Balance />
|
<Balance />
|
||||||
</b-tab>
|
</b-tab>
|
||||||
|
<b-tab title="Daily Stats" lazy>
|
||||||
|
<DailyStats />
|
||||||
|
</b-tab>
|
||||||
|
|
||||||
<b-tab title="Whitelist"> </b-tab>
|
<b-tab title="Whitelist"> </b-tab>
|
||||||
</b-tabs>
|
</b-tabs>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -49,15 +53,16 @@
|
||||||
<script>
|
<script>
|
||||||
import { mapActions, mapState, mapGetters } from 'vuex';
|
import { mapActions, mapState, mapGetters } from 'vuex';
|
||||||
|
|
||||||
import TradeList from './TradeList.vue';
|
import TradeList from '@/components/ftbot/TradeList.vue';
|
||||||
import Performance from './Performance.vue';
|
import Performance from '@/components/ftbot/Performance.vue';
|
||||||
import BotControls from './BotControls.vue';
|
import BotControls from '@/components/ftbot/BotControls.vue';
|
||||||
import BotStatus from './BotStatus.vue';
|
import BotStatus from '@/components/ftbot/BotStatus.vue';
|
||||||
import Balance from './Balance.vue';
|
import Balance from '@/components/ftbot/Balance.vue';
|
||||||
|
import DailyStats from '@/components/ftbot/DailyStats.vue';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Trade',
|
name: 'Trade',
|
||||||
components: { TradeList, Performance, BotControls, BotStatus, Balance },
|
components: { TradeList, Performance, BotControls, BotStatus, Balance, DailyStats },
|
||||||
created() {
|
created() {
|
||||||
this.refreshAll();
|
this.refreshAll();
|
||||||
},
|
},
|
||||||
|
|
@ -77,9 +82,11 @@ export default {
|
||||||
// ...mapActions('ftbot', ['getTrades', 'getProfit', 'getState']),
|
// ...mapActions('ftbot', ['getTrades', 'getProfit', 'getState']),
|
||||||
startRefresh() {
|
startRefresh() {
|
||||||
console.log(`Starting automatic refresh.`);
|
console.log(`Starting automatic refresh.`);
|
||||||
|
this.refreshFrequent();
|
||||||
this.refresh_interval = setInterval(() => {
|
this.refresh_interval = setInterval(() => {
|
||||||
this.refreshFrequent();
|
this.refreshFrequent();
|
||||||
}, 5000);
|
}, 5000);
|
||||||
|
this.refreshSlow();
|
||||||
this.refresh_interval_slow = setInterval(() => {
|
this.refresh_interval_slow = setInterval(() => {
|
||||||
this.refreshSlow();
|
this.refreshSlow();
|
||||||
}, 60000);
|
}, 60000);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user