From 2738d033636a2730cbdf1d48b21738c01f19614a Mon Sep 17 00:00:00 2001
From: Matthias <xmatthias@outlook.com>
Date: Fri, 15 Apr 2022 19:44:16 +0200
Subject: [PATCH] composition: update LogViewer

---
 src/components/ftbot/LogViewer.vue | 45 +++++++++++++++---------------
 1 file changed, 23 insertions(+), 22 deletions(-)

diff --git a/src/components/ftbot/LogViewer.vue b/src/components/ftbot/LogViewer.vue
index 652f8b31..c39bd578 100644
--- a/src/components/ftbot/LogViewer.vue
+++ b/src/components/ftbot/LogViewer.vue
@@ -6,33 +6,34 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import { namespace } from 'vuex-class';
-import { LogLine } from '@/types';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 import StoreModules from '@/store/storeSubModules';
+import { defineComponent, onMounted, computed } from '@vue/composition-api';
+import { useNamespacedActions, useNamespacedGetters } from 'vuex-composition-helpers';
 
-const ftbot = namespace(StoreModules.ftbot);
+export default defineComponent({
+  name: 'LogViewer',
+  setup() {
+    const { lastLogs } = useNamespacedGetters(StoreModules.ftbot, [BotStoreGetters.lastLogs]);
+    const { getLogs } = useNamespacedActions(StoreModules.ftbot, ['getLogs']);
 
-@Component({})
-export default class LogViewer extends Vue {
-  @ftbot.Getter [BotStoreGetters.lastLogs]!: LogLine[];
+    onMounted(() => getLogs());
+    const formattedLogs = computed(() => {
+      let result = '';
+      for (let i = 0, len = lastLogs.value.length; i < len; i += 1) {
+        const log = lastLogs.value[i];
+        result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
+      }
+      return result;
+    });
 
-  @ftbot.Action getLogs;
-
-  mounted() {
-    this.getLogs();
-  }
-
-  get formattedLogs() {
-    let result = '';
-    for (let i = 0, len = this.lastLogs.length; i < len; i += 1) {
-      const log = this.lastLogs[i];
-      result += `${log[0]} - ${log[2]} - ${log[3]} - ${log[4]}\n`;
-    }
-    return result;
-  }
-}
+    return {
+      getLogs,
+      lastLogs,
+      formattedLogs,
+    };
+  },
+});
 </script>
 
 <style lang="scss" scoped>