110swag / flashy-frontend

Download as
Browse Code ยป

Commit 1653dec57735009838ca570c792d6fa1384e47fc

Authored by Andrew Buss
1 parent edf69c1074
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Happy cleanup and refactor of card deck

Showing 8 changed files with 62 additions and 96 deletions Side-by-side Diff

config.js View file @ 1653dec
... ... @@ -9,8 +9,6 @@
9 9 'flashy.StudyController',
10 10 'flashy.UserService',
11 11 'flashy.FlashcardDirective',
12   - //'flashy.SelectDirective',
13   - // DOESNT WORK RN
14 12 'flashy.ResetPasswordController',
15 13 'flashy.VerifyEmailController',
16 14 'flashy.CardListController',
home.html View file @ 1653dec
... ... @@ -179,7 +179,6 @@
179 179  
180 180 <!-- Directives -->
181 181 <script src="scripts/FlashcardDirective.js"></script>
182   -<script src="scripts/SelectDirective.js"></script>
183 182  
184 183 <!-- Other -->
185 184 <!--<script src="scripts/StudyController.js"></script>-->
scripts/CardGridController.js View file @ 1653dec
1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =
2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
3   - console.log(arguments);
4   - console.log($stateParams);
5   - console.log(UserService);
6 3 $scope.cards = false;
7 4 $scope.cardCols = []; // organized data
8 5 $scope.numCols = 0;
... ... @@ -10,7 +7,6 @@
10 7 $scope.sectionId = parseInt($stateParams.sectionId);
11 8 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
12 9 $rootScope.currentSection = $scope.section;
13   - console.log('hello from cardgridcontroller');
14 10  
15 11 if (!UserService.isInSection($scope.sectionId)) {
16 12 console.log('user is not enrolled in ' + $scope.sectionId);
... ... @@ -18,7 +14,6 @@
18 14 }
19 15  
20 16 $scope.refreshColumnWidth = function() {
21   - console.log('refreshing column width');
22 17 avail = $window.innerWidth - 17;
23 18 width = Math.floor(avail / Math.floor(avail / 250));
24 19 $('.cardColumn').css({
... ... @@ -31,6 +26,26 @@
31 26 });
32 27 };
33 28  
  29 + $scope.pullCard = function(id) {
  30 + if ($scope.deck_cards[id]) return console.log('Not pulling', id, "because it's already in deck");
  31 + $http.post('/api/flashcards/' + id + '/pull/').
  32 + success(function(data) {
  33 + console.log('pulled flashcard #' + id);
  34 + }).
  35 + error(function(data) {
  36 + console.log('failed to pull flashcard #' + id);
  37 + });
  38 + };
  39 + $scope.unpullCard = function(id) {
  40 + if (!$scope.deck_cards[id]) return console.log('Not unpulling', id, "because it's not in deck");
  41 + $http.post('/api/flashcards/' + id + '/unpull/').
  42 + success(function(data) {
  43 + console.log('unpulled flashcard #' + id);
  44 + }).
  45 + error(function(data) {
  46 + console.log('failed to unpull flashcard #' + id);
  47 + });
  48 + };
