Added user preferences backend and UI

4 files changed, 246 insertions, 40 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index c8a47bbc..90677d0d 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -21,10 +21,12 @@
   -->
 
 <template>
-	<Content app-name="polls" :class="transitionClass">
-		<Navigation v-if="getCurrentUser()" />
+	<Content app-name="polls" :class="[transitionClass, { 'experimental': settings.experimental, 'bgimage': settings.useImage, 'bgcolored': settings.experimental }]">
+		<Navigation v-if="getCurrentUser()" :class="{ 'glassy': settings.glassyNavigation }" />
 		<router-view />
-		<SideBar v-if="sideBarOpen && $store.state.poll.id" :active="activeTab" />
+		<SideBar v-if="sideBarOpen && $store.state.poll.id"
+			:active="activeTab"
+			:class="{ 'glassy': settings.glassySidebar }" />
 	</Content>
 </template>
 
@@ -35,6 +37,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { showError } from '@nextcloud/dialogs'
 import { Content } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { mapState } from 'vuex'
 
 export default {
 	name: 'App',
@@ -52,6 +55,13 @@ export default {
 		}
 	},
 
+	computed: {
+		...mapState({
+			settings: state => state.settings.user,
+		}),
+
+	},
+
 	created() {
 		subscribe('transitions-off', (delay) => {
 			this.transitionClass = ''
@@ -82,6 +92,7 @@ export default {
 
 		})
 
+		this.$store.dispatch('getSettings')
 		if (getCurrentUser()) {
 			this.updatePolls()
 			subscribe('update-polls', () => {
@@ -302,42 +313,6 @@ input {
 }
 
 // experimental colored background in the main area
-.app-polls.bgcolored {
-	.app-navigation {
-		border-right: 0px;
-		box-shadow: 2px 0 6px var(--color-box-shadow);
-	}
-	.app-content {
-		background-color: var(--color-primary-light);
-		[class*='area__'] {
-			box-shadow: 2px 2px 6px var(--color-box-shadow);
-			margin: 12px;
-		}
-	}
-}
-
-// experimental background image
-.app-polls.bgimage {
-	background: url('https://images.unsplash.com/photo-1589967698280-1e86b3d8c1ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80)');
-	background-size: cover;
-	.app-navigation {
-		backdrop-filter: blur(10px);
-		background-color: rgba(255, 255, 255, 0.5);
-		border-right: 0px;
-		box-shadow: 2px 0 6px var(--color-box-shadow);
-	}
-	.app-content {
-		background-color: transparent;
-	}
-	.app-sidebar {
-		backdrop-filter: blur(10px);
-		background-color: rgba(255, 255, 255, 0.5);
-	}
-	[class*='area__'] {
-		box-shadow: 2px 2px 6px var(--color-box-shadow);
-		margin: 12px;
-	}
-}
 
 [class*='area__'] {
 	padding: 8px;
@@ -347,4 +322,41 @@ input {
 	min-width: 320px;
 }
 
+.experimental {
+	&.app-polls.bgcolored {
+		.app-navigation {
+			border-right: 0px;
+			box-shadow: 2px 0 6px var(--color-box-shadow);
+		}
+		.app-content {
+			background-color: var(--color-primary-light);
+			[class*='area__'] {
+				box-shadow: 2px 2px 6px var(--color-box-shadow);
+				margin: 12px;
+			}
+		}
+	}
+
+	// experimental background image
+	&.app-polls.bgimage {
+		background: url('https://images.unsplash.com/photo-1589967698280-1e86b3d8c1ee?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1334&q=80)');
+		background-size: cover;
+		.glassy {
+			backdrop-filter: blur(10px);
+			background-color: rgba(255, 255, 255, 0.5);
+		}
+		.app-navigation {
+			border-right: 0px;
+			box-shadow: 2px 0 6px var(--color-box-shadow);
+		}
+		.app-content {
+			background-color: transparent;
+		}
+		[class*='area__'] {
+			box-shadow: 2px 2px 6px var(--color-box-shadow);
+			margin: 12px;
+		}
+	}
+}
+
 </style>
diff --git a/src/js/components/Navigation/Navigation.vue b/src/js/components/Navigation/Navigation.vue
index d64751f1..cbd59175 100644
--- a/src/js/components/Navigation/Navigation.vue
+++ b/src/js/components/Navigation/Navigation.vue
@@ -38,14 +38,20 @@
 				</ul>
 			</AppNavigationItem>
 		</template>
+		<AppNavigationSettings :title="t('core', 'Settings')">
+			<NavigationSettings />
+		</AppNavigationSettings>
 	</AppNavigation>
 </template>
 
 <script>
 
+import { AppNavigation, AppNavigationNew, AppNavigationItem, AppNavigationSettings } from '@nextcloud/vue'
+import { showError } from '@nextcloud/dialogs'
+import { mapGetters } from 'vuex'
 import CreateDlg from '../Create/CreateDlg'
 import PollNavigationItems from './PollNavigationItems'
-import { showError } from '@nextcloud/dialogs'
+import NavigationSettings from './NavigationSettings'
 import { emit } from '@nextcloud/event-bus'
 import { AppNavigation, AppNavigationNew, AppNavigationItem } from '@nextcloud/vue'
 import { mapGetters } from 'vuex'
@@ -56,6 +62,8 @@ export default {
 		AppNavigation,
 		AppNavigationNew,
 		AppNavigationItem,
+		AppNavigationSettings,
+		NavigationSettings,
 		CreateDlg,
 		PollNavigationItems,
 	},
diff --git a/src/js/components/Navigation/NavigationSettings.vue b/src/js/components/Navigation/NavigationSettings.vue
new file mode 100644
index 00000000..df869895
--- /dev/null
+++ b/src/js/components/Navigation/NavigationSettings.vue
@@ -0,0 +1,105 @@
+<!--
+  - @copyright Copyright (c) 2018 René Gieling <github@dartcafe.de>
+  -
+  - @author René Gieling <github@dartcafe.de>
+  -
+  - @license GNU AGPL version 3 or any later version
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<template>
+	<div>
+		<input id="experimental" v-model="experimental"
+			type="checkbox" class="checkbox">
+		<label for="experimental">{{ t('polls', 'Activate experimental settings.') }}</label>
+
+		<div v-if="experimental">
+			<input id="useimage" v-model="useImage"
+				type="checkbox" class="checkbox">
+			<label for="useimage">{{ t('polls', 'Use background image.') }}</label>
+
+			<!-- <input v-if="bgImage" v-model="imageurl" type="text"> -->
+			<input id="glassyNavigation" v-model="glassyNavigation"
+				type="checkbox" class="checkbox">
+			<label for="glassyNavigation">{{ t('polls', 'Glassy navigation.') }}</label>
+			<input id="glassySidebar" v-model="glassySidebar"
+				type="checkbox" class="checkbox">
+			<label for="glassySidebar">{{ t('polls', 'Glassy sidebar.') }}</label>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import { mapState } from 'vuex'
+export default {
+	name: 'NavigationSettings',
+
+	computed: {
+		...mapState({
+			settings: state => state.settings.user,
+		}),
+		// Add bindings
+		experimental: {
+			get() {
+				return this.settings.experimental
+			},
+			set(value) {
+				this.writeValue({ experimental: value })
+			},
+		},
+		useImage: {
+			get() {
+				return this.settings.useImage
+			},
+			set(value) {
+				this.writeValue({ useImage: value })
+			},
+		},
+		imageUrl: {
+			get() {
+				return this.settings.imageUrl
+			},
+			set(value) {
+				this.writeValue({ imageUrl: value })
+			},
+		},
+		glassyNavigation: {
+			get() {
+				return this.settings.glassyNavigation
+			},
+			set(value) {
+				this.writeValue({ glassyNavigation: value })
+			},
+		},
+		glassySidebar: {
+			get() {
+				return this.settings.glassySidebar
+			},
+			set(value) {
+				this.writeValue({ glassySidebar: value })
+			},
+		},
+	},
+
+	methods: {
+		writeValue(value) {
+			this.$store.commit('setUserSetting', value)
+			this.$store.dispatch('writeSetting')
+		},
+	},
+}
+</script>
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
new file mode 100644
index 00000000..43a4b6fd
--- /dev/null
+++ b/src/js/store/modules/settings.js
@@ -0,0 +1,81 @@
+/*
+ * @copyright Copyright (c) 2019 Rene Gieling <github@dartcafe.de>
+ *
+ * @author Rene Gieling <github@dartcafe.de>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
+
+const defaultSettings = () => {
+	return {
+		user: {
+			experimental: false,
+			useImage: false,
+			imageUrl: '',
+			glassyNavigation: false,
+			glassySidebar: false,
+		},
+	}
+}
+
+const state = defaultSettings()
+
+const mutations = {
+	reset(state) {
+		Object.assign(state, defaultSettings())
+	},
+
+	setUserSetting(state, payload) {
+		Object.assign(state.user, payload)
+	},
+}
+
+const getters = {
+}
+
+const actions = {
+	getSettings(context) {
+		const endPoint = 'apps/polls/preferences/get'
+
+		return axios.get(generateUrl(endPoint))
+			.then((response) => {
+				context.commit('setUserSetting', JSON.parse(response.data.preferences))
+			})
+			.catch(() => {
+				context.commit('reset')
+			})
+	},
+	writeSetting(context) {
+		const endPoint = 'apps/polls/preferences/write'
+		// context.commit('setUserSetting', { settings: payload })
+
+		return axios.post(generateUrl(endPoint), { settings: context.state.user })
+			.then((response) => {
+				context.commit('setUserSetting', JSON.parse(response.data.preferences))
+			})
+			.catch((error) => {
+				console.error('Error writing preferences', { error: error.response }, { preferences: state.user })
+				throw error
+			})
+	},
+
+}
+
+export default { state, mutations, getters, actions }