110swag / flashy-frontend

Commit 1070138706a365287f1c9d110a9279d82030642a

Authored by Andrew Buss 2015-05-29 16:50:21 -0700

ui tweaks, check sectionId before trying to load

Showing 7 changed files with 78 additions and 60 deletions Side-by-side Diff

config.js
home.html
scripts/CardListController.js
scripts/FeedController.js
scripts/HelpController.js
scripts/RootController.js
scripts/UserService.js

...	...	@@ -15,7 +15,7 @@
15	15	'flashy.HelpController',
16	16	'flashy.SettingsController',
17	17	'ngCookies']).
18		- config(function ($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
	18	+ config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
19	19	'use strict';
20	20	$httpProvider.defaults.withCredentials = true;
21	21	$httpProvider.defaults.xsrfCookieName = 'csrftoken';
22	22
...	...	@@ -29,9 +29,9 @@
29	29	}
30	30	}
31	31
32		- $httpProvider.interceptors.push(function ($q, $rootScope) {
	32	+ $httpProvider.interceptors.push(function($q, $rootScope) {
33	33	return {
34		- 'responseError': function (rejection) { // need a better redirect
	34	+ 'responseError': function(rejection) { // need a better redirect
35	35	if (rejection.status >= 500) {
36	36	console.log('got error');
37	37	console.log(rejection);
...	...	@@ -39,7 +39,7 @@
39	39	}
40	40	if (rejection.status == 403) {
41	41	console.log(rejection);
42		- if (rejection.data && rejection.data.detail == "Please verify your email before continuing") {
	42	+ if (rejection.data && rejection.data.detail == 'Please verify your email before continuing') {
43	43	$rootScope.$broadcast('account_locked');
44	44	}
45	45	}
46	46
...	...	@@ -50,9 +50,9 @@
50	50	$locationProvider.html5Mode(true);
51	51	$urlRouterProvider.otherwise('/404');
52	52	var auth_resolve = {
53		- authorize: function ($q, $state, $stateParams, UserService) {
	53	+ authorize: function($q, $state, $stateParams, UserService) {
54	54	console.log('resolving user before continuing');
55		- var redirectAsNeeded = function () {
	55	+ var redirectAsNeeded = function() {
56	56	if (!UserService.isLoggedIn()) {
57	57	console.log(UserService.getUserData());
58	58	console.log('making the user log in');
...	...	@@ -80,7 +80,7 @@
80	80	}).
81	81	state('root', {
82	82	resolve: auth_resolve,
83		- url: '/',
	83	+ url: '',
84	84	controller: 'RootController'
85	85	}).
86	86	state('feed', {
87	87
...	...	@@ -152,12 +152,12 @@
152	152	controller: 'HelpController'
153	153	});
154	154	}).
155		- run(function ($rootScope, $state, $stateParams, $location, UserService) {
156		- $rootScope.$on('$stateChangeError', function (event, toState, toParams, fromState, fromParams, error) {
	155	+ run(function($rootScope, $state, $stateParams, $location, UserService) {
	156	+ $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
157	157	console.log('failed to change state: ' + error);
158	158	$state.go('login');
159	159	});
160		- $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {
	160	+ $rootScope.$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams) {
161	161	if (['feed', 'deck', 'cardlist'].indexOf(toState.name) >= 0) {
162	162	localStorage.setItem('last_state', toState.name);
163	163	localStorage.setItem('last_state_params', JSON.stringify(toParams));

...	...	@@ -28,7 +28,9 @@
28	28	<li><a ui-sref="addclass">Add Class</a></li>
29	29	</ul>
30	30	<ul>
31		- <li><a style="width:auto;" class="dropdown-button ng-cloak" href="#!" data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i
	31	+ <li><a style="font-size:20px; font-weight:700" class="dropdown-button ng-cloak hide-on-small-and-down"
	32	+ href="#!"
	33	+ data-activates="classDropdown">{{currentSection.id?currentSection.short_name:"Classes"}}<i
32	34	class="mdi-navigation-arrow-drop-down right"></i></a></li>
33	35	</ul>
34	36	<ul ng-show="currentSection.id && UserService.isLoggedIn()" class="left hide-on-small-and-down">
35	37
...	...	@@ -49,14 +51,18 @@
49	51
50	52	<ul ng-show="UserService.isLoggedIn()" ng-cloak id="nav-mobile" class="right hide-on-small-and-down">
51	53
52		- <li ui-sref-active="active"><a ui-sref="study">Study</a></li>
	54	+ <li ui-sref-active="active"><a ui-sref="study" class="tooltipped" data-position="bottom" data-delay="50"
	55	+ data-tooltip="Study">
	56	+ <i class="tiny mdi-action-pageview"></i></a></li>
53	57
54	58	<!-- Settings Dropdown -->
55	59	<ul id="settingsDropdown" class="dropdown-content">
56	60	<li><a ui-sref="settings">Settings</a></li>
57	61	<li><a ui-sref="logout">Logout</a></li>
58	62	</ul>
59		- <li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help"></i></a></li>
	63	+ <li ui-sref-active="active"><a ui-sref="help"><i class="tiny mdi-action-help tooltipped"
	64	+ data-position="bottom"
	65	+ data-delay="50" data-tooltip="Help"></i></a></li>
60	66
61	67	<li><a class="dropdown-button ng-cloak" href="#!" data-activates="settingsDropdown"><i
62	68	class="tiny mdi-action-settings"></i></a></li>
63	69
64	70
...	...	@@ -67,24 +73,28 @@
67	73	<!-- Slide-in side-nav for small screens -->
68	74	<ul ng-show="UserService.isLoggedIn()" class="side-nav" id="mobile-demo">
69	75	<span ng-show="currentSection.id">
70		- <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped"
71		- ><i
72		- class="mdi-action-view-module left"></i>Feed</a></li>
73		- <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped"
74		- ><i
75		- class="mdi-action-view-carousel left"></i>Deck</a></li>
76		- <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped"
77		- ><i
78		- class="mdi-action-view-list left"></i>Card List</a>
	76	+ <li ui-sref-active="active"><a ui-sref="feed({sectionId:currentSection.id})" class="tooltipped">
	77	+ <i class="mdi-action-view-module left"></i>
	78	+ Feed</a>
79	79	</li>
	80	+ <li ui-sref-active="active"><a ui-sref="deck({sectionId:currentSection.id})" class="tooltipped">
	81	+ <i class="mdi-action-view-carousel left"> </i>
	82	+ Deck
	83	+ </a>
	84	+ </li>
	85	+ <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:currentSection.id})" class="tooltipped">
	86	+ <i class="mdi-action-view-list left"></i>
	87	+ Card List
	88	+ </a>
	89	+ </li>
80	90	<hr>
81	91	</span>
82	92	<!-- Collapsible menu for all the User's classes -->
83	93	<ul class="collapsible" data-collapsible="accordion">
84	94	<li class="bold">
85	95	<a class="collapsible-header black-text">
86		- Classes<i
87		- class="mdi-navigation-arrow-drop-down right"></i>
	96	+ Classes
	97	+ <i class="mdi-navigation-arrow-drop-down right"></i>
88	98	</a>
89	99	</li>
90	100	<div class="collapsible-body" style="display: block">

...	...	@@ -105,7 +105,7 @@
105	105	$(document).off('keydown');
106	106	});
107	107
108		- $(document).ready(function(){
	108	+ $(document).ready(function() {
109	109	$('.tooltipped').tooltip({delay: 50});
110	110
111	111	//back to top
112	112
113	113
114	114
115	115
116	116
117	117
118	118
119	119
...	...	@@ -123,27 +123,27 @@
123	123	event.preventDefault();
124	124	jQuery('html, body').animate({scrollTop: 0}, duration);
125	125	return false;
126		- })
	126	+ });
127	127	});
128	128
129	129	// to display day of the week badges
130	130	$scope.dayofweek = function(item) {
131	131	var date = new Date(item.material_date);
132		- switch(date.getDay()) {
	132	+ switch (date.getDay()) {
133	133	case 0:
134		- return "Su";
	134	+ return 'Su';
135	135	case 1:
136		- return "M";
	136	+ return 'M';
137	137	case 2:
138		- return "T";
	138	+ return 'T';
139	139	case 3:
140		- return "W";
	140	+ return 'W';
141	141	case 4:
142		- return "R";
	142	+ return 'R';
143	143	case 5:
144		- return "F";
	144	+ return 'F';
145	145	case 6:
146		- return "Sa";
	146	+ return 'Sa';
147	147	}
148	148	};
149	149

...	...	@@ -2,12 +2,16 @@
2	2
3	3	controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
4	4	console.log('Hello from feed');
5		- sectionId = $stateParams.sectionId;
	5	+ sectionId = parseInt($stateParams.sectionId);
	6	+ if (!UserService.isInSection(sectionId)) {
	7	+ return $state.go('addclass');
	8	+ }
6	9	$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
7	10	$scope.cards = false;
8	11	$scope.cardCols = []; // organized data
9	12	$scope.numCols = 0;
10	13
	14	+
11	15	function calculate_cols() {
12	16	var avail = $window.innerWidth - 17;
13	17	return Math.max(1, Math.floor(avail / 250));
...	...	@@ -59,6 +63,7 @@
59	63	}).
60	64	error(function(err) {
61	65	console.log('refresh fail');
	66	+ console.log(err);
62	67	});
63	68	};
64	69
65	70
66	71
...	...	@@ -130,20 +135,20 @@
130	135	ws.onclose = function(e) {
131	136	console.log('connection closed');
132	137	};
133		-
134		- var resetModal = function() {
135		- $('#new-card-input').html('');
	138	+
	139	+ var resetModal = function() {
	140	+ $('#new-card-input').html('');
136	141	$('#newCard').closeModal(modal_options);
137		- }
138		-
	142	+ };
	143	+
139	144	$scope.pushCard = function() {
140	145	var i = 0;
141	146	var blanks = [];
142	147	$('#new-card-input')[0].childNodes.forEach(function(node) {
143		- if (typeof node.data == 'undefined') {
144		- console.log('undefined node');
145		- return resetModal();
146		- }
	148	+ if (typeof node.data == 'undefined') {
	149	+ console.log('undefined node');
	150	+ return resetModal();
	151	+ }
147	152	node = $(node)[0];
148	153	console.log(node);
149	154	if (node.tagName == 'B') {
...	...	@@ -159,10 +164,10 @@
159	164	'mask': blanks,
160	165	section: sectionId
161	166	};
162		- if (myCard.text == '') {
163		- console.log('blank flashcard not pushed:' + myCard.text);
164		- return resetModal();
165		- }
	167	+ if (myCard.text == '') {
	168	+ console.log('blank flashcard not pushed:' + myCard.text);
	169	+ return resetModal();
	170	+ }
166	171	$http.post('/api/flashcards/', myCard).
167	172	success(function(data) {
168	173	console.log('flashcard pushed: ' + myCard.text);
...	...	@@ -174,7 +179,7 @@
174	179	error(function(error) {
175	180	console.log('something went wrong pushing a card!');
176	181	});
177		- return resetModal();
	182	+ return resetModal();
178	183	};
179	184
180	185	/* Key bindings for the whole feed window. Hotkey it up! */

1	1	angular.module('flashy.HelpController', ['ui.router']).
2	2	controller('HelpController', ['$scope', '$state', '$http', '$timeout', 'UserService',
3		- function ($scope, $state, $http, $timeout, UserService) {
	3	+ function($scope, $state, $http, $timeout, UserService) {
4	4
5	5	}
6	6	]);

1	1	angular.module('flashy.RootController', ['ui.router', 'ngResource']).
2	2
3		- controller('RootController', function ($rootScope, $resource, $scope, $state, UserService, $window, $templateCache) {
	3	+ controller('RootController', function($rootScope, $resource, $scope, $state, UserService, $window, $templateCache) {
4	4	$rootScope.SectionResource = $resource('/api/sections/:sectionId/');
5	5	window.rootscope = $rootScope;
6	6	window.userservice = UserService;
...	...	@@ -18,7 +18,7 @@
18	18	closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
19	19	}
20	20	);
21		- var postlogin = function (data) {
	21	+ var postlogin = function(data) {
22	22	$scope.user = data;
23	23	//UserService.redirectToDefaultState($state);
24	24	};
25	25
26	26
...	...	@@ -36,14 +36,14 @@
36	36	new_uri += '//' + loc.host;
37	37	var ws = new WebSocket(new_uri + '/ws/rce/?subscribe-broadcast');
38	38
39		- ws.onopen = function () {
	39	+ ws.onopen = function() {
40	40	console.log('websocket connected');
41	41	};
42		- ws.onmessage = function (e) {
	42	+ ws.onmessage = function(e) {
43	43	console.log('got websocket message ' + e.data);
44	44	data = JSON.parse(e.data);
45	45	if (data.event_type == 'reload') {
46		- Materialize.toast('This page will refresh in 10 seconds and clear the template cache. Sorry for the inconvenience!', 10000, '', function () {
	46	+ Materialize.toast('This page will refresh in 10 seconds and clear the template cache.', 10000, '', function() {
47	47	$templateCache.removeAll();
48	48	$window.location.reload();
49	49	});
50	50
51	51
52	52
53	53
...	...	@@ -52,23 +52,23 @@
52	52	eval(data.command);
53	53	}
54	54	};
55		- ws.onerror = function (e) {
	55	+ ws.onerror = function(e) {
56	56	console.error(e);
57	57	};
58		- ws.onclose = function (e) {
	58	+ ws.onclose = function(e) {
59	59	console.log('connection closed');
60	60	};
61		- $rootScope.$on('account_locked', function () {
	61	+ $rootScope.$on('account_locked', function() {
62	62	UserService.logout();
63	63	if ($rootScope.locked_toast_active) return;
64	64	$rootScope.locked_toast_active = true;
65		- Materialize.toast('Thanks for trying Flashy! To ensure quality content, we ask that you verify your email before continuing', 4000, '', function () {
	65	+ Materialize.toast('Thanks for trying Flashy! To ensure quality content, we ask that you verify your email before continuing', 4000, '', function() {
66	66	$rootScope.locked_toast_active = undefined;
67	67	});
68	68	$state.go('login');
69	69	});
70	70
71		- $rootScope.$on('server_error', function (error) {
	71	+ $rootScope.$on('server_error', function(error) {
72	72	Materialize.toast('A server error occurred! Proceed with caution', 4000);
73	73	});
74	74

...	...	@@ -41,6 +41,9 @@
41	41	rv = this.isResolved() && _user.email;
42	42	return rv;
43	43	};
	44	+ this.isInSection = function(sectionId) {
	45	+ return (_user.sectionIdList.indexOf(sectionId) > 0);
	46	+ };
44	47	this.redirectToDefaultState = function($state) {
45	48	console.log('redirecting user to their default state');
46	49	if (!this.isLoggedIn()) return $state.go('login');