use Enum for layout names

src/store/modules/layout.ts

@@ -1,18 +1,34 @@
 import { GridItemData } from 'vue-grid-layout';
 
+export enum TradeLayout {
+  reloadControl = 'g-reloadControl',
+  botControls = 'g-botControls',
+  multiPane = 'g-multiPane',
+  openTrades = 'g-openTrades',
+  tradeHistory = 'g-tradeHistory',
+  logView = 'g-logView',
+}
+
+export enum DashboardLayout {
+  dailyChart = 'g-dailyChart',
+  hourlyChart = 'g-hourlyChart',
+  cumChartChart = 'g-cumChartChart',
+}
+
+// Define default layouts
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
-  { i: 'g-reloadControl', x: 0, y: 0, w: 4, h: 1 },
+  { i: TradeLayout.reloadControl, x: 0, y: 0, w: 4, h: 1 },
-  { i: 'g-botControls', x: 0, y: 0, w: 4, h: 3 },
+  { i: TradeLayout.botControls, x: 0, y: 0, w: 4, h: 3 },
-  { i: 'g-MultiPane', x: 0, y: 0, w: 4, h: 7 },
+  { i: TradeLayout.multiPane, x: 0, y: 0, w: 4, h: 7 },
-  { i: 'g-openTrades', x: 4, y: 0, w: 8, h: 5 },
+  { i: TradeLayout.openTrades, x: 4, y: 0, w: 8, h: 5 },
-  { i: 'g-tradeHistory', x: 4, y: 4, w: 8, h: 6 },
+  { i: TradeLayout.tradeHistory, x: 4, y: 4, w: 8, h: 6 },
-  { i: 'g-logView', x: 0, y: 9, w: 12, h: 3 },
+  { i: TradeLayout.logView, x: 0, y: 9, w: 12, h: 3 },
 ];
 
 const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
-  { i: 'g-dailyChart', x: 0, y: 0, w: 4, h: 6 },
+  { i: DashboardLayout.dailyChart, x: 0, y: 0, w: 4, h: 6 },
-  { i: 'g-hourlyChart', x: 4, y: 0, w: 4, h: 6 },
+  { i: DashboardLayout.hourlyChart, x: 4, y: 0, w: 4, h: 6 },
-  { i: 'g-cumChartChart', x: 0, y: 6, w: 4, h: 6 },
+  { i: DashboardLayout.cumChartChart, x: 0, y: 6, w: 4, h: 6 },
 ];
 
 const STORE_DASHBOARD_LAYOUT = 'ftDashboardLayout';
@@ -27,6 +43,19 @@ function getLayout(storageString: string, defaultLayout: GridItemData[]) {
   return JSON.parse(JSON.stringify(defaultLayout));
 }
 
