Add UI for cancel open order

This commit is contained in:
Matthias 2023-01-31 07:11:34 +01:00
parent 5ecdce8494
commit 3e59cd8100
4 changed files with 69 additions and 24 deletions

View File

@ -36,6 +36,15 @@
>
<ForceSellIcon :size="16" title="Forceexit partial" class="me-1" />Forceexit partial
</b-button>
<b-button
v-if="botApiVersion >= 2.24 && trade.open_order_id"
class="btn-xs text-start mt-1"
size="sm"
title="Cancel open orders"
@click="$emit('cancelOpenOrder', trade)"
>
<CancelIcon :size="16" title="Cancel open order" class="me-1" />Cancel open order
</b-button>
<b-button
class="btn-xs text-start mt-1"
@ -53,6 +62,7 @@
import { Trade } from '@/types';
import DeleteIcon from 'vue-material-design-icons/Delete.vue';
import ForceSellIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
import CancelIcon from 'vue-material-design-icons/Cancel.vue';
defineProps({
botApiVersion: {
@ -64,7 +74,7 @@ defineProps({
required: true,
},
});
defineEmits(['forceExit', 'forceExitPartial', 'deleteTrade']);
defineEmits(['forceExit', 'forceExitPartial', 'cancelOpenOrder', 'deleteTrade']);
</script>
<style scoped lang="scss"></style>

View File

@ -42,6 +42,7 @@
@deleteTrade="removeTradeHandler"
@forceExit="forceExitHandler"
@forceExitPartial="forceExitPartialHandler"
@cancel-open-order="cancelOpenOrderHandler"
/>
</b-popover>
</template>
@ -90,12 +91,7 @@
/>
</div>
<force-exit-form v-if="activeTrades" v-model="forceExitVisible" :trade="feTrade" />
<b-modal
ref="removeTradeModal"
v-model="removeTradeVisible"
title="Exit trade"
@ok="forceExitExecuter"
>
<b-modal v-model="removeTradeVisible" title="Exit trade" @ok="forceExitExecuter">
{{ confirmExitText }}
</b-modal>
</div>
@ -114,6 +110,13 @@ import ForceExitForm from '@/components/ftbot/ForceExitForm.vue';
import { ref, computed, watch } from 'vue';
import { useBotStore } from '@/stores/ftbotwrapper';
enum ModalReasons {
removeTrade,
forceExit,
forceExitPartial,
cancelOpenOrder,
}
const props = defineProps({
trades: { required: true, type: Array as () => Array<Trade> },
title: { default: 'Trades', type: String },
@ -133,7 +136,7 @@ const tradesTable = ref<HTMLFormElement>();
const forceExitVisible = ref(false);
const removeTradeVisible = ref(false);
const confirmExitText = ref('');
const removeTradeModal = ref<HTMLElement>();
const confirmExitValue = ref<ModalReasons | null>(null);
const openFields: Record<string, string | Function>[] = [{ key: 'actions' }];
const closedFields: Record<string, string | Function>[] = [
@ -180,41 +183,48 @@ const tableFields: Record<string, string | Function>[] = [
const feOrderType = ref<string | undefined>(undefined);
const forceExitHandler = (item: Trade, ordertype: string | undefined = undefined) => {
feTrade.value = item;
confirmExitValue.value = ModalReasons.forceExit;
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')) {
if (confirmExitValue.value === ModalReasons.removeTrade) {
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);
if (confirmExitValue.value === ModalReasons.forceExit) {
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));
}
if (confirmExitValue.value === ModalReasons.cancelOpenOrder) {
const payload: MultiDeletePayload = {
tradeid: String(feTrade.value.trade_id),
botId: feTrade.value.botId,
};
botStore.cancelOpenOrderMulti(payload);
}
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})?`;
confirmExitValue.value = ModalReasons.removeTrade;
feTrade.value = item;
removeTradeVisible.value = true;
};
@ -224,6 +234,13 @@ const forceExitPartialHandler = (item: Trade) => {
forceExitVisible.value = true;
};
const cancelOpenOrderHandler = (item: Trade) => {
confirmExitText.value = `Cancel open order for trade ${item.trade_id} (Pair ${item.pair})?`;
feTrade.value = item;
confirmExitValue.value = ModalReasons.cancelOpenOrder;
removeTradeVisible.value = true;
};
const handleContextMenuEvent = (item, index, event) => {
// stop browser context menu from appearing
if (!props.activeTrades) {

View File

@ -616,6 +616,21 @@ export function createBotSubStore(botId: string, botName: string) {
return Promise.reject(error);
}
},
async cancelOpenOrder(tradeid: string) {
try {
const res = await api.delete<DeleteTradeResponse>(`/trades/${tradeid}/open-order`);
showAlert(
res.data.result_msg ? res.data.result_msg : `Canceled open order for ${tradeid}`,
);
return Promise.resolve(res);
} catch (error) {
if (axios.isAxiosError(error)) {
console.error(error.response);
}
showAlert(`Failed to cancel open order ${tradeid}`, 'danger');
return Promise.reject(error);
}
},
async startTrade() {
try {
const res = await api.post('/start_trade', {});

View File

@ -324,6 +324,9 @@ export const useBotStore = defineStore('wrapper', {
async deleteTradeMulti(deletePayload: MultiDeletePayload) {
return this.botStores[deletePayload.botId].deleteTrade(deletePayload.tradeid);
},
async cancelOpenOrderMulti(deletePayload: MultiDeletePayload) {
return this.botStores[deletePayload.botId].cancelOpenOrder(deletePayload.tradeid);
},
},
});