110swag / flashy-frontend

Commit 17907a95c7a56da82008ccfe4d7749847bf79d90

Authored by Andrew Buss 2015-06-02 11:44:22 -0700

fixed up settingscontroller; added callbacks on deck for push/pull

Showing 3 changed files with 218 additions and 213 deletions Side-by-side Diff

scripts/CardGridController.js
scripts/DeckController.js
scripts/SettingsController.js

...	...	@@ -63,12 +63,14 @@
63	63	$scope.deck_ws.onMessage(function(message) {
64	64	data = JSON.parse(message.data);
65	65	console.log('message', data);
66		- card = new Flashcard(data.flashcard.id);
	66	+ card = new Flashcard(data.flashcard);
67	67	if (data.event_type == 'card_pulled') {
68	68	$scope.deck[card.id] = card;
	69	+ if ($scope.deckPullCallback) $scope.deckPullCallback(card);
69	70	}
70	71	if (data.event_type == 'card_unpulled') {
71	72	$scope.deck[card.id] = undefined;
	73	+ if ($scope.deckUnpullCallback) $scope.deckUnpullCallback(card);
72	74	}
73	75	if (data.event_type == 'card_hidden') {
74	76	$scope.hideCardFromGrid(card);

...	...	@@ -5,6 +5,9 @@
5	5	$scope.refreshLayout();
6	6	});
7	7	$scope.cards = $scope.deck;
	8	+ $scope.deckPullCallback = $scope.addCardToGrid;
	9	+ $scope.deckUnpullCallback = $scope.hideCardFromGrid;
	10	+
8	11	}
9	12	);

...	...	@@ -9,177 +9,213 @@
9	9	return;
10	10	}
11	11	console.log('chrome');
12		- });
13	12
14		-console.log('executing things outside of module');
15		-var PUSH_SERVER_URL = '/app/subscribe/';
	13	+ console.log('executing things outside of module');
	14	+ var PUSH_SERVER_URL = '/app/subscribe/';
16	15
17		-function onPushSubscription(pushSubscription) {
18		- console.log('pushSubscription = ', pushSubscription.endpoint);
19		- // Here we would normally send the endpoint
20		- // and subscription ID to our server.
21		- // In this demo we just use send these values to
22		- // our server via XHR which sends a push message.
	16	+ function onPushSubscription(pushSubscription) {
	17	+ console.log('pushSubscription = ', pushSubscription.endpoint);
	18	+ // Here we would normally send the endpoint
	19	+ // and subscription ID to our server.
	20	+ // In this demo we just use send these values to
	21	+ // our server via XHR which sends a push message.
23	22
24		- console.log('pushSubscription: ', pushSubscription);
	23	+ console.log('pushSubscription: ', pushSubscription);
25	24
26		- // Code to handle the XHR
27		- var formData = new FormData();
	25	+ // Code to handle the XHR
	26	+ var formData = new FormData();
28	27
29		- var endpoint = pushSubscription.endpoint;
	28	+ var endpoint = pushSubscription.endpoint;
30	29
31		- if ('subscriptionId' in pushSubscription) {
32		- // Make the endpoint always contain the subscriptionId
33		- // so the server is always consistent
34		- if (!endpoint.includes(pushSubscription.subscriptionId)) {
35		- endpoint += '/' + pushSubscription.subscriptionId;
36		- }
37		- }
	30	+ if ('subscriptionId' in pushSubscription) {
	31	+ // Make the endpoint always contain the subscriptionId
	32	+ // so the server is always consistent
	33	+ if (!endpoint.includes(pushSubscription.subscriptionId)) {
	34	+ endpoint += '/' + pushSubscription.subscriptionId;
	35	+ }
	36	+ }
38	37
39		- formData.append('registration_id', endpoint);
40		- console.log('registration_id: ', endpoint);
	38	+ formData.append('registration_id', endpoint);
	39	+ console.log('registration_id: ', endpoint);
41	40
42		- console.log('tryna push');
	41	+ console.log('tryna push');
43	42
44		- var req = new XMLHttpRequest();
45		- req.addEventListener('load', function(response) {
46		- console.log('response: ', response);
47		- });
48		- req.addEventListener('error', function(error) {
49		- console.log('error: ', error);
50		- });
51		- req.open('POST', PUSH_SERVER_URL);
52		- req.send(formData);
53		- console.log('pushed?');
	43	+ var req = new XMLHttpRequest();
	44	+ req.addEventListener('load', function(response) {
	45	+ console.log('response: ', response);
	46	+ });
	47	+ req.addEventListener('error', function(error) {
	48	+ console.log('error: ', error);
	49	+ });
	50	+ req.open('POST', PUSH_SERVER_URL);
	51	+ req.send(formData);
	52	+ console.log('pushed?');
54	53
55		-}
	54	+ }
