デッキの状態を同期できるように

src/client/app/common/views/components/settings/settings.vue

@@ -135,6 +135,7 @@
 				<header>{{ $t('@._settings.sync') }}</header>
 				<ui-input v-if="$root.isMobile" v-model="homeProfile">{{ $t('@._settings.home-profile') }}</ui-input>
 				<ui-input v-else v-model="mobileHomeProfile">{{ $t('@._settings.home-profile') }}</ui-input>
+				<ui-input v-model="deckProfile">{{ $t('@._settings.deck-profile') }}</ui-input>
 			</section>
 
 			<section>
@@ -516,6 +517,11 @@ export default Vue.extend({
 			get() { return this.$store.state.device.mobileHomeProfile; },
 			set(value) { this.$store.commit('device/set', { key: 'mobileHomeProfile', value }); }
 		},
+
+		deckProfile: {
+			get() { return this.$store.state.device.deckProfile; },
+			set(value) { this.$store.commit('device/set', { key: 'deckProfile', value }); }
+		},
 	},
 	created() {
 		this.$root.getMeta().then(meta => {

src/client/app/common/views/deck/deck.column.vue

@@ -146,7 +146,8 @@ export default Vue.extend({
 
 		toggleActive() {
 			if (!this.isStacked) return;
-			const vms = this.$store.state.device.deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
+			const deck = this.$store.state.device.deckProfile ? this.$store.state.settings.deckProfiles[this.$store.state.device.deckProfile] : this.$store.state.device.deck;
+			const vms = deck.layout.find(ids => ids.indexOf(this.column.id) != -1).map(id => this.getColumnVm(id));
 			if (this.active && countIf(vm => vm.$el.classList.contains('active'), vms) == 1) return;
 			this.active = !this.active;
 		},

src/client/app/common/views/deck/deck.vue

@@ -25,20 +25,29 @@ import * as uuid from 'uuid';
 
 export default Vue.extend({
 	i18n: i18n('deck'),
+
 	components: {
 		XColumnCore
 	},
 
 	computed: {
+		deck() {
+			if (this.$store.state.device.deckProfile) {
+				return this.$store.state.settings.deckProfiles[this.$store.state.device.deckProfile] || this.$store.state.device.deck;
+			} else {
+				return this.$store.state.device.deck;
+			}
+		},
+
 		columns(): any[] {
-			if (this.$store.state.device.deck == null) return [];
-			return this.$store.state.device.deck.columns;
+			if (this.deck == null) return [];
+			return this.deck.columns;
 		},
 
 		layout(): any[] {
-			if (this.$store.state.device.deck == null) return [];
-			if (this.$store.state.device.deck.layout == null) return this.$store.state.device.deck.columns.map(c => [c.id]);
-			return this.$store.state.device.deck.layout;
+			if (this.deck == null) return [];
+			if (this.deck.layout == null) return this.deck.columns.map(c => [c.id]);
+			return this.deck.layout;
 		},
 
 		style(): any {
@@ -75,7 +84,7 @@ export default Vue.extend({
 	},
 
 	created() {
-		if (this.$store.state.device.deck == null) {
+		if (this.deck == null) {
 			const deck = {
 				columns: [/*{
 					type: 'widgets',
@@ -106,6 +115,14 @@ export default Vue.extend({
 				value: deck
 			});
 		}
+
+		if (this.$store.state.device.deckProfile) {
+			this.$watch('$store.state.device.deck', () => {
+				this.$store.dispatch('settings/updateDeckProfile');
+			}, {
+				deep: true
+			});
+		}
 	},
 
 	mounted() {