110swag / flashy-frontend

Download as
Browse Code ยป

Commit e52721a27d1dd15502d4aa64d594d2af2376cb1c

Authored by Melody
1 parent 87cd59bc2c
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

Attempt to fix 1, 10, 2 issue

Showing 2 changed files with 12 additions and 11 deletions Inline Diff

scripts/CardListController.js View file @ e52721a
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) {
$scope.cards = data; 10 10 $scope.cards = data;
}). 11 11 }).
error(function(err) { 12 12 error(function(err) {
console.log('pulling feed failed'); 13 13 console.log('pulling feed failed');
}); 14 14 });
15 15
$scope.viewFeed = function() { 16 16 $scope.viewFeed = function() {
$state.go('feed', {sectionId: sectionId}); 17 17 $state.go('feed', {sectionId: sectionId});
console.log('go to feed'); 18 18 console.log('go to feed');
}; 19 19 };
20 20
// unhide card 21 21 // unhide card
$scope.unhide = function(card) { 22 22 $scope.unhide = function(card) {
$http.post('/api/flashcards/' + card.id + '/unhide/'). 23 23 $http.post('/api/flashcards/' + card.id + '/unhide/').
success(function(data) { 24 24 success(function(data) {
console.log(card.text + ' unhidden'); 25 25 console.log(card.text + ' unhidden');
26 26
// locally change hidden 27 27 // locally change hidden
card.is_hidden = false; 28 28 card.is_hidden = false;
Materialize.toast('Unhidden', 3000, 'rounded'); 29 29 Materialize.toast('Unhidden', 3000, 'rounded');
}). 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
// hide card 36 36 // hide 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;
Materialize.toast('Hidden', 3000, 'rounded'); 44 44 Materialize.toast('Hidden', 3000, 'rounded');
}). 45 45 }).
error(function(err) { 46 46 error(function(err) {
console.log('no hide for you'); 47 47 console.log('no hide for you');
}); 48 48 });
}; 49 49 };
50 50
// pull card 51 51 // pull card
$scope.pull = function(card) { 52 52 $scope.pull = function(card) {
$http.post('/api/flashcards/' + card.id + '/pull/'). 53 53 $http.post('/api/flashcards/' + card.id + '/pull/').
success(function(data) { 54 54 success(function(data) {
console.log(card.text + ' pulled'); 55 55 console.log(card.text + ' pulled');
56 56
// locally change boolean for display purposes 57 57 // locally change boolean for display purposes
card.is_in_deck = true; 58 58 card.is_in_deck = true;
Materialize.toast('Added to Your Deck', 3000, 'rounded'); 59 59 Materialize.toast('Added to Your Deck', 3000, 'rounded');
}). 60 60 }).
error(function(err) { 61 61 error(function(err) {
console.log('no hide for you'); 62 62 console.log('no pull for you');
}); 63 63 });
}; 64 64 };
65 65
// unpull card 66 66 // unpull card
$scope.unpull = function(card) { 67 67 $scope.unpull = function(card) {
$http.post('/api/flashcards/' + card.id + '/unpull/'). 68 68 $http.post('/api/flashcards/' + card.id + '/unpull/').
success(function(data) { 69 69 success(function(data) {
console.log(card.text + ' unpulled'); 70 70 console.log(card.text + ' unpulled');
71 71
// local change for display purposes 72 72 // local change for display purposes
card.is_in_deck = false; 73 73 card.is_in_deck = false;
Materialize.toast('Removed from Your Deck', 3000, 'rounded'); 74 74 Materialize.toast('Removed from Your Deck', 3000, 'rounded');
}). 75 75 }).
error(function(err) { 76 76 error(function(err) {
console.log('no hide for you'); 77 77 console.log('no unpull for you');
}); 78 78 });
}; 79 79 };
80 80
// unpull card 81 81 // flag/report card
$scope.flag = function(card) { 82 82 $scope.flag = function(card) {
$http.post('/api/flashcards/' + card.id + '/report/'). 83 83 $http.post('/api/flashcards/' + card.id + '/report/').
success(function(data) { 84 84 success(function(data) {
console.log(card.text + ' reported'); 85 85 console.log(card.text + ' reported');
86 86
// local change for display purposes 87 87 // local change for display purposes
Materialize.toast('Card Flagged', 3000, 'rounded'); 88 88 Materialize.toast('Card Flagged', 3000, 'rounded');
}). 89 89 }).
error(function(err) { 90 90 error(function(err) {
console.log('no hide for you'); 91 91 console.log('no flag for you');
}); 92 92 });
}; 93 93 };
94 94
// toggle button text from show to hide 95 95 // toggle button text from show to hide
$(function() { 96 96 $(function() {
$('#showHidden').click(function() { 97 97 $('#showHidden').click(function() {
$(this).text(function(i, text) { 98 98 $(this).text(function(i, text) {
return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden'; 99 99 return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden';
}); 100 100 });
}); 101 101 });
}); 102 102 });
103
$scope.$on('$destroy', function() { 103 104 $scope.$on('$destroy', function() {
$rootScope.currentSection = {}; 104 105 $rootScope.currentSection = {};
$(document).off('keydown'); 105 106 $(document).off('keydown');
}); 106 107 });
107 108
$(document).ready(function() { 108 109 $(document).ready(function() {
$('.tooltipped').tooltip({delay: 50}); 109 110 $('.tooltipped').tooltip({delay: 50});
110 111
//back to top 111 112 //back to top
var offset = 300; 112 113 var offset = 300;
var duration = 300; 113 114 var duration = 300;
$(window).scroll(function() { 114 115 $(window).scroll(function() {
if ($(this).scrollTop() > offset) { 115 116 if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration); 116 117 $('.back-to-top').fadeIn(duration);
} else { 117 118 } else {
$('.back-to-top').fadeOut(duration); 118 119 $('.back-to-top').fadeOut(duration);
} 119 120 }
}); 120 121 });
121 122
jQuery('.back-to-top').click(function(event) { 122 123 $('.back-to-top').click(function(event) {
event.preventDefault(); 123 124 event.preventDefault();
jQuery('html, body').animate({scrollTop: 0}, duration); 124 125 $('html, body').animate({scrollTop: 0}, duration);
return false; 125 126 return false;
}); 126 127 });
}); 127 128 });
128 129
// to display day of the week badges 129 130 // to display day of the week badges
$scope.dayofweek = function(item) { 130 131 $scope.dayofweek = function(item) {
var date = new Date(item.material_date); 131 132 var date = new Date(item.material_date);
switch (date.getDay()) { 132 133 switch (date.getDay()) {
case 0: 133 134 case 0:
return 'Su'; 134 135 return 'U';
case 1: 135 136 case 1:
return 'M'; 136 137 return 'M';
case 2: 137 138 case 2:
return 'T'; 138 139 return 'T';
case 3: 139 140 case 3:
return 'W'; 140 141 return 'W';
case 4: 141 142 case 4:
return 'R'; 142 143 return 'R';
case 5: 143 144 case 5:
return 'F'; 144 145 return 'F';
case 6: 145 146 case 6:
return 'Sa'; 146 147 return 'S';
} 147 148 }
}; 148 149 };
149 150
// checkbox filter 150 151 // checkbox filter
$scope.filter = { 151 152 $scope.filter = {
'week1': true, 152 153 'week1': true,
'week2': true, 153 154 'week2': true,
'week3': true, 154 155 'week3': true,
'week4': true, 155 156 'week4': true,
'week5': true, 156 157 'week5': true,
'week6': true, 157 158 'week6': true,
'week7': true, 158 159 'week7': true,
'week8': true, 159 160 'week8': true,
'week9': true, 160 161 'week9': true,
'week10': true, 161 162 'week10': true,
}; 162 163 };
163 164
$scope.filterByDate = function(item) { 164 165 $scope.filterByDate = function(item) {
var week = item.material_week_num; 165 166 var week = item.material_week_num;
return (week == 1 && $scope.filter['week1']) || 166 167 return (week == 1 && $scope.filter['week1']) ||
(week == 2 && $scope.filter['week2']) || 167 168 (week == 2 && $scope.filter['week2']) ||
templates/cardlist.html View file @ e52721a
<body> 1 1 <body>
<div class="row"> 2 2 <div class="row">
<a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a> 3 3 <a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a>
4 4
<div class="input-field col s4 right"> 5 5 <div class="input-field col s6 right">
<i class="mdi-action-search prefix"></i> 6 6 <i class="mdi-action-search prefix"></i>
<input id="search" type="text" class="validate" ng-model="searchText"/> 7 7 <input id="search" type="text" class="validate" ng-model="searchText"/>
<label for="search">Search</label> 8 8 <label for="search">Search</label>
</div> 9 9 </div>
</div> 10 10 </div>
11 11
<div class="row"> 12 12 <div class="row">
<form> 13 13 <form>
<div class="col s12"> 14 14 <div class="col s12">
<div class="col s2"> 15 15 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/> 16 16 <input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/>
<label for="weekOneCheck">Week One</label> 17 17 <label for="weekOneCheck">Week One</label>
</div> 18 18 </div>
<div class="col s2"> 19 19 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/> 20 20 <input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/>
<label for="weekTwoCheck">Week Two</label> 21 21 <label for="weekTwoCheck">Week Two</label>
</div> 22 22 </div>
<div class="col s2"> 23 23 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/> 24 24 <input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/>
<label for="weekThreeCheck">Week Three</label> 25 25 <label for="weekThreeCheck">Week Three</label>
</div> 26 26 </div>
<div class="col s2"> 27 27 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/> 28 28 <input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/>
<label for="weekFourCheck">Week Four</label> 29 29 <label for="weekFourCheck">Week Four</label>
</div> 30 30 </div>
<div class="col s2"> 31 31 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/> 32 32 <input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/>
<label for="weekFiveCheck">Week Five</label> 33 33 <label for="weekFiveCheck">Week Five</label>
</div> 34 34 </div>
</div> 35 35 </div>
<div class="col s12"> 36 36 <div class="col s12">
<div class="col s2"> 37 37 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/> 38 38 <input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/>
<label for="weekSixCheck">Week Six</label> 39 39 <label for="weekSixCheck">Week Six</label>
</div> 40 40 </div>
<div class="col s2"> 41 41 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/> 42 42 <input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/>
<label for="weekSevenCheck">Week Seven</label> 43 43 <label for="weekSevenCheck">Week Seven</label>
</div> 44 44 </div>
<div class="col s2"> 45 45 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/> 46 46 <input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/>
<label for="weekEightCheck">Week Eight</label> 47 47 <label for="weekEightCheck">Week Eight</label>
</div> 48 48 </div>
<div class="col s2"> 49 49 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/> 50 50 <input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/>
<label for="weekNineCheck">Week Nine</label> 51 51 <label for="weekNineCheck">Week Nine</label>
</div> 52 52 </div>
<div class="col s2"> 53 53 <div class="col s2">
<input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/> 54 54 <input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/>
<label for="weekTenCheck">Week Ten</label> 55 55 <label for="weekTenCheck">Week Ten</label>
</div> 56 56 </div>
</div> 57 57 </div>
</form> 58 58 </form>
</div> 59 59 </div>
60 60
<div class="list" style="padding: 0px 15px"> 61 61 <div class="list" style="padding: 0px 15px">
<ul class="collection" 62 62 <ul class="collection"
ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'"> 63 63 ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num' | orderBy:min">
<li class="collection-header"><h3>Week {{weeknum}}</h3></li> 64 64 <li class="collection-header"><h3>Week {{weeknum}}</h3></li>
<li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden"> 65 65 <li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show || !card.is_hidden">
<div>{{card.text}} 66 66 <div>{{card.text}}
<span class="badge">{{dayofweek(card)}}</span> 67 67 <span class="badge">{{dayofweek(card)}}</span>
<p class="right-align" ng-show="expand"> 68 68 <p class="right-align" ng-show="expand">
<a href="" class="tooltipped" ng-click="pull(card)" ng-show="!card.is_in_deck" data-position="bottom" data-delay="50" data-tooltip="Add to Deck"> 69 69 <a href="" class="tooltipped" ng-click="pull(card)" ng-show="!card.is_in_deck" data-position="bottom" data-delay="50" data-tooltip="Add to Deck">
<i class="mdi-content-add-circle-outline small"></i></a> 70 70 <i class="mdi-content-add-circle-outline small"></i></a>
<a href="" class="tooltipped" ng-click="unpull(card)" ng-show="card.is_in_deck" data-position="bottom" data-delay="50" data-tooltip="Add to Deck"> 71 71 <a href="" class="tooltipped" ng-click="unpull(card)" ng-show="card.is_in_deck" data-position="bottom" data-delay="50" data-tooltip="Add to Deck">
<i class="mdi-content-remove-circle-outline small"></i></a> 72 72 <i class="mdi-content-remove-circle-outline small"></i></a>
<a href="" class="tooltipped" ng-click="hide(card)" ng-show="!card.is_hidden" data-position="bottom" data-delay="50" data-tooltip="Hide"> 73 73 <a href="" class="tooltipped" ng-click="hide(card)" ng-show="!card.is_hidden" data-position="bottom" data-delay="50" data-tooltip="Hide">
<i class="mdi-action-visibility-off small"></i></a> 74 74 <i class="mdi-action-visibility-off small"></i></a>
<a href="" class="tooltipped" ng-click="unhide(card)" ng-show="card.is_hidden" data-position="bottom" data-delay="50" data-tooltip="Unhide"> 75 75 <a href="" class="tooltipped" ng-click="unhide(card)" ng-show="card.is_hidden" data-position="bottom" data-delay="50" data-tooltip="Unhide">
<i class="mdi-action-visibility small"></i></a> 76 76 <i class="mdi-action-visibility small"></i></a>
<a href="" ng-click="flag(card)"> 77 77 <a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag">
<i class="mdi-content-flag small"></i></a> 78 78 <i class="mdi-content-flag small"></i></a>
</p> 79 79 </p>
</div> 80 80 </div>
</li> 81 81 </li>
</ul> 82 82 </ul>
</div> 83 83 </div>
84 84
85 85
<div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;"> 86 86 <div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;">
<a class="btn-floating btn-large"> 87 87 <a class="btn-floating btn-large">
<i class="mdi-editor-publish medium"></i> 88 88 <i class="mdi-editor-publish medium"></i>
</a> 89 89 </a>