110swag / flashy-frontend

Commit ca76999e90dd635858753a0de946d179b029b462

Authored by Andrew Buss 2015-05-26 02:09:18 -0700

make deck less interesting

Showing 4 changed files with 95 additions and 39 deletions Side-by-side Diff

config.js
scripts/DeckController.js
scripts/UserService.js
templates/deck.html

...	...	@@ -42,13 +42,16 @@
42	42	$locationProvider.html5Mode(true);
43	43	$urlRouterProvider.otherwise('/404');
44	44	var auth_resolve = {
45		- authorize: function($q, $state, UserService) {
	45	+ authorize: function($q, $state, $stateParams, UserService) {
46	46	console.log('resolving user before continuing');
47	47	var redirectAsNeeded = function() {
48	48	if (!UserService.isLoggedIn()) {
49	49	console.log(UserService.getUserData());
50	50	console.log('making the user log in');
51	51	$state.go('login');
	52	+ }
	53	+ if (!UserService.authorizedFor($state, $stateParams)) {
	54	+ $state.go('addclass');
52	55	}
53	56	};
54	57	if (UserService.isResolved()) return redirectAsNeeded();

1	1	angular.module('flashy.DeckController', ['ui.router']).
2	2
3		- controller('DeckController', function($scope, $rootScope, $state, $http, $stateParams) {
4		- // cards array
	3	+ controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams) {
5	4	sectionId = $stateParams.sectionId;
6	5	$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
7		- $scope.sectionId = sectionId;
8		- $scope.cards = [];
	6	+ $scope.cards = false;
	7	+ $scope.cardCols = []; // organized data
	8	+ $scope.numCols = 0;
9	9
10		- // Populate our page with cards.
11		- $http.get('/api/sections/' + sectionId + '/deck/').
12		- success(function(data) {
13		- console.log(data);
14		- $scope.cards = data;
15		- }).
16		- error(function(err) {
17		- console.log('pulling feed failed');
	10	+ function calculate_cols() {
	11	+ var avail = $window.innerWidth - 17;
	12	+ return Math.max(1, Math.floor(avail / 250));
	13	+ }
	14	+
	15	+ $scope.refreshColumnWidth = function() {
	16	+ console.log('refreshing column width');
	17	+ avail = $window.innerWidth - 17;
	18	+ width = Math.floor(avail / Math.floor(avail / 250));
	19	+ $('.cardColumn').css({
	20	+ width: width + 'px',
	21	+ 'font-size': 100 * width / 250 + '%'
18	22	});
	23	+ $('.cardColumn .card.flashy').css({
	24	+ width: width - 12 + 'px',
	25	+ height: (width * 3 / 5) + 'px'
	26	+ });
	27	+ };
19	28
20		- /* Lets page refresh the cards shown on the page. */
21		- $scope.refreshCards = function() {
22		- var myDelay = 200; // ms
	29	+ $scope.refreshLayout = function() {
	30	+ // check if we actually need to refresh the whole layout
	31	+ if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
	32	+ $scope.numCols = calculate_cols();
	33	+ console.log('refreshing layout for ' + $scope.numCols + ' columns');
	34	+ $scope.cardCols = [];
	35	+ var cols = [];
	36	+ for (i = 0; i < $scope.numCols; i++) cols.push([]);
	37	+ $scope.cards.forEach(function(card, i) {
	38	+ cols[i % $scope.numCols].push(card);
	39	+ });
	40	+ // wait until the next digest cycle to update cardCols
23	41
24		- setTimeout(function() {
25		- $http.get('/api/sections/' + sectionId + '/deck/').
26		- success(function(data) {
27		- console.log(data);
28		- $scope.cards = data;
29		- console.log('success in refresh cards...');
30		- }).
31		- error(function(err) {
32		- console.log('refresh fail');
33		- });
34		- }, myDelay);
	42	+ $timeout(function() {
	43	+ $scope.cardCols = cols;
	44	+ $timeout($scope.refreshColumnWidth);
	45	+ });
	46	+
35	47	};
	48	+
	49	+ angular.element($window).bind('resize', $scope.refreshLayout);
	50	+
	51	+ $scope.refreshCards = function() {
	52	+ $http.get('/api/sections/' + sectionId + '/deck/').
	53	+ success(function(data) {
	54	+ console.log(data);
	55	+ $scope.cards = data;
	56	+ $scope.refreshLayout();
	57	+ console.log('success in refresh cards...');
	58	+ }).
	59	+ error(function(err) {
	60	+ console.log('refresh fail');
	61	+ });
	62	+ };
	63	+ $scope.refreshCards();
36	64	$scope.$on('$destroy', function() {
37	65	$rootScope.currentSection = {};
38	66	});

...	...	@@ -2,10 +2,20 @@
2	2	service('UserService', function($rootScope, $http, $q) {
3	3	var deferred = $q.defer();
4	4	var _user = false;
5		- $http.get('/api/me/').success(function(data) {
6		- console.log('user is logged in!');
	5	+ var login = function(data) {
7	6	_user = data;
	7	+ if (!data.is_confirmed) {
	8	+ Materialize.toast('Please verify your email address!', 4000);
	9	+ }
	10	+ _user.sectionIdList = _user.sections.map(function(x) {
	11	+ return x.id;
	12	+ });
8	13	deferred.resolve(data);
	14	+ };
	15	+ this.login = login;
	16	+ $http.get('/api/me/').success(function(data) {
	17	+ console.log('user is logged in!');
	18	+ login(data);
9	19	}).error(function(data) {
10	20	console.log(data);
11	21	console.log('not logged in yet: ' + data.detail);
...	...	@@ -20,13 +30,6 @@
20	30	if (this.isResolved()) return _user;
21	31	else return deferred.promise;
22	32	};
23		- this.login = function(data) {
24		- _user = data;
25		- if (!data.is_confirmed) {
26		- Materialize.toast('Please verify your email address!', 4000);
27		- }
28		- deferred.resolve(data);
29		- };
30	33	this.hasVerifiedEmail = function() {
31	34	return this.isResolved() && _user.is_confirmed;
32	35	};
...	...	@@ -44,6 +47,14 @@
44	47	last_state = localStorage.getItem('last_state');
45	48	if (last_state) return $state.go(last_state, JSON.parse(localStorage.getItem('last_state_params')));
46	49	$state.go('feed', {sectionId: _user.sections[0].id});
	50	+ };
	51	+ this.authorizedFor = function(state, stateParams) {
	52	+ if (['feed', 'deck', 'cardlist'].indexOf(state.name) >= 0) {
	53	+ if (_user.sectionIdList.indexOf(stateParams.sectionId) < 0) {
	54	+ return false;
	55	+ }
	56	+ }
	57	+ return true;
47	58	};
48	59	});

1	1	<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
2	2	<div class="row">
3		- <div ng-repeat="card in cards">
4		- <flashcard flashcard-obj="card" refresh="refreshCards()"/>
	3	+ <h2 ng-cloak ng-show="cards.length == 0">Add a card from the feed to see it here!</h2>
5	4
	5	+ <div class="progress center-align" style="margin: 70px auto auto;width:50%;" ng-if="cards === false">
	6	+ <div class="indeterminate"></div>
	7	+ </div>
	8	+ <!--div class='row' ng-repeat="row in cardRows">
	9	+ <div ng-repeat ="card in row">
	10	+ <flashcard flashcard-obj="card" refresh="hide(card)"/>
	11	+ </div>
	12	+ </div>-->
	13	+
	14	+ <div class="cardColumn" ng-repeat="col in cardCols">
	15	+ <flashcard flashcard-obj="card" ng-repeat="card in col"/>
	16	+ </div>
	17	+</div>
	18	+<div class="row">
	19	+ <div>
6	20	<!--
7	21	<div class="col s6">
8	22	<div class="card">