From 8782b37be183cbc1da2acbdbbbe5a28ef1480b94 Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Tue, 9 May 2023 19:58:23 +0200
Subject: [PATCH] script setup - more components

---
 src/components/ftbot/BotStatus.vue     | 16 +-------
 src/components/ftbot/LogViewer.vue     | 36 +++++++-----------
 src/components/ftbot/ReloadControl.vue | 28 +++++---------
 src/components/ftbot/TradeDetail.vue   | 17 ++-------
 src/components/general/DateTimeTZ.vue  | 52 ++++++++++++--------------
 src/components/general/ValuePair.vue   | 18 +++------
 src/views/LogView.vue                  |  8 +---
 src/views/TradesList.vue               | 22 ++---------
 8 files changed, 62 insertions(+), 135 deletions(-)

diff --git a/src/components/ftbot/BotStatus.vue b/src/components/ftbot/BotStatus.vue
index 1001f877..0a4e86aa 100644
--- a/src/components/ftbot/BotStatus.vue
+++ b/src/components/ftbot/BotStatus.vue
@@ -79,23 +79,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { formatPercent, formatPriceCurrency } from '@/shared/formatters';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 
-import { defineComponent } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-export default defineComponent({
-  name: 'BotStatus',
-  components: { DateTimeTZ },
-  setup() {
-    const botStore = useBotStore();
-    return {
-      formatPercent,
-      formatPriceCurrency,
-      botStore,
-    };
-  },
-});
+const botStore = useBotStore();
 </script>
diff --git a/src/components/ftbot/LogViewer.vue b/src/components/ftbot/LogViewer.vue
index 8d3c2eef..80bb0df8 100644
--- a/src/components/ftbot/LogViewer.vue
+++ b/src/components/ftbot/LogViewer.vue
@@ -5,33 +5,23 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useBotStore } from '@/stores/ftbotwrapper';
-import { defineComponent, onMounted, computed } from 'vue';
+import { onMounted, computed } from 'vue';
 
