From e97bfa8788fca62354ee830ff79fb083b3825fd6 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Thu, 1 Jul 2021 20:41:55 +0200
Subject: [PATCH] Use DatetimeTZ also in botstatus

closes #211
---
 src/components/ftbot/BotStatus.vue    | 13 ++++++-------
 src/components/general/DateTimeTZ.vue | 11 ++++++++++-
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/components/ftbot/BotStatus.vue b/src/components/ftbot/BotStatus.vue
index c88abe63..8f1994c4 100644
--- a/src/components/ftbot/BotStatus.vue
+++ b/src/components/ftbot/BotStatus.vue
@@ -10,9 +10,11 @@
     </p>
     <p v-if="profit.first_trade_timestamp">
       First trade opened:
-      <strong>{{ formatTimestamp(profit.first_trade_timestamp) }}</strong> <br />
+
+      <strong><DateTimeTZ :date="profit.first_trade_timestamp" show-timezone /></strong>
+      <br />
       Last trade opened:
-      <strong>{{ formatTimestamp(profit.latest_trade_timestamp) }}</strong>
+      <strong><DateTimeTZ :date="profit.latest_trade_timestamp" show-timezone /></strong>
     </p>
 
     <p>
@@ -40,10 +42,11 @@ import { namespace } from 'vuex-class';
 import { BotState } from '@/types';
 
 import { formatPercent } from '@/shared/formatters';
+import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 
 const ftbot = namespace('ftbot');
 
-@Component({})
+@Component({ components: { DateTimeTZ } })
 export default class BotStatus extends Vue {
   @ftbot.State version;
 
@@ -52,9 +55,5 @@ export default class BotStatus extends Vue {
   @ftbot.State botState?: BotState;
 
   formatPercent = formatPercent;
-
-  formatTimestamp(timestamp) {
-    return new Date(timestamp).toUTCString();
-  }
 }
 </script>
diff --git a/src/components/general/DateTimeTZ.vue b/src/components/general/DateTimeTZ.vue
index d6b88bfa..bb940ab1 100644
--- a/src/components/general/DateTimeTZ.vue
+++ b/src/components/general/DateTimeTZ.vue
@@ -1,5 +1,5 @@
 <template>
-  <span :title="timezoneTooltip">{{ timestampms(date) }}</span>
+  <span :title="timezoneTooltip">{{ formattedDate }}</span>
 </template>
 
 <script lang="ts">
@@ -10,8 +10,17 @@ import { Component, Prop, Vue } from 'vue-property-decorator';
 export default class DateTimeTZ extends Vue {
   @Prop({ required: true, type: Number }) date!: number;
 
+  @Prop({ required: false, type: Boolean, default: false }) showTimezone!: boolean;
+
   timestampms = timestampms;
 
+  get formattedDate(): string {
+    if (this.showTimezone) {
+      return timestampmsWithTimezone(this.date);
+    }
+    return timestampms(this.date);
+  }
+
   get timezoneTooltip(): string {
     const time1 = timestampmsWithTimezone(this.date);
     const timeUTC = timestampmsWithTimezone(this.date, 'UTC');