initial

4 files changed, 101 insertions, 16 deletions

diff --git a/src/js/components/Settings/ExpertimantalSettings.vue b/src/js/components/Settings/ExpertimantalSettings.vue
index 0d444b7d..a3782278 100644
--- a/src/js/components/Settings/ExpertimantalSettings.vue
+++ b/src/js/components/Settings/ExpertimantalSettings.vue
@@ -26,7 +26,7 @@
 			<input id="experimental" v-model="experimental"
 				type="checkbox" class="checkbox">
 			<label for="experimental">{{ t('polls', 'Try experimental styles') }}</label>
-			<div class="settings_description">
+			<div class="settings_details">
 				{{ t('polls', 'Some experimental UI variants. Changes the background color of the main area.') }}
 			</div>
 		</div>
@@ -36,15 +36,12 @@
 				<input id="useImage" v-model="useImage"
 					type="checkbox" class="checkbox">
 				<label for="useImage">{{ t('polls', 'Use background image') }}</label>
-				<div class="settings_description">
+				<div class="settings_details">
 					{{ t('polls', 'Add a background image to the main area.') }}
-				</div>
-			</div>
-
-			<div class="user_settings">
-				<input v-if="useImage" v-model="imageUrl" type="text">
-				<div class="settings_description">
-					{{ t('polls', 'Enter the URL of your favorite background image.') }}
+					<input v-if="useImage" v-model="imageUrl" type="text">
+					<div v-if="useImage">
+						{{ t('polls', 'Enter the URL of your favorite background image.') }}
+					</div>
 				</div>
 			</div>
 
@@ -52,7 +49,7 @@
 				<input id="glassyNavigation" v-model="glassyNavigation"
 					type="checkbox" class="checkbox">
 				<label for="glassyNavigation">{{ t('polls', 'Glassy navigation') }}</label>
-				<div class="settings_description">
+				<div class="settings_details">
 					{{ t('polls', 'Blurrs the background of the navigation (Does not work with all browsers).') }}
 				</div>
 			</div>
@@ -61,7 +58,7 @@
 				<input id="glassySidebar" v-model="glassySidebar"
 					type="checkbox" class="checkbox">
 				<label for="glassySidebar">{{ t('polls', 'Glassy sidebar') }}</label>
-				<div class="settings_description">
+				<div class="settings_details">
 					{{ t('polls', 'Blurrs the background of the sidebar (Does not work with all browsers).') }}
 				</div>
 			</div>
@@ -144,7 +141,8 @@ export default {
 		padding-top: 16px;
 	}
 
