110swag / flashy-frontend

Download as
Browse Code ยป

Commit c3350cb1fed6501553a7a65cae5d3ec9cd7c9418

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

refactor common functionality into cardgridcontroller.js

Showing 6 changed files with 116 additions and 168 deletions Side-by-side Diff

home.html View file @ c3350cb
... ... @@ -172,6 +172,7 @@
172 172 <script src="scripts/CardListController.js"></script>
173 173 <script src="scripts/VerifyEmailController.js"></script>
174 174 <script src="scripts/HelpController.js"></script>
  175 +<script src="scripts/CardGridController.js"></script>
175 176  
176 177 <!-- Services -->
177 178 <script src="scripts/UserService.js"></script>
scripts/CardGridController.js View file @ c3350cb
  1 +angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate']).controller =
  2 + function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
  3 +
  4 + $scope.cards = false;
  5 + $scope.cardCols = []; // organized data
  6 + $scope.numCols = 0;
  7 + $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
  8 + $scope.sectionId = parseInt($stateParams.sectionId);
  9 + $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
  10 + $rootScope.currentSection = $scope.section;
  11 + console.log('hello from cardgridcontroller');
  12 +
  13 + if (!UserService.isInSection($scope.sectionId)) {
  14 + console.log('user is not enrolled in ' + $scope.sectionId);
  15 + return $state.go('addclass');
  16 + }
  17 +
  18 + angular.element($window).bind('resize', $scope.refreshLayout);
  19 + $scope.refreshColumnWidth = function() {
  20 + console.log('refreshing column width');
  21 + avail = $window.innerWidth - 17;
  22 + width = Math.floor(avail / Math.floor(avail / 250));
  23 + $('.cardColumn').css({
  24 + width: width + 'px',
  25 + 'font-size': 100 * width / 250 + '%'
  26 + });
  27 + $('.cardColumn .card.flashy').css({
  28 + width: width - 12 + 'px',
  29 + height: (width * 3 / 5) + 'px'
  30 + });
  31 + };
  32 +
  33 + $scope.refreshLayout = function() {
  34 + numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
  35 +
  36 + // check if we actually need to refresh the whole layout
  37 + if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
  38 + $scope.numCols = numCols;
  39 + console.log('refreshing layout for ' + $scope.numCols + ' columns');
  40 + $scope.cardCols = [];
  41 + var cols = [];
  42 + for (i = 0; i < $scope.numCols; i++) cols.push([]);
  43 + $scope.cards.forEach(function(card, i) {
  44 + cols[i % $scope.numCols].push(card);
  45 + $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
  46 + });
  47 + // wait until the next digest cycle to update cardCols
  48 +
  49 + $timeout(function() {
  50 + $scope.cardCols = cols;
  51 + $timeout($scope.refreshColumnWidth);
  52 + });
  53 +
  54 + };
  55 +
  56 + $scope.add = function(card) {
  57 + var colNum = 0;
  58 + var lowestCol = $scope.cardCols[0];
  59 + var lowestColNum = 0;
  60 + while (colNum < $scope.numCols) {
  61 + if ($scope.cardCols[colNum].length == 0) {
  62 + lowestCol = $scope.cardCols[colNum];
  63 + break;
  64 + } else if ($scope.cardCols[colNum].length < lowestCol.length) {
  65 + lowestCol = $scope.cardCols[colNum];
  66 + lowestColNum = colNum;
  67 + lowestColLen = $scope.cardCols[colNum].length;
  68 + }
  69 + colNum++;
  70 + }
  71 + console.log(card);
  72 + $scope.cards.push(data);
  73 + $timeout(function() {
  74 + lowestCol.unshift(card);
  75 + $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
  76 + $timeout($scope.refreshColumnWidth);
  77 + });
  78 + };
  79 +
  80 + $scope.$on('$destroy', function() {
  81 + $scope.ws.close();
  82 + $rootScope.currentSection = {};
  83 + $(document).off('keydown');
  84 + });
  85 + };