56	55
57		-function subscribeDevice() {
58		- // We need the service worker registration to access the push manager
59		- navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
60		- serviceWorkerRegistration.pushManager.subscribe()
61		- .then(onPushSubscription)
62		- .catch(function(e) {
63		- console.log('Error in subscribing');
64		- // Check for a permission prompt issue
65		- if ('permissions' in navigator) {
66		- navigator.permissions.query({name: 'push', userVisibleOnly: true})
67		- .then(function(permissionStatus) {
68		- console.log('subscribe() Error: Push permission status = ',
69		- permissionStatus);
70		- if (permissionStatus.status === 'denied') {
71		- // The user blocked the permission prompt
	56	+ function subscribeDevice() {
	57	+ // We need the service worker registration to access the push manager
	58	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	59	+ serviceWorkerRegistration.pushManager.subscribe()
	60	+ .then(onPushSubscription)
	61	+ .catch(function(e) {
	62	+ console.log('Error in subscribing');
	63	+ // Check for a permission prompt issue
	64	+ if ('permissions' in navigator) {
	65	+ navigator.permissions.query({name: 'push', userVisibleOnly: true})
	66	+ .then(function(permissionStatus) {
	67	+ console.log('subscribe() Error: Push permission status = ',
	68	+ permissionStatus);
	69	+ if (permissionStatus.status === 'denied') {
	70	+ // The user blocked the permission prompt
	71	+ console.log('Ooops Notifications are Blocked',
	72	+ 'Unfortunately you just permanently blocked notifications. ' +
	73	+ 'Please unblock / allow them to switch on push ' +
	74	+ 'notifications.');
	75	+ } else {
	76	+ console.log('Ooops Push Couldn\'t Register',
	77	+ '<p>When we tried to ' +
	78	+ 'get the subscription ID for GCM, something went wrong,' +
	79	+ ' not sure why.</p>' +
	80	+ '<p>Have you defined "gcm_sender_id" and ' +
	81	+ '"gcm_user_visible_only" in the manifest?</p>' +
	82	+ '<p>Error message: ' +
	83	+ e.message +
	84	+ '</p>');
	85	+ }
	86	+ }).catch(function(err) {
	87	+ console.log('Ooops Push Couldn\'t Register',
	88	+ '<p>When we tried to ' +
	89	+ 'get the subscription ID for GCM, something went wrong, not ' +
	90	+ 'sure why.</p>' +
	91	+ '<p>Have you defined "gcm_sender_id" and ' +
	92	+ '"gcm_user_visible_only" in the manifest?</p>' +
	93	+ '<p>Error message: ' +
	94	+ err.message +
	95	+ '</p>');
	96	+ });
	97	+ } else {
	98	+ // Use notification permission to do something
	99	+ if (Notification.permission === 'denied') {
72	100	console.log('Ooops Notifications are Blocked',
73	101	'Unfortunately you just permanently blocked notifications. ' +
74		- 'Please unblock / allow them to switch on push ' +
75		- 'notifications.');
	102	+ 'Please unblock / allow them to switch on push notifications.');
76	103	} else {
77	104	console.log('Ooops Push Couldn\'t Register',
78	105	'<p>When we tried to ' +
79		- 'get the subscription ID for GCM, something went wrong,' +
80		- ' not sure why.</p>' +
	106	+ 'get the subscription ID for GCM, something went wrong, not ' +
	107	+ 'sure why.</p>' +
81	108	'<p>Have you defined "gcm_sender_id" and ' +
82	109	'"gcm_user_visible_only" in the manifest?</p>' +
83	110	'<p>Error message: ' +
84	111	e.message +
85	112	'</p>');
86	113	}
87		- }).catch(function(err) {
88		- console.log('Ooops Push Couldn\'t Register',
89		- '<p>When we tried to ' +
90		- 'get the subscription ID for GCM, something went wrong, not ' +
91		- 'sure why.</p>' +
92		- '<p>Have you defined "gcm_sender_id" and ' +
93		- '"gcm_user_visible_only" in the manifest?</p>' +
94		- '<p>Error message: ' +
95		- err.message +
96		- '</p>');
97		- });
98		- } else {
99		- // Use notification permission to do something
100		- if (Notification.permission === 'denied') {
101		- console.log('Ooops Notifications are Blocked',
102		- 'Unfortunately you just permanently blocked notifications. ' +
103		- 'Please unblock / allow them to switch on push notifications.');
104		- } else {
105		- console.log('Ooops Push Couldn\'t Register',
106		- '<p>When we tried to ' +
107		- 'get the subscription ID for GCM, something went wrong, not ' +
108		- 'sure why.</p>' +
109		- '<p>Have you defined "gcm_sender_id" and ' +
110		- '"gcm_user_visible_only" in the manifest?</p>' +
111		- '<p>Error message: ' +
112		- e.message +
113		- '</p>');
114		- }
115		- }
	114	+ }
	115	+ });
116	116	});
117		- });
118		-}
	117	+ }
