more UI updates

src/components/chart/ChartOrder.vue

@@ -9,7 +9,9 @@
                     :label="order.amountIsTokenA ? 'Amount':('Value in '+co.selectedSymbol.quote.s)"
       >
         <template v-slot:prepend>
-          <v-btn :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s" variant="tonal" :color="color" @click="order.buy=!order.buy"/>
+          <v-btn variant="tonal" :color="color" class="ml-3"
+              :text="(order.buy ? 'Buy ' : 'Sell ') + co.selectedSymbol.base.s"
+              @click="order.buy=!order.buy"/>
         </template>
         <template v-slot:append-inner>
           <v-btn :text="order.amountIsTokenA?co.selectedSymbol.base.s:co.selectedSymbol.quote.s+' worth'"
@@ -29,14 +31,15 @@
         mdi-vector-polyline
         -->
       </div>
-      <div class="d-flex justify-start">
-        <v-btn variant="tonal" :color="color" class="ma-6">Place Order</v-btn>
-        <v-btn variant="text" class="ma-6">Cancel</v-btn>
-      </div>
     </div>
   </row-bar>
 </template>
 
+<script>
+import {newBuilder} from "@/orderbuild.js";
+const defaultMarketBuilder = newBuilder('MarketBuilder')
+</script>
+
 <script setup>
 
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
@@ -59,7 +62,7 @@ function build(order, component, options={}) {
 
 function builders(order) {
   let result = order.builders
-  return result.length > 0 ? result : [newBuilder('MarketBuilder')]
+  return result.length > 0 ? result : [defaultMarketBuilder]
 }
 
 const theme = useTheme().current

src/components/chart/ChartOrderPane.vue

@@ -1,6 +1,28 @@
 <template>
   <div class="d-flex flex-column h-100">
-    <toolbar/>
+  <div class="d-flex mb-1">
+    <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
+    <span class="logo">dexorder</span>
+    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
+    <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
+<!--    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>-->
+    <v-btn variant="tonal" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
+    <v-btn variant="text" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
+
+    <div class="w-100 d-flex justify-end">
+      <v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
+      <v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
+    </div>
+    <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>
   <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
     <div class="overflow-y-auto">
         <template v-for="o in co.orders">
@@ -12,14 +34,15 @@
 
 <script setup>
 import {useChartOrderStore} from "@/orderbuild.js";
-import Toolbar from "@/components/chart/Toolbar.vue";
 import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
-import {onBeforeUnmount} from "vue";
-import {useOrderStore} from "@/store/store.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";
 
+const s = useStore()
 const co = useChartOrderStore()
 const os = useOrderStore()
 
@@ -34,10 +57,27 @@ function changeSymbol(symbol) {
 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
+}
+
+function placeOrder() {
+
+}
+
 </script>
 
 <style lang="scss">
 body {
   overflow-y: hidden;
 }
+.arrow {
+  font-size: 22px;
+}
 </style>

src/components/chart/LimitBuilder.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- todo extract builder-panel --> <!-- :builder="builder" color-tag="limit" -->
-    <row-bar :color="builder.color" :data-ignore="autoAdjust">
+    <row-bar :color="builder.color">
       <color-band :color="builder.color"/>
       <div style="min-width: 3em; font-size: larger" :style="colorStyle"
            class="align-self-start ml-2 pt-3">{{ rungs === 1 ? 'Limit' : 'Ladder' }}</div>
@@ -60,7 +60,7 @@
 </template>
 
 <script setup>
-import {computed, onBeforeUnmount, onMounted} from "vue";
+import {computed, onBeforeUnmount, onMounted, watch} from "vue";
 import {chart} from "@/charts/chart.js";
 import {useChartOrderStore} from "@/orderbuild.js";
 import Color from "color";
@@ -75,10 +75,11 @@ const os = useOrderStore()
 const co = useChartOrderStore()
 const theme = useTheme().current
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 
 // Fields must be defined in order to be reactive
-builderDefaults(props.builder, {
+builderDefaults(props, emit, {
   allocation: 1.0,
   start: null, // todo
   end: null, // todo
@@ -344,7 +345,8 @@ function adjustShapes() {
 }
 
 
-const autoAdjust = computed(adjustShapes)
+watch(props.order, adjustShapes)
+// const autoAdjust = computed(adjustShapes)
 
 
 function deleteShapes() {

src/components/chart/MarketBuilder.vue

@@ -3,7 +3,7 @@
       <div class="bg-grey-lighten-1" style="width:1em">&nbsp;</div>
       <div style="min-width: 3em; font-size: larger" class="align-self-start ma-3">Market Order</div>
       <div>
-        <v-text-field type="number" v-model="props.builder.slippage"
+        <v-text-field type="number" v-model="builder.slippage"
                       density="compact" hide-details class="mx-1 my-2" variant="outlined"
                       label="Max Slippage" min="0" max="100" step="0.01"
                       style="width: 9em;"
@@ -19,12 +19,19 @@
 import {useChartOrderStore} from "@/orderbuild.js";
 import {builderDefaults} from "@/misc.js";
 import {useOrderStore} from "@/store/store.js";
+import {computed} from "vue";
 
 const co = useChartOrderStore()
 const props = defineProps(['order', 'builder'])
+const emit = defineEmits(['update:builder'])
 
 // Fields must be defined in order to be reactive
-builderDefaults(props.builder, {slippage: 0.10,})
+builderDefaults(props, emit, {slippage: 0.10,})
+const slippage = computed({
+  get() {console.log('slip',props.builder,props.builder.slippage); return props.builder.slippage},
+  set(v) {props.builder.slippage=v; emit('update:builder', props.builder)}
+})
+console.log('builder.slippage', props.builder.slippage)
 
 </script>
 

src/components/chart/Toolbar.vue

@@ -2,13 +2,25 @@
   <div class="d-flex mb-1">
     <span class="arrow align-self-start"><v-icon icon="mdi-arrow-up-bold" color="green"/></span>
     <span class="logo">dexorder</span>
-    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start" variant="text"/>
-    <v-btn variant="flat" prepend-icon="mdi-plus" @click="newOrder">New Order</v-btn>
+    <v-chip text="ALPHA" size='x-small' color="red" class="align-self-start pr-6" variant="text"/>
+    <v-btn variant="flat" prepend-icon="mdi-plus" @click="co.newOrder" v-if="co.orders.length===0">New Order</v-btn>
 <!--    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>-->
+    <v-btn variant="tonal" prepend-icon="mdi-send" :color="orderColor" v-if="co.orders.length>0">Place Order</v-btn>
+    <v-btn variant="text" prepend-icon="mdi-cancel" v-if="co.orders.length>0" @click="cancelOrder">Cancel</v-btn>
+
     <div class="w-100 d-flex justify-end">
       <v-btn variant="text" icon="mdi-safe-square" color="grey-darken-2" text="Vault" @click="$router.push('/vault')"></v-btn>
       <v-btn variant="text" icon="mdi-information-outline" text="Order Status" @click="$router.push('/orders')"></v-btn>
     </div>
+    <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>
 
 </template>
@@ -19,34 +31,26 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {chart, drawShape} from "@/charts/chart.js";
 import {timestamp} from "@/misc.js";
 import {ShapeType} from "@/charts/shape.js";
+import {computed, ref} from "vue";
+import {useTheme} from "vuetify";
 
 const s = useStore()
 const co = useChartOrderStore()
 
+const showCancel = ref(false)
 
-let shape = null
+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 newOrder() {
-  co.newOrder()
+function cancelOrder() {
+  showCancel.value = true
 }
 
 
-function confirmDiscard() {
-  // todo show dialog
+function placeOrder() {
+
 }
 
-
-function test() {
-  const testCb = {
-    onCreate(shapeId) {shape=shapeId},
-  }
-  if( shape === null ) {
-    drawShape(ShapeType.HLine, testCb)
-
-  }
-}
-
-
 </script>
 
 <style scoped lang="scss">