scripts/DeckController.js View file @ c3350cb
1 1 angular.module('flashy.DeckController', ['ui.router']).
2 2  
3   - controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams) {
4   - sectionId = $stateParams.sectionId;
5   - $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
6   - $scope.cards = false;
7   - $scope.cardCols = []; // organized data
8   - $scope.numCols = 0;
  3 + controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, UserService) {
  4 + angular.module('flashy.CardGridController').controller.call(this, $scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService);
9 5  
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 + '%'
22   - });
23   - $('.cardColumn .card.flashy').css({
24   - width: width - 12 + 'px',
25   - height: (width * 3 / 5) + 'px'
26   - });
27   - };
28   -
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
41   -
42   - $timeout(function() {
43   - $scope.cardCols = cols;
44   - $timeout($scope.refreshColumnWidth);
45   - });
46   -
47   - };
48   -
49   - angular.element($window).bind('resize', $scope.refreshLayout);
50   -
51 6 $scope.refreshCards = function() {
52   - $http.get('/api/sections/' + sectionId + '/deck/').
  7 + $http.get('/api/sections/' + $scope.sectionId + '/deck/').
53 8 success(function(data) {
54 9 console.log(data);
55 10 $scope.cards = data;
... ... @@ -61,9 +16,6 @@
61 16 });
62 17 };
63 18 $scope.refreshCards();
64   - $scope.$on('$destroy', function() {
65   - $rootScope.currentSection = {};
66   - });
67 19 }
68 20 );
scripts/FeedController.js View file @ c3350cb
1 1 angular.module('flashy.FeedController', ['ui.router', 'ngAnimate']).
2 2  
3 3 controller('FeedController', function($scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService) {
  4 + angular.module('flashy.CardGridController').controller.call(this, $scope, $rootScope, $stateParams, $state, $http, $window, $timeout, UserService);
4 5 console.log('Hello from feed');
5   - sectionId = parseInt($stateParams.sectionId);
6   - if (!UserService.isInSection(sectionId)) {
7   - console.log('user is not enrolled in ' + sectionId);
8   - return $state.go('addclass');
9   - }
10   - $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
11   - $rootScope.debug_flashcard = false;
12   - $scope.cards = false;
13   - $scope.cardCols = []; // organized data
14   - $scope.numCols = 0;
15   - $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
16 6  
17   - function calculate_cols() {
18   - var avail = $window.innerWidth - 17;
19   - return Math.max(1, Math.floor(avail / 250));
20   - }
21   -
22   - $scope.refreshColumnWidth = function() {
23   - console.log('refreshing column width');
24   - avail = $window.innerWidth - 17;
25   - width = Math.floor(avail / Math.floor(avail / 250));
26   - $('.cardColumn').css({
27   - width: width + 'px',
28   - 'font-size': 100 * width / 250 + '%'
29   - });
30   - $('.cardColumn .card.flashy').css({
31   - width: width - 12 + 'px',
32   - height: (width * 3 / 5) + 'px'
33   - });
34   - };
35   -
36   - $scope.refreshLayout = function() {
37   - // check if we actually need to refresh the whole layout
38   - if (calculate_cols() == $scope.numCols) return $scope.refreshColumnWidth();
39   - $scope.numCols = calculate_cols();
40   - console.log('refreshing layout for ' + $scope.numCols + ' columns');
41   - $scope.cardCols = [];
42   - var cols = [];
43   - for (i = 0; i < $scope.numCols; i++) cols.push([]);
44   - $scope.cards.forEach(function(card, i) {
45   - cols[i % $scope.numCols].push(card);
46   - $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
47   - });
48   - // wait until the next digest cycle to update cardCols
49   -
50   - $timeout(function() {
51   - $scope.cardCols = cols;
52   - $timeout($scope.refreshColumnWidth);
53   - });
54   -
55   - };
56   -
57   - angular.element($window).bind('resize', $scope.refreshLayout);
58   -
59 7 $scope.refreshCards = function() {
60   - $http.get('/api/sections/' + sectionId + '/feed/').
  8 + $http.get('/api/sections/' + $scope.sectionId + '/feed/').
61 9 success(function(data) {
62 10 console.log(data);
63 11 $scope.cards = data;
... ... @@ -70,30 +18,6 @@
70 18 });
71 19 };
72 20  
73   - $scope.add = function(card) {
74   - var colNum = 0;
75   - var lowestCol = $scope.cardCols[0];
76   - var lowestColNum = 0;
77   - while (colNum < $scope.numCols) {
78   - if ($scope.cardCols[colNum].length == 0) {
79   - lowestCol = $scope.cardCols[colNum];
80   - break;
81   - } else if ($scope.cardCols[colNum].length < lowestCol.length) {
82   - lowestCol = $scope.cardCols[colNum];
83   - lowestColNum = colNum;
84   - lowestColLen = $scope.cardCols[colNum].length;
85   - }
86   - colNum++;
87   - }
88   - console.log(card);
89   - $scope.cards.push(data);
90   - $timeout(function() {
91   - lowestCol.unshift(card);
92   - $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
93   - $timeout($scope.refreshColumnWidth);
94   - });
95   - };
96   -
97 21 $scope.sortAdd = function(card, array) {
98 22 console.log('sort add');
99 23 array.forEach(function(ele, i, ary) {
... ... @@ -119,26 +43,26 @@
119 43 return -1;
120 44 };
121 45  
122   - $scope.update = function(id, new_score) {
123   - card = $scope.cardTable[id].obj;
124   - if (Math.abs(new_score - card.score) < .0001) {
125   - console.log('score same, no update required');
126   - return;
127   - }
128   - console.log('updating');
129   - console.log(card);
130   - var column = $scope.cardCols[$scope.cardTable[id].colNum];
131   - var found = column.indexOf(card);
132   - var i = 0;
133   - for (; i < column.length; i++)
134   - if (column[i].score <= new_score) break;
135   - card.score = new_score;
136   - if ($scope.$$phase) { // most of the time it is "$digest"
137   - column.splice(i, 0, column.splice(found, 1)[0]);
138   - } else {
139   - $scope.$apply(column.splice(i, 0, column.splice(found, 1)[0]));
140   - }
141   - };
  46 + $scope.update = function(id, new_score) {
  47 + card = $scope.cardTable[id].obj;
  48 + if (Math.abs(new_score - card.score) < .0001) {
  49 + console.log('score same, no update required');
  50 + return;
  51 + }
  52 + console.log('updating');
  53 + console.log(card);
  54 + var column = $scope.cardCols[$scope.cardTable[id].colNum];
  55 + var found = column.indexOf(card);
  56 + var i = 0;
  57 + for (; i < column.length; i++)
  58 + if (column[i].score <= new_score) break;
  59 + card.score = new_score;
  60 + if ($scope.$$phase) { // most of the time it is "$digest"
  61 + column.splice(i, 0, column.splice(found, 1)[0]);
  62 + } else {
  63 + $scope.$apply(column.splice(i, 0, column.splice(found, 1)[0]));
  64 + }
  65 + };
142 66  
143 67 var loc = window.location, new_uri;
144 68 if (loc.protocol === 'https:') {
145 69  
... ... @@ -147,12 +71,9 @@
147 71 new_uri = 'ws:';
148 72 }
149 73 new_uri += '//' + loc.host;
150   - var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
  74 + $scope.ws = new WebSocket(new_uri + '/ws/feed/' + $scope.sectionId + '?subscribe-broadcast');
151 75  
152   - ws.onopen = function() {
153   - console.log('websocket connected');
154   - };
155   - ws.onmessage = function(e) {
  76 + $scope.ws.onmessage = function(e) {
156 77 data = JSON.parse(e.data);
157 78 console.log('got websocket message ' + e.data);
158 79 console.log(data);
... ... @@ -162,12 +83,6 @@
162 83 $scope.update(data.flashcard_id, data.new_score);
163 84 }
164 85 };
165   - ws.onerror = function(e) {
166   - console.error(e);
167   - };
168   - ws.onclose = function(e) {
169   - console.log('connection closed');
170   - };
171 86  
172 87 var resetModal = function() {
173 88 $('#new-card-input').html('');
... ... @@ -268,11 +183,6 @@
268 183 });
269 184 });
270 185 $scope.refreshCards();
271   - $scope.$on('$destroy', function() {
272   - ws.close();
273   - $rootScope.currentSection = {};
274   - $(document).off('keydown');
275   - });
276 186  
277 187 $scope.shuffleCards = function() {
278 188 $timeout(function() {
scripts/StudyController.js View file @ c3350cb
... ... @@ -5,7 +5,7 @@
5 5 console.log('Flashy study controller content in this file. also hell0');
6 6 sectionId = $stateParams.sectionId;
7 7 $scope.isParamOpen = true;
8   -
  8 +
9 9 $(document).ready(function() {
10 10 $('.datepicker').pickadate({
11 11 selectMonths: true, // Creates a dropdown to control month
scripts/UserService.js View file @ c3350cb
... ... @@ -70,11 +70,11 @@
70 70 }
71 71 return true;
72 72 };
73   - this.showLockedMessage = function(){
  73 + this.showLockedMessage = function() {
74 74 Materialize.toast('You must verify your email address before continuing.' +
75 75 '<a class="btn-flat cyan-text" onclick="rootscope.UserService.resendConfirmationEmail()">' +
76 76 'Resend Verification Email</a>', 4000);
77   - }
  77 + };
78 78 this.noAuthRequired = function(state) {
79 79 if (['verifyemail'].indexOf(state.name) >= 0) {
80 80 return true;