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

composition: customTradeList

Browse Source
This commit is contained in:
Matthias 2022-04-16 14:16:22 +02:00
parent e79409e35f
commit ab7ce0328b
1 changed files with 89 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

205
src/components/ftbot/CustomTradeList.vue
View File

@ -34,136 +34,109 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'; import { formatPrice } from '@/shared/formatters';
import { namespace } from 'vuex-class';
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { formatPercent, formatPrice } from '@/shared/formatters';
import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types'; import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
import DeleteIcon from 'vue-material-design-icons/Delete.vue';
import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
import ActionIcon from 'vue-material-design-icons/GestureTap.vue';
import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
import StoreModules from '@/store/storeSubModules'; import StoreModules from '@/store/storeSubModules';
import CustomTradeListEntry from '@/components/ftbot/CustomTradeListEntry.vue'; import CustomTradeListEntry from '@/components/ftbot/CustomTradeListEntry.vue';
import TradeProfit from './TradeProfit.vue'; import { defineComponent, computed, ref } from '@vue/composition-api';
import { useNamespacedActions } from 'vuex-composition-helpers';
const ftbot = namespace(StoreModules.ftbot); export default defineComponent({
name: 'CustomTradeList',
@Component({
components: { components: {
DeleteIcon,
ForceSellIcon,
ActionIcon,
DateTimeTZ,
TradeProfit,
CustomTradeListEntry, CustomTradeListEntry,
}, },
}) props: {
export default class CustomTradeList extends Vue { trades: { required: true, type: Array as () => Trade[] },
$refs!: { title: { default: 'Trades', type: String },
tradesTable: HTMLFormElement; stakeCurrency: { required: false, default: '', type: String },
}; activeTrades: { default: false, type: Boolean },
showFilter: { default: false, type: Boolean },
formatPercent = formatPercent; multiBotView: { default: false, type: Boolean },
emptyText: { default: 'No Trades to show.', type: String },
formatPrice = formatPrice; stakeCurrencyDecimals: { default: 3, type: Number },
},
@Prop({ required: true }) trades!: Array<Trade>; setup(props, { root }) {
const { setDetailTrade, forceSellMulti, deleteTradeMulti } = useNamespacedActions(
@Prop({ default: 'Trades' }) title!: string; StoreModules.ftbot,
['setDetailTrade', 'forceSellMulti', 'deleteTradeMulti'],
@Prop({ required: false, default: '' }) stakeCurrency!: string;
@Prop({ default: false }) activeTrades!: boolean;
@Prop({ default: false }) showFilter!: boolean;
@Prop({ default: false, type: Boolean }) multiBotView!: boolean;
@Prop({ default: 'No Trades to show.' }) emptyText!: string;
@Prop({ default: 3, type: Number }) stakeCurrencyDecimals!: number;
@ftbot.Action setDetailTrade;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ftbot.Action forceSellMulti!: (payload: MultiForcesellPayload) => Promise<string>;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
@ftbot.Action deleteTradeMulti!: (payload: MultiDeletePayload) => Promise<string>;
currentPage = 1;
selectedItemIndex? = undefined;
filterText = '';
get rows(): number {
return this.trades.length;
}
perPage = this.activeTrades ? 200 : 25;
get filteredTrades() {
return this.trades.slice(
(this.currentPage - 1) * this.perPage,
this.currentPage * this.perPage,
); );
} const currentPage = ref(1);
const filterText = ref('');
const perPage = props.activeTrades ? 200 : 25;
formatPriceWithDecimals(price) { const rows = computed(() => props.trades.length);
return formatPrice(price, this.stakeCurrencyDecimals);
}
forcesellHandler(item: Trade, ordertype: string | undefined = undefined) { const filteredTrades = computed(() => {
this.$bvModal return props.trades.slice((currentPage.value - 1) * perPage, currentPage.value * perPage);
.msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`) });
.then((value: boolean) => { const formatPriceWithDecimals = (price) => {
if (value) { return formatPrice(price, props.stakeCurrencyDecimals);
const payload: MultiForcesellPayload = { };
tradeid: String(item.trade_id), const forcesellHandler = (item: Trade, ordertype: string | undefined = undefined) => {
botId: item.botId, root.$bvModal
}; .msgBoxConfirm(`Really forcesell trade ${item.trade_id} (Pair ${item.pair})?`)
if (ordertype) { .then((value: boolean) => {
payload.ordertype = ordertype; if (value) {
const payload: MultiForcesellPayload = {
tradeid: String(item.trade_id),
botId: item.botId,
};
if (ordertype) {
payload.ordertype = ordertype;
}
forceSellMulti(payload)
.then((xxx) => console.log(xxx))
.catch((error) => console.log(error.response));
} }
this.forceSellMulti(payload) });
.then((xxx) => console.log(xxx)) };
.catch((error) => console.log(error.response));
}
});
}
handleContextMenuEvent(item, index, event) { const handleContextMenuEvent = (item, index, event) => {
// stop browser context menu from appearing // stop browser context menu from appearing
if (!this.activeTrades) { if (!props.activeTrades) {
return; return;
} }
event.preventDefault(); event.preventDefault();
// log the selected item to the console // log the selected item to the console
console.log(item); console.log(item);
} };
removeTradeHandler(item) { const removeTradeHandler = (item) => {
console.log(item); console.log(item);
this.$bvModal root.$bvModal
.msgBoxConfirm(`Really delete trade ${item.trade_id} (Pair ${item.pair})?`) .msgBoxConfirm(`Really delete trade ${item.trade_id} (Pair ${item.pair})?`)
.then((value: boolean) => { .then((value: boolean) => {
if (value) { if (value) {
const payload: MultiDeletePayload = { const payload: MultiDeletePayload = {
tradeid: String(item.trade_id), tradeid: String(item.trade_id),
botId: item.botId, botId: item.botId,
}; };
this.deleteTradeMulti(payload).catch((error) => console.log(error.response)); deleteTradeMulti(payload).catch((error) => console.log(error.response));
} }
}); });
} };
const tradeClick = (trade) => {
setDetailTrade(trade);
};
tradeClick(trade) { return {
this.setDetailTrade(trade); currentPage,
} filterText,
} perPage,
filteredTrades,
formatPriceWithDecimals,
forcesellHandler,
handleContextMenuEvent,
removeTradeHandler,
tradeClick,
setDetailTrade,
forceSellMulti,
deleteTradeMulti,
rows,
};
},
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>