-	.settings_description {
+	.settings_details {
 		padding-top: 8px;
+		margin-left: 26px;
 	}
 </style>
diff --git a/src/js/components/Settings/FeatureSettings.vue b/src/js/components/Settings/FeatureSettings.vue
index e7e4e381..1d3a44f8 100644
--- a/src/js/components/Settings/FeatureSettings.vue
+++ b/src/js/components/Settings/FeatureSettings.vue
@@ -26,8 +26,21 @@
 			<input id="calendarPeek" v-model="calendarPeek"
 				type="checkbox" class="checkbox">
 			<label for="calendarPeek">{{ t('polls', 'Use calendar lookup') }}</label>
-			<div class="settings_description">
+			<div class="settings_details">
 				{{ t('polls', 'Check, if an option in a date poll is conflicting with or near an entry in your calendar.') }}
+				{{ t('polls', 'Opt in to the calendars, which should be checked.') }}
+
+				<div v-for="(calendar) in calendarChoices" :key="calendar.key" class="calendar-item">
+					<input :id="'calendar_' + calendar.key"
+						v-model="calendar.selected"
+						type="checkbox"
+						class="checkbox"
+						@click="clickedCalendar(calendar)">
+					<label :for="'calendar_' + calendar.key" class="calendar-checkbox">
+						<span class="bully" :style="{ backgroundColor: calendar.displayColor }" />
+						<span>{{ calendar.name }}</span>
+					</label>
+				</div>
 			</div>
 		</div>
 
@@ -35,7 +48,7 @@
 			<input id="defaultViewTextPoll" v-model="defaultViewTextPoll"
 				type="checkbox" class="checkbox">
 			<label for="defaultViewTextPoll">{{ t('polls', 'Text polls default to list view') }}</label>
-			<div class="settings_description">
+			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display text poll in a vertical aligned list rather than in the grid view. The initial default is list view.') }}
 			</div>
 		</div>
@@ -44,7 +57,7 @@
 			<input id="defaultViewDatePoll" v-model="defaultViewDatePoll"
 				type="checkbox" class="checkbox">
 			<label for="defaultViewDatePoll">{{ t('polls', 'Date polls default to list view') }}</label>
-			<div class="settings_description">
+			<div class="settings_details">
 				{{ t('polls', 'Check this, if you prefer to display date poll in a vertical view rather than in the grid view. The initial default is grid view.') }}
 			</div>
 		</div>
@@ -68,6 +81,7 @@ export default {
 	computed: {
 		...mapState({
 			settings: state => state.settings.user,
+			calendars: state => state.settings.availableCalendars,
 		}),
 		// Add bindings
 		calendarPeek: {
@@ -78,6 +92,25 @@ export default {
 				this.writeValue({ calendarPeek: value })
 			},
 		},
+
+		calendarChoices() {
+			var list = []
+			this.calendars.forEach((calendar) => {
+				// console.log(calendar.key.toString())
+				// console.log(this.settings.checkCalendars)
+				// console.log(this.settings.checkCalendars.includes(calendar.key.toString()))
+
+				list.push({
+					key: calendar.key.toString(),
+					name: calendar.name,
+					displayColor: calendar.displayColor,
+					selected: this.settings.checkCalendars.includes(calendar.key.toString()),
+				})
+			})
+
+			return list
+		},
+
 		defaultViewTextPoll: {
 			get() {
 				return (this.settings.defaultViewTextPoll === 'mobile')
@@ -109,6 +142,21 @@ export default {
 			this.$store.commit('settings/setPreference', value)
 			this.$store.dispatch('settings/write')
 		},
+
+		clickedCalendar(calendar) {
+			// console.log(calendar.key)
+			// console.log(checkCalendars)
+			if (this.settings.checkCalendars.includes(calendar.key)) {
+				// console.log(this.settings.checkCalendars)
+				// console.log('removed', this.settings.checkCalendars.filter(item => item !== calendar.key.toString()))
+				this.writeValue({ checkCalendars: this.settings.checkCalendars.filter(item => item !== calendar.key.toString()) })
+			} else {
+				this.$store.commit('settings/addCheckCalendar', { calendar: calendar })
+				// this.writeValue({ checkCalendars: checkCalendars })
+			}
+			// console.log(this.settings.checkCalendars)
+			this.$store.dispatch('settings/write')
+		},
 	},
 }
 </script>
@@ -118,7 +166,16 @@ export default {
 		padding-top: 16px;
 	}
 
-	.settings_description {
+	.settings_details {
 		padding-top: 8px;
+		margin-left: 26px;
+	}
+
+	.bully {
+		display: inline-block;
+		width: 11px;
+		height: 11px;
+		border-radius: 50%;
+		margin: 0 4px 0 0;
 	}
 </style>
diff --git a/src/js/components/Settings/SettingsDlg.vue b/src/js/components/Settings/SettingsDlg.vue
index aeafb472..fdce6178 100644
--- a/src/js/components/Settings/SettingsDlg.vue
+++ b/src/js/components/Settings/SettingsDlg.vue
@@ -52,9 +52,21 @@ export default {
 	data() {
 		return {
 			show: false,
+			calendars: [],
 		}
 	},
 
+	watch: {
+		show() {
+			if (this.show === true) {
+				this.$store.dispatch('settings/getCalendars')
+					.then((response) => {
+						this.calendars = response.data.calendars
+					})
+			}
+		},
+	},
+
 	created() {
 		subscribe('show-settings', () => {
 			this.show = true
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
index 4fd933d3..29ab512b 100644
--- a/src/js/store/modules/settings.js
+++ b/src/js/store/modules/settings.js
@@ -28,6 +28,7 @@ const defaultSettings = () => {
 		user: {
 			experimental: false,
 			calendarPeek: false,
+			checkCalendars: [],
 			useImage: false,
 			imageUrl: '',
 			glassyNavigation: false,
@@ -35,6 +36,7 @@ const defaultSettings = () => {
 			defaultViewTextPoll: 'mobile',
 			defaultViewDatePoll: 'desktop',
 		},
+		availableCalendars: [],
 		viewModes: [
 			'mobile',
 			'desktop',
@@ -55,6 +57,12 @@ const mutations = {
 			state.user[key] = payload[key]
 		})
 	},
+	setCalendars(state, payload) {
+		state.availableCalendars = payload.calendars
+	},
+	addCheckCalendar(state, payload) {
+		state.user.checkCalendars.push(payload.calendar.key)
+	},
 }
 
 const actions = {
@@ -81,6 +89,16 @@ const actions = {
 				throw error
 			})
 	},
+
+	getCalendars(context) {
+		const endPoint = 'apps/polls/calendars'
+
+		return axios.get(generateUrl(endPoint))
+			.then((response) => {
+				context.commit('setCalendars', { calendars: response.data.calendars })
+				return response
+			})
+	},
 }
 
 export default { namespaced, state, mutations, actions }