more UI updates

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">