110swag / flashy-frontend

Download as
Browse Code ยป

Commit 35b02d3f264164604a9a7de63e4fa699017d73d0

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

initialize deck_cards to empty

Showing 4 changed files with 3 additions and 73 deletions Inline Diff

casper_test.js View file @ 35b02d3
phantom.casperPath = 'path/to/node_modules/casperjs'; 1 File was deleted
phantom.injectJs('path/to/node_modules/casperjs/bin/bootstrap.js'); 2
3
phantom.casperTest = true; 4
5
6
//var casper = require('casper'); 7
var x = require('casper').selectXPath; 8
9
casper.start('http://google.com/', function() { 10
scripts/CardGridController.js View file @ 35b02d3
angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller = 1 1 angular.module('flashy.CardGridController', ['ui.router', 'ngAnimate', 'ngWebSocket']).controller =
function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) { 2 2 function($scope, $rootScope, $state, $http, $window, $timeout, $stateParams, $websocket, UserService) {
$scope.cards = false; 3 3 $scope.cards = false;
$scope.cardCols = []; // organized data 4 4 $scope.cardCols = []; // organized data
$scope.numCols = 0; 5 5 $scope.numCols = 0;
$scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card} 6 6 $scope.cardTable = {}; // look up table of cards, {'colNum':col, 'obj':card}
$scope.sectionId = parseInt($stateParams.sectionId); 7 7 $scope.sectionId = parseInt($stateParams.sectionId);
$scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId}); 8 8 $scope.section = $rootScope.SectionResource.get({sectionId: $scope.sectionId});
$rootScope.currentSection = $scope.section; 9 9 $rootScope.currentSection = $scope.section;
10 10
if (!UserService.isInSection($scope.sectionId)) { 11 11 if (!UserService.isInSection($scope.sectionId)) {
console.log('user is not enrolled in ' + $scope.sectionId); 12 12 console.log('user is not enrolled in ' + $scope.sectionId);
$state.go('addclass'); 13 13 $state.go('addclass');
} 14 14 }
15 15
$scope.refreshColumnWidth = function() { 16 16 $scope.refreshColumnWidth = function() {
avail = $window.innerWidth - 17; 17 17 avail = $window.innerWidth - 17;
width = Math.floor(avail / Math.floor(avail / 250)); 18 18 width = Math.floor(avail / Math.floor(avail / 250));
$('.cardColumn').css({ 19 19 $('.cardColumn').css({
width: width + 'px', 20 20 width: width + 'px',
'font-size': 100 * width / 250 + '%' 21 21 'font-size': 100 * width / 250 + '%'
}); 22 22 });
$('.cardColumn .card.flashy').css({ 23 23 $('.cardColumn .card.flashy').css({
width: width - 12 + 'px', 24 24 width: width - 12 + 'px',
height: (width * 3 / 5) + 'px' 25 25 height: (width * 3 / 5) + 'px'
}); 26 26 });
}; 27 27 };
28 28
$scope.pullCard = function(id) { 29 29 $scope.pullCard = function(id) {
if ($scope.deck_cards[id]) return console.log('Not pulling', id, "because it's already in deck"); 30 30 if ($scope.deck_cards[id]) return console.log('Not pulling', id, "because it's already in deck");
$http.post('/api/flashcards/' + id + '/pull/'). 31 31 $http.post('/api/flashcards/' + id + '/pull/').
success(function(data) { 32 32 success(function(data) {
console.log('pulled flashcard #' + id); 33 33 console.log('pulled flashcard #' + id);
}). 34 34 }).
error(function(data) { 35 35 error(function(data) {
console.log('failed to pull flashcard #' + id); 36 36 console.log('failed to pull flashcard #' + id);
}); 37 37 });
}; 38 38 };
$scope.unpullCard = function(id) { 39 39 $scope.unpullCard = function(id) {
if (!$scope.deck_cards[id]) return console.log('Not unpulling', id, "because it's not in deck"); 40 40 if (!$scope.deck_cards[id]) return console.log('Not unpulling', id, "because it's not in deck");
$http.post('/api/flashcards/' + id + '/unpull/'). 41 41 $http.post('/api/flashcards/' + id + '/unpull/').
success(function(data) { 42 42 success(function(data) {
console.log('unpulled flashcard #' + id); 43 43 console.log('unpulled flashcard #' + id);
}). 44 44 }).
error(function(data) { 45 45 error(function(data) {
console.log('failed to unpull flashcard #' + id); 46 46 console.log('failed to unpull flashcard #' + id);
}); 47 47 });
}; 48 48 };
$scope.refreshLayout = function() { 49 49 $scope.refreshLayout = function() {
numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250)); 50 50 numCols = Math.max(1, Math.floor(($window.innerWidth - 17) / 250));
51 51
// check if we actually need to refresh the whole layout 52 52 // check if we actually need to refresh the whole layout
if (numCols == $scope.numCols) return $scope.refreshColumnWidth(); 53 53 if (numCols == $scope.numCols) return $scope.refreshColumnWidth();
$scope.numCols = numCols; 54 54 $scope.numCols = numCols;
console.log('refreshing layout for ' + $scope.numCols + ' columns'); 55 55 console.log('refreshing layout for ' + $scope.numCols + ' columns');
$scope.cardCols = []; 56 56 $scope.cardCols = [];
var cols = []; 57 57 var cols = [];
for (i = 0; i < $scope.numCols; i++) cols.push([]); 58 58 for (i = 0; i < $scope.numCols; i++) cols.push([]);
$scope.cards.forEach(function(card, i) { 59 59 $scope.cards.forEach(function(card, i) {
cols[i % $scope.numCols].push(card); 60 60 cols[i % $scope.numCols].push(card);
$scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card}; 61 61 $scope.cardTable[card.id] = {'colNum': (i % $scope.numCols), 'obj': card};
card.isInDeck(); 62 62 card.isInDeck();
}); 63 63 });
// wait until the next digest cycle to update cardCols 64 64 // wait until the next digest cycle to update cardCols
console.log(cols); 65 65 console.log(cols);
$timeout(function() { 66 66 $timeout(function() {
$scope.cardCols = cols; 67 67 $scope.cardCols = cols;
$timeout($scope.refreshColumnWidth); 68 68 $timeout($scope.refreshColumnWidth);
}); 69 69 });
70 70
}; 71 71 };
72 72
angular.element($window).bind('resize', $scope.refreshLayout); 73 73 angular.element($window).bind('resize', $scope.refreshLayout);
74 74
$scope.ws_host = window.location.origin.replace('http', 'ws'); 75 75 $scope.ws_host = window.location.origin.replace('http', 'ws');
$scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user'); 76 76 $scope.deck_ws = $websocket($scope.ws_host + '/ws/deck/' + $scope.sectionId + '?subscribe-user');
$scope.deck_ws.onOpen(function() { 77 77 $scope.deck_ws.onOpen(function() {
console.log('deck ws open'); 78 78 console.log('deck ws open');
}); 79 79 });
80 80
$scope.deck_ws.onMessage(function(message) { 81 81 $scope.deck_ws.onMessage(function(message) {
data = JSON.parse(message.data); 82 82 data = JSON.parse(message.data);
console.log('message', data); 83 83 console.log('message', data);
if (data.event_type == 'pull_card') { 84 84 if (data.event_type == 'pull_card') {
card = data.flashcard; 85 85 card = data.flashcard;
console.log('pulling', card); 86 86 console.log('pulling', card);
$scope.deck_cards[card.id] = card; 87 87 $scope.deck_cards[card.id] = card;
} 88 88 }
if (data.event_type == 'unpull_card') { 89 89 if (data.event_type == 'unpull_card') {
card = data.flashcard; 90 90 card = data.flashcard;
$scope.deck_cards[card.id] = undefined; 91 91 $scope.deck_cards[card.id] = undefined;
} 92 92 }
}); 93 93 });
94 94
$scope.cardInDeck = function(id) { 95 95 $scope.cardInDeck = function(id) {
return $scope.deck_cards[id]; 96 96 return $scope.deck_cards[id];
}; 97 97 };
$scope.add = function(card) { 98 98 $scope.add = function(card) {
var colNum = 0; 99 99 var colNum = 0;
var lowestCol = $scope.cardCols[0]; 100 100 var lowestCol = $scope.cardCols[0];
var lowestColNum = 0; 101 101 var lowestColNum = 0;
while (colNum < $scope.numCols) { 102 102 while (colNum < $scope.numCols) {
if ($scope.cardCols[colNum].length == 0) { 103 103 if ($scope.cardCols[colNum].length == 0) {
lowestCol = $scope.cardCols[colNum]; 104 104 lowestCol = $scope.cardCols[colNum];
break; 105 105 break;
} else if ($scope.cardCols[colNum].length < lowestCol.length) { 106 106 } else if ($scope.cardCols[colNum].length < lowestCol.length) {
lowestCol = $scope.cardCols[colNum]; 107 107 lowestCol = $scope.cardCols[colNum];
lowestColNum = colNum; 108 108 lowestColNum = colNum;
lowestColLen = $scope.cardCols[colNum].length; 109 109 lowestColLen = $scope.cardCols[colNum].length;
} 110 110 }
colNum++; 111 111 colNum++;
} 112 112 }
console.log(card); 113 113 console.log(card);
$scope.cards.push(data); 114 114 $scope.cards.push(data);
lowestCol.unshift(card); 115 115 lowestCol.unshift(card);
$scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card}; 116 116 $scope.cardTable[card.id] = {'colNum': lowestColNum, 'obj': card};
$timeout($scope.refreshColumnWidth); 117 117 $timeout($scope.refreshColumnWidth);
}; 118 118 };
119 119
120
121 $scope.deck_cards = [];
$http.get('/api/sections/' + $scope.sectionId + '/deck/'). 120 122 $http.get('/api/sections/' + $scope.sectionId + '/deck/').
success(function(data) { 121 123 success(function(data) {
$scope.deck_cards = []; 122 124
for (i in data) $scope.deck_cards[data[i].id] = data[i]; 123 125 for (i in data) $scope.deck_cards[data[i].id] = data[i];
console.log("got user's deck"); 124 126 console.log("got user's deck");
}). 125 127 }).
test.png View file @ 35b02d3

