98 lines
2.9 KiB
Vue
98 lines
2.9 KiB
Vue
<template>
|
|
<div class="d-flex flex-column h-100">
|
|
<toolbar>
|
|
<v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
|
|
<v-btn variant="text" prepend-icon="mdi-send" @click="placeOrder"
|
|
:color="orderColor" v-if="co.orders.length>0" :disabled="co.drawing">
|
|
Place Order
|
|
</v-btn>
|
|
<v-btn variant="flat" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
|
|
</toolbar>
|
|
<v-dialog v-model="showCancel" max-width="300">
|
|
<v-card title="Cancel Order?" text="Do you want to cancel this order and create a new one?">
|
|
<v-card-actions>
|
|
<v-spacer/>
|
|
<v-btn @click="()=>showCancel=false">Keep Existing</v-btn>
|
|
<v-btn @click="()=>{co.orders.shift(); showCancel=false}" color="red">Cancel Order</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
<!-- <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
|
|
<div class="overflow-y-auto">
|
|
<template v-for="o in co.orders">
|
|
<chart-order :order="o"/>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {builderFuncs, orderFuncs, useChartOrderStore} from "@/orderbuild.js";
|
|
import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
|
|
import {computed, onBeforeUnmount, ref} from "vue";
|
|
import {useOrderStore, useStore} from "@/store/store.js";
|
|
|
|
import {routeFinder} from "@/blockchain/route.js";
|
|
import ChartOrder from "@/components/chart/ChartOrder.vue";
|
|
import {useTheme} from "vuetify";
|
|
import Toolbar from "@/components/chart/Toolbar.vue";
|
|
import {Exchange, newOrder} from "@/blockchain/orderlib.js";
|
|
import {pendOrder} from "@/blockchain/wallet.js";
|
|
|
|
const s = useStore()
|
|
const co = useChartOrderStore()
|
|
const os = useOrderStore()
|
|
|
|
function changeSymbol(symbol) {
|
|
console.log('changeSymbol', symbol)
|
|
os.tokenA = symbol.base
|
|
os.tokenB = symbol.quote
|
|
routeFinder.invoke()
|
|
}
|
|
|
|
|
|
addSymbolChangedCallback(changeSymbol)
|
|
onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
|
|
|
|
|
|
const showCancel = ref(false)
|
|
|
|
const theme = useTheme().current
|
|
const orderColor = computed(()=>co.orders.length===0?null : co.orders[0].buy ? theme.value.colors.success:theme.value.colors.error)
|
|
|
|
function cancelOrder() {
|
|
showCancel.value = true
|
|
}
|
|
|
|
|
|
async function placeOrder() {
|
|
const co = useChartOrderStore();
|
|
const chartOrders = co.orders;
|
|
const built = []
|
|
for (const chartOrder of chartOrders) {
|
|
console.log('chartOrder', chartOrder)
|
|
const buildOrder = orderFuncs[chartOrder.id]
|
|
const order = buildOrder()
|
|
built.push(order)
|
|
}
|
|
co.built = built
|
|
console.log('place orders', built)
|
|
if (built.length !== 1) {
|
|
console.error('Multiple orders not supported')
|
|
}
|
|
else {
|
|
await pendOrder(built[0])
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
body {
|
|
overflow-y: hidden;
|
|
}
|
|
.arrow {
|
|
font-size: 22px;
|
|
}
|
|
</style>
|