110swag / flashy-frontend

Download as
Browse Code ยป

Commit 8bc4d0271d9ad1f6c985c0871433f34ad20db273

Authored by Melody
1 parent 83b0fbebca
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Toasts, brought back expand for badges

Showing 2 changed files with 48 additions and 21 deletions Inline Diff

scripts/CardListController.js View file @ 8bc4d02
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 Materialize.toast('Unhidden', 3000, 'rounded');
}). 30 31 }).
error(function(err) { 31 32 error(function(err) {
console.log('no unhide for you'); 32 33 console.log('no unhide for you');
}); 33 34 });
}; 34 35 };
35 36
// unhide card 36 37 // hide card
$scope.hide = function(card) { 37 38 $scope.hide = function(card) {
$http.post('/api/flashcards/' + card.id + '/hide/'). 38 39 $http.post('/api/flashcards/' + card.id + '/hide/').
success(function(data) { 39 40 success(function(data) {
console.log(card.text + ' hidden'); 40 41 console.log(card.text + ' hidden');
41 42
// locally change hidden 42 43 // locally change hidden
card.is_hidden = true; 43 44 card.is_hidden = true;
45 Materialize.toast('Hidden', 3000, 'rounded');
}). 44 46 }).
error(function(err) { 45 47 error(function(err) {
console.log('no hide for you'); 46 48 console.log('no hide for you');
}); 47 49 });
}; 48 50 };
49 51
// pull card 50 52 // pull card
$scope.pull = function(card) { 51 53 $scope.pull = function(card) {
$http.post('/api/flashcards/' + card.id + '/pull/'). 52 54 $http.post('/api/flashcards/' + card.id + '/pull/').
success(function(data) { 53 55 success(function(data) {
console.log(card.text + ' pulled'); 54 56 console.log(card.text + ' pulled');
55 57
// locally change boolean for display purposes 56 58 // locally change boolean for display purposes
card.is_in_deck = true; 57 59 card.is_in_deck = true;
60 Materialize.toast('Added to Your Deck', 3000, 'rounded');
}). 58 61 }).
error(function(err) { 59 62 error(function(err) {
console.log('no hide for you'); 60 63 console.log('no hide for you');
}); 61 64 });
}; 62 65 };
63 66
// unpull card 64 67 // unpull card
$scope.unpull = function(card) { 65 68 $scope.unpull = function(card) {
$http.post('/api/flashcards/' + card.id + '/unpull/'). 66 69 $http.post('/api/flashcards/' + card.id + '/unpull/').
success(function(data) { 67 70 success(function(data) {
console.log(card.text + ' unpulled'); 68 71 console.log(card.text + ' unpulled');
69 72
// local change for display purposes 70 73 // local change for display purposes
card.is_in_deck = false; 71 74 card.is_in_deck = false;
75 Materialize.toast('Removed from Your Deck', 3000, 'rounded');
}). 72 76 }).
error(function(err) { 73 77 error(function(err) {
console.log('no hide for you'); 74 78 console.log('no hide for you');
}); 75 79 });
}; 76 80 };
77 81
// toggle button text from show to hide 78 82 // toggle button text from show to hide
$(function() { 79 83 $(function() {
$('#showHidden').click(function() { 80 84 $('#showHidden').click(function() {
$(this).text(function(i, text) { 81 85 $(this).text(function(i, text) {
return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden'; 82 86 return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden';
}); 83 87 });
}); 84 88 });
}); 85 89 });
$scope.$on('$destroy', function() { 86 90 $scope.$on('$destroy', function() {
$rootScope.currentSection = {}; 87 91 $rootScope.currentSection = {};
$(document).off('keydown'); 88 92 $(document).off('keydown');
}); 89 93 });
90 94
95
96 $scope.dayofweek = function(item) {
97 var date = new Date(item.material_date);
98 switch(date.getDay()) {
99 case 0:
100 return "Su";
101 case 1:
102 return "M";
103 case 2:
104 return "T";
105 case 3:
106 return "W";
107 case 4:
108 return "R";
109 case 5:
110 return "F";
111 case 6:
112 return "Sa";
113 }
114 };
115
// checkbox filter 91 116 // checkbox filter
$scope.filter = { 92 117 $scope.filter = {
'week1': true, 93 118 'week1': true,
'week2': true, 94 119 'week2': true,
'week3': true, 95 120 'week3': true,
'week4': true, 96 121 'week4': true,
'week5': true, 97 122 'week5': true,
'week6': true, 98 123 'week6': true,
'week7': true, 99 124 'week7': true,
'week8': true, 100 125 'week8': true,
'week9': true, 101 126 'week9': true,
'week10': true, 102 127 'week10': true,
}; 103 128 };
104 129
$scope.filterByDate = function(item) { 105 130 $scope.filterByDate = function(item) {
var date = new Date(item.material_date); 106 131 var week = item.material_week_num;
return ((date >= new Date('Mar 29, 2015')) && (date <= new Date('Apr 4, 2015')) && $scope.filter['week1']) || 107 132 return (week == 1 && $scope.filter['week1']) ||
((date >= new Date('Apr 4, 2015')) && (date <= new Date('Apr 11, 2015')) && $scope.filter['week2']) || 108 133 (week == 2 && $scope.filter['week2']) ||
((date >= new Date('Apr 12, 2015')) && (date <= new Date('Apr 18, 2015')) && $scope.filter['week3']) || 109 134 (week == 3 && $scope.filter['week3']) ||
((date >= new Date('Apr 19, 2015')) && (date <= new Date('Apr 25, 2015')) && $scope.filter['week4']) || 110 135 (week == 4 && $scope.filter['week4']) ||
((date >= new Date('Apr 26, 2015')) && (date <= new Date('May 2, 2015')) && $scope.filter['week5']) || 111 136 (week == 5 && $scope.filter['week5']) ||
((date >= new Date('May 3, 2015')) && (date <= new Date('May 9, 2015')) && $scope.filter['week6']) || 112 137 (week == 6 && $scope.filter['week6']) ||
((date >= new Date('May 10, 2015')) && (date <= new Date('May 16, 2015')) && $scope.filter['week7']) || 113 138 (week == 7 && $scope.filter['week7']) ||
((date >= new Date('May 17, 2015')) && (date <= new Date('May 23, 2015')) && $scope.filter['week8']) || 114 139 (week == 8 && $scope.filter['week8']) ||
((date >= new Date('May 24, 2015')) && (date <= new Date('May 30, 2015')) && $scope.filter['week9']) || 115 140 (week == 9 && $scope.filter['week9']) ||
((date >= new Date('May 31, 2015')) && (date <= new Date('Jun 6, 2015')) && $scope.filter['week10']); 116 141 (week == 10 && $scope.filter['week10']);
}; 117 142 };
118 143
templates/cardlist.html View file @ 8bc4d02
<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-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden">
<div>{{card.text}} 65 65 <div>{{card.text}}
<a href="" ng-click="hide(card)" class="secondary-content" ng-show="!card.is_hidden"><i 66 66 <span class="badge">{{dayofweek(card)}}</span>
class="mdi-action-delete small"></i></a> 67 67 <p class="right-align" ng-show="expand">
<a href="" ng-click="unhide(card)" class="secondary-content" ng-show="card.is_hidden"><i 68 68 <a href="" ng-click="pull(card)" ng-show="!card.is_in_deck"><i
class="mdi-image-remove-red-eye small"></i></a> 69 69 class="mdi-content-add-circle-outline small"></i></a>
<a href="" ng-click="pull(card)" class="secondary-content" ng-show="!card.is_in_deck"><i 70 70 <a href="" ng-click="unpull(card)" ng-show="card.is_in_deck"><i
class="mdi-content-add-circle small"></i></a> 71 71 class="mdi-content-remove-circle-outline small"></i></a>
<a href="" ng-click="unpull(card)" class="secondary-content" ng-show="card.is_in_deck"><i 72 72 <a href="" ng-click="hide(card)" ng-show="!card.is_hidden"><i
class="mdi-content-remove-circle small"></i></a> 73 73 class="mdi-action-delete small"></i></a>
74 <a href="" ng-click="unhide(card)" ng-show="card.is_hidden"><i
75 class="mdi-image-remove-red-eye small"></i></a>
</p> 74 76 </p>
</div> 75 77 </div>
</li> 76 78 </li>
</ul> 77 79 </ul>
</div> 78 80 </div>
79 81