110swag / flashy-frontend

Download as
Browse Code ยป

Commit 83b0fbebca0f897968301bee94822d0d362cd11f

Authored by Melody
2 parents 58c53ba9c7 679e2b38e9
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Might be an issue with long cards

Showing 2 changed files Inline Diff

scripts/CardListController.js View file @ 83b0fbe
angular.module('flashy.CardListController', ['ui.router', 'angular.filter']). 1 1 angular.module('flashy.CardListController', ['ui.router', 'angular.filter']).
controller('CardListController', function($scope, $rootScope, $state, $http, $stateParams) { 2 2 controller('CardListController', function($scope, $rootScope, $state, $http, $stateParams) {
// cards array 3 3 // cards array
sectionId = $stateParams.sectionId; 4 4 sectionId = $stateParams.sectionId;
$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId}); 5 5 $rootScope.currentSection = $rootScope.SectionResource.get({sectionId: sectionId});
$scope.cards = []; 6 6 $scope.cards = [];
7 7
$http.get('/api/sections/' + sectionId + '/flashcards/?hidden=yes'). 8 8 $http.get('/api/sections/' + sectionId + '/flashcards/?hidden=yes').
success(function(data) { 9 9 success(function(data) {
console.log(data); 10 10 console.log(data);
$scope.cards = data; 11 11 $scope.cards = data;
}). 12 12 }).
error(function(err) { 13 13 error(function(err) {
console.log('pulling feed failed'); 14 14 console.log('pulling feed failed');
}); 15 15 });
16 16
$scope.viewFeed = function() { 17 17 $scope.viewFeed = function() {
$state.go('feed', {sectionId: sectionId}); 18 18 $state.go('feed', {sectionId: sectionId});
console.log('go to feed'); 19 19 console.log('go to feed');
}; 20 20 };
21 21
// unhide card 22 22 // unhide card
$scope.unhide = function(card) { 23 23 $scope.unhide = function(card) {
$http.post('/api/flashcards/' + card.id + '/unhide/'). 24 24 $http.post('/api/flashcards/' + card.id + '/unhide/').
success(function(data) { 25 25 success(function(data) {
console.log(card.text + ' unhidden'); 26 26 console.log(card.text + ' unhidden');
27 27
// locally change hidden 28 28 // locally change hidden
card.is_hidden = false; 29 29 card.is_hidden = false;
}). 30 30 }).
error(function(err) { 31 31 error(function(err) {
console.log('no unhide for you'); 32 32 console.log('no unhide for you');
}); 33 33 });
}; 34 34 };
35 35
// unhide card 36 36 // unhide card
$scope.hide = function(card) { 37 37 $scope.hide = function(card) {
$http.post('/api/flashcards/' + card.id + '/hide/'). 38 38 $http.post('/api/flashcards/' + card.id + '/hide/').
success(function(data) { 39 39 success(function(data) {
console.log(card.text + ' hidden'); 40 40 console.log(card.text + ' hidden');
41 41
// locally change hidden 42 42 // locally change hidden
card.is_hidden=true; 43 43 card.is_hidden = true;
}). 44 44 }).
error(function(err) { 45 45 error(function(err) {
console.log('no hide for you'); 46 46 console.log('no hide for you');
}); 47 47 });
}; 48 48 };
49 49
// pull card 50 50 // pull card
$scope.pull = function(card) { 51 51 $scope.pull = function(card) {
$http.post('/api/flashcards/' + card.id + '/pull/'). 52 52 $http.post('/api/flashcards/' + card.id + '/pull/').
success(function(data) { 53 53 success(function(data) {
console.log(card.text + ' pulled'); 54 54 console.log(card.text + ' pulled');
55 55
// locally change boolean for display purposes 56 56 // locally change boolean for display purposes
card.is_in_deck=true; 57 57 card.is_in_deck = true;
}). 58 58 }).
error(function(err) { 59 59 error(function(err) {
console.log('no hide for you'); 60 60 console.log('no hide for you');
}); 61 61 });
}; 62 62 };
63 63
// unpull card 64 64 // unpull card
$scope.unpull = function(card) { 65 65 $scope.unpull = function(card) {
$http.post('/api/flashcards/' + card.id + '/unpull/'). 66 66 $http.post('/api/flashcards/' + card.id + '/unpull/').
success(function(data) { 67 67 success(function(data) {
console.log(card.text + ' unpulled'); 68 68 console.log(card.text + ' unpulled');
69 69
// local change for display purposes 70 70 // local change for display purposes
card.is_in_deck=false; 71 71 card.is_in_deck = false;
}). 72 72 }).
error(function(err) { 73 73 error(function(err) {
console.log('no hide for you'); 74 74 console.log('no hide for you');
}); 75 75 });
}; 76 76 };
77 77
// toggle button text from show to hide 78 78 // toggle button text from show to hide
$(function() { 79 79 $(function() {
$('#showHidden').click(function() { 80 80 $('#showHidden').click(function() {
$(this).text(function(i, text) { 81 81 $(this).text(function(i, text) {
return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden'; 82 82 return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden';
}); 83 83 });
}); 84 84 });
}); 85 85 });
$scope.$on('$destroy', function() { 86 86 $scope.$on('$destroy', function() {
$rootScope.currentSection = {}; 87 87 $rootScope.currentSection = {};
$(document).off('keydown'); 88 88 $(document).off('keydown');
}); 89 89 });
90 90
// checkbox filter 91 91 // checkbox filter
$scope.filter = { 92 92 $scope.filter = {
'week1': true, 93 93 'week1': true,
'week2': true, 94 94 'week2': true,
'week3': true, 95 95 'week3': true,
'week4': true, 96 96 'week4': true,
'week5': true, 97 97 'week5': true,
'week6': true, 98 98 'week6': true,
'week7': true, 99 99 'week7': true,
'week8': true, 100 100 'week8': true,
'week9': true, 101 101 'week9': true,
'week10': true, 102 102 'week10': true,
}; 103 103 };
104 104
$scope.filterByDate = function(item) { 105 105 $scope.filterByDate = function(item) {
var date = new Date(item.material_date); 106 106 var date = new Date(item.material_date);
return ((date >= new Date('Mar 29, 2015')) && (date <= new Date('Apr 4, 2015')) && $scope.filter['week1']) || 107 107 return ((date >= new Date('Mar 29, 2015')) && (date <= new Date('Apr 4, 2015')) && $scope.filter['week1']) ||
((date >= new Date('Apr 4, 2015')) && (date <= new Date('Apr 11, 2015')) && $scope.filter['week2']) || 108 108 ((date >= new Date('Apr 4, 2015')) && (date <= new Date('Apr 11, 2015')) && $scope.filter['week2']) ||
((date >= new Date('Apr 12, 2015')) && (date <= new Date('Apr 18, 2015')) && $scope.filter['week3']) || 109 109 ((date >= new Date('Apr 12, 2015')) && (date <= new Date('Apr 18, 2015')) && $scope.filter['week3']) ||
templates/cardlist.html View file @ 83b0fbe
<div class="row"> 1 1 <div class="row">
<a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a> 2 2 <a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a>
3 3
<div class="input-field col s4 right"> 4 4 <div class="input-field col s4 right">
<i class="mdi-action-search prefix"></i> 5 5 <i class="mdi-action-search prefix"></i>
<input id="search" type="text" class="validate" ng-model="searchText"/> 6 6 <input id="search" type="text" class="validate" ng-model="searchText"/>
<label for="search">Search</label> 7 7 <label for="search">Search</label>
</div> 8 8 </div>
</div> 9 9 </div>
10 10
<div class="row"> 11 11 <div class="row">
<form> 12 12 <form>
<div class="col s12"> 13 13 <div class="col s12">
<div class="col s2"> 14 14 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/> 15 15 <input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/>
<label for="weekOneCheck">Week One</label> 16 16 <label for="weekOneCheck">Week One</label>
</div> 17 17 </div>
<div class="col s2"> 18 18 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/> 19 19 <input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/>
<label for="weekTwoCheck">Week Two</label> 20 20 <label for="weekTwoCheck">Week Two</label>
</div> 21 21 </div>
<div class="col s2"> 22 22 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/> 23 23 <input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/>
<label for="weekThreeCheck">Week Three</label> 24 24 <label for="weekThreeCheck">Week Three</label>
</div> 25 25 </div>
<div class="col s2"> 26 26 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/> 27 27 <input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/>
<label for="weekFourCheck">Week Four</label> 28 28 <label for="weekFourCheck">Week Four</label>
</div> 29 29 </div>
<div class="col s2"> 30 30 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/> 31 31 <input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/>
<label for="weekFiveCheck">Week Five</label> 32 32 <label for="weekFiveCheck">Week Five</label>
</div> 33 33 </div>
</div> 34 34 </div>
<div class="col s12"> 35 35 <div class="col s12">
<div class="col s2"> 36 36 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/> 37 37 <input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/>
<label for="weekSixCheck">Week Six</label> 38 38 <label for="weekSixCheck">Week Six</label>
</div> 39 39 </div>
<div class="col s2"> 40 40 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/> 41 41 <input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/>
<label for="weekSevenCheck">Week Seven</label> 42 42 <label for="weekSevenCheck">Week Seven</label>
</div> 43 43 </div>
<div class="col s2"> 44 44 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/> 45 45 <input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/>
<label for="weekEightCheck">Week Eight</label> 46 46 <label for="weekEightCheck">Week Eight</label>
</div> 47 47 </div>
<div class="col s2"> 48 48 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/> 49 49 <input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/>
<label for="weekNineCheck">Week Nine</label> 50 50 <label for="weekNineCheck">Week Nine</label>
</div> 51 51 </div>
<div class="col s2"> 52 52 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/> 53 53 <input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/>
<label for="weekTenCheck">Week Ten</label> 54 54 <label for="weekTenCheck">Week Ten</label>
</div> 55 55 </div>
</div> 56 56 </div>
</form> 57 57 </form>
</div> 58 58 </div>
59 59
<div class="list" style="padding: 0px 15px"> 60 60 <div class="list" style="padding: 0px 15px">
<ul class="collection" 61 61 <ul class="collection"
ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'"> 62 62 ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'">
<li class="collection-header"><h3>Week {{weeknum}}</h3></li> 63 63 <li class="collection-header"><h3>Week {{weeknum}}</h3></li>
<li class="collection-item" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden"> 64 64 <li class="collection-item" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden">
<div>{{card.text}} 65 65 <div>{{card.text}}
<a href="" ng-click="expand = !expand" class="secondary-content" ng-show="!card.is_hidden"><i class="small mdi-action-info-outline"></i></a> 66 66 <a href="" ng-click="hide(card)" class="secondary-content" ng-show="!card.is_hidden"><i
<p class="right-align" ng-show="expand"> 67 67 class="mdi-action-delete small"></i></a>
<a href="" ng-click="hide(card)" class="waves-effect waves-light btn" ng-show="!card.is_hidden">Hide</a> 68 68 <a href="" ng-click="unhide(card)" class="secondary-content" ng-show="card.is_hidden"><i
<a href="" ng-click="unhide(card)" class="waves-effect waves-light btn" ng-show="card.is_hidden">Unhide</a> 69 69 class="mdi-image-remove-red-eye small"></i></a>
<a href="" ng-click="pull(card)" class="waves-effect waves-light btn" ng-show="!card.is_in_deck">Add to Deck</a> 70 70 <a href="" ng-click="pull(card)" class="secondary-content" ng-show="!card.is_in_deck"><i
<a href="" ng-click="unpull(card)" class="waves-effect waves-light btn" ng-show="card.is_in_deck">Remove from Deck</a> 71 71 class="mdi-content-add-circle small"></i></a>
72 <a href="" ng-click="unpull(card)" class="secondary-content" ng-show="card.is_in_deck"><i
73 class="mdi-content-remove-circle small"></i></a>
</p> 72 74 </p>
</div> 73 75 </div>
</li> 74 76 </li>
</ul> 75 77 </ul>
</div> 76 78 </div>
77 79