-export default defineComponent({
-  name: 'LogViewer',
-  setup() {
-    const botStore = useBotStore();
+const botStore = useBotStore();
 
-    onMounted(async () => {
-      botStore.activeBot.getLogs();
-    });
+onMounted(async () => {
+  botStore.activeBot.getLogs();
+});
 
-    const formattedLogs = computed(() => {
-      let result = '';
-      for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) {
-        const log = botStore.activeBot.lastLogs[i];
-        result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
-      }
-      return result;
-    });
-
-    return {
-      botStore,
-      formattedLogs,
-    };
-  },
+const formattedLogs = computed(() => {
+  let result = '';
+  for (let i = 0, len = botStore.activeBot.lastLogs.length; i < len; i += 1) {
+    const log = botStore.activeBot.lastLogs[i];
+    result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
+  }
+  return result;
 });
 </script>
 
diff --git a/src/components/ftbot/ReloadControl.vue b/src/components/ftbot/ReloadControl.vue
index 87abb685..2d831eaa 100644
--- a/src/components/ftbot/ReloadControl.vue
+++ b/src/components/ftbot/ReloadControl.vue
@@ -17,27 +17,17 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
-export default defineComponent({
-  name: 'ReloadControl',
-  setup() {
-    const botStore = useBotStore();
-    const autoRefreshLoc = computed({
-      get() {
-        return botStore.globalAutoRefresh;
-      },
-      set(newValue: boolean) {
-        botStore.setGlobalAutoRefresh(newValue);
-      },
-    });
-
-    return {
-      botStore,
-      autoRefreshLoc,
-    };
+const botStore = useBotStore();
+const autoRefreshLoc = computed({
+  get() {
+    return botStore.globalAutoRefresh;
+  },
+  set(newValue: boolean) {
+    botStore.setGlobalAutoRefresh(newValue);
   },
 });
 </script>
diff --git a/src/components/ftbot/TradeDetail.vue b/src/components/ftbot/TradeDetail.vue
index bd86114a..fb536dd1 100644
--- a/src/components/ftbot/TradeDetail.vue
+++ b/src/components/ftbot/TradeDetail.vue
@@ -128,25 +128,16 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { formatPercent, formatPriceCurrency, formatPrice, timestampms } from '@/shared/formatters';
 import ValuePair from '@/components/general/ValuePair.vue';
 import TradeProfit from '@/components/ftbot/TradeProfit.vue';
 import DateTimeTZ from '@/components/general/DateTimeTZ.vue';
 import { Trade } from '@/types';
 
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'TradeDetail',
-  components: { ValuePair, TradeProfit, DateTimeTZ },
-  props: {
-    trade: { required: true, type: Object as () => Trade },
-    stakeCurrency: { required: true, type: String },
-  },
-  setup() {
-    return { timestampms, formatPercent, formatPrice, formatPriceCurrency };
-  },
+defineProps({
+  trade: { required: true, type: Object as () => Trade },
+  stakeCurrency: { required: true, type: String },
 });
 </script>
 <style scoped>
diff --git a/src/components/general/DateTimeTZ.vue b/src/components/general/DateTimeTZ.vue
index bc52daa8..2b6e9e1f 100644
--- a/src/components/general/DateTimeTZ.vue
+++ b/src/components/general/DateTimeTZ.vue
@@ -2,40 +2,34 @@
   <span :title="timezoneTooltip">{{ formattedDate }}</span>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { timestampms, timestampmsWithTimezone, timestampToDateString } from '@/shared/formatters';
 
-import { defineComponent, computed } from 'vue';
+import { computed } from 'vue';
 
-export default defineComponent({
-  name: 'DateTimeTZ',
-  props: {
-    date: { required: true, type: Number },
-    showTimezone: { required: false, type: Boolean, default: false },
-    dateOnly: { required: false, type: Boolean, default: false },
-  },
-  setup(props) {
-    const formattedDate = computed((): string => {
-      if (props.dateOnly) {
-        return timestampToDateString(props.date);
-      }
-      if (props.showTimezone) {
-        return timestampmsWithTimezone(props.date);
-      }
-      return timestampms(props.date);
-    });
+const props = defineProps({
+  date: { required: true, type: Number },
+  showTimezone: { required: false, type: Boolean, default: false },
+  dateOnly: { required: false, type: Boolean, default: false },
+});
+const formattedDate = computed((): string => {
+  if (props.dateOnly) {
+    return timestampToDateString(props.date);
+  }
+  if (props.showTimezone) {
+    return timestampmsWithTimezone(props.date);
+  }
+  return timestampms(props.date);
+});
 
-    const timezoneTooltip = computed((): string => {
-      const time1 = timestampmsWithTimezone(props.date);
-      const timeUTC = timestampmsWithTimezone(props.date, 'UTC');
-      if (time1 === timeUTC) {
-        return timeUTC;
-      }
+const timezoneTooltip = computed((): string => {
+  const time1 = timestampmsWithTimezone(props.date);
+  const timeUTC = timestampmsWithTimezone(props.date, 'UTC');
+  if (time1 === timeUTC) {
+    return timeUTC;
+  }
 
-      return `${time1}\n${timeUTC}`;
-    });
-    return { formattedDate, timezoneTooltip };
-  },
+  return `${time1}\n${timeUTC}`;
 });
 </script>
 
diff --git a/src/components/general/ValuePair.vue b/src/components/general/ValuePair.vue
index 06c8cc0e..4d7cd9b8 100644
--- a/src/components/general/ValuePair.vue
+++ b/src/components/general/ValuePair.vue
@@ -10,20 +10,14 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import InfoBox from '@/components/general/InfoBox.vue';
 
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ValuePair',
-  components: { InfoBox },
-  props: {
-    description: { type: String, required: true },
-    help: { type: String, default: '', required: false },
-    classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
-    classValue: { type: String, default: 'col-8' },
-  },
+defineProps({
+  description: { type: String, required: true },
+  help: { type: String, default: '', required: false },
+  classLabel: { type: String, default: 'col-4 fw-bold mb-0' },
+  classValue: { type: String, default: 'col-8' },
 });
 </script>
 
diff --git a/src/views/LogView.vue b/src/views/LogView.vue
index 00445704..23717329 100644
--- a/src/views/LogView.vue
+++ b/src/views/LogView.vue
@@ -4,14 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import LogViewer from '@/components/ftbot/LogViewer.vue';
-
-export default defineComponent({
-  name: 'LogView',
-  components: { LogViewer },
-});
 </script>
 
 <style scoped></style>
diff --git a/src/views/TradesList.vue b/src/views/TradesList.vue
index 8d7cb640..57c3322e 100644
--- a/src/views/TradesList.vue
+++ b/src/views/TradesList.vue
@@ -40,29 +40,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import CustomTradeList from '@/components/ftbot/CustomTradeList.vue';
 import TradeDetail from '@/components/ftbot/TradeDetail.vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'TradesList',
-  components: {
-    CustomTradeList,
-    TradeDetail,
-  },
-  props: {
-    history: { default: false, type: Boolean },
-  },
-  setup() {
-    const botStore = useBotStore();
-
-    return {
-      botStore,
-    };
-  },
+defineProps({
+  history: { default: false, type: Boolean },
 });
+const botStore = useBotStore();
 </script>
 
 <style scoped></style>