Convert createdTimestamp (bigint -> string) to isoString

Author: g3force

frontend/src/components/match/GameEventItem.vue

@@ -3,7 +3,7 @@ import {computed} from "vue";
 import TeamBadge from "@/components/common/TeamBadge.vue";
 import {gameEventName} from "@/helpers/texts";
 import type {GameEventJson} from "@/proto/state/ssl_gc_game_event_pb";
-import {formatTimestamp, gameEventForTeam} from "@/helpers";
+import {formatTimestamp, gameEventForTeam, usToTimestampJson} from "@/helpers";
 import OriginIcon from "@/components/common/OriginIcon.vue";
 
 const props = defineProps<{
@@ -24,7 +24,7 @@ const origins = computed(() => {
 
 const time = computed(() => {
   if (props.gameEvent.createdTimestamp) {
-    return formatTimestamp(props.gameEvent.createdTimestamp)
+    return formatTimestamp(usToTimestampJson(props.gameEvent.createdTimestamp))
   }
   return undefined
 })

frontend/src/components/match/GameEventProposalGroupItem.vue

@@ -4,7 +4,7 @@ import {gameEventName} from "@/helpers/texts";
 import type {ProposalGroupJson} from "@/proto/state/ssl_gc_state_pb";
 import type {GameEventJson} from "@/proto/state/ssl_gc_game_event_pb";
 import TeamBadge from "@/components/common/TeamBadge.vue";
-import {formatTimestamp, gameEventForTeam} from "@/helpers";
+import {formatTimestamp, gameEventForTeam, usToTimestampJson} from "@/helpers";
 import OriginIcon from "@/components/common/OriginIcon.vue";
 
 const props = defineProps<{
@@ -44,9 +44,9 @@ const origins = computed(() => {
 
 const createdTimestamp = computed(() => {
   if (props.acceptedGameEvent) {
-    return props.acceptedGameEvent.createdTimestamp
+    return usToTimestampJson(props.acceptedGameEvent.createdTimestamp!)
   }
-  return proposals.value?.flatMap(p => p.gameEvent?.createdTimestamp).sort()[0]
+  return proposals.value?.flatMap(p => usToTimestampJson(p.gameEvent?.createdTimestamp || 0)).sort()[0]
 })
 
 const time = computed(() => {

frontend/src/components/match/GameEvents.vue

@@ -8,7 +8,7 @@ import type {GameEventJson} from "@/proto/state/ssl_gc_game_event_pb";
 import GameEventDetailsTree from "@/components/match/GameEventDetailsTree.vue";
 import type {ControlApi} from "@/providers/controlApi";
 import type {TimestampJson} from "@bufbuild/protobuf/wkt";
-import {timestampJsonMs} from "@/helpers";
+import {timestampJsonMs, usToTimestampJson} from "@/helpers";
 
 const store = useMatchStateStore()
 const control = inject<ControlApi>('control-api')
@@ -51,7 +51,7 @@ const gameEventItems = computed(() => {
     } else {
       const item: GameEventWrappedItem = {
         id: gameEvent.id!,
-        timestamp: gameEvent.createdTimestamp!,
+        timestamp: usToTimestampJson(gameEvent.createdTimestamp!),
         gameEvent: gameEvent,
       }
       items.push(item)
@@ -116,11 +116,11 @@ const acceptGroup = (groupId: string) => {
 
 <template>
   <q-tree
-      v-if="gameEventItems.length > 0"
-      :nodes="nodes"
-      node-key="id"
-      dense
-      class="full-width"
+    v-if="gameEventItems.length > 0"
+    :nodes="nodes"
+    node-key="id"
+    dense
+    class="full-width"
   >
     <!--suppress VueUnrecognizedSlot -->
     <template #header-accept="prop: Prop">
@@ -130,38 +130,38 @@ const acceptGroup = (groupId: string) => {
         </q-item-section>
         <q-item-section>
           <q-btn
-              dense
-              color="primary"
-              label="Accept"
-              @click="() => acceptGroup(prop.node.proposalGroup?.id!)"
-              v-if="!prop.node.proposalGroup?.accepted"/>
+            dense
+            color="primary"
+            label="Accept"
+            @click="() => acceptGroup(prop.node.proposalGroup?.id!)"
+            v-if="!prop.node.proposalGroup?.accepted"/>
         </q-item-section>
       </q-item>
     </template>
 
     <!--suppress VueUnrecognizedSlot -->
     <template #header-proposal="prop: Prop">
       <GameEventProposalGroupItem
-          class="full-width"
-          :proposal-group="prop.node.proposalGroup!"
-          :group-id="prop.node.id"
-          :accepted-game-event="prop.node.gameEvent!"
+        class="full-width"
+        :proposal-group="prop.node.proposalGroup!"
+        :group-id="prop.node.id"
+        :accepted-game-event="prop.node.gameEvent!"
       />
     </template>
 
     <!--suppress VueUnrecognizedSlot -->
     <template #header-game-event="prop: Prop">
       <GameEventItem
-          class="full-width"
-          :game-event="prop.node.gameEvent!"
+        class="full-width"
+        :game-event="prop.node.gameEvent!"
       />
     </template>
 
     <!--suppress VueUnrecognizedSlot -->
     <template v-slot:header-game-event-details="prop: Prop">
       <GameEventDetailsTree
-          class="full-width"
-          :game-event="prop.node.gameEvent!"
+        class="full-width"
+        :game-event="prop.node.gameEvent!"
       />
     </template>
   </q-tree>

frontend/src/helpers/index.ts

@@ -139,3 +139,10 @@ export const timestampJsonMs = function (timestamp: TimestampJson): number {
 export const formatTimestamp = function (timestamp: TimestampJson): string {
   return dayjs(timestamp).format("MMM, DD YYYY HH:mm:ss,SSS")
 }
+
+export const usToTimestampJson = function (timestampUs: number | string): TimestampJson {
+  if (typeof timestampUs === 'string') {
+    return new Date(Number(BigInt(timestampUs) / BigInt(1000))).toISOString()
+  }
+  return new Date(timestampUs / 1000).toISOString()
+}