110swag / flashy-frontend

Download as
Browse Code ยป

Commit 70c2390ab2ab4ab836af59bbc1c2284d4ab7ff87

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

unbreak deck, cardlist next

Showing 8 changed files with 142 additions and 151 deletions Side-by-side Diff

home.html View file @ 70c2390
... ... @@ -160,6 +160,7 @@
160 160 <script src="config.js"></script>
161 161  
162 162 <script src="scripts/FlashcardFactory.js"></script>
  163 +<script src="scripts/DeckFactory.js"></script>
163 164  
164 165 <!-- Controllers -->
165 166 <script src="scripts/FeedController.js"></script>
scripts/CardGridController.js View file @ 70c2390
1   -angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).CardGridController =
2   - function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {
  1 +angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'flashy.DeckFactory']).CardGridController =
  2 + function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
3 3 $scope.cards = []; // all cards
4   - $scope.deck = [];
5 4 $scope.cardCols = []; // organized data
6   - $scope.cardColsShow = []; // displayed data
  5 + $scope.cardColsShow = []; // displayed data
7 6 $scope.numCols = 0;
8 7 $scope.cardTable = {}; // look up table of cards: {'colNum':col, 'obj':card}
9 8 $scope.sectionId = parseInt($stateParams.sectionId);
10 9 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
  10 + $scope.deck = new Deck($scope.sectionId, {
  11 + cardHideCallback: function(card) {
  12 + $scope.hideCardFromGrid(card);
  13 + }
  14 + });
  15 +
11 16 $scope.showGrid = false;
12 17 //$scope.moveQueue = []; // queue of flashcard objects
13 18 $rootScope.currentSection = $scope.section;
... ... @@ -55,32 +60,6 @@
55 60  
56 61 angular.element($window).bind('resize', $scope.refreshLayout);
57 62  
58   - $scope.ws_host = window.location.origin.replace('http', 'ws');
59   - $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
60   - $scope.deck_ws.onOpen(function() {
61   - console.log('deck ws open');
62   - });
63   -
64   - $scope.deck_ws.onMessage(function(message) {
65   - data = JSON.parse(message.data);
66   - console.log('message', data);
67   - card = new Flashcard(data.flashcard);
68   - if (data.event_type == 'card_pulled') {
69   - $scope.deck[card.id] = card;
70   - if ($scope.deckPullCallback) $scope.deckPullCallback(card);
71   - }
72   - if (data.event_type == 'card_unpulled') {
73   - $scope.deck[card.id] = undefined;
74   - if ($scope.deckUnpullCallback) $scope.deckUnpullCallback(card);
75   - }
76   - if (data.event_type == 'card_hidden') {
77   - $scope.hideCardFromGrid(card);
78   - }
79   - });
80   -
81   - $scope.cardInDeck = function(id) {
82   - return $scope.deck[id];
83   - };
84 63 $scope.addCardToGrid = function(card) {
85 64 var colNum = 0;
86 65 var lowestCol = $scope.cardCols[0];
87 66  
... ... @@ -118,14 +97,10 @@
118 97 };
119 98  
120 99 $scope.$on('$destroy', function() {
121   - $scope.deck_ws.close();
  100 + $scope.deck.cleanup();
122 101 $rootScope.currentSection = {};
123 102 $(document).off('keydown');
124 103 });
125   - return $http.get('/api/sections/' + $scope.sectionId + '/deck/').
126   - success(function(data) {
127   - for (i in data) $scope.deck[data[i].id] = new Flashcard(data[i], $scope.deck);
128   - console.log("got user's deck", data);
129   - });
  104 + return $scope.deck.deckPromise;
