Add Dashboard Mode Dropdown

Author: Sindarius

src/App.vue

@@ -104,7 +104,7 @@ textarea {
 		<v-main id="content">
 			<v-scroll-y-transition>
 				<v-container v-show="!hideGlobalContainer || $vuetify.breakpoint.mdAndUp" id="global-container" fluid class="py-0">
-						<fff-container-panel v-if="isFFForUnset()"></fff-container-panel>
+						<fff-container-panel v-if="isFFForUnset"></fff-container-panel>
 						<cnc-container-panel v-else></cnc-container-panel>
 				</v-container>
 			</v-scroll-y-transition>
@@ -136,7 +136,7 @@ import { mapState, mapGetters, mapActions } from 'vuex'
 
 import { Menu, Routes } from './routes'
 import { isPrinting } from './store/machine/modelEnums.js'
-import { MachineMode } from './store/machine/modelEnums.js';
+import { MachineMode, DashboardMode } from './store/machine/modelEnums.js';
 
 export default {
 	computed: {
@@ -154,6 +154,7 @@ export default {
 			machineMode: state => state.machine.model.state.machineMode,
 			injectedComponents: state => state.uiInjection.injectedComponents
 		}),
+		...mapState('settings',['dashboardMode']),
 		...mapGetters('machine', ['hasTemperaturesToDisplay']),
 		...mapGetters('machine/model', ['jobProgress']),
 		categories() {
@@ -179,7 +180,13 @@ export default {
 				return this.darkTheme ? 'red darken-5' : 'red lighten-4';
 			}
 			return this.darkTheme ? 'green darken-5' : 'green lighten-4';
-		}
+		},
+		isFFForUnset() {
+			if (this.dashboardMode === DashboardMode.default) {
+				return !this.machineMode || this.machineMode === MachineMode.fff;
+			}
+			return this.dashboardMode === DashboardMode.fff;
+		},
 	},
 	data() {
 		return {
@@ -209,9 +216,6 @@ export default {
 				document.title = title;
 			}
 		},
-		isFFForUnset() {
-			return !this.machineMode || this.machineMode === MachineMode.fff;
-		},
 	},
 	mounted() {
 		// Attempt to disconnect from every machine when the page is being unloaded

src/components/panels/SettingsAppearancePanel.vue

@@ -1,60 +1,89 @@
 <template>
 	<v-card outlined>
-		<v-card-title>
-			{{ $t('panel.settingsAppearance.caption') }}
-		</v-card-title>
+		<v-card-title>{{ $t('panel.settingsAppearance.caption') }}</v-card-title>
 
 		<v-card-text class="d-flex flex-column">
-			<v-switch v-model="darkTheme" :label="$t('panel.settingsAppearance.darkTheme')" hide-details class="mt-0 mb-3"></v-switch>
-			<v-select v-model="language" :items="languages" item-text="language" item-value="code" :return-object="false" :label="$t('panel.settingsAppearance.language')" hide-details></v-select>
+			<v-switch :label="$t('panel.settingsAppearance.darkTheme')" class="mt-0 mb-3" hide-details v-model="darkTheme"></v-switch>
+			<v-select :items="languages" :label="$t('panel.settingsAppearance.language')" :return-object="false" hide-details item-text="language" item-value="code" v-model="language"></v-select>
 			<v-tooltip bottom>
 				<template #activator="{ on }">
-					<v-switch v-model="useBinaryPrefix" v-on="on" :label="$t('panel.settingsAppearance.binaryFileSizes')" hide-details></v-switch>
+					<v-switch :label="$t('panel.settingsAppearance.binaryFileSizes')" hide-details v-model="useBinaryPrefix" v-on="on"></v-switch>
 				</template>
 				{{ $t('panel.settingsAppearance.binaryFileSizesTitle') }}
 			</v-tooltip>
 			<v-tooltip bottom>
 				<template #activator="{ on }">
-					<v-switch v-model="disableAutoComplete" v-on="on" :label="$t('panel.settingsAppearance.disableAutoComplete')" hide-details></v-switch>
+					<v-switch :label="$t('panel.settingsAppearance.disableAutoComplete')" hide-details v-model="disableAutoComplete" v-on="on"></v-switch>
 				</template>
 				{{ $t('panel.settingsAppearance.disableAutoCompleteTitle') }}
 			</v-tooltip>
+			<v-select class="mt-3" :items="dashboardModes" item-text="value" item-value="value" label="Dashboard Mode" v-model="dashboardMode"></v-select>
 		</v-card-text>
 	</v-card>
 </template>
 
 <script>
-'use strict'
+'use strict';
 
-import { mapState, mapMutations } from 'vuex'
+import {mapState, mapMutations} from 'vuex';
+import {DashboardMode} from '../../store/machine/modelEnums.js';
 
 export default {
 	computed: {
 		...mapState(['settings']),
 		darkTheme: {
-			get() { return this.settings.darkTheme; },
-			set(value) { this.update({ darkTheme: value }); }
+			get() {
+				return this.settings.darkTheme;
+			},
+			set(value) {
+				this.update({darkTheme: value});
+			},
 		},
 		language: {
-			get() { return this.settings.language; },
-			set(value) { this.update({ language: value }); }
+			get() {
+				return this.settings.language;
+			},
+			set(value) {
+				this.update({language: value});
+			},
 		},
 		languages() {
 			const result = [];
 			for (let key in this.$i18n.messages) {
-				result.push({ code: key, language: this.$i18n.messages[key].language });
+				result.push({code: key, language: this.$i18n.messages[key].language});
 			}
 			return result;
 		},
 		useBinaryPrefix: {
-			get() { return this.settings.useBinaryPrefix; },
-			set(value) { this.update({ useBinaryPrefix: value }); }
+			get() {
+				return this.settings.useBinaryPrefix;
+			},
+			set(value) {
+				this.update({useBinaryPrefix: value});
+			},
 		},
 		disableAutoComplete: {
-			get() { return this.settings.disableAutoComplete; },
-			set(value) { this.update({ disableAutoComplete: value }); }
-		}
+			get() {
+				return this.settings.disableAutoComplete;
+			},
+			set(value) {
+				this.update({disableAutoComplete: value});
+			},
+		},
+		dashboardMode: {
+			get() {
+				return this.settings.dashboardMode;
+			},
+			set(value) {
+				this.update({dashboardMode: value});
+			},
+		},
+		dashboardModes() {
+			return Object.keys(DashboardMode).map((key) => {
+				return {key: key, value: DashboardMode[key]};
+			});
+		},
 	},
-	methods: mapMutations('settings', ['update'])
-}
+	methods: mapMutations('settings', ['update']),
+};
 </script>

