From b681fb53247c0a3cde15e38bcb91ddf89c3a4e0a Mon Sep 17 00:00:00 2001
From: Tim <tim@dexorder.trade>
Date: Tue, 23 Apr 2024 22:16:01 -0400
Subject: [PATCH] status timezone sync

---
 src/charts/chart.js                  |  2 +-
 src/components/AbsoluteTimeEntry.vue |  2 +-
 src/components/Status.vue            | 42 +++++++++++++++-------------
 src/components/chart/DCABuilder.vue  |  2 +-
 src/components/chart/RungBuilder.vue |  1 -
 src/misc.js                          | 12 +++++---
 6 files changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/charts/chart.js b/src/charts/chart.js
index f44e27a..bd9647c 100644
--- a/src/charts/chart.js
+++ b/src/charts/chart.js
@@ -84,7 +84,7 @@ function initChart() {
     chart.onSymbolChanged().subscribe(null, changeSymbol)
     chart.onIntervalChanged().subscribe(null, changeInterval)
     const tzapi = chart.getTimezoneApi();
-    tzapi.onTimezoneChanged().subscribe(null, (tz)=>s.timeZone=tz )
+    tzapi.onTimezoneChanged().subscribe(null, (tz)=>{if (tz==='exchange') tz='Etc/UTC'; 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()));
diff --git a/src/components/AbsoluteTimeEntry.vue b/src/components/AbsoluteTimeEntry.vue
index 27e92aa..adcc6d9 100644
--- a/src/components/AbsoluteTimeEntry.vue
+++ b/src/components/AbsoluteTimeEntry.vue
@@ -23,7 +23,7 @@ const emit = defineEmits(['update:modelValue'])
 
 const hideDetails = true
 
-const now = computed(()=>DateTime.fromMillis(1000*props.modelValue).setZone(s.timeZone))
+const now = computed(()=>DateTime.fromSeconds(props.modelValue).setZone(s.timeZone))
 
 const year = computed({
   get() { return now.value.year },
diff --git a/src/components/Status.vue b/src/components/Status.vue
index 478e81e..ff30ecd 100644
--- a/src/components/Status.vue
+++ b/src/components/Status.vue
@@ -2,7 +2,7 @@
   <div>
     <v-data-table :headers="datatableHeaders" :items="orders" item-value="id"
                   item-selectable="selectable" :show-select="false" :show-expand="true">
-      <template v-slot:item.start="{ value }">{{ dateString(value) }}</template>
+      <template v-slot:item.start="{ value }">{{ timestampString(value) }}</template>
       <template v-slot:item.input="{ item }">
         <span v-if="item.order.amountIsInput">
           <span v-if="item.state > OrderState.Signing">
@@ -114,18 +114,22 @@
                     </span>
                   </suspense>
                 </td>
-                <td class="text-left">
-                  <span class="mx-3">{{ describeTrancheTime(item, true, t) }}</span>
-                  <span class="mx-3">{{ describeTrancheTime(item, false, t) }}</span>
-                  <span class="mx-3" v-if="t.marketOrder">market order</span>
-                  <line-price class="mx-3" v-if="!t.marketOrder"
-                              :base="item.token0" :quote="item.token1"
-                              :b="t.minIntercept" :m="t.minSlope" :is-min="true"
-                              :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
-                  <line-price class="mx-3" v-if="!t.marketOrder"
-                              :base="item.token0" :quote="item.token1"
-                              :b="t.maxIntercept" :m="t.maxSlope" :is-min="false"
-                              :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
+                <td class="d-flex align-center text-left">
+                  <div class="text-right">
+                    <div class="mx-3">{{ describeTrancheTime(item, true, t) }}</div>
+                    <div class="mx-3">{{ describeTrancheTime(item, false, t) }}</div>
+                  </div>
+                  <div>
+                    <div class="mx-3" v-if="t.marketOrder">market order</div>
+                    <line-price class="mx-3" v-if="!t.marketOrder"
+                                :base="item.token0" :quote="item.token1"
+                                :b="t.minIntercept" :m="t.minSlope" :is-min="true"
+                                :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
+                    <line-price class="mx-3" v-if="!t.marketOrder"
+                                :base="item.token0" :quote="item.token1"
+                                :b="t.maxIntercept" :m="t.maxSlope" :is-min="false"
+                                :buy="item.order.tokenIn===item.token1" :show-btn="true"/>
+                  </div>
                 </td>
               </tr>
               </tbody>
@@ -144,7 +148,7 @@ import {useStore} from "@/store/store";
 import {computed, defineAsyncComponent, ref} from "vue";
 import Btn from "@/components/Btn.vue"
 import {cancelOrder, PendingOrderState, useWalletStore} from "@/blockchain/wallet.js";
-import {dateString} from "@/misc.js";
+import {timestampString} from "@/misc.js";
 import {isOpen, OrderState} from "@/blockchain/orderlib.js";
 import Pulse from "@/components/Pulse.vue";
 
@@ -243,8 +247,8 @@ const orders = computed(()=>{
 /*
       o.tranches = o.tranches.map((tranche)=>{
         const t = {...tranche}
-        // t.startTime = t.startTimeIsRelative ? intervalString(t.startTime) : dateString(t.startTime)
-        // t.endTime = t.endTimeIsRelative ? intervalString(t.endTime) : dateString(t.endTime)
+        // t.startTime = t.startTimeIsRelative ? intervalString(t.startTime) : timestampString(t.startTime)
+        // t.endTime = t.endTimeIsRelative ? intervalString(t.endTime) : timestampString(t.endTime)
         return t
       })
 */
@@ -278,12 +282,12 @@ function describeTrancheTime(st, isStart, t) {
   if( isStart && t.startTime > 0 ) {
     const started = t.startTimeIsRelative ? st.start + t.startTime : t.startTime
     result += started*1000 < Date.now() ? 'Activated ' : 'Activates '
-    result += dateString(started) + ' '
+    result += timestampString(started) + ' '
   }
   if( !isStart && t.endTime < 4294967295 ) {
     const ended = t.endTimeIsRelative ? st.start + t.endTime : t.endTime
-    result += ended*1000 < Date.now() ? 'Expired ' : 'Expires '
-    result += dateString(ended)
+    result += ended*1000 < Date.now() ? 'Ended ' : 'Ending '
+    result += timestampString(ended)
   }
   return result
 }
diff --git a/src/components/chart/DCABuilder.vue b/src/components/chart/DCABuilder.vue
index d72bc05..7729064 100644
--- a/src/components/chart/DCABuilder.vue
+++ b/src/components/chart/DCABuilder.vue
@@ -98,7 +98,7 @@ const absoluteTimes = computed(()=>{
 })
 
 const dateStrings = computed(()=>absoluteTimes.value.map((t)=>{
-  const n = DateTime.fromMillis(1000*t).setZone(s.timeZone)
+  const n = DateTime.fromSeconds(t).setZone(s.timeZone)
   const y = n.toLocaleString({year:'numeric'})
   const m = n.toLocaleString({month:'long'})
   const d = n.toLocaleString({day:'numeric'})
diff --git a/src/components/chart/RungBuilder.vue b/src/components/chart/RungBuilder.vue
index 89466f0..cd871b1 100644
--- a/src/components/chart/RungBuilder.vue
+++ b/src/components/chart/RungBuilder.vue
@@ -244,7 +244,6 @@ function createInteriorShape(index) {
   interiorShapes.push(shape)
 }
 
-
 function removeInteriorShape() {
   if (interiorShapes.length) {
     const shape = interiorShapes.pop()
diff --git a/src/misc.js b/src/misc.js
index 3402bec..bcc7d4c 100644
--- a/src/misc.js
+++ b/src/misc.js
@@ -2,6 +2,7 @@ import {FixedNumber} from "ethers";
 import {usePrefStore, useStore} from "@/store/store.js";
 import {token} from "@/blockchain/token.js";
 import Color from "color";
+import {DateTime} from "luxon";
 
 const QUOTE_SYMBOLS = [
     // in order of preference
@@ -88,11 +89,14 @@ export function intervalString(seconds) {
         return `${(seconds / 86400).toFixed(1)} days`
 }
 
-const _dateFormat = new Intl.DateTimeFormat(undefined, {dateStyle: 'medium', timeStyle: 'short'})
+export function timestampString(seconds) {
+    const date = DateTime.fromSeconds(seconds).setZone(useStore().timeZone)
+    return dateString(date)
+}
 
-export function dateString(seconds) {
-    const date = new Date(seconds * 1000)
-    return _dateFormat.format(date)
+
+export function dateString(datetime) {
+    return datetime.toLocaleString({dateStyle: 'medium', timeStyle: 'short'})
 }