Implement layout locking

src/components/layout/NavBar.vue

@@ -30,6 +30,7 @@
               <template #button-content>
                 <b-avatar size="2em" button>FT</b-avatar>
               </template>
+              <b-checkbox v-model="layoutLockedLocal" class="pl-5">Lock layout</b-checkbox>
               <b-dropdown-item to="/settings">Settings</b-dropdown-item>
               <b-dropdown-item @click="resetDynamicLayout">Reset Layout</b-dropdown-item>
               <b-dropdown-item to="/" @click.native="logout()">Sign Out</b-dropdown-item>
@@ -51,7 +52,7 @@ import LoginModal from '@/views/LoginModal.vue';
 import { State, Action, namespace } from 'vuex-class';
 import userService from '@/shared/userService';
 import BootswatchThemeSelect from '@/components/BootswatchThemeSelect.vue';
-import { LayoutActions } from '@/store/modules/layout';
+import { LayoutActions, LayoutGetters } from '@/store/modules/layout';
 import { BotStoreGetters } from '@/store/modules/ftbot';
 
 const ftbot = namespace('ftbot');
@@ -73,10 +74,14 @@ export default class NavBar extends Vue {
 
   @ftbot.Getter [BotStoreGetters.botName]: string;
 
+  @layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
+
   @layoutNs.Action [LayoutActions.resetDashboardLayout];
 
   @layoutNs.Action [LayoutActions.resetTradingLayout];
 
+  @layoutNs.Action [LayoutActions.setLayoutLocked];
+
   mounted() {
     this.ping();
     this.pingInterval = window.setInterval(this.ping, 60000);
@@ -93,6 +98,15 @@ export default class NavBar extends Vue {
     this.setLoggedIn(false);
   }
 
+  get layoutLockedLocal() {
+    return this.getLayoutLocked;
+  }
+
+  set layoutLockedLocal(value: boolean) {
+    console.log(value);
+    this.setLayoutLocked(value);
+  }
+
   resetDynamicLayout(): void {
     const route = this.$router.currentRoute.path;
     console.log(`resetLayout called for ${route}`);

src/store/modules/layout.ts

@@ -21,6 +21,7 @@ export enum DashboardLayout {
 export enum LayoutGetters {
   getDashboardLayout = 'getDashboardLayout',
   getTradingLayout = 'getTradingLayout',
+  getLayoutLocked = 'getLayoutLocked',
 }
 
 export enum LayoutActions {
@@ -28,11 +29,13 @@ export enum LayoutActions {
   setTradingLayout = 'setTradingLayout',
   resetDashboardLayout = 'resetDashboardLayout',
   resetTradingLayout = 'resetTradingLayout',
+  setLayoutLocked = 'setLayoutLocked',
 }
 
 export enum LayoutMutations {
   setDashboardLayout = 'setDashboardLayout',
   setTradingLayout = 'setTradingLayout',
+  setLayoutLocked = 'setLayoutLocked',
 }
 // Define default layouts
 const DEFAULT_TRADING_LAYOUT: GridItemData[] = [
@@ -55,6 +58,15 @@ const DEFAULT_DASHBOARD_LAYOUT: GridItemData[] = [
 
 const STORE_DASHBOARD_LAYOUT = 'ftDashboardLayout';
 const STORE_TRADING_LAYOUT = 'ftTradingLayout';
+const STORE_LAYOUT_LOCK = 'ftLayoutLocked';
+
+function getLayoutLocked() {
+  const fromStore = localStorage.getItem(STORE_LAYOUT_LOCK);
+  if (fromStore) {
+    return JSON.parse(fromStore);
+  }
+  return true;
+}
 
 function getLayout(storageString: string, defaultLayout: GridItemData[]) {
   const fromStore = localStorage.getItem(storageString);
@@ -83,6 +95,7 @@ export default {
   state: {
     dashboardLayout: getLayout(STORE_DASHBOARD_LAYOUT, DEFAULT_DASHBOARD_LAYOUT),
     tradingLayout: getLayout(STORE_TRADING_LAYOUT, DEFAULT_TRADING_LAYOUT),
+    layoutLocked: getLayoutLocked(),
   },
 
   getters: {
@@ -92,6 +105,9 @@ export default {
     [LayoutGetters.getTradingLayout](state) {
       return state.tradingLayout;
     },
+    [LayoutGetters.getLayoutLocked](state) {
+      return state.layoutLocked;
+    },
   },
 
   mutations: {
@@ -104,6 +120,10 @@ export default {
       state.tradingLayout = layout;
       localStorage.setItem(STORE_TRADING_LAYOUT, JSON.stringify(layout));
     },
+    [LayoutMutations.setLayoutLocked](state, locked: boolean) {
+      state.layoutLocked = locked;
+      localStorage.setItem(STORE_LAYOUT_LOCK, JSON.stringify(locked));
+    },
   },
 
   actions: {
@@ -113,6 +133,9 @@ export default {
     [LayoutActions.setTradingLayout]({ commit }, layout) {
       commit(LayoutMutations.setTradingLayout, layout);
     },
+    [LayoutActions.setLayoutLocked]({ commit }, locked: boolean) {
+      commit(LayoutMutations.setLayoutLocked, locked);
+    },
     [LayoutActions.resetDashboardLayout]({ commit }) {
       commit(
         LayoutMutations.setDashboardLayout,

src/views/Dashboard.vue

@@ -5,6 +5,8 @@
     :layout="gridLayout"
     :vertical-compact="false"
     :margin="[5, 5]"
+    :is-resizable="!getLayoutLocked"
+    :is-draggable="!getLayoutLocked"
     @layout-updated="layoutUpdatedEvent"
   >
     <GridItem
@@ -171,6 +173,8 @@ export default class Dashboard extends Vue {
 
   @layoutNs.Action [LayoutActions.setDashboardLayout];
 
+  @layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
+
   @ftbot.Action getOpenTrades;
 
   @ftbot.Action getBalance;

src/views/Trading.vue

@@ -5,6 +5,8 @@
     :layout="gridLayout"
     :vertical-compact="false"
     :margin="[5, 5]"
+    :is-resizable="!getLayoutLocked"
+    :is-draggable="!getLayoutLocked"
     @layout-updated="layoutUpdatedEvent"
   >
     <GridItem
@@ -16,7 +18,7 @@
       drag-allow-from=".card-header"
     >
       <DraggableContainer header="Bot Controls">
-        <ReloadControl class="mt-3" />
+        <ReloadControl class="mt-2" />
         <BotControls />
       </DraggableContainer>
     </GridItem>
@@ -206,6 +208,8 @@ export default class Trading extends Vue {
 
   @layoutNs.Action [LayoutActions.setTradingLayout];
 
+  @layoutNs.Getter [LayoutGetters.getLayoutLocked]: boolean;
+
   get gridLayout(): GridItemData[] {
     return this.getTradingLayout;
   }