Implement messagebox logic

src/components/ftbot/BotControls.vue

@@ -64,6 +64,7 @@ forceexit
       <PlayIcon />
     </button>
     <ForceEntryForm v-model="forceEnter" :pair="botStore.activeBot.selectedPair" />
+    <MessageBox ref="msgBox" />
   </div>
 </template>
 
@@ -76,7 +77,8 @@ import ReloadIcon from 'vue-material-design-icons/Reload.vue';
 import ForceExitIcon from 'vue-material-design-icons/CloseBoxMultiple.vue';
 import ForceEntryIcon from 'vue-material-design-icons/PlusBoxMultipleOutline.vue';
 import ForceEntryForm from './ForceEntryForm.vue';
-import { defineComponent, computed, ref, getCurrentInstance } from 'vue';
+import MessageBox, { MsgBoxObject } from '@/components/general/MessageBox.vue';
+import { defineComponent, computed, ref } from 'vue';
 import { useBotStore } from '@/stores/ftbotwrapper';
 
 export default defineComponent({
@@ -89,52 +91,67 @@ export default defineComponent({
     ReloadIcon,
     ForceExitIcon,
     ForceEntryIcon,
+    MessageBox,
   },
   setup() {
-    const root = getCurrentInstance();
     const botStore = useBotStore();
     const forceEnter = ref<boolean>(false);
+    const msgBox = ref<typeof MessageBox>();
 
     const isRunning = computed((): boolean => {
       return botStore.activeBot.botState?.state === 'running';
     });
 
     const handleStopBot = () => {
-      root?.proxy.$bvModal.msgBoxConfirm('Stop Bot?').then((value: boolean) => {
-        if (value) {
-          botStore.activeBot.stopBot();
-        }
-      });
+      const msg: MsgBoxObject = {
+        title: 'Stop Bot',
+        message: 'Stop the bot loop from running?',
+        accept: () => {
+          console.log('stopped...');
+          // botStore.activeBot.stopBot();
+        },
+      };
+      msgBox.value?.show(msg);
     };
 
     const handleStopBuy = () => {
-      root?.proxy.$bvModal
-        .msgBoxConfirm('Stop buying? Freqtrade will continue to handle open trades.')
-        .then((value: boolean) => {
-          if (value) {
-            botStore.activeBot.stopBuy();
-          }
-        });
+      const msg: MsgBoxObject = {
+        title: 'Stop Buying',
+        message: 'Freqtrade will continue to handle open trades.',
+        accept: () => {
+          console.log('stopBuy...');
+          botStore.activeBot.stopBuy();
+        },
+      };
+      msgBox.value?.show(msg);
     };
 
     const handleReloadConfig = () => {
-      root?.proxy.$bvModal.msgBoxConfirm('Reload configuration?').then((value: boolean) => {
-        if (value) {
+      const msg: MsgBoxObject = {
+        title: 'Reload',
+        message: 'Reload configuration (including strategy)?',
+        accept: () => {
+          console.log('reload...');
           botStore.activeBot.reloadConfig();
-        }
-      });
+        },
+      };
+      msgBox.value?.show(msg);
     };
 
     const handleForceExit = () => {
-      root?.proxy.$bvModal.msgBoxConfirm(`Really forceexit ALL trades?`).then((value: boolean) => {
-        if (value) {
+      const msg: MsgBoxObject = {
+        title: 'ForceExit all',
+        message: 'Really forceexit ALL trades?',
+        accept: () => {
+          console.log('forceexit all...');
           const payload: ForceSellPayload = {
             tradeid: 'all',
             // TODO: support ordertype (?)
           };
           botStore.activeBot.forceexit(payload);
-        }
-      });
+        },
+      };
+      msgBox.value?.show(msg);
     };
     return {
       handleStopBot,
@@ -144,6 +161,7 @@ export default defineComponent({
       forceEnter,
       botStore,
       isRunning,
+      msgBox,
     };
   },
 });

src/components/general/MessageBox.vue

@@ -0,0 +1,42 @@
+<template>
+  <b-modal
+    ref="removeTradeModal"
+    v-model="showRef"
+    :title="title"
+    @ok="msgBoxOK"
+    @cancel="showRef = false"
+  >
+    {{ message }}
+  </b-modal>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+export interface MsgBoxObject {
+  title: string;
+  message: string;
+  accept: () => void;
+}
+const showRef = ref<boolean>(false);
+const title = ref<string>('');
+const message = ref<string>('');
+const accept = ref<() => void>(() => {
+  console.warn('Accepted not set.');
+});
+
+const msgBoxOK = () => {
+  accept.value();
+};
+
+const show = (msg: MsgBoxObject) => {
+  title.value = msg.title;
+  message.value = msg.message;
+  showRef.value = true;
+  accept.value = msg.accept;
+};
+
+defineExpose({ show });
+</script>
+
+<style scoped></style>