396 Bytes
ws_debug.html View file @ 35b02d3
<!DOCTYPE html> 1 File was deleted
<html> 2
<head lang="en"> 3
<meta charset="UTF-8"> 4
<title></title> 5
</head> 6
<body> 7
<ul> 8
9
</ul> 10
</body> 11
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 12
<script> 13
var loc = window.location, new_uri; 14
if (loc.protocol === "https:") { 15
new_uri = "wss:"; 16
} else { 17
new_uri = "ws:"; 18
} 19
new_uri += "//" + loc.host; 20
var ws = new WebSocket(new_uri + '/ws/deck/496?subscribe-user'); 21
ws.onopen = function () { 22
console.log("websocket connected"); 23
}; 24
ws.onmessage = function (e) { 25
$('ul').append('<li>' + e.data + '</li>'); 26
}; 27
ws.onerror = function (e) { 28
console.error(e); 29
}; 30
ws.onclose = function (e) { 31
console.log("connection closed"); 32
}; 33
function send_message(msg) {1 34
ws.send(msg); 35
} 36
var ws = new WebSocket(new_uri + '/ws/feed/496?subscribe-broadcast'); 37
ws.onopen = function () { 38
console.log("websocket connected"); 39
}; 40
ws.onmessage = function (e) { 41
$('ul').append('<li>' + e.data + '</li>'); 42
}; 43
ws.onerror = function (e) { 44
console.error(e); 45
}; 46
ws.onclose = function (e) { 47
console.log("connection closed"); 48
}; 49
function send_message(msg) { 50
ws.send(msg); 51
} 52
</script> 53