119	118
120		-function unsubscribeDevice() {
121		- navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
122		- serviceWorkerRegistration.pushManager.getSubscription().then(
123		- function(pushSubscription) {
124		- // Check we have everything we need to unsubscribe
125		- if (!pushSubscription) {
126		- return;
127		- }
	119	+ function unsubscribeDevice() {
	120	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	121	+ serviceWorkerRegistration.pushManager.getSubscription().then(
	122	+ function(pushSubscription) {
	123	+ // Check we have everything we need to unsubscribe
	124	+ if (!pushSubscription) {
	125	+ return;
	126	+ }
128	127
129		- // TODO: Remove the device details from the server
130		- // i.e. the pushSubscription.subscriptionId and
131		- // pushSubscription.endpoint
	128	+ // TODO: Remove the device details from the server
	129	+ // i.e. the pushSubscription.subscriptionId and
	130	+ // pushSubscription.endpoint
132	131
133		- pushSubscription.unsubscribe().then(function(successful) {
134		- console.log('Unsubscribed from push: ', successful);
135		- if (!successful) {
136		- // The unsubscribe was unsuccessful, but we can
137		- // remove the subscriptionId from our server
138		- // and notifications will stop
139		- // This just may be in a bad state when the user returns
140		- console.error('We were unable to unregister from push');
141		- }
	132	+ pushSubscription.unsubscribe().then(function(successful) {
	133	+ console.log('Unsubscribed from push: ', successful);
	134	+ if (!successful) {
	135	+ // The unsubscribe was unsuccessful, but we can
	136	+ // remove the subscriptionId from our server
	137	+ // and notifications will stop
	138	+ // This just may be in a bad state when the user returns
	139	+ console.error('We were unable to unregister from push');
	140	+ }
142	141
143		- }).catch(function(e) {
144		- console.log('Unsubscribtion error: ', e);
145		- });
146		- }.bind(this)).catch(function(e) {
147		- console.error('Error thrown while revoking push notifications. ' +
148		- 'Most likely because push was never registered', e);
	142	+ }).catch(function(e) {
	143	+ console.log('Unsubscribtion error: ', e);
	144	+ });
	145	+ }.bind(this)).catch(function(e) {
	146	+ console.error('Error thrown while revoking push notifications. ' +
	147	+ 'Most likely because push was never registered', e);
	148	+ });
149	149	});
150		- });
151		-}
	150	+ }
