Move trade view to draggableContainers

src/components/ftbot/BotControls.vue

@@ -1,13 +1,15 @@
 <template>
   <div class="container-fluid">
     <div class="row">
-      <button class="btn-primary col-md-5 m-1" @click="startBot()">Start</button>
-      <button class="btn-primary col-md-5 m-1" @click="stopBot()">Stop</button>
-      <button class="btn-primary col-md-5 m-1" @click="stopBuy()">StopBuy</button>
-      <button class="btn-primary col-md-5 m-1" @click="reloadConfig()">Reload Config</button>
+      <button class="btn btn-primary btn-sm col-md-5 m-1" @click="startBot()">Start</button>
+      <button class="btn btn-primary btn-sm col-md-5 m-1" @click="stopBot()">Stop</button>
+      <button class="btn btn-primary btn-sm col-md-5 m-1" @click="stopBuy()">StopBuy</button>
+      <button class="btn btn-primary btn-sm col-md-5 m-1" @click="reloadConfig()">
+        Reload Config
+      </button>
       <button
         v-if="botState.forcebuy_enabled"
-        class="btn-primary col-md-5 m-1"
+        class="btn btn-primary btn-sm col-md-5 m-1"
         @click="initiateForcebuy"
       >
         Forcebuy

src/components/ftbot/ReloadControl.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <button class="btn btn-secondary" @click="refreshAll()">Refresh all</button>
+    <button class="btn btn-secondary btn-sm" @click="refreshAll()">Refresh all</button>
 
-    <b-form-checkbox v-model="autoRefreshLoc" class="float-right" size="lg" switch
+    <b-form-checkbox v-model="autoRefreshLoc" class="float-right" size="sm" switch
       >AutoRefresh</b-form-checkbox
     >
   </div>

src/store/modules/layout.ts

@@ -1,7 +1,6 @@
 import { GridItemData } from 'vue-grid-layout';
 
 export enum TradeLayout {
-  reloadControl = 'g-reloadControl',
   botControls = 'g-botControls',
   multiPane = 'g-multiPane',
   openTrades = 'g-openTrades',
@@ -17,8 +16,7 @@ export enum DashboardLayout {
 
 // Define default layouts
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
-  { i: TradeLayout.reloadControl, x: 0, y: 0, w: 4, h: 1 },
-  { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 3 },
+  { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 4 },
   { i: TradeLayout.multiPane, x: 0, y: 0, w: 4, h: 7 },
   { i: TradeLayout.openTrades, x: 4, y: 0, w: 8, h: 5 },
   { i: TradeLayout.tradeHistory, x: 4, y: 4, w: 8, h: 6 },

src/views/Trading.vue

@@ -6,15 +6,6 @@
     :vertical-compact="false"
     @layout-updated="layoutUpdatedEvent"
   >
-    <GridItem
-      :i="gridLayoutReload.i"
-      :x="gridLayoutReload.x"
-      :y="gridLayoutReload.y"
-      :w="gridLayoutReload.w"
-      :h="gridLayoutReload.h"
-    >
-      <ReloadControl />
-    </GridItem>
     <GridItem
       :i="gridLayoutBotControls.i"
       :x="gridLayoutBotControls.x"
@@ -22,7 +13,10 @@
       :w="gridLayoutBotControls.w"
       :h="gridLayoutBotControls.h"
     >
-      <BotControls class="mt-3" />
+      <DraggableContainer header="Bot Controls">
+        <ReloadControl class="mt-3" />
+        <BotControls />
+      </DraggableContainer>
     </GridItem>
     <GridItem
       :i="gridLayoutMultiPane.i"
@@ -31,6 +25,7 @@
       :w="gridLayoutMultiPane.w"
       :h="gridLayoutMultiPane.h"
     >
+      <DraggableContainer header="Multi Pane">
         <b-tabs content-class="mt-3" class="mt-3">
           <b-tab title="Status" active>
             <BotStatus />
@@ -49,6 +44,7 @@
             <FTBotAPIPairList />
           </b-tab>
         </b-tabs>
+      </DraggableContainer>
     </GridItem>
     <GridItem
       :i="gridLayoutOpenTrades.i"
@@ -58,6 +54,7 @@
       :h="gridLayoutOpenTrades.h"
       drag-allow-from=".card-header"
     >
+      <DraggableContainer header="Open Trades">
         <TradeList
           class="open-trades"
           :trades="openTrades"
@@ -65,6 +62,7 @@
           :active-trades="true"
           empty-text="Currently no open trades."
         />
+      </DraggableContainer>
     </GridItem>
     <GridItem
       :i="gridLayoutTradeHistory.i"
@@ -74,6 +72,7 @@
       :h="gridLayoutTradeHistory.h"
       drag-allow-from=".card-header"
     >
+      <DraggableContainer header="Closed Trades">
         <TradeList
           v-if="!detailTradeId"
           class="trade-history"
@@ -82,6 +81,7 @@
           empty-text="No closed trades so far."
         />
         <TradeDetail v-if="detailTradeId" :trade="tradeDetail"> </TradeDetail>
+      </DraggableContainer>
     </GridItem>
     <GridItem
       :i="gridLayoutLogView.i"
@@ -90,7 +90,9 @@
       :w="gridLayoutLogView.w"
       :h="gridLayoutLogView.h"
     >
+      <DraggableContainer header="Logs">
         <LogViewer />
+      </DraggableContainer>
     </GridItem>
   </GridLayout>
 </template>
@@ -110,6 +112,7 @@ import FTBotAPIPairList from '@/components/ftbot/FTBotAPIPairList.vue';
 import TradeDetail from '@/components/ftbot/TradeDetail.vue';
 import ReloadControl from '@/components/ftbot/ReloadControl.vue';
 import LogViewer from '@/components/ftbot/LogViewer.vue';
+import DraggableContainer from '@/components/layout/DraggableContainer.vue';
 
 import { Trade } from '@/types';
 import { UserStoreGetters } from '@/store/modules/ftbot';
@@ -122,6 +125,7 @@ const layoutNs = namespace('layout');
   components: {
     GridLayout,
     GridItem,
+    DraggableContainer,
     TradeList,
     Performance,
     BotControls,
@@ -151,10 +155,6 @@ export default class Trading extends Vue {
     return this.getTradingLayout;
   }
 
-  get gridLayoutReload(): GridItemData {
-    return findGridLayout(this.gridLayout, TradeLayout.reloadControl);
-  }
-
   get gridLayoutBotControls(): GridItemData {
     return findGridLayout(this.gridLayout, TradeLayout.botControls);
   }