mirror of
https://github.com/freqtrade/frequi.git
synced 2024-11-25 20:45:15 +00:00
TradeList to script setup
This commit is contained in:
Matthias
parent
33e988798b
commit
5ecdce8494
|
|
@ -101,7 +101,7 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
import { formatPercent, formatPrice } from '@/shared/formatters';
|
import { formatPercent, formatPrice } from '@/shared/formatters';
|
||||||
import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
|
import { MultiDeletePayload, MultiForcesellPayload, Trade } from '@/types';
|
||||||
|
|
@ -111,191 +111,162 @@ import TradeProfit from './TradeProfit.vue';
|
||||||
import TradeActions from './TradeActions.vue';
|
import TradeActions from './TradeActions.vue';
|
||||||
import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
|
import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
|
||||||
|
|
||||||
import { defineComponent, ref, computed, watch } from 'vue';
|
import { ref, computed, watch } from 'vue';
|
||||||
import { useBotStore } from '@/stores/ftbotwrapper';
|
import { useBotStore } from '@/stores/ftbotwrapper';
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'TradeList',
|
trades: { required: true, type: Array as () => Array<Trade> },
|
||||||
components: { ActionIcon, DateTimeTZ, TradeProfit, TradeActions, ForceExitForm },
|
title: { default: 'Trades', type: String },
|
||||||
props: {
|
stakeCurrency: { required: false, default: '', type: String },
|
||||||
trades: { required: true, type: Array as () => Array<Trade> },
|
activeTrades: { default: false, type: Boolean },
|
||||||
title: { default: 'Trades', type: String },
|
showFilter: { default: false, type: Boolean },
|
||||||
stakeCurrency: { required: false, default: '', type: String },
|
multiBotView: { default: false, type: Boolean },
|
||||||
activeTrades: { default: false, type: Boolean },
|
emptyText: { default: 'No Trades to show.', type: String },
|
||||||
showFilter: { default: false, type: Boolean },
|
|
||||||
multiBotView: { default: false, type: Boolean },
|
|
||||||
emptyText: { default: 'No Trades to show.', type: String },
|
|
||||||
},
|
|
||||||
setup(props) {
|
|
||||||
const botStore = useBotStore();
|
|
||||||
const currentPage = ref(1);
|
|
||||||
const selectedItemIndex = ref();
|
|
||||||
const filterText = ref('');
|
|
||||||
const feTrade = ref<Trade>({} as Trade);
|
|
||||||
const perPage = props.activeTrades ? 200 : 15;
|
|
||||||
const tradesTable = ref<HTMLFormElement>();
|
|
||||||
const forceExitVisible = ref(false);
|
|
||||||
const removeTradeVisible = ref(false);
|
|
||||||
const confirmExitText = ref('');
|
|
||||||
const removeTradeModal = ref<HTMLElement>();
|
|
||||||
|
|
||||||
const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
|
|
||||||
const closedFields: Record<string, string | Function>[] = [
|
|
||||||
{ key: 'close_timestamp', label: 'Close date' },
|
|
||||||
{ key: 'exit_reason', label: 'Close Reason' },
|
|
||||||
];
|
|
||||||
const formatPriceWithDecimals = (price) => {
|
|
||||||
return formatPrice(price, botStore.activeBot.stakeCurrencyDecimals);
|
|
||||||
};
|
|
||||||
const rows = computed(() => {
|
|
||||||
return props.trades.length;
|
|
||||||
});
|
|
||||||
const tableFields: Record<string, string | Function>[] = [
|
|
||||||
props.multiBotView ? { key: 'botName', label: 'Bot' } : {},
|
|
||||||
{ key: 'trade_id', label: 'ID' },
|
|
||||||
{ key: 'pair', label: 'Pair' },
|
|
||||||
{ key: 'amount', label: 'Amount' },
|
|
||||||
{
|
|
||||||
key: 'stake_amount',
|
|
||||||
label: 'Stake amount',
|
|
||||||
formatter: (value: number) => formatPriceWithDecimals(value),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'open_rate',
|
|
||||||
label: 'Open rate',
|
|
||||||
formatter: (value: number) => formatPrice(value),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: props.activeTrades ? 'current_rate' : 'close_rate',
|
|
||||||
label: props.activeTrades ? 'Current rate' : 'Close rate',
|
|
||||||
formatter: (value: number) => formatPrice(value),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
key: 'profit',
|
|
||||||
label: props.activeTrades ? 'Current profit %' : 'Profit %',
|
|
||||||
formatter: (value: number, key, item: Trade) => {
|
|
||||||
const percent = formatPercent(item.profit_ratio, 2);
|
|
||||||
return `${percent} ${`(${formatPriceWithDecimals(item.profit_abs)})`}`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{ key: 'open_timestamp', label: 'Open date' },
|
|
||||||
...(props.activeTrades ? openFields : closedFields),
|
|
||||||
];
|
|
||||||
const feOrderType = ref<string | undefined>(undefined);
|
|
||||||
const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
|
|
||||||
feTrade.value = item;
|
|
||||||
confirmExitText.value = `Really exit trade ${item.trade_id} (Pair ${item.pair}) using ${ordertype} Order?`;
|
|
||||||
removeTradeVisible.value = true;
|
|
||||||
feOrderType.value = ordertype;
|
|
||||||
};
|
|
||||||
|
|
||||||
const forceExitExecuter = () => {
|
|
||||||
// TODO: this should be done properly.
|
|
||||||
if (confirmExitText.value.includes('delete')) {
|
|
||||||
const payload: MultiDeletePayload = {
|
|
||||||
tradeid: String(feTrade.value.trade_id),
|
|
||||||
botId: feTrade.value.botId,
|
|
||||||
};
|
|
||||||
botStore.deleteTradeMulti(payload).catch((error) => console.log(error.response));
|
|
||||||
removeTradeVisible.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
console.log(confirmExitText.value);
|
|
||||||
|
|
||||||
const payload: MultiForcesellPayload = {
|
|
||||||
tradeid: String(feTrade.value.trade_id),
|
|
||||||
botId: feTrade.value.botId,
|
|
||||||
};
|
|
||||||
if (feOrderType.value) {
|
|
||||||
payload.ordertype = feOrderType.value;
|
|
||||||
}
|
|
||||||
botStore
|
|
||||||
.forceSellMulti(payload)
|
|
||||||
.then((xxx) => console.log(xxx))
|
|
||||||
.catch((error) => console.log(error.response));
|
|
||||||
feOrderType.value = undefined;
|
|
||||||
removeTradeVisible.value = false;
|
|
||||||
};
|
|
||||||
|
|
||||||
const removeTradeHandler = (item: Trade) => {
|
|
||||||
confirmExitText.value = `Really delete trade ${item.trade_id} (Pair ${item.pair})?`;
|
|
||||||
feTrade.value = item;
|
|
||||||
removeTradeVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const forceExitPartialHandler = (item: Trade) => {
|
|
||||||
feTrade.value = item;
|
|
||||||
forceExitVisible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleContextMenuEvent = (item, index, event) => {
|
|
||||||
// stop browser context menu from appearing
|
|
||||||
if (!props.activeTrades) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
event.preventDefault();
|
|
||||||
// log the selected item to the console
|
|
||||||
console.log(item);
|
|
||||||
};
|
|
||||||
|
|
||||||
const onRowClicked = (item) => {
|
|
||||||
// Only allow single selection mode!
|
|
||||||
if (item && item.trade_id !== botStore.activeBot.detailTradeId) {
|
|
||||||
botStore.activeBot.setDetailTrade(item);
|
|
||||||
} else {
|
|
||||||
botStore.activeBot.setDetailTrade(null);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const onRowSelected = () => {
|
|
||||||
if (botStore.activeBot.detailTradeId) {
|
|
||||||
const itemIndex = props.trades.findIndex(
|
|
||||||
(v) => v.trade_id === botStore.activeBot.detailTradeId,
|
|
||||||
);
|
|
||||||
if (itemIndex >= 0) {
|
|
||||||
tradesTable.value?.selectRow(itemIndex);
|
|
||||||
} else {
|
|
||||||
console.log(`Unsetting item for tradeid ${selectedItemIndex.value}`);
|
|
||||||
selectedItemIndex.value = undefined;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => botStore.activeBot.detailTradeId,
|
|
||||||
(val) => {
|
|
||||||
const index = props.trades.findIndex((v) => v.trade_id === val);
|
|
||||||
// Unselect when another tradeTable is selected!
|
|
||||||
if (index < 0) {
|
|
||||||
tradesTable.value?.clearSelected();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
return {
|
|
||||||
botStore,
|
|
||||||
currentPage,
|
|
||||||
selectedItemIndex,
|
|
||||||
filterText,
|
|
||||||
perPage,
|
|
||||||
tableFields,
|
|
||||||
rows,
|
|
||||||
tradesTable,
|
|
||||||
forceExitHandler,
|
|
||||||
forceExitPartialHandler,
|
|
||||||
handleContextMenuEvent,
|
|
||||||
removeTradeHandler,
|
|
||||||
onRowClicked,
|
|
||||||
onRowSelected,
|
|
||||||
feTrade,
|
|
||||||
forceExitVisible,
|
|
||||||
removeTradeVisible,
|
|
||||||
confirmExitText,
|
|
||||||
removeTradeModal,
|
|
||||||
forceExitExecuter,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
});
|
||||||
|
const botStore = useBotStore();
|
||||||
|
const currentPage = ref(1);
|
||||||
|
const selectedItemIndex = ref();
|
||||||
|
const filterText = ref('');
|
||||||
|
const feTrade = ref<Trade>({} as Trade);
|
||||||
|
const perPage = props.activeTrades ? 200 : 15;
|
||||||
|
const tradesTable = ref<HTMLFormElement>();
|
||||||
|
const forceExitVisible = ref(false);
|
||||||
|
const removeTradeVisible = ref(false);
|
||||||
|
const confirmExitText = ref('');
|
||||||
|
const removeTradeModal = ref<HTMLElement>();
|
||||||
|
|
||||||
|
const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
|
||||||
|
const closedFields: Record<string, string | Function>[] = [
|
||||||
|
{ key: 'close_timestamp', label: 'Close date' },
|
||||||
|
{ key: 'exit_reason', label: 'Close Reason' },
|
||||||
|
];
|
||||||
|
const formatPriceWithDecimals = (price) => {
|
||||||
|
return formatPrice(price, botStore.activeBot.stakeCurrencyDecimals);
|
||||||
|
};
|
||||||
|
const rows = computed(() => {
|
||||||
|
return props.trades.length;
|
||||||
|
});
|
||||||
|
const tableFields: Record<string, string | Function>[] = [
|
||||||
|
props.multiBotView ? { key: 'botName', label: 'Bot' } : {},
|
||||||
|
{ key: 'trade_id', label: 'ID' },
|
||||||
|
{ key: 'pair', label: 'Pair' },
|
||||||
|
{ key: 'amount', label: 'Amount' },
|
||||||
|
{
|
||||||
|
key: 'stake_amount',
|
||||||
|
label: 'Stake amount',
|
||||||
|
formatter: (value: number) => formatPriceWithDecimals(value),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'open_rate',
|
||||||
|
label: 'Open rate',
|
||||||
|
formatter: (value: number) => formatPrice(value),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: props.activeTrades ? 'current_rate' : 'close_rate',
|
||||||
|
label: props.activeTrades ? 'Current rate' : 'Close rate',
|
||||||
|
formatter: (value: number) => formatPrice(value),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: 'profit',
|
||||||
|
label: props.activeTrades ? 'Current profit %' : 'Profit %',
|
||||||
|
formatter: (value: number, key, item: Trade) => {
|
||||||
|
const percent = formatPercent(item.profit_ratio, 2);
|
||||||
|
return `${percent} ${`(${formatPriceWithDecimals(item.profit_abs)})`}`;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ key: 'open_timestamp', label: 'Open date' },
|
||||||
|
...(props.activeTrades ? openFields : closedFields),
|
||||||
|
];
|
||||||
|
const feOrderType = ref<string | undefined>(undefined);
|
||||||
|
const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
|
||||||
|
feTrade.value = item;
|
||||||
|
confirmExitText.value = `Really exit trade ${item.trade_id} (Pair ${item.pair}) using ${ordertype} Order?`;
|
||||||
|
removeTradeVisible.value = true;
|
||||||
|
feOrderType.value = ordertype;
|
||||||
|
};
|
||||||
|
|
||||||
|
const forceExitExecuter = () => {
|
||||||
|
// TODO: this should be done properly.
|
||||||
|
if (confirmExitText.value.includes('delete')) {
|
||||||
|
const payload: MultiDeletePayload = {
|
||||||
|
tradeid: String(feTrade.value.trade_id),
|
||||||
|
botId: feTrade.value.botId,
|
||||||
|
};
|
||||||
|
botStore.deleteTradeMulti(payload).catch((error) => console.log(error.response));
|
||||||
|
removeTradeVisible.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
console.log(confirmExitText.value);
|
||||||
|
|
||||||
|
const payload: MultiForcesellPayload = {
|
||||||
|
tradeid: String(feTrade.value.trade_id),
|
||||||
|
botId: feTrade.value.botId,
|
||||||
|
};
|
||||||
|
if (feOrderType.value) {
|
||||||
|
payload.ordertype = feOrderType.value;
|
||||||
|
}
|
||||||
|
botStore
|
||||||
|
.forceSellMulti(payload)
|
||||||
|
.then((xxx) => console.log(xxx))
|
||||||
|
.catch((error) => console.log(error.response));
|
||||||
|
feOrderType.value = undefined;
|
||||||
|
removeTradeVisible.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeTradeHandler = (item: Trade) => {
|
||||||
|
confirmExitText.value = `Really delete trade ${item.trade_id} (Pair ${item.pair})?`;
|
||||||
|
feTrade.value = item;
|
||||||
|
removeTradeVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const forceExitPartialHandler = (item: Trade) => {
|
||||||
|
feTrade.value = item;
|
||||||
|
forceExitVisible.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleContextMenuEvent = (item, index, event) => {
|
||||||
|
// stop browser context menu from appearing
|
||||||
|
if (!props.activeTrades) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
// log the selected item to the console
|
||||||
|
console.log(item);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onRowClicked = (item) => {
|
||||||
|
// Only allow single selection mode!
|
||||||
|
if (item && item.trade_id !== botStore.activeBot.detailTradeId) {
|
||||||
|
botStore.activeBot.setDetailTrade(item);
|
||||||
|
} else {
|
||||||
|
botStore.activeBot.setDetailTrade(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onRowSelected = () => {
|
||||||
|
if (botStore.activeBot.detailTradeId) {
|
||||||
|
const itemIndex = props.trades.findIndex(
|
||||||
|
(v) => v.trade_id === botStore.activeBot.detailTradeId,
|
||||||
|
);
|
||||||
|
if (itemIndex >= 0) {
|
||||||
|
tradesTable.value?.selectRow(itemIndex);
|
||||||
|
} else {
|
||||||
|
console.log(`Unsetting item for tradeid ${selectedItemIndex.value}`);
|
||||||
|
selectedItemIndex.value = undefined;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => botStore.activeBot.detailTradeId,
|
||||||
|
(val) => {
|
||||||
|
const index = props.trades.findIndex((v) => v.trade_id === val);
|
||||||
|
// Unselect when another tradeTable is selected!
|
||||||
|
if (index < 0) {
|
||||||
|
tradesTable.value?.clearSelected();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user