intermediate checkin during chart order form work

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>