intermediate checkin during chart order form work

src/components/chart/BuilderFactory.vue

@@ -6,19 +6,19 @@
 import {computed} from "vue";
 import DCABuilder from "@/components/chart/DCABuilder.vue";
 import LimitBuilder from "@/components/chart/LimitBuilder.vue";
-import Test from "@/components/chart/Test.vue";
+import MarketBuilder from "@/components/chart/MarketBuilder.vue";
 
 const props = defineProps(['builder'])
 
 const component = computed(()=>{
   console.log('builder component', props.builder)
   switch (props.builder.component) {
+    case 'MarketBuilder':
+      return MarketBuilder
     case 'DCABuilder':
       return DCABuilder
     case 'LimitBuilder':
       return LimitBuilder
-    case 'Test':
-      return Test
     default:
       console.error('Unknown builder component '+props.builder.component)
       return null

src/components/chart/ChartOrder.vue

@@ -1,43 +1,77 @@
 <template>
-  <div class="d-flex flex-column h-100">
-    <toolbar/>
-  <!--    <div v-for="b in co.builderList">{{JSON.stringify(b)}}</div>-->
-    <div class="overflow-y-auto">
-        <template v-for="b in co.builderList">
-          <builder-factory :builder="b"/>
+  <v-sheet dense class="d-flex align-content-stretch" style="overflow-y: hidden">
+    <div :style="lightColorStyle" style="width:0.5em">&nbsp;</div>
+    <div :style="faintColorStyle" style="width: 100%" class="justify-start align-content-start">
+      <v-text-field type="number" v-model="os.amount" min="0" step="1" variant="outlined" density="compact" hide-details
+                    style="max-width:24em; display: inline-grid"
+                    class="pb-2"
+                    :color="color"
+      >
+        <template v-slot:prepend>
+          <v-btn :text="(os.buy ? 'Buy ' : 'Sell ') + os.base.s" variant="text" :color="color" @click="os.buy=!os.buy"/>
         </template>
+        <template v-slot:append>
+          <v-btn :text="os.amountToken.s+(os.amountIsTokenA?'':' worth')" :color="color" variant="text" @click="os.amountIsTokenA=!os.amountIsTokenA"/>
+        </template>
+      </v-text-field>
+      <template v-for="b in builders(order)">
+        <builder-factory :builder="b" :color="faintColor"/>
+        <div>
+          <span class="ma-3">Add condition:</span>
+          <!--    <v-btn variant="flat" prepend-icon="mdi-clock-outline" @click="build('DCABuilder')">DCA</v-btn>-->
+          <v-btn :color="color" variant="text" prepend-icon="mdi-ray-vertex" @click="build(order,'LimitBuilder')">Limit</v-btn>
+      <!--    <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
+          <!--
+          mdi-ray-start-end
+          mdi-vector-polyline
+          -->
+        </div>
+      </template>
     </div>
-  </div>
+  </v-sheet>
 </template>
 
 <script setup>
-import {useChartOrderStore} from "@/orderbuild.js";
-import Toolbar from "@/components/chart/Toolbar.vue";
+
 import BuilderFactory from "@/components/chart/BuilderFactory.vue";
-import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
-import {onBeforeUnmount} from "vue";
+import {newBuilder, useChartOrderStore} from "@/orderbuild.js";
 import {useOrderStore} from "@/store/store.js";
+import {computed} from "vue";
+import Color from "color";
 
-import {routeFinder} from "@/blockchain/route.js";
-
+const props = defineProps(['order'])
 const co = useChartOrderStore()
 const os = useOrderStore()
 
-function changeSymbol(symbol) {
-  console.log('changeSymbol', symbol)
-  os.tokenA = symbol.base
-  os.tokenB = symbol.quote
-  routeFinder.invoke()
+function build(order, component, options={}) {
+  order.builders.push(newBuilder(component, options))
 }
 
+function builders(order) {
+  let result = order.builders
+  console.log('builders', result)
+  return result.length > 0 ? result : [newBuilder('MarketBuilder')]
+}
+
+const color = computed(()=>os.buy?'green':'red')
+const lightColor = computed(() => new Color(color.value).hsl().lightness(85).string())
+const faintColor = computed(() => new Color(color.value).hsl().lightness(97).string())
+const colorStyle = computed(() => { return {'background-color': color.value} })
+const lightColorStyle = computed(() => { return {'background-color': lightColor.value} })
+const faintColorStyle = computed(() => { return {'background-color': faintColor.value} })
+
+const inToken = computed( ()=>os.buy ? os.tokenB : os.tokenA )
+const maxAmount = computed(()=>{
+  const balance = s.balances[inToken]
+  if( !balance )
+    return 0
+  const divisor = os.amountIsTotal ? 1 : os.tranches
+  return balance / 10**inToken.value.d / divisor
+})
 
-const oldSymbolChanged = addSymbolChangedCallback(changeSymbol)
-onBeforeUnmount(() => removeSymbolChangedCallback(changeSymbol) )
 
 </script>
 
-<style lang="scss">
-body {
-  overflow-y: hidden;
-}
-</style>
+<style scoped lang="scss">
+
+</style>

src/components/chart/ChartOrderPane.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="d-flex flex-column h-100">
+    <toolbar/>
+  <!--    <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 {useChartOrderStore} from "@/orderbuild.js";
+import Toolbar from "@/components/chart/Toolbar.vue";
+import BuilderFactory from "@/components/chart/BuilderFactory.vue";
+import {addSymbolChangedCallback, removeSymbolChangedCallback} from "@/charts/chart.js";
+import {onBeforeUnmount} from "vue";
+import {useOrderStore} from "@/store/store.js";
+
+import {routeFinder} from "@/blockchain/route.js";
+import ChartOrder from "@/components/chart/ChartOrder.vue";
+
+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) )
+
+</script>
+
+<style lang="scss">
+body {
+  overflow-y: hidden;
+}
+</style>

src/components/chart/LimitBuilder.vue

@@ -260,9 +260,6 @@ const colors = computed( ()=> {
 })
 
 
-let priceRangeId = null
-
-
 function adjustShapes() {
   const limits = prices.value
   // console.log('limits', limits)
@@ -334,7 +331,7 @@ function deleteBuilder() {
 
 
 if (!props.builder.priceA)
-  lineA.createOrDraw();
+  lineA.createOrDraw(); // initiate drawing mode
 
 
 </script>

src/components/chart/MarketBuilder.vue

@@ -0,0 +1,40 @@
+<template>
+    <v-sheet dense class="d-flex align-content-stretch" style="overflow-y: hidden">
+      <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="os.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;"
+                      clearable
+        >
+          <template v-slot:append-inner>%</template>
+        </v-text-field>
+      </div>
+    </v-sheet>
+</template>
+
+<script setup>
+import {useChartOrderStore} from "@/orderbuild.js";
+import {builderDefaults} from "@/misc.js";
+import {useOrderStore} from "@/store/store.js";
+
+const os = useOrderStore()
+const co = useChartOrderStore()
+const props = defineProps(['builder'])
+
+// Fields must be defined in order to be reactive
+builderDefaults(props.builder, {slippage: 0.10,})
+
+</script>
+
+<style scoped lang="scss">
+:deep(.v-slider.v-input--vertical > .v-input__control) {
+  min-height: 5em !important;
+}
+:deep(.v-slider.no-slider-bg .v-slider-track__fill) {
+  background-color: inherit !important;
+}
+</style>
+

src/components/chart/Test.vue

@@ -1,21 +0,0 @@
-<template>
-    <v-card flat rounded="0" title="Test">
-      <v-card-text>
-        <v-code>
-          {{JSON.stringify(builder, undefined, 2)}}
-        </v-code>
-      </v-card-text>
-    </v-card>
-</template>
-
-<script setup>
-import {createShape} from "@/charts/chart.js";
-import {ShapeType} from "@/charts/shape.js";
-
-const props = defineProps(['builder'])
-createShape(ShapeType.HLine, [{time:0, price:165}])
-</script>
-
-<style scoped lang="scss">
-
-</style>

src/components/chart/Toolbar.vue

@@ -3,14 +3,12 @@
     <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-clock-outline" @click="build('DCABuilder')">DCA</v-btn>-->
-    <v-btn variant="flat" prepend-icon="mdi-ray-vertex" @click="build('LimitBuilder')">Limit</v-btn>
-<!--    <v-btn variant="flat" prepend-icon="mdi-vector-line">Line</v-btn>-->
-    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</v-btn>
-    <!--
-    mdi-ray-start-end
-    mdi-vector-polyline
-    -->
+    <v-btn variant="flat" prepend-icon="mdi-plus" @click="newOrder">New Order</v-btn>
+<!--    <v-btn variant="flat" prepend-icon="mdi-question" @click="build('Test')">Test</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>
   </div>
 
 </template>
@@ -28,6 +26,16 @@ const co = useChartOrderStore()
 
 let shape = null
 
+function newOrder() {
+  console.log('new order 1')
+  co.newOrder()
+}
+
+
+function confirmDiscard() {
+  // todo show dialog
+}
+
 
 function test() {
   const testCb = {
@@ -40,10 +48,6 @@ function test() {
 }
 
 
-function build(component, options={}) {
-  co.addBuilder(component, options)
-}
-
 </script>
 
 <style scoped lang="scss">