shape onModel improvements; vline fixes; time entry; couple bugs remain with dca dragging

src/components/chart/DCABuilder.vue

@@ -1,19 +1,53 @@
 <template>
   <rung-builder name='DCA' :order="order" :builder="builder"
-                v-model:value-a="absTimeA" v-model:value-b="absTimeB" :mode="1" :flip="flipped"
+                v-model:value-a="absTimeA" v-model:value-b="absTimeB"
                 :shape="VLine"
+                :mode="1" :flip="flipped" :orientation="0"
                 :get-model-value="getModelValue" :set-model-value="setModelValue"
                 :get-points-value="getPointsValue"
                 :set-values="setValues" :set-weights="setWeights"
                 :std-width="stdWidth" :build-tranches="buildTranches">
+
+<!--
     <v-list style="background-color: inherit">
       <v-list-item v-for="t in absoluteTimes">{{t}}</v-list-item>
     </v-list>
+-->
+
+    <table>
+      <tbody>
+      <tr>
+        <td>
+          <absolute-time-entry v-model="absTimeA"/>
+        </td>
+        <td class="weight">{{ weights.length ? allocationText(weights[0]) : '' }}</td>
+      </tr>
+      <tr v-if="weights.length>2" v-for="i in weights.length-2" class="ml-5">
+        <td class="pl-5">{{ times[1+i] }}</td>
+        <td class="weight">{{ allocationText(weights[1+i]) }}</td>
+      </tr>
+      <tr v-if="weights.length>1">
+        <td>
+<!--
+          <v-text-field type="number" v-model="lowerPrice" min="0"
+                        density="compact" hide-details class="mx-1 my-2" variant="outlined"
+                        label="Price"
+                        :color="color" :base-color="color"
+                        style="flex: 6em"
+          />
+-->
+        </td>
+        <td class="weight">{{ allocationText(weights[weights.length-1]) }}</td>
+      </tr>
+      </tbody>
+    </table>
+
+
   </rung-builder>
 </template>
 
 <script setup>
-import {builderDefaults, MIN_EXECUTION_TIME, useChartOrderStore} from "@/orderbuild.js";
+import {allocationText, builderDefaults, MIN_EXECUTION_TIME, useChartOrderStore} from "@/orderbuild.js";
 import {VLine} from "@/charts/shape.js";
 import {sideColor} from "@/misc.js";
 import {useTheme} from "vuetify";
@@ -22,6 +56,8 @@ import {DISTANT_FUTURE, MAX_FRACTION, newTranche} from "@/blockchain/orderlib.js
 import RungBuilder from "@/components/chart/RungBuilder.vue";
 import {computed, ref, watchEffect} from "vue";
 import {chart, dragging} from "@/charts/chart.js";
+import AbsoluteTimeEntry from "@/components/AbsoluteTimeEntry.vue";
+import TimeEntry from "@/components/TimeEntry.vue";
 
 const s = useStore()
 const os = useOrderStore()
@@ -50,10 +86,9 @@ builderDefaults(props.builder, {
   color: defaultColor,
 })
 
-const rawTimes = ref([])
+const times = ref([])
 const weights = ref([])
 
