DCA builder looking good but can't place orders yet

package.json

@@ -17,6 +17,7 @@
     "core-js": "^3.29.0",
     "ethers": "^6.7.1",
     "flexsearch": "^0.7.43",
+    "luxon": "^3.4.4",
     "pinia": "2.1.6",
     "roboto-fontface": "*",
     "socket.io-client": "^4.7.2",

src/charts/chart.js

@@ -2,6 +2,8 @@ import {useChartOrderStore} from "@/orderbuild.js";
 import {invokeCallbacks, prototype} from "@/common.js";
 import {DataFeed, initFeeDropdown, lookupSymbol} from "@/charts/datafeed.js";
 import {intervalToSeconds, SingletonCoroutine} from "@/misc.js";
+import {store} from "core-js/internals/reflect-metadata.js";
+import {useStore} from "@/store/store.js";
 
 export let widget = null
 export let chart = null
@@ -9,6 +11,10 @@ export let crosshairPoint = null
 let symbolChangedCbs = [] // callbacks for TV's chart.onSymbolChanged()
 let lastSymbolChangedArgs = null
 
+
+const s = useStore()
+const co = useChartOrderStore()
+
 export function addSymbolChangedCallback(cb) {
     symbolChangedCbs.push(cb)
 }
@@ -21,12 +27,12 @@ function changeSymbol(symbol) {
     const info = lookupSymbol(symbol.full_name)
     lastSymbolChangedArgs = info
     symbolChangedCbs.forEach((cb)=>cb(info))
-    useChartOrderStore().selectedSymbol = info
+    co.selectedSymbol = info
 }
 
 
 function changeInterval(interval, _timeframe) {
-    useChartOrderStore().intervalSecs = intervalToSeconds(interval)
+    co.intervalSecs = intervalToSeconds(interval)
 }
 
 
@@ -77,11 +83,14 @@ function initChart() {
     chart.crossHairMoved().subscribe(null, (point)=>setTimeout(()=>handleCrosshairMovement(point),0) )
     chart.onSymbolChanged().subscribe(null, changeSymbol)
     chart.onIntervalChanged().subscribe(null, changeInterval)
+    const tzapi = chart.getTimezoneApi();
+    tzapi.onTimezoneChanged().subscribe(null, (tz)=>s.timeZone=tz )
+    s.timeZone = tzapi.getTimezone().id
     // chart.onHoveredSourceChanged().subscribe(null, ()=>console.log('hovered source changed', arguments))
     // chart.selection().onChanged().subscribe(null, s => console.log('selection', chart.selection().allSources()));
     changeSymbol(chart.symbolExt())
     changeInterval(widget.symbolInterval().interval)
-    useChartOrderStore().chartReady = true
+    co.chartReady = true
     console.log('chart ready')
 }
 