+/**
+ * Helper function finding a layout entry
+ * @param gridLayout Array of grid layouts used in this layout. Must be passed to GridLayout, too.
+ * @param name Name within the dashboard layout to find
+ */
+export function findGridLayout(gridLayout: GridItemData[], name: string): GridItemData {
+  let layout = gridLayout.find((value) => value.i === name);
+  if (!layout) {
+    layout = { i: name, x: 0, y: 0, w: 4, h: 6 };
+  }
+  return layout;
+}
+
 export default {
   namespaced: true,
   state: {

src/views/Dashboard.vue

@@ -62,6 +62,7 @@ import CumProfitChart from '@/components/charts/CumProfitChart.vue';
 import DraggableContainer from '@/components/layout/DraggableContainer.vue';
 
 import { Trade, DailyReturnValue } from '@/types';
+import { DashboardLayout, findGridLayout } from '@/store/modules/layout';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
@@ -93,24 +94,16 @@ export default class Dashboard extends Vue {
     return this.getDashboardLayout;
   }
 
-  findGridLayout(name: string): GridItemData {
-    let layout = this.getDashboardLayout.find((value) => value.i === name);
-    if (!layout) {
-      layout = { i: name, x: 0, y: 6, w: 4, h: 6 };
-    }
-    return layout;
-  }
-
   get gridLayoutDaily(): GridItemData {
-    return this.findGridLayout('g-dailyChart');
+    return findGridLayout(this.gridLayout, DashboardLayout.dailyChart);
   }
 
   get gridLayoutHourly(): GridItemData {
-    return this.findGridLayout('g-hourlyChart');
+    return findGridLayout(this.gridLayout, DashboardLayout.hourlyChart);
   }
 
   get gridLayoutCumChart(): GridItemData {
-    return this.findGridLayout('g-cumChartChart');
+    return findGridLayout(this.gridLayout, DashboardLayout.cumChartChart);
   }
 
   mounted() {

src/views/Trading.vue

@@ -7,29 +7,29 @@
     @layout-updated="layoutUpdatedEvent"
   >
     <GridItem
-      :i="gridLayout[0].i"
+      :i="gridLayoutReload.i"
-      :x="gridLayout[0].x"
+      :x="gridLayoutReload.x"
-      :y="gridLayout[0].y"
+      :y="gridLayoutReload.y"
-      :w="gridLayout[0].w"
+      :w="gridLayoutReload.w"
-      :h="gridLayout[0].h"
+      :h="gridLayoutReload.h"
     >
       <ReloadControl />
     </GridItem>
     <GridItem
-      :i="gridLayout[1].i"
+      :i="gridLayoutBotControls.i"
-      :x="gridLayout[1].x"
+      :x="gridLayoutBotControls.x"
-      :y="gridLayout[1].y"
+      :y="gridLayoutBotControls.y"
-      :w="gridLayout[1].w"
+      :w="gridLayoutBotControls.w"
-      :h="gridLayout[1].h"
+      :h="gridLayoutBotControls.h"
     >
       <BotControls class="mt-3" />
     </GridItem>
     <GridItem
-      :i="gridLayout[2].i"
+      :i="gridLayoutMultiPane.i"
-      :x="gridLayout[2].x"
+      :x="gridLayoutMultiPane.x"
-      :y="gridLayout[2].y"
+      :y="gridLayoutMultiPane.y"
-      :w="gridLayout[2].w"
+      :w="gridLayoutMultiPane.w"
-      :h="gridLayout[2].h"
+      :h="gridLayoutMultiPane.h"
     >
       <b-tabs content-class="mt-3" class="mt-3">
         <b-tab title="Status" active>
@@ -51,11 +51,11 @@
       </b-tabs>
     </GridItem>
     <GridItem
-      :i="gridLayout[3].i"
+      :i="gridLayoutOpenTrades.i"
-      :x="gridLayout[3].x"
+      :x="gridLayoutOpenTrades.x"
-      :y="gridLayout[3].y"
+      :y="gridLayoutOpenTrades.y"
-      :w="gridLayout[3].w"
+      :w="gridLayoutOpenTrades.w"
-      :h="gridLayout[3].h"
+      :h="gridLayoutOpenTrades.h"
       drag-allow-from=".card-header"
     >
       <TradeList
@@ -67,11 +67,11 @@
       />
     </GridItem>
     <GridItem
-      :i="gridLayout[4].i"
+      :i="gridLayoutTradeHistory.i"
-      :x="gridLayout[4].x"
+      :x="gridLayoutTradeHistory.x"
-      :y="gridLayout[4].y"
+      :y="gridLayoutTradeHistory.y"
-      :w="gridLayout[4].w"
+      :w="gridLayoutTradeHistory.w"
-      :h="gridLayout[4].h"
+      :h="gridLayoutTradeHistory.h"
       drag-allow-from=".card-header"
     >
       <TradeList
@@ -84,11 +84,11 @@
       <TradeDetail v-if="detailTradeId" :trade="tradeDetail"> </TradeDetail>
     </GridItem>
     <GridItem
-      :i="gridLayout[5].i"
+      :i="gridLayoutLogView.i"
-      :x="gridLayout[5].x"
+      :x="gridLayoutLogView.x"
-      :y="gridLayout[5].y"
+      :y="gridLayoutLogView.y"
-      :w="gridLayout[5].w"
+      :w="gridLayoutLogView.w"
-      :h="gridLayout[5].h"
+      :h="gridLayoutLogView.h"
     >
       <LogViewer />
     </GridItem>
@@ -113,6 +113,7 @@ import LogViewer from '@/components/ftbot/LogViewer.vue';
 
 import { Trade } from '@/types';
 import { UserStoreGetters } from '@/store/modules/ftbot';
+import { TradeLayout, findGridLayout } from '@/store/modules/layout';
 
 const ftbot = namespace('ftbot');
 const layoutNs = namespace('layout');
@@ -150,6 +151,30 @@ 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);
+  }
+
+  get gridLayoutMultiPane(): GridItemData {
+    return findGridLayout(this.gridLayout, TradeLayout.multiPane);
+  }
+
+  get gridLayoutOpenTrades(): GridItemData {
+    return findGridLayout(this.gridLayout, TradeLayout.openTrades);
+  }
+
+  get gridLayoutTradeHistory(): GridItemData {
+    return findGridLayout(this.gridLayout, TradeLayout.tradeHistory);
+  }
+
+  get gridLayoutLogView(): GridItemData {
+    return findGridLayout(this.gridLayout, TradeLayout.logView);
+  }
+
   layoutUpdatedEvent(newLayout) {
     this.setTradingLayout(newLayout);
   }