-const times = computed(()=>rawTimes.value.map((t)=>Math.round(t)))
 const endTimes = computed(()=>{
   if (props.builder.rungs === 1)
     return DISTANT_FUTURE
@@ -63,10 +98,10 @@ const endTimes = computed(()=>{
 })
 const absoluteTimes = computed(()=>{
   // console.log('absoluteTimes', props.builder.relative, times.value)
-  if (!props.builder.relative)
+  // if (!props.builder.relative)
     return times.value
-  const now = s.clock
-  return times.value.map((t)=>now+t)
+  // const now = s.clock
+  // return times.value.map((t)=>now+t)
 })
 
 
@@ -77,7 +112,7 @@ watchEffect(()=>{
     const range = chart.getVisibleRange()
     const width = range.to - range.from
     const now = s.clock
-    const extra = (Math.max(0,endTime - now) + minWidth.value) / width
+    const extra = (Math.max(0,endTime - now) + stdWidth.value/2) / width
     // console.log('visrange', range, width, absV)
     if (range.to < endTime) {
       // console.log('scrolling')
@@ -93,39 +128,38 @@ watchEffect(()=>{
 const absTimeA = computed({
   get() {
     let result = props.builder.timeA
-    if (props.builder.relative)
-      result += s.clock
-    // console.log('absTimeA', result)
+    // if (props.builder.relative)
+    //   result += s.clock
+    console.log('get absTimeA', result)
     return result
   },
   set(v) {
-    // console.log('set absTimeA', props.builder.timeA, v)
-    if (props.builder.relative)
-      v -= s.clock
+    console.error('set absTimeA', props.builder.timeA, v)
+    // if (props.builder.relative)
+    //   v -= s.clock
     props.builder.timeA = v
-    // console.log('absTimeA=',props.builder.timeA)
-    scroll()
+    console.log('absTimeA=',props.builder.timeA)
   }
 })
 const absTimeB = computed({
   get() {
     let result = props.builder.timeB
-    if (props.builder.relative)
-      result += s.clock
+    // if (props.builder.relative)
+    //   result += s.clock
     // console.log('absTimeB', result)
     return result
   },
   set(v) {
-    // console.log('set absTimeB', props.builder.timeB, v)
-    const absV = v
-    if ( v !== null && props.builder.relative )
-      v -= s.clock
+    console.error('set absTimeB', props.builder.timeB, v)
+    // if ( v !== null && props.builder.relative )
+    //   v -= s.clock
     props.builder.timeB = v
     const maxA = v - minWidth.value;
-    if (props.builder.timeA > maxA)
+    if (props.builder.timeA > maxA) {
+      console.log('scootching A to', maxA)
       props.builder.timeA = maxA
-    // console.log('absTimeB=',props.builder.timeB)
-    scroll()
+    }
+    console.log('absTimeB=',props.builder.timeB)
   }
 })
 
@@ -135,37 +169,6 @@ const flipped = computed(()=>{
   return a !== null && b !== null && a > b
 })
 
-const higherIndex = computed(()=>flipped.value ? 0 : weights.value.length-1)
-const lowerIndex = computed(()=>!flipped.value ? 0 : weights.value.length-1)
-const innerIndexes = computed(()=>{
-  const n = times.value.length
-  const f = flipped.value
-  const result = []
-  for (let i=1; i<n-1; i++)
-    result.push(f?i:n-1-i)
-  return result
-})
-
-const earlierTime = computed({
-  get() { return !flipped.value ? props.builder.timeA : props.builder.timeB },
-  set(v) {
-    if (!flipped.value)
-      props.builder.timeA = v
-    else
-      props.builder.timeB = v
-  }
-})
-
-const laterTime = computed({
-  get() { return !flipped.value ? props.builder.timeA : props.builder.timeB },
-  set(v) {
-    if (!flipped.value)
-      props.builder.timeA = v
-    else
-      props.builder.timeB = v
-  }
-})
-
 function buildTranches() {
   const order = props.order
   const builder = props.builder
@@ -201,7 +204,8 @@ function getPointsValue(points) {
 
 function setModelValue(model, value) {
   // console.log('DCA set model value', model, value)
-  const v = value === null ? null : props.builder.relative ? s.clock + Math.round(value) : Math.round(value)
+  // const v = value === null ? null : props.builder.relative ? s.clock + Math.round(value) : Math.round(value)
+  const v = value === null ? null : Math.round(value)
   if (model.time !== v) {
     // console.log('DCA do set time', v)
     model.time = v
@@ -209,12 +213,15 @@ function setModelValue(model, value) {
 }
 
 function setValues(values) {
+  times.value = values.map((t)=>Math.round(t))
+/*
   if (!props.builder.relative)
     rawTimes.value = values
   else {
     const now = s.clock
     rawTimes.value = values.map((v)=>v-now)
   }
+*/
 }
 
 function setWeights(ws) { weights.value = ws }