src/routes/Control/Dashboard.vue

@@ -10,22 +10,26 @@
 </template>
 
 <script>
-'use strict'
+'use strict';
 
-import { mapState } from 'vuex'
+import {mapState} from 'vuex';
 
-import { registerRoute } from '..'
-import { MachineMode } from '../../store/machine/modelEnums.js'
+import {registerRoute} from '..';
+import {MachineMode, DashboardMode} from '../../store/machine/modelEnums.js';
 
 export default {
 	computed: {
 		...mapState('machine/model', {
-			atxPower: state => state.state.atxPower,
-			machineMode: state => state.state.machineMode
+			atxPower: (state) => state.state.atxPower,
+			machineMode: (state) => state.state.machineMode,
 		}),
+		...mapState('settings', ['dashboardMode']),
 		isFFForUnset() {
-			return !this.machineMode || (this.machineMode === MachineMode.fff);
-		}
+			if (this.dashboardMode === DashboardMode.default) {
+				return !this.machineMode || this.machineMode === MachineMode.fff;
+			}
+			return this.dashboardMode === DashboardMode.fff;
+		},
 	},
 	install() {
 		// Register a route via Control -> Dashboard
@@ -34,10 +38,10 @@ export default {
 				Dashboard: {
 					icon: 'mdi-view-dashboard',
 					caption: 'menu.control.dashboard',
-					path: '/'
-				}
-			}
+					path: '/',
+				},
+			},
 		});
-	}
-}
+	},
+};
 </script>

src/store/machine/modelEnums.js

@@ -240,3 +240,9 @@ export function isPrinting(status) {
 			status === StatusType.processing ||
 			status === StatusType.simulating);
 }
+
+export const DashboardMode = {
+	default : 'Default',
+	fff : 'FFF',
+	cnc : 'CNC'
+}

src/store/settings.js

@@ -37,7 +37,9 @@ export default {
 		},
 
 		enabledPlugins: ['Height Map'],
-		plugins: {}										// Third-party values
+		plugins: {},										// Third-party values
+		dashboardMode : 'default',
+
 	},
 	actions: {
 		async applyDefaults({ state, dispatch }) {