34 49 $scope.refreshLayout = function() {
35 50 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
36 51  
37 52  
... ... @@ -44,9 +59,10 @@
44 59 $scope.cards.forEach(function(card, i) {
45 60 cols[i % $scope.numCols].push(card);
46 61 $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
  62 + card.isInDeck();
47 63 });
48 64 // wait until the next digest cycle to update cardCols
49   -
  65 + console.log(cols);
50 66 $timeout(function() {
51 67 $scope.cardCols = cols;
52 68 $timeout($scope.refreshColumnWidth);
53 69  
54 70  
... ... @@ -63,16 +79,21 @@
63 79 });
64 80  
65 81 $scope.deck_ws.onMessage(function(message) {
66   - console.log('message', message);
67   - if (message.event_type == 'pull_card') {
68   - $scope.deck_cards.push(card);
  82 + data = JSON.parse(message.data);
  83 + console.log('message', data);
  84 + if (data.event_type == 'pull_card') {
  85 + card = data.flashcard;
  86 + console.log('pulling', card);
  87 + $scope.deck_cards[card.id] = card;
69 88 }
  89 + if (data.event_type == 'unpull_card') {
  90 + card = data.flashcard;
  91 + $scope.deck_cards[card.id] = undefined;
  92 + }
70 93 });
71 94  
72 95 $scope.cardInDeck = function(id) {
73   - console.log('checking whether', id, 'in deck');
74   - for (card in $scope.deck_cards) if (card.id == id) return true;
75   - return false;
  96 + return $scope.deck_cards[id];
76 97 };
77 98 $scope.add = function(card) {
78 99 var colNum = 0;
79 100  
... ... @@ -98,9 +119,9 @@
98 119  
99 120 $http.get('/api/sections/' + $scope.sectionId + '/deck/').
100 121 success(function(data) {
101   - $scope.deck_cards = data;
  122 + $scope.deck_cards = [];
  123 + for (i in data) $scope.deck_cards[data[i].id] = data[i];
102 124 console.log("got user's deck");
103   - console.log(data);
104 125 }).
105 126 error(function(err) {
106 127 console.log('get deck failed');
scripts/FeedController.js View file @ 1653dec
... ... @@ -2,13 +2,26 @@
2 2  
3 3 controller('FeedController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
4 4 angular.module('flashy.CardGridController').controller.apply(this, arguments);
5   - console.log('Hello from feed');
6   -
7 5 $scope.refreshCards = function() {
8 6 $http.get('/api/sections/' + $scope.sectionId + '/feed/').
9 7 success(function(data) {
10 8 console.log(data);
11   - $scope.cards = data;
  9 + $scope.cards = [];
  10 + for (var i in data) {
  11 + console.log(data[i].id);
  12 + data[i].isInDeck = function(id) {
  13 + return $scope.cardInDeck(id);
  14 + }.bind(this, data[i].id);
  15 + data[i].unpull = function(id) {
  16 + $scope.unpullCard(id);
  17 + //$scope.deck_cards[id] = undefined;
  18 + }.bind(this, data[i].id);
  19 + data[i].pull = function(id, card) {
  20 + $scope.pullCard(id);
  21 + //$scope.deck_cards[id] = card;
  22 + }.bind(this, data[i].id, data[i]);
  23 + $scope.cards.push(data[i]);
  24 + }
12 25 $scope.refreshLayout();
13 26 console.log('success in refresh cards...');
14 27 }).
... ... @@ -29,7 +42,6 @@
29 42 };
30 43  
31 44 $scope.hide = function(card) {
32   - console.log('hiding card');
33 45 var found = -1;
34 46 col = $scope.cardTable[card.id].colNum;
35 47 found = $scope.cardCols[col].indexOf(card);
... ... @@ -66,7 +78,7 @@
66 78  
67 79 $scope.feed_ws = $websocket($scope.ws_host + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
68 80 $scope.feed_ws.onOpen(function() {
69   - console.log('deck ws open');
  81 + console.log('feed ws open');
70 82 });
71 83  
72 84 $scope.feed_ws.onMessage(function(e) {
scripts/FlashcardDirective.js View file @ 1653dec
... ... @@ -22,35 +22,7 @@
22 22 i = blank[1];
23 23 });
24 24 scope.textPieces.push({text: scope.flashcard.text.slice(i)});
25   - /* Pulls card from feed into deck */
26   - scope.pullCard = function(flashcard) {
27   - flashcard.is_in_deck = true;
28   - $http.post('/api/flashcards/' + flashcard.id + '/pull/').
29   - success(function(data) {
30   - console.log('pulled flashcard #' + flashcard.id);
31   - //scope.startShrink = true;
32   - //scope.refresh(flashcard);
33   - }).
34   - error(function(data) {
35   - console.log('failed to pull flashcard #' + flashcard.id);
36   - });
37   - };
38 25  
39   - /* Unpulls card from deck */
40   - scope.unpullCard = function(flashcard) {
41   - console.log('unpulling card...');
42   - flashcard.is_in_deck = false;
43   - $http.post('/api/flashcards/' + flashcard.id + '/unpull/').
44   - success(function(data) {
45   - console.log('card unpull success');
46   - //scope.startShrink = true;
47   - //scope.refresh(flashcard);
48   - }).
49   - error(function(data) {
50   - console.log('card unpull FAILURE');
51   - });
52   - };
53   -
54 26 /* Hides card from feed */
55 27 scope.hideCard = function(flashcard) {
56 28 if ($state.current.name == 'feed') {
... ... @@ -64,9 +36,6 @@
64 36 console.log('card hide FAILURE');
65 37 });
66 38 }
67   - };
68   - scope.isInDeck = function(flashcard) {
69   - //$scope.
70 39 };
71 40 }
72 41 };
scripts/SelectDirective.js View file @ 1653dec
1   -/* Credits to vinciciusmelquiades:
2   -https://github.com/viniciusmelquiades/firstExample/blob/master/app/src/directive/directive.js */
3   -(function() {
4   - 'use strict';
5   -
6   - angular.module('flashy.SelectDirective', [])
7   - .directive('select', materialSelect);
8   - console.log('coming inside directive');
9   - materialSelect.$inject = ['$timeout'];
10   -
11   - function materialSelect($timeout) {
12   - var directive = {
13   - link: link,
14   - restrict: 'E',
15   - require: '?ngModel'
16   - };
17   -
18   - function link(scope, element, attrs, ngModel) {
19   - $timeout(create);
20   -
21   - if (ngModel) {
22   - ngModel.$render = create;
23   - }
24   -
25   - function create() {
26   - element.material_select();
27   - }
28   -
29   - //if using materialize v0.96.0 use this
30   - element.one('$destroy', function() {
31   - element.material_select('destroy');
32   - });
33   - }
34   -
35   - return directive;
36   - }
37   -
38   -})();
scripts/UserService.js View file @ 1653dec
... ... @@ -39,6 +39,7 @@
39 39 this.hasVerifiedEmail = function() {
40 40 return this.isResolved() && _user.is_confirmed;
41 41 };
  42 +
42 43 this.logout = function($state) {
43 44 $http.post('/api/logout/').success(function() {
44 45 if (!_user.locked)Materialize.toast('Logged out!', 1000);
45 46  
46 47  
47 48  
... ... @@ -62,12 +63,16 @@
62 63 };
63 64 this.redirectToDefaultState = function($state) {
64 65 console.log('redirecting user to their default state');
  66 + // if the user isn't logged in, log in!
65 67 if (!this.isLoggedIn()) return $state.go('login');
  68 + // if the user isn't enrolled in any sections, go to addclass
66 69 if (!_user.sections.length) return $state.go('addclass');
67 70 last_state = localStorage.getItem('last_state');
68 71 if (last_state) {
  72 + // if there was a last state, get the parameters of the state
69 73 last_state_params = JSON.parse(localStorage.getItem('last_state_params'));
70 74 if (last_state_params.sectionId && this.authorizedFor(last_state, last_state_params)) {
  75 + // if we're authorized to access that state with those parameters, go there
71 76 return $state.go(last_state, JSON.parse(localStorage.getItem('last_state_params')));
72 77 }
73 78 }
templates/flashcard.html View file @ 1653dec
... ... @@ -7,12 +7,12 @@
7 7 </div>
8 8 </div>
9 9 <div class="card-overlay">
10   - <div class="top-box no-user-select" ng-hide="flashcard.is_in_deck"
11   - ng-click="pullCard(flashcard)">
  10 + <div class="top-box no-user-select" ng-hide="flashcard.isInDeck()"
  11 + ng-click="flashcard.pull()">
12 12 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
13 13 </div>
14   - <div class="top-box no-user-select" ng-show="flashcard.is_in_deck"
15   - ng-click="unpullCard(flashcard)">
  14 + <div class="top-box no-user-select" ng-show="flashcard.isInDeck()"
  15 + ng-click="flashcard.unpull()">
16 16 <div class="center-me"><i class="mdi-content-remove-circle-outline medium"></i></div>
17 17 </div>
18 18 <div class="bottom-box no-user-select">
... ... @@ -26,7 +26,7 @@
26 26  
27 27 </div>
28 28 </div>
29   - <div ng-show="cardInDeck(flashcard.id)" class="green-text" style="position:absolute; top:0px;right:0px">
  29 + <div ng-show="flashcard.isInDeck()" class="green-text" style="position:absolute; top:0px;right:0px">
30 30 <div class="center-me"><i class="mdi-action-done small"></i></div>
31 31 </div>
32 32 <div ng-show="$root.debug_flashcard" style="position:absolute; bottom:0px; right:5px;">