ホームのカスタマイズ情報を複数のデバイス間で同期できるように

4 files changed, 73 insertions, 3 deletions

diff --git a/src/client/app/common/views/components/settings/settings.vue b/src/client/app/common/views/components/settings/settings.vue
index 0cbc40da57..1c02bdee8c 100644
--- a/src/client/app/common/views/components/settings/settings.vue
+++ b/src/client/app/common/views/components/settings/settings.vue
@@ -132,6 +132,12 @@
 			</section>
 
 			<section>
+				<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>
+			</section>
+
+			<section>
 				<header>{{ $t('@._settings.web-search-engine') }}</header>
 				<ui-input v-model="webSearchEngine">{{ $t('@._settings.web-search-engine') }}<template #desc>{{ $t('@._settings.web-search-engine-desc') }}</template></ui-input>
 			</section>
@@ -500,6 +506,16 @@ export default Vue.extend({
 			get() { return this.$store.state.device.mobileNotificationPosition; },
 			set(value) { this.$store.commit('device/set', { key: 'mobileNotificationPosition', value }); }
 		},
+
+		homeProfile: {
+			get() { return this.$store.state.device.homeProfile; },
+			set(value) { this.$store.commit('device/set', { key: 'homeProfile', value }); }
+		},
+
+		mobileHomeProfile: {
+			get() { return this.$store.state.device.mobileHomeProfile; },
+			set(value) { this.$store.commit('device/set', { key: 'mobileHomeProfile', value }); }
+		},
 	},
 	created() {
 		this.$root.getMeta().then(meta => {
diff --git a/src/client/app/desktop/views/home/home.vue b/src/client/app/desktop/views/home/home.vue
index d4677df842..49ac4c2407 100644
--- a/src/client/app/desktop/views/home/home.vue
+++ b/src/client/app/desktop/views/home/home.vue
@@ -102,7 +102,11 @@ export default Vue.extend({
 	computed: {
 		home(): any[] {
 			if (this.$store.getters.isSignedIn) {
-				return this.$store.state.device.home || [];
+				if (this.$store.state.device.homeProfile) {
+					return this.$store.state.settings.homeProfiles[this.$store.state.device.homeProfile] || this.$store.state.device.home || [];
+				} else {
+					return this.$store.state.device.home || [];
+				}
 			} else {
 				return [{
 					name: 'instance',
@@ -186,6 +190,14 @@ export default Vue.extend({
 			if (this.$store.state.device.home == null) {
 				this.$store.commit('device/setHome', _defaultDesktopHomeWidgets);
 			}
+
+			if (this.$store.state.device.homeProfile) {
+				this.$watch('$store.state.device.home', () => {
+					this.$store.dispatch('settings/updateHomeProfile');
+				}, {
+					deep: true
+				});
+			}
 		}
 	},
 
@@ -245,7 +257,7 @@ export default Vue.extend({
 
 		focus() {
 			(this.$refs.content as any).focus();
-		}
+		},
 	}
 });
 </script>
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index 7130fddb34..7f0ef678de 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -72,7 +72,11 @@ export default Vue.extend({
 
 	computed: {
 		widgets(): any[] {
-			return this.$store.state.device.mobileHome;
+			if (this.$store.state.device.mobileHomeProfile) {
+				return this.$store.state.settings.mobileHomeProfiles[this.$store.state.device.mobileHomeProfile] || this.$store.state.device.mobileHome;
+			} else {
+				return this.$store.state.device.mobileHome;
+			}
 		}
 	},
 
@@ -98,6 +102,14 @@ export default Vue.extend({
 				id: 'g', data: {}
 			}]);
 		}
+
+		if (this.$store.state.device.mobileHomeProfile) {
+			this.$watch('$store.state.device.mobileHome', () => {
+				this.$store.dispatch('settings/updateMobileHomeProfile');
+			}, {
+				deep: true
+			});
+		}
 	},
 
 	mounted() {
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index 6f545eb09b..7b56628b31 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -34,10 +34,14 @@ const defaultSettings = {
 	gamesReversiShowBoardLabels: false,
 	gamesReversiUseAvatarStones: true,
 	disableAnimatedMfm: false,
+	homeProfiles: {},
+	mobileHomeProfiles: {},
 };
 
 const defaultDeviceSettings = {
 	home: null,
+	homeProfile: null,
+	mobileHomeProfile: null,
 	mobileHome: [],
 	deck: null,
 	deckMode: false,
@@ -361,6 +365,32 @@ export default (os: MiOS) => new Vuex.Store({
 						});
 					}
 				},
+
+				updateHomeProfile(ctx) {
+					const profiles = ctx.state.homeProfiles;
+					profiles[ctx.rootState.device.homeProfile] = ctx.rootState.device.home;
+					ctx.commit('set', {
+						key: 'homeProfiles',
+						value: profiles
+					});
+					os.api('i/update-client-setting', {
+						name: 'homeProfiles',
+						value: profiles
+					});
+				},
+
+				updateMobileHomeProfile(ctx) {
+					const profiles = ctx.state.mobileHomeProfiles;
+					profiles[ctx.rootState.device.mobileHomeProfile] = ctx.rootState.device.mobileHome;
+					ctx.commit('set', {
+						key: 'mobileHomeProfiles',
+						value: profiles
+					});
+					os.api('i/update-client-setting', {
+						name: 'mobileHomeProfiles',
+						value: profiles
+					});
+				}
 			}
 		}
 	}