130 105 };
scripts/CardListController.js View file @ 70c2390
1 1 angular.module('flashy.CardListController', ['ui.router', 'angular.filter', 'ngSanitize']).
2   - controller('CardListController', function($scope, $rootScope, $state, $http, $stateParams) {
  2 + controller('CardListController', function($scope, $rootScope, $state, $http, $stateParams, Flashcard) {
3 3 // cards array
4 4 sectionId = $stateParams.sectionId;
5 5 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
... ... @@ -7,7 +7,7 @@
7 7  
8 8 $http.get('/api/sections/' + sectionId + '/flashcards/?hidden=yes').
9 9 success(function(data) {
10   - $scope.cards = data;
  10 + for (i in data) $scope.cards[data[i].id] = new Flashcard(data[i], $scope.cards);
11 11 }).
12 12 error(function(err) {
13 13 console.log('pulling feed failed');
14 14  
15 15  
16 16  
17 17  
18 18  
19 19  
20 20  
... ... @@ -130,76 +130,61 @@
130 130  
131 131 // to display day of the week badges
132 132 $scope.dayofweek = function(item) {
133   - var date = new Date(item.material_date);
134   - switch (date.getDay()) {
135   - case 0:
136   - return 'U';
137   - case 1:
138   - return 'M';
139   - case 2:
140   - return 'T';
141   - case 3:
142   - return 'W';
143   - case 4:
144   - return 'R';
145   - case 5:
146   - return 'F';
147   - case 6:
148   - return 'S';
149   - }
  133 + var date = new Date(item.material_date);
  134 + return ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][date.getDay()];
150 135 };
151 136  
152 137 // checkbox filter
153 138 $scope.filter = {
154   - 'week1': true,
155   - 'week2': true,
156   - 'week3': true,
157   - 'week4': true,
158   - 'week5': true,
159   - 'week6': true,
160   - 'week7': true,
161   - 'week8': true,
162   - 'week9': true,
163   - 'week10': true,
  139 + 'week1': true,
  140 + 'week2': true,
  141 + 'week3': true,
  142 + 'week4': true,
  143 + 'week5': true,
  144 + 'week6': true,
  145 + 'week7': true,
  146 + 'week8': true,
  147 + 'week9': true,
  148 + 'week10': true,
164 149 };
165 150  
166 151 $scope.filterByDate = function(item) {
167   - var week = item.material_week_num;
168   - return (week == 1 && $scope.filter['week1']) ||
169   - (week == 2 && $scope.filter['week2']) ||
170   - (week == 3 && $scope.filter['week3']) ||
171   - (week == 4 && $scope.filter['week4']) ||
172   - (week == 5 && $scope.filter['week5']) ||
173   - (week == 6 && $scope.filter['week6']) ||
174   - (week == 7 && $scope.filter['week7']) ||
175   - (week == 8 && $scope.filter['week8']) ||
176   - (week == 9 && $scope.filter['week9']) ||
177   - (week == 10 && $scope.filter['week10']);
  152 + var week = item.material_week_num;
  153 + return (week == 1 && $scope.filter['week1']) ||
  154 + (week == 2 && $scope.filter['week2']) ||
  155 + (week == 3 && $scope.filter['week3']) ||
  156 + (week == 4 && $scope.filter['week4']) ||
  157 + (week == 5 && $scope.filter['week5']) ||
  158 + (week == 6 && $scope.filter['week6']) ||
  159 + (week == 7 && $scope.filter['week7']) ||
  160 + (week == 8 && $scope.filter['week8']) ||
  161 + (week == 9 && $scope.filter['week9']) ||
  162 + (week == 10 && $scope.filter['week10']);
178 163 };
179 164  
180 165 }
181 166 ).
182   -filter('displayCard', function($sce) {
183   - return function(card) {
184   - // text to display as html
185   - var cardText = '';
  167 + filter('displayCard', function($sce) {
  168 + return function(card) {
  169 + // text to display as html
  170 + var cardText = '';
186 171  
187   - var start = 0; // where to start next string break
  172 + var start = 0; // where to start next string break
188 173  
189   - // get all display pieces and blank pieces
190   - for (var i = 0; i < card.mask.length; i++) {
191   - cardText = cardText.concat(card.text.substring(start, card.mask[i][0]));
192   - cardText = cardText.concat('<b>');
193   - cardText = cardText.concat(card.text.substring(card.mask[i][0], card.mask[i][1]));
194   - cardText = cardText.concat('</b>');
195   - start = card.mask[i][1];
196   - }
  174 + // get all display pieces and blank pieces
  175 + for (var i = 0; i < card.mask.length; i++) {
  176 + cardText = cardText.concat(card.text.substring(start, card.mask[i][0]));
  177 + cardText = cardText.concat('<b>');
  178 + cardText = cardText.concat(card.text.substring(card.mask[i][0], card.mask[i][1]));
  179 + cardText = cardText.concat('</b>');
  180 + start = card.mask[i][1];
  181 + }
197 182  
198   - // get remaining dislay pieces, if any
199   - if (start != card.mask.length - 1)
200   - cardText = cardText.concat(card.text.substring(start));
  183 + // get remaining dislay pieces, if any
  184 + if (start != card.mask.length - 1)
  185 + cardText = cardText.concat(card.text.substring(start));
201 186  
202   - return $sce.trustAsHtml(cardText);
203   - };
204   -});
  187 + return $sce.trustAsHtml(cardText);
  188 + };
  189 + });
scripts/DeckController.js View file @ 70c2390
1 1 angular.module('flashy.DeckController', ['ui.router', 'ngWebSocket']).
2 2  
3   - controller('DeckController', function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService, Flashcard) {
  3 + controller('DeckController',
  4 + function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
4 5 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments).then(function() {
5 6 $scope.refreshLayout();
6 7 });
7   - $scope.cards = $scope.deck;
  8 + $scope.cards = $scope.deck.deck;
8 9 $scope.deckPullCallback = $scope.addCardToGrid;
9 10 $scope.deckUnpullCallback = $scope.hideCardFromGrid;
10 11  
scripts/DeckFactory.js View file @ 70c2390
  1 +angular.module('flashy.DeckFactory', ['ui.router', 'flashy.FlashcardFactory', 'ngWebSocket']).
  2 + factory('Deck', function ($http, $rootScope, $websocket, Flashcard) {
  3 +
  4 + var Deck = function (sectionId, callbacks) {
  5 + obj = this;
  6 + this.deck = [];
  7 + this.section = $rootScope.SectionResource.get({sectionId: sectionId});
  8 + this.ws = $websocket($rootScope.ws_host + '/ws/deck/' + sectionId + '?subscribe-user');
  9 + this.contains = function (id) {
  10 + return this.deck[id];
  11 + };
  12 +
  13 + this.ws.onMessage(function (message) {
  14 + data = JSON.parse(message.data);
  15 + console.log('message', data);
  16 + card = new Flashcard(data.flashcard);
  17 + if (data.event_type == 'card_pulled') {
  18 + obj.deck[card.id] = card;
  19 + if (callbacks.cardPullCallback) callbacks.cardPullCallback(card);
  20 + }
  21 + if (data.event_type == 'card_unpulled') {
  22 + obj.deck[card.id] = undefined;
  23 + if (callbacks.cardUnpullCallback) callbacks.cardUnpullCallback(card);
  24 + }
  25 + if (data.event_type == 'card_hidden') {
  26 + if (callbacks.cardHideCallback) callbacks.cardHideCallback(card);
  27 + }
  28 + });
  29 + this.deckPromise = $http.get('/api/sections/' + sectionId + '/deck/').success(function (data) {
  30 + for (i in data) obj.deck[data[i].id] = new Flashcard(data[i], obj);
  31 + console.log("got user's deck", data);
  32 + });
  33 + this.cleanup = function () {
  34 + this.ws.close();
  35 + };
  36 + this.forEach = this.deck.forEach;
  37 + };
  38 +
  39 + return Deck;
  40 + });
scripts/FeedController.js View file @ 70c2390
1   -angular.module('flashy.FeedController', ['ui.router', 'ngAnimate', 'ngWebSocket', 'contenteditable']).controller('FeedController',
2   - function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard) {
  1 +angular.module('flashy.FeedController',
  2 + ['ui.router',
  3 + 'ngAnimate',
  4 + 'ngWebSocket',
  5 + 'contenteditable',
  6 + 'flashy.DeckFactory']).controller('FeedController',
  7 + function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, $interval, UserService, Flashcard, Deck) {
3 8 angular.module('flashy.CardGridController').CardGridController.apply(this, arguments);
4 9  
5   - (function drawCols() {
6   - $interval(function() {
7   - if ($scope.cardColsShow != $scope.cardCols) {
8   - $scope.cardColsShow = $scope.cardCols;
9   - console.log('interval');
10   - }
11   - }, 1000);
12   - }());
  10 + (function drawCols() {
  11 + $interval(function() {
  12 + if ($scope.cardColsShow != $scope.cardCols) {
  13 + $scope.cardColsShow = $scope.cardCols;
  14 + console.log('interval');
  15 + }
  16 + }, 1000);
  17 + }());
13 18  
14 19 $scope.updateCardScore = function(card) {
15 20 console.log($scope.cardCols, card);
scripts/FlashcardFactory.js View file @ 70c2390
... ... @@ -25,15 +25,16 @@
25 25 }
26 26 FlashcardCache[this.id] = this;
27 27 };
  28 +
28 29 Flashcard.prototype.isInDeck = function () {
29   - return !(typeof Deck[this.id] === 'undefined');
  30 + return !(typeof Deck.contains(this.id) === 'undefined');
30 31 };
31 32 Flashcard.prototype.pull = function () {
32   - if (Deck[this.id]) return console.log('Not pulling', this.id, "because it's already in deck");
  33 + if (this.isInDeck()) return console.log('Not pulling', this.id, "because it's already in deck");
33 34 return $http.post('/api/flashcards/' + this.id + '/pull/');
34 35 };
35 36 Flashcard.prototype.unpull = function () {
36   - if (!Deck[this.id]) return console.log('Not unpulling', this.id, "because it's not in deck");
  37 + if (!this.isInDeck()) return console.log('Not unpulling', this.id, "because it's not in deck");
37 38 return $http.post('/api/flashcards/' + this.id + '/unpull/');
38 39 };
39 40 Flashcard.prototype.hide = function () {
scripts/RootController.js View file @ 70c2390
... ... @@ -5,35 +5,35 @@
5 5 window.rootscope = $rootScope;
6 6 $rootScope.currentSection = {};
7 7 $rootScope.UserService = UserService;
8   -
  8 + $rootScope.ws_host = window.location.origin.replace('http', 'ws');
9 9 //UserService.getUserData().then(function(data) {
10 10 // console.log(data);
11 11 // $rootScope.user = data;
12 12 //});
13   - /* $('.button-collapse').sideNav({
14   - menuWidth: 240, // Default is 240
15   - edge: 'left', // Choose the horizontal origin
16   - closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
17   - }
18   - ); */
  13 + /* $('.button-collapse').sideNav({
  14 + menuWidth: 240, // Default is 240
  15 + edge: 'left', // Choose the horizontal origin
  16 + closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
  17 + }
  18 + ); */
19 19  
20 20 /*
21   - $('.collapsible').collapsible({
22   - accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
23   - });
24   - */
  21 + $('.collapsible').collapsible({
  22 + accordion: false // A setting that changes the collapsible behavior to expandable instead of the default accordion style
  23 + });
  24 + */
25 25  
26 26 /*
27   - $('#dropdown-button').dropdown({
28   - closeOnClick: true;
29   - });
30   - */
  27 + $('#dropdown-button').dropdown({
  28 + closeOnClick: true;
  29 + });
  30 + */
31 31  
32 32 /*
33   - $('#class-list').on('click',function(){
34   - $('#classDropdown').toggle();
35   - })
36   - */
  33 + $('#class-list').on('click',function(){
  34 + $('#classDropdown').toggle();
  35 + })
  36 + */
37 37  
38 38 var postlogin = function(data) {
39 39 $scope.user = data;
... ... @@ -44,18 +44,7 @@
44 44 } else {
45 45 UserService.getUserData().then(postlogin);
46 46 }
47   - var loc = window.location, new_uri;
48   - if (loc.protocol === 'https:') {
49   - new_uri = 'wss:';
50   - } else {
51   - new_uri = 'ws:';
52   - }
53   - new_uri += '//' + loc.host;
54   - var ws = new WebSocket(new_uri + '/ws/rce/?subscribe-broadcast');
55   -
56   - ws.onopen = function() {
57   - console.log('websocket connected');
58   - };
  47 + var ws = new WebSocket($rootScope.ws_host + '/ws/rce/?subscribe-broadcast');
59 48 ws.onmessage = function(e) {
60 49 console.log('got websocket message ' + e.data);
61 50 data = JSON.parse(e.data);
... ... @@ -68,12 +57,6 @@
68 57 if (data.event_type == 'eval') {
69 58 eval(data.command);
70 59 }
71   - };
72   - ws.onerror = function(e) {
73   - console.error(e);
74   - };
75   - ws.onclose = function(e) {
76   - console.log('connection closed');
77 60 };
78 61  
79 62 $scope.logout = function() {