@@ -128,7 +137,6 @@ let drawingCallbacks = null
 export function drawShape(shapeType, ...callbacks) {
     // puts the chart into a line-drawing mode for a new shape
     console.log('drawShape', callbacks, shapeType.name, shapeType.code)
-    const co = useChartOrderStore()
     if( drawingCallbacks )
         invokeCallbacks(drawingCallbacks, 'onUndraw')
     drawingCallbacks = callbacks
@@ -141,7 +149,6 @@ export function drawShape(shapeType, ...callbacks) {
 
 
 export function createShape(shapeType, points, options={}, ...callbacks) {
-    const co = useChartOrderStore()
     drawingCallbacks = null
     co.drawing = false
     options.shape = shapeType.code
@@ -163,7 +170,7 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
     if( callbacks.length )
         shapeCallbacks[shapeId] = callbacks
     const shape = chart.getShapeById(shapeId)
-    console.log('tvShape created', shapeId)
+    // console.log('tvShape created', shapeId)
     shape.bringToFront()
     const props = shape.getProperties()
     invokeCallbacks(callbacks, 'onCreate', shapeId, shape, points, props)
@@ -174,7 +181,6 @@ export function createShape(shapeType, points, options={}, ...callbacks) {
 export let allShapeIds = []
 
 export function cancelDrawing() {
-    const co = useChartOrderStore()
     if (co.drawing) {
         co.drawing = false
         widget.selectLineTool(previousDrawingTool)
@@ -190,7 +196,7 @@ function onSelectedLineToolChanged() {
     console.log('line tool changed', tool)
     if (drawingTool===null)
         drawingTool = tool
-    else if (tool!==drawingTool && useChartOrderStore().drawing)
+    else if (tool!==drawingTool && co.drawing)
         cancelDrawing();
 }
 
@@ -221,7 +227,6 @@ const crosshairHandler = new SingletonCoroutine(doHandleCrosshairMovement, 0)
 function doHandleCrosshairMovement(point) {
     // console.log('crosshair moved')
     crosshairPoint = point
-    const co = useChartOrderStore()
     if (co.drawing)
         invokeCallbacks(drawingCallbacks, 'onRedraw')
     else if (dragging) {
@@ -304,8 +309,6 @@ function doHandleDrawingEvent(id, event) {
     }
     if (event === 'create') {
         allShapeIds.push(id)
-
-        const co = useChartOrderStore();
         const callbacks = drawingCallbacks
         // console.log('drawing callbacks', callbacks)
         if (callbacks !== null) {

src/components/AbsoluteTimeEntry.vue

@@ -1,25 +1,12 @@
 <template>
   <div class="d-flex root">
-<!--
-    <vue-scroll-picker :options="yearMonthItems" v-model="yearMonth" class="picker"/>
-    <vue-scroll-picker :options="wdItems" v-model="day" class="picker"/>
--->
-<!--    <v-select :items="yearMonthItems" v-model="yearMonthItem"/>-->
-<!--    <v-text-field v-model="day"/>-->
-<!--
-    <v-tooltip v-model="showPicker">
-      <v-date-picker :show-adjacent-months="true" v-model="now"/>
-    </v-tooltip>
--->
     <v-text-field type="number" v-model="year"
                   rounded="0" :hide-details="hideDetails" single-line class="all year" maxlength="4"/>
-<!--    <v-text-field type="number" min="1" max="31" v-model="day" :label="wdFormat.format(day)"-->
-<!--                  :hide-details="hideDetails" style="min-width: 3em; width: 3em" class="all month"/>-->
     <v-select v-model="month" :items="monthItems"
               rounded="0" :hide-details="hideDetails" single-line class="all month"/>
     <v-text-field type="number" v-model="day"
                   rounded="0" :hide-details="hideDetails" single-line class="all year"
-                  min="1" :max="daysInMonth(...yearMonth)" maxlength="2"/>
+                  min="1" :max="now.daysInMonth" maxlength="2"/>
     <v-text-field type="time" v-model="time"
                   rounded="0" :hide-details="hideDetails" single-line class="all"/>
   </div>
@@ -27,52 +14,43 @@
 
 <script setup>
 import {useStore} from "@/store/store";
-import {computed, nextTick, ref} from "vue";
-import {VueScrollPicker} from "vue-scroll-picker";
-import {useDate} from "vuetify";
-import {mixin} from "@/common.js";
+import {computed} from "vue";
+import {DateTime, Info} from "luxon";
 
 const s = useStore()
 const props = defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 
-const showPicker = ref(false)
-
 const hideDetails = true
 
-const date = useDate()
-
-const now = computed(()=>new Date(1000*props.modelValue))
-
-const dRef = ref(s.utc ? now.value.getUTCDate() : now.value.getDate())
-const ymRef = ref([date.getYear(now.value), date.getMonth(now.value)])
+const now = computed(()=>DateTime.fromMillis(1000*props.modelValue).setZone(s.timeZone))
 
 const year = computed({
-  get() { return date.getYear(now.value) },
+  get() { return now.value.year },
   set(v) { update({year:v}) }
 })
 
 const month = computed({
-  get() { return date.getMonth(now.value) },
+  get() { return now.value.month },
   set(v) { update({month:v}) }
 })
 
+const monthItems = []
+const monthNames = Info.months();
+for( let i=0; i<12; i++ )
+  monthItems.push({value: i+1, title: monthNames[i]})
+
 const day = computed({
-  get() { return now.value.getDate() },
-  set(v) { update({day:v}) },
+  get() { return now.value.day },
+  set(v) { update({day:v}) }
 })
 
+
 const time = computed({
   get() {
-    let hour, min
-    if( s.utc ) {
-      hour = now.value.getUTCHours()
-      min = now.value.getUTCMinutes()
-    }
-    else {
-      hour = now.value.getHours()
-      min = now.value.getMinutes()
-    }
+    const date = now.value
+    const hour = date.hour
+    const min = date.minute
     return hour.toString().padStart(2,'0') + ':' + min.toString().padStart(2,'0')
   },
   set(v) {
@@ -81,166 +59,11 @@ const time = computed({
   }
 })
 
-const curYearMonth = computed(()=>[date.getYear(now.value), date.getMonth(now.value)])
-
-function extendPast(ms) {
-    console.log('extend past', ms)
-  const before = []
-  let cur = ms.length ? ms[0] : curYearMonth.value
-  for (let i=0; i<12; i++) {
-    cur = prevMonth(...cur)
-    before.push(cur)
-  }
-  before.reverse()
-  console.log('extended', before)
-  return [...before, ...ms]
-}
-
-function extendFuture(ms) {
-    console.log('extend future', ms)
-    const after = []
-    let cur = ms.length ? ms[ms.length-1] : curYearMonth.value
-    for (let i=0; i<12; i++) {
-      cur = nextMonth(...cur)
-      after.push(cur)
-    }
-    console.log('extended by', after)
-    return [...ms, ...after]
-}
-
-
-function dtFormat(format) {
-  return new Intl.DateTimeFormat(s.utc ? 'utc':undefined, format)
-}
-
-// todo utc
-const yFormat = dtFormat({year:'numeric'})
-const mFormat = dtFormat({month: 'long'})
-const ymFormat = dtFormat({year:'numeric', month: 'long'})
-const wdFormat = dtFormat({weekday:'short'})
-const dFormat = dtFormat({day:'numeric'})
-
-const monthItems = []
-for( let i=0; i<12; i++ )
-  monthItems.push({value: i, title: mFormat.format(new Date(0, i))})
-
-function ymItem(ym) {
-  const d = new Date(...ym);
-  const name = yFormat.format(d) + ' ' + mFormat.format(d)
-  // return {title: name, value: ym} // v-select
-  return {name, value: ym} // vue-scroll-picker
-}
-
-function wdItem(ym, day) {
-  const d = new Date(...ym, day)
-  const name = dFormat.format(d) + ' ' + wdFormat.format(d)
-  return {name, value: day}
-}
-
-const wdItems = computed(()=>{
-  const ym = yearMonth.value
-  const wds = []
-  for (let d=1; d<=daysInMonth(...yearMonth.value); d++)
-    wds.push(wdItem(ym,d))
-  return wds
-})
-
-
-const yearMonth = computed({
-  get() { return ymRef.value },
-  set(v) {
-    const [y, m] = v
-    const lastDay = daysInMonth(y,m);
-    const d = now.value.getDate() <= lastDay ? now.value.getDate() : lastDay
-    console.log('update yearmonth', v)
-    update({year:y, month:m, day:d})
-  },
-})
-
-const monthOptions = ref(extendFuture(extendPast([yearMonth.value])))
-
-const yearMonthItems = computed({
-  get() {return monthOptions.value.map((ym) => ymItem(ym))},
-  set(v) {yearMonth.value = v}
-})
-
-function daysInMonth(year, month) {
-  return new Date(year, month+1, 0).getDate();
-}
-
-const dayItems = computed(()=>{
-  const days = []
-  for (let i=1; i<=daysInMonth(...yearMonth.value); i++)
-    days.push(i)
-  return days
-})
-
-function nextMonth( year, month ) {
-  month++
-  if( month===12 ) {
-    month = 0
-    year++
-  }
-  return [year, month]
-}
-
-function prevMonth( year, month ) {
-  month--
-  if( month===-1 ) {
-    month = 11
-    year--
-  }
-  return [year, month]
-}
-
 function update(fields={}) {
-  console.error('update', fields)
-  if (!Object.keys(fields).length) return
-  if (newValue===null) {
-    newValue = {}
-    nextTick(doUpdate)
-  }
-  mixin(newValue, fields)
-  console.log('triggering update', fields)
+  if (Object.keys(fields).length)
+    emit('update:modelValue', now.value.set(fields).toUnixInteger())
 }
 
-function doUpdate() {
-  console.log('doUpdate')
-
-  let dirty = false
-  if (newValue.year===undefined)
-    newValue.year = date.getYear(now.value)
-  else
-    dirty ||= newValue.year !== date.getYear(now.value)
-  if (newValue.month===undefined)
-    newValue.month = date.getMonth(now.value)
-  else
-    dirty ||= newValue.month !== date.getMonth(now.value)
-  if (newValue.day===undefined)
-    newValue.day = now.value.getDate()
-  else
-    dirty ||= newValue.day !== now.value.getDate()
-  if (newValue.hour===undefined)
-    newValue.hour = date.getHours(now.value)
-  else
-    dirty ||= newValue.hour !== date.getHours(now.value)
-  if (newValue.minute===undefined)
-    newValue.minute = date.getMinutes(now.value)
-  else
-    dirty ||= newValue.minute !== date.getMinutes(now.value)
-
-  if (dirty) {
-    const d = s.utc ?
-        new Date(Date.UTC(newValue.year, newValue.month, newValue.day, newValue.hour, newValue.minute)) :
-        new Date(newValue.year, newValue.month, newValue.day, newValue.hour, newValue.minute)
-    const ts = Math.round(d.getTime() / 1000);
-    console.log('doUpdate value', ts)
-    newValue = null
-    emit('update:modelValue', ts)
-  }
-}
-
-let newValue = null
 </script>
 
 <style scoped lang="scss">

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>
 

src/store/store.js

@@ -36,7 +36,10 @@ const UNKNOWN_PROVIDER = {}
 
 
 export const useStore = defineStore('app', ()=> {
-  const clock = ref(timestamp())
+  const clock = ref(timestamp())  // the clock ticks infrequently enough to be mostly stable for user display
+  setInterval(()=>clock.value=timestamp(), 10*1000)  // 10 secs
+  const timeZone = ref('Etc/UTC')
+
   const nav = ref(false) // controls opening navigation drawer
 
   const _chainId = ref(Number(Object.keys(version.chainInfo)[0]))
@@ -122,13 +125,11 @@ export const useStore = defineStore('app', ()=> {
     this.extraTokens = extras
   }
 
-  setInterval(()=>clock.value=timestamp(), 10*1000)
-
   return {
     nav, chainId, chainInfo, chain, provider, providerRef, vaultInitCodeHash, account, vaults, transactionSenders,
     errors, extraTokens, poolPrices, vaultBalances, orders, vault, vaultOrders, tokens, factory, helper,
     mockenv, mockCoins,
-    removeTransactionSender, error, closeError, addToken, clock, balances,
+    removeTransactionSender, error, closeError, addToken, clock, timeZone, balances,
   }
 })
 

yarn.lock

@@ -973,6 +973,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^3.4.4:
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.4.tgz#cf20dc27dc532ba41a169c43fdcc0063601577af"
+  integrity sha512-zobTr7akeGHnv7eBOXcRgMeCP6+uyYsczwmeRCauvpvaAltgNyTbLH/+VaEAPUeWBT+1GuNmz4wC/6jtQzbbVA==
+
 magic-string@^0.30.7:
   version "0.30.8"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"