Add forcebuy modal

src/ftbot/BotControls.vue

@@ -5,17 +5,35 @@
       <button class="btn-primary" @click="stopBot()">Stop</button>
       <button class="btn-primary" @click="stopBuy()">StopBuy</button>
       <button class="btn-primary" @click="reloadConfig()">Reload Config</button>
+      <button v-if="botState.forcebuy_enabled" class="btn-primary" @click="initiate_forcebuy">
+        Forcebuy
+      </button>
+      <ForceBuyForm :modalShow="forcebuy_show" @close="this.$bvModal.hide('forcebuy-modal')" />
     </div>
   </div>
 </template>
 
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
+import ForceBuyForm from './ForceBuyForm.vue';
 
 export default {
   name: 'BotControls',
+  components: { ForceBuyForm },
+  computed: {
+    ...mapState('ftbot', ['botState']),
+  },
+  data() {
+    return {
+      forcebuy_show: false,
+    };
+  },
   methods: {
     ...mapActions('ftbot', ['startBot', 'stopBot', 'stopBuy', 'reloadConfig']),
+    initiate_forcebuy() {
+      console.log('Forcebuy started');
+      this.$bvModal.show('forcebuy-modal');
+    },
   },
 };
 </script>

src/ftbot/ForceBuyForm.vue

@@ -0,0 +1,89 @@
+<template>
+  <div>
+    <b-modal
+      id="forcebuy-modal"
+      ref="modal"
+      title="Force buying a pair"
+      @show="resetForm"
+      @hidden="resetForm"
+      @ok="handleBuy"
+    >
+      <form ref="form" @submit.stop.prevent="handleSubmit">
+        <b-form-group label="Pair" label-for="pair-input" invalid-feedback="Pair is required">
+          <b-form-input
+            id="pair-input"
+            v-model="pair"
+            @keydown.enter.native="handleBuy"
+            required
+          ></b-form-input>
+        </b-form-group>
+        <b-form-group
+          label="*Price [optional]"
+          label-for="price-input"
+          invalid-feedback="Price must be empty or a positive number"
+        >
+          <b-form-input
+            id="price-input"
+            v-model="price"
+            @keydown.enter.native="handleBuy"
+            type="number"
+            step="0.01"
+          ></b-form-input>
+        </b-form-group>
+      </form>
+    </b-modal>
+  </div>
+</template>
+
+<script>
+import { mapActions } from 'vuex';
+
+export default {
+  name: 'ForceBuyForm',
+  created() {
+    this.$bvModal.show();
+  },
+  data() {
+    return {
+      pair: '',
+      price: null,
+    };
+  },
+  methods: {
+    ...mapActions('ftbot', ['forcebuy']),
+    close() {
+      this.$emit('close');
+    },
+    checkFormValidity() {
+      const valid = this.$refs.form.checkValidity();
+
+      return valid;
+    },
+    handleBuy(bvModalEvt) {
+      // Prevent modal from closing
+      bvModalEvt.preventDefault();
+      // Trigger submit handler
+      this.handleSubmit();
+    },
+    resetForm() {
+      this.pair = '';
+      this.price = null;
+    },
+    handleSubmit() {
+      // Exit when the form isn't valid
+      if (!this.checkFormValidity()) {
+        return;
+      }
+      // call forcebuy
+      const payload = { pair: this.pair };
+      if (this.price) {
+        payload.price = this.price;
+      }
+      this.forcebuy(payload);
+      this.$nextTick(() => {
+        this.$bvModal.hide('forcebuy-modal');
+      });
+    },
+  },
+};
+</script>

src/store/modules/ftbot.js

@@ -173,5 +173,27 @@ export default {
         reject(error);
       });
     },
+    forcebuy({getters, dispatch}, payload) {
+      console.log(payload);
+      if (payload && payload.pair) {
+
+        return axios.post(`${apiBase}/forcebuy`, payload, {
+          ...getters.apiAuth
+        }).then(() => {
+          dispatch('alerts/addAlert', { message: `Buy order for ${payload.pair} created.` }, { root: true })
+        }).catch((error) => {
+          console.error(error.response)
+          dispatch('alerts/addAlert', { message: `Error occured buying: '${error.response.data.error}'`, severity: 'danger' }, { root: true })
+
+        })
+      }
+      // Error branchs
+      const error = "Pair is empty";
+      console.error(error);
+      return new Promise((resolve, reject) => {
+        reject(error);
+      });
+
+    },
   },
 };