152	151
153		-function permissionStatusChange(permissionStatus) {
154		- console.log('permissionStatusChange = ', permissionStatus);
155		- // If the notification permission is denied, it's a permanent block
156		- switch (permissionStatus.status) {
157		- case 'denied':
158		- console.log('Ooops Push has been Blocked',
159		- 'Unfortunately the user permanently blocked push. Please unblock / ' +
160		- 'allow them to switch on push notifications.');
161		- break;
162		- case 'granted':
163		- // Set the state of the push switch
164		- console.log('case granted');
165		- break;
166		- case 'prompt':
167		- console.log('case prompt');
168		- break;
169		- }
170		-}
	152	+ function permissionStatusChange(permissionStatus) {
	153	+ console.log('permissionStatusChange = ', permissionStatus);
	154	+ // If the notification permission is denied, it's a permanent block
	155	+ switch (permissionStatus.status) {
	156	+ case 'denied':
	157	+ console.log('Ooops Push has been Blocked',
	158	+ 'Unfortunately the user permanently blocked push. Please unblock / ' +
	159	+ 'allow them to switch on push notifications.');
	160	+ break;
	161	+ case 'granted':
	162	+ // Set the state of the push switch
	163	+ console.log('case granted');
	164	+ break;
	165	+ case 'prompt':
	166	+ console.log('case prompt');
	167	+ break;
	168	+ }
	169	+ }
171	170
172		-function setUpPushPermission() {
173		- navigator.permissions.query({name: 'push', userVisibleOnly: true})
174		- .then(function(permissionStatus) {
175		- // Set the initial state
176		- permissionStatusChange(permissionStatus);
	171	+ function setUpPushPermission() {
	172	+ navigator.permissions.query({name: 'push', userVisibleOnly: true})
	173	+ .then(function(permissionStatus) {
	174	+ // Set the initial state
	175	+ permissionStatusChange(permissionStatus);
177	176
178		- // Handle Permission State Changes
179		- permissionStatus.onchange = function() {
180		- permissionStatusChange(this);
181		- };
	177	+ // Handle Permission State Changes
	178	+ permissionStatus.onchange = function() {
	179	+ permissionStatusChange(this);
	180	+ };
182	181
	182	+ // Check if push is supported and what the current state is
	183	+ navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
	184	+ // Let's see if we have a subscription already
	185	+ serviceWorkerRegistration.pushManager.getSubscription()
	186	+ .then(function(subscription) {
	187	+ if (!subscription) {
	188	+ // NOOP
	189	+ return;
	190	+ }
	191	+
	192	+ // Update the current state with the
	193	+ // subscriptionid and endpoint
	194	+ onPushSubscription(subscription);
	195	+ })
	196	+ .catch(function(e) {
	197	+ console.log('An error occured while calling getSubscription()', e);
	198	+ });
	199	+ });
	200	+ }).catch(function(err) {
	201	+ console.log('Ooops Unable to check the permission',
	202	+ 'Unfortunately the permission for push notifications couldn\'t be ' +
	203	+ 'checked. Are you on Chrome 43+?');
	204	+ });
	205	+ }
	206	+
	207	+ function setUpNotificationPermission() {
	208	+ // If the notification permission is denied, it's a permanent block
	209	+ if (Notification.permission === 'denied') {
	210	+ console.log('Ooops Notifications are Blocked',
	211	+ 'Unfortunately notifications are permanently blocked. Please unblock / ' +
	212	+ 'allow them to switch on push notifications.');
	213	+ return;
	214	+ } else if (Notification.permission === 'default') {
	215	+ console.log('notification permissions === default');
	216	+ return;
	217	+ }
	218	+
183	219	// Check if push is supported and what the current state is
184	220	navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
185	221	// Let's see if we have a subscription already
186	222
187	223
188	224
189	225
190	226
191	227
192	228
...	...	@@ -187,94 +223,58 @@
187	223	.then(function(subscription) {
188	224	if (!subscription) {
189	225	// NOOP
	226	+ console.log('not subscription');
190	227	return;
191	228	}
192	229
193	230	// Update the current state with the
194	231	// subscriptionid and endpoint
	232	+ console.log('onpushsubscription should be entered');
195	233	onPushSubscription(subscription);
196	234	})
197	235	.catch(function(e) {
198	236	console.log('An error occured while calling getSubscription()', e);
199	237	});
200	238	});
201		- }).catch(function(err) {
202		- console.log('Ooops Unable to check the permission',
203		- 'Unfortunately the permission for push notifications couldn\'t be ' +
204		- 'checked. Are you on Chrome 43+?');
205		- });
206		-}
	239	+ }
