DCA builder looking good but can't place orders yet

src/components/chart/DCABuilder.vue

@@ -21,9 +21,9 @@
         </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 v-if="weights.length>2" v-for="i in weights.length-2" class="ml-5"> <!-- vue uses 1-based loops -->
+        <td class="d-flex justify-end pr-3">{{ dateStrings[i] }}</td>
+        <td class="weight">{{ allocationText(weights[i]) }}</td>
       </tr>
       <tr v-if="weights.length>1">
         <td>
@@ -49,6 +49,7 @@ 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 {DateTime} from "luxon";
 
 const s = useStore()
 const os = useOrderStore()
@@ -96,6 +97,14 @@ const absoluteTimes = computed(()=>{
   // return times.value.map((t)=>now+t)
 })
 
+const dateStrings = computed(()=>absoluteTimes.value.map((t)=>{
+  const n = DateTime.fromMillis(1000*t).setZone(s.timeZone)
+  const y = n.toLocaleString({year:'numeric'})
+  const m = n.toLocaleString({month:'long'})
+  const d = n.toLocaleString({day:'numeric'})
+  const h = n.toLocaleString({hour:'numeric', minute:'numeric'})
+  return `${y} ${m} ${d} ${h}`
+}))
 
 watchEffect(()=>{
   // auto scroll
@@ -123,16 +132,15 @@ const absTimeA = computed({
     console.log('set A', v)
     if (v!==null)
       v = Number(v)
-    update(v, _timeEndpoints.value[1])
+    updateA(v)
   }
 })
 const absTimeB = computed({
   get() { return _timeEndpoints.value[1] },
   set(v) {
-    console.log('set B', v)
     if (v!==null)
       v = Number(v)
-    update(_timeEndpoints.value[0], v)
+    updateB(v)
   }
 })
 
@@ -147,12 +155,32 @@ const timeEndpoints = computed({
 })
 
 
-function update(a, b) {
-    _timeEndpoints.value = [a, b]
-    const newBuilder = {...props.builder}
-    newBuilder.timeA = a
-    newBuilder.timeB = b
-    emit('update:builder', newBuilder)
+function updateA(a) {
+  update(a, _timeEndpoints.value[1], true)
+}
+
+
+function updateB(b) {
+  update(_timeEndpoints.value[0], b, false)
+}
+
+
+function update(a, b, updatingA) {
+  if (updatingA) {
+    const minB = a + minWidth.value
+    if (b < minB)
+      b = minB
+  }
+  else {
+    const maxA = b - minWidth.value
+    if (a > maxA)
+      a = maxA
+  }
+  _timeEndpoints.value = [a, b]
+  const newBuilder = {...props.builder}
+  newBuilder.timeA = a
+  newBuilder.timeB = b
+  emit('update:builder', newBuilder)
 }
 
 const flipped = computed(()=>{
@@ -205,6 +233,7 @@ function setModelValue(model, value) {
 }
 
 function setValues(values) {
+  // console.log('setValues', values)
   times.value = values.map((t)=>Math.round(t))
 /*
   if (!props.builder.relative)
@@ -221,5 +250,9 @@ function setWeights(ws) { weights.value = ws }
 </script>
 
 <style scoped lang="scss">
+td.weight {
+  padding-left: 1em;
+  padding-right: 1em;
+}
 </style>