Watch events (#1367)

Watch current poll for updates an apply immediately

7 files changed, 71 insertions, 14 deletions

diff --git a/src/js/App.vue b/src/js/App.vue
index ba2f19f7..291eef70 100644
--- a/src/js/App.vue
+++ b/src/js/App.vue
@@ -98,6 +98,16 @@ export default {
 	},
 
 	created() {
+		if (getCurrentUser()) {
+			this.$store.dispatch('settings/get')
+			if (this.$route.name !== 'publicVote') {
+				this.updatePolls()
+			}
+			if (this.$route.params.id && !this.$oute.params.token) {
+				this.loadPoll(true)
+			}
+		}
+
 		subscribe('transitions-off', (delay) => {
 			this.transitionsOff(delay)
 		})
@@ -130,15 +140,6 @@ export default {
 
 		})
 
-		if (getCurrentUser()) {
-			this.$store.dispatch('settings/get')
-			if (this.$route.name !== 'publicVote') {
-				this.updatePolls()
-			}
-			if (this.$route.params.id && !this.$oute.params.token) {
-				this.loadPoll(true)
-			}
-		}
 		this.timedReload()
 	},
 
@@ -159,7 +160,9 @@ export default {
 		timedReload() {
 			this.reloadTimer = window.setInterval(() => {
 				this.updatePolls()
-				this.loadPoll(true)
+				if (!this.settings.realTimePolling) {
+					this.loadPoll(true)
+				}
 			}, this.reloadInterval)
 		},
 
diff --git a/src/js/components/Settings/ExpertimantalSettings.vue b/src/js/components/Settings/ExpertimantalSettings.vue
index 261df739..4585a36b 100644
--- a/src/js/components/Settings/ExpertimantalSettings.vue
+++ b/src/js/components/Settings/ExpertimantalSettings.vue
@@ -23,6 +23,15 @@
 <template>
 	<div>
 		<div class="user_settings">
+			<input id="realTimePolling" v-model="realTimePolling"
+				type="checkbox" class="checkbox">
+			<label for="realTimePolling">{{ t('polls', 'Beta - watch for updated polls in realtime') }}</label>
+			<div class="settings_details">
+				{{ t('polls', 'All changes to the current poll, done by other users, will be recognized in realtime.') }}
+			</div>
+		</div>
+
+		<div class="user_settings">
 			<input id="experimental" v-model="experimental"
 				type="checkbox" class="checkbox">
 			<label for="experimental">{{ t('polls', 'Try experimental styles') }}</label>
@@ -85,6 +94,14 @@ export default {
 			settings: state => state.settings.user,
 		}),
 		// Add bindings
+		realTimePolling: {
+			get() {
+				return this.settings.user.realTimePolling
+			},
+			set(value) {
+				this.writeValue({ realTimePolling: value })
+			},
+		},
 		experimental: {
 			get() {
 				return this.settings.experimental
diff --git a/src/js/store/modules/poll.js b/src/js/store/modules/poll.js
index 2ee542bd..94c77ae1 100644
--- a/src/js/store/modules/poll.js
+++ b/src/js/store/modules/poll.js
@@ -139,7 +139,7 @@ const actions = {
 		context.commit('reset')
 	},
 
-	get(context, payload) {
+	get(context) {
 		let endPoint = 'apps/polls'
 
 		if (context.rootState.route.name === 'publicVote') {
@@ -158,7 +158,7 @@ const actions = {
 				return response
 			})
 			.catch((error) => {
-				console.debug('Error loading poll', { error: error.response }, { payload: payload })
+				console.debug('Error loading poll', { error: error.response })
 				throw error
 			})
 	},
diff --git a/src/js/store/modules/settings.js b/src/js/store/modules/settings.js
index 29ab512b..5b4ba920 100644
--- a/src/js/store/modules/settings.js
+++ b/src/js/store/modules/settings.js
@@ -35,6 +35,7 @@ const defaultSettings = () => {
 			glassySidebar: false,
 			defaultViewTextPoll: 'mobile',
 			defaultViewDatePoll: 'desktop',
+			realTimePolling: false,
 		},
 		availableCalendars: [],
 		viewModes: [
@@ -71,6 +72,7 @@ const actions = {
 
 		return axios.get(generateUrl(endPoint))
 			.then((response) => {
+				console.debug('settings loaded ')
 				context.commit('setPreference', response.data.preferences)
 			})
 			.catch(() => {
diff --git a/src/js/store/modules/subModules/comments.js b/src/js/store/modules/subModules/comments.js
index 83a79fe4..7595ee8e 100644
--- a/src/js/store/modules/subModules/comments.js
+++ b/src/js/store/modules/subModules/comments.js
@@ -62,7 +62,7 @@ const getters = {
 }
 
 const actions = {
-	list(context, payload) {
+	list(context) {
 		let endPoint = 'apps/polls'
 
 		if (context.rootState.route.name === 'publicVote') {
diff --git a/src/js/store/modules/subModules/votes.js b/src/js/store/modules/subModules/votes.js
index c7d9b4ef..ce12cd6f 100644
--- a/src/js/store/modules/subModules/votes.js
+++ b/src/js/store/modules/subModules/votes.js
@@ -117,7 +117,7 @@ const getters = {
 }
 
 const actions = {
-	list(context, payload) {
+	list(context) {
 		let endPoint = 'apps/polls'
 
 		if (context.rootState.route.name === 'publicVote') {
diff --git a/src/js/views/Vote.vue b/src/js/views/Vote.vue
index 22ee9089..85fb510a 100644
--- a/src/js/views/Vote.vue
+++ b/src/js/views/Vote.vue
@@ -94,6 +94,8 @@
 </template>
 
 <script>
+import axios from '@nextcloud/axios'
+import { generateUrl } from '@nextcloud/router'
 import linkifyUrls from 'linkify-urls'
 import { mapState, mapGetters } from 'vuex'
 import { Actions, ActionButton, AppContent, EmptyContent } from '@nextcloud/vue'
@@ -134,6 +136,7 @@ export default {
 			ranked: false,
 			manualViewDatePoll: '',
 			manualViewTextPoll: '',
+			cancelToken: null,
 		}
 	},
 
@@ -292,13 +295,45 @@ export default {
 		} else {
 			emit('toggle-sidebar', { open: (window.innerWidth > 920) })
 		}
+		this.watchPoll()
 	},
 
 	beforeDestroy() {
+		console.debug('destroy votes')
+		this.cancelToken.cancel()
 		this.$store.dispatch({ type: 'poll/reset' })
 	},
 
 	methods: {
+		async watchPoll() {
+			this.cancelToken = axios.CancelToken.source()
+			let watching = true
+			let lastUpdated = 0
+			while (watching) {
+				await axios.get(generateUrl('apps/polls/watch/' + this.$route.params.id + '?offset=' + lastUpdated), { cancelToken: this.cancelToken.token })
+					.then((response) => {
+						console.debug('update detected', response.data.updates)
+						response.data.updates.forEach((item) => {
+							lastUpdated = (item.updated > lastUpdated) ? item.updated : lastUpdated
+							if (item.table === 'polls') {
+								this.$store.dispatch('poll/get')
+							} else {
+								this.$store.dispatch('poll/' + item.table + '/list')
+							}
+						})
+					})
+					.catch((error) => {
+						if (axios.isCancel(error)) {
+							watching = false
+						} else if (error?.response) {
+							if (error.response.status !== 304) {
+								console.error(error.response)
+							}
+						}
+					})
+			}
+		},
+
 		openOptions() {
 			emit('toggle-sidebar', { open: true, activeTab: 'options' })
 		},