207	240
208		-function setUpNotificationPermission() {
209		- // If the notification permission is denied, it's a permanent block
210		- if (Notification.permission === 'denied') {
211		- console.log('Ooops Notifications are Blocked',
212		- 'Unfortunately notifications are permanently blocked. Please unblock / ' +
213		- 'allow them to switch on push notifications.');
214		- return;
215		- } else if (Notification.permission === 'default') {
216		- console.log('notification permissions === default');
217		- return;
218		- }
	241	+// Once the service worker is registered set the initial state
	242	+ function initialiseState() {
	243	+ // Is the Permissions API supported
	244	+ if ('permissions' in navigator) {
	245	+ console.log('setting push permissions');
	246	+ setUpPushPermission();
	247	+ return;
	248	+ } else {
	249	+ console.log('setting notification permissions');
	250	+ setUpNotificationPermission();
	251	+ }
	252	+ }
219	253
220		- // Check if push is supported and what the current state is
221		- navigator.serviceWorker.ready.then(function(serviceWorkerRegistration) {
222		- // Let's see if we have a subscription already
223		- serviceWorkerRegistration.pushManager.getSubscription()
224		- .then(function(subscription) {
225		- if (!subscription) {
226		- // NOOP
227		- console.log('not subscription');
228		- return;
229		- }
	254	+ var enablePushSwitch = $('.js-checkbox');
	255	+ enablePushSwitch.change(function(e) {
	256	+ console.log('checkbox changed');
	257	+ if (e.target.checked) {
	258	+ console.log('subscribing device');
	259	+ subscribeDevice();
	260	+ } else {
	261	+ console.log('unsubscribing device');
	262	+ unsubscribeDevice();
	263	+ }
	264	+ });
230	265
231		- // Update the current state with the
232		- // subscriptionid and endpoint
233		- console.log('onpushsubscription should be entered');
234		- onPushSubscription(subscription);
235		- })
236		- .catch(function(e) {
237		- console.log('An error occured while calling getSubscription()', e);
238		- });
239		- });
240		-}
241		-
242		-// Once the service worker is registered set the initial state
243		-function initialiseState() {
244		- // Is the Permissions API supported
245		- if ('permissions' in navigator) {
246		- console.log('setting push permissions');
247		- setUpPushPermission();
248		- return;
249		- } else {
250		- console.log('setting notification permissions');
251		- setUpNotificationPermission();
252		- }
253		-}
254		-window.addEventListener('load', function() {
255		- // When the toggle switch changes, enabled / disable push
256		- // messaging
257		- var enablePushSwitch = document.querySelector('.js-checkbox');
258		- enablePushSwitch.addEventListener('change', function(e) {
259		- if (e.target.checked) {
260		- subscribeDevice();
	266	+ // Check that service workers are supported
	267	+ if ('serviceWorker' in navigator) {
	268	+ navigator.serviceWorker.register('scripts/service-worker.js')
	269	+ .then(initialiseState);
261	270	} else {
262		- unsubscribeDevice();
	271	+ // Service Workers aren't supported so you should hide the push UI
	272	+ // If it's currently visible.
	273	+ console.log('Ooops Service Workers aren\'t Supported',
	274	+ 'Service Workers aren\'t supported in this browser. ' +
	275	+ 'For this demo be sure to use ' +
	276	+ '<a href="https://www.google.co.uk/chrome/browser/canary.html">Chrome Canary</a>' +
	277	+ ' or version 42.');
263	278	}
264	279	});
265		-
266		- // Check that service workers are supported
267		- if ('serviceWorker' in navigator) {
268		- navigator.serviceWorker.register('scripts/service-worker.js')
269		- .then(initialiseState);
270		- } else {
271		- // Service Workers aren't supported so you should hide the push UI
272		- // If it's currently visible.
273		- console.log('Ooops Service Workers aren\'t Supported',
274		- 'Service Workers aren\'t supported in this browser. ' +
275		- 'For this demo be sure to use ' +
276		- '<a href="https://www.google.co.uk/chrome/browser/canary.html">Chrome Canary</a>' +
277		- ' or version 42.');
278		- }
279		-});