110swag / flashy-frontend

Download as
Browse Code ยป

Commit 36887911f67a84ac7bc415d63c385930b6731b9f

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

Try bolding blanks

Showing 2 changed files with 31 additions and 5 deletions Inline Diff

scripts/CardListController.js View file @ 3688791
angular.module('flashy.CardListController', ['ui.router', 'angular.filter']). 1 1 angular.module('flashy.CardListController', ['ui.router', 'angular.filter', 'ngSanitize']).
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
21
// unhide card 21 22 // unhide card
$scope.unhide = function(card) { 22 23 $scope.unhide = function(card) {
$http.post('/api/flashcards/' + card.id + '/unhide/'). 23 24 $http.post('/api/flashcards/' + card.id + '/unhide/').
success(function(data) { 24 25 success(function(data) {
console.log(card.text + ' unhidden'); 25 26 console.log(card.text + ' unhidden');
26 27
// locally change hidden 27 28 // locally change hidden
card.is_hidden = false; 28 29 card.is_hidden = false;
Materialize.toast('Unhidden', 3000, 'rounded'); 29 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
// hide 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;
Materialize.toast('Hidden', 3000, 'rounded'); 44 45 Materialize.toast('Hidden', 3000, 'rounded');
}). 45 46 }).
error(function(err) { 46 47 error(function(err) {
console.log('no hide for you'); 47 48 console.log('no hide for you');
}); 48 49 });
}; 49 50 };
50 51
// pull card 51 52 // pull card
$scope.pull = function(card) { 52 53 $scope.pull = function(card) {
$http.post('/api/flashcards/' + card.id + '/pull/'). 53 54 $http.post('/api/flashcards/' + card.id + '/pull/').
success(function(data) { 54 55 success(function(data) {
console.log(card.text + ' pulled'); 55 56 console.log(card.text + ' pulled');
56 57
// locally change boolean for display purposes 57 58 // locally change boolean for display purposes
card.is_in_deck = true; 58 59 card.is_in_deck = true;
Materialize.toast('Added to Your Deck', 3000, 'rounded'); 59 60 Materialize.toast('Added to Your Deck', 3000, 'rounded');
}). 60 61 }).
error(function(err) { 61 62 error(function(err) {
console.log('no pull for you'); 62 63 console.log('no pull for you');
}); 63 64 });
}; 64 65 };
65 66
// unpull card 66 67 // unpull card
$scope.unpull = function(card) { 67 68 $scope.unpull = function(card) {
$http.post('/api/flashcards/' + card.id + '/unpull/'). 68 69 $http.post('/api/flashcards/' + card.id + '/unpull/').
success(function(data) { 69 70 success(function(data) {
console.log(card.text + ' unpulled'); 70 71 console.log(card.text + ' unpulled');
71 72
// local change for display purposes 72 73 // local change for display purposes
card.is_in_deck = false; 73 74 card.is_in_deck = false;
Materialize.toast('Removed from Your Deck', 3000, 'rounded'); 74 75 Materialize.toast('Removed from Your Deck', 3000, 'rounded');
}). 75 76 }).
error(function(err) { 76 77 error(function(err) {
console.log('no unpull for you'); 77 78 console.log('no unpull for you');
}); 78 79 });
}; 79 80 };
80 81
// flag/report card 81 82 // flag/report card
$scope.flag = function(card) { 82 83 $scope.flag = function(card) {
$http.post('/api/flashcards/' + card.id + '/report/'). 83 84 $http.post('/api/flashcards/' + card.id + '/report/').
success(function(data) { 84 85 success(function(data) {
console.log(card.text + ' reported'); 85 86 console.log(card.text + ' reported');
86 87
// local change for display purposes 87 88 // local change for display purposes
Materialize.toast('Card Flagged', 3000, 'rounded'); 88 89 Materialize.toast('Card Flagged', 3000, 'rounded');
}). 89 90 }).
error(function(err) { 90 91 error(function(err) {
console.log('no flag for you'); 91 92 console.log('no flag for you');
}); 92 93 });
}; 93 94 };
94 95
// toggle button text from show to hide 95 96 // toggle button text from show to hide
$(function() { 96 97 $(function() {
$('#showHidden').click(function() { 97 98 $('#showHidden').click(function() {
$(this).text(function(i, text) { 98 99 $(this).text(function(i, text) {
return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden'; 99 100 return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden';
}); 100 101 });
}); 101 102 });
}); 102 103 });
103 104
$scope.$on('$destroy', function() { 104 105 $scope.$on('$destroy', function() {
$rootScope.currentSection = {}; 105 106 $rootScope.currentSection = {};
$(document).off('keydown'); 106 107 $(document).off('keydown');
}); 107 108 });
108 109
$(document).ready(function() { 109 110 $(document).ready(function() {
$('.tooltipped').tooltip({delay: 50}); 110 111 $('.tooltipped').tooltip({delay: 50});
111 112
//back to top 112 113 //back to top
var offset = 300; 113 114 var offset = 300;
var duration = 300; 114 115 var duration = 300;
$(window).scroll(function() { 115 116 $(window).scroll(function() {
if ($(this).scrollTop() > offset) { 116 117 if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration); 117 118 $('.back-to-top').fadeIn(duration);
} else { 118 119 } else {
$('.back-to-top').fadeOut(duration); 119 120 $('.back-to-top').fadeOut(duration);
} 120 121 }
}); 121 122 });
122 123
$('.back-to-top').click(function(event) { 123 124 $('.back-to-top').click(function(event) {
event.preventDefault(); 124 125 event.preventDefault();
$('html, body').animate({scrollTop: 0}, duration); 125 126 $('html, body').animate({scrollTop: 0}, duration);
return false; 126 127 return false;
}); 127 128 });
}); 128 129 });
129 130
// to display day of the week badges 130 131 // to display day of the week badges
$scope.dayofweek = function(item) { 131 132 $scope.dayofweek = function(item) {
var date = new Date(item.material_date); 132 133 var date = new Date(item.material_date);
switch (date.getDay()) { 133 134 switch (date.getDay()) {
case 0: 134 135 case 0:
return 'U'; 135 136 return 'U';
case 1: 136 137 case 1:
return 'M'; 137 138 return 'M';
case 2: 138 139 case 2:
return 'T'; 139 140 return 'T';
case 3: 140 141 case 3:
return 'W'; 141 142 return 'W';
case 4: 142 143 case 4:
return 'R'; 143 144 return 'R';
case 5: 144 145 case 5:
return 'F'; 145 146 return 'F';
case 6: 146 147 case 6:
return 'S'; 147 148 return 'S';
} 148 149 }
}; 149 150 };
150 151
// checkbox filter 151 152 // checkbox filter
$scope.filter = { 152 153 $scope.filter = {
'week1': true, 153 154 'week1': true,
'week2': true, 154 155 'week2': true,
'week3': true, 155 156 'week3': true,
'week4': true, 156 157 'week4': true,
'week5': true, 157 158 'week5': true,
'week6': true, 158 159 'week6': true,
'week7': true, 159 160 'week7': true,
'week8': true, 160 161 'week8': true,
'week9': true, 161 162 'week9': true,
'week10': true, 162 163 'week10': true,
}; 163 164 };
164 165
$scope.filterByDate = function(item) { 165 166 $scope.filterByDate = function(item) {
var week = item.material_week_num; 166 167 var week = item.material_week_num;
return (week == 1 && $scope.filter['week1']) || 167 168 return (week == 1 && $scope.filter['week1']) ||
(week == 2 && $scope.filter['week2']) || 168 169 (week == 2 && $scope.filter['week2']) ||
(week == 3 && $scope.filter['week3']) || 169 170 (week == 3 && $scope.filter['week3']) ||
(week == 4 && $scope.filter['week4']) || 170 171 (week == 4 && $scope.filter['week4']) ||
(week == 5 && $scope.filter['week5']) || 171 172 (week == 5 && $scope.filter['week5']) ||
(week == 6 && $scope.filter['week6']) || 172 173 (week == 6 && $scope.filter['week6']) ||
(week == 7 && $scope.filter['week7']) || 173 174 (week == 7 && $scope.filter['week7']) ||
(week == 8 && $scope.filter['week8']) || 174 175 (week == 8 && $scope.filter['week8']) ||
(week == 9 && $scope.filter['week9']) || 175 176 (week == 9 && $scope.filter['week9']) ||
(week == 10 && $scope.filter['week10']); 176 177 (week == 10 && $scope.filter['week10']);
}; 177 178 };
178 179
} 179 180 }
); 180 181 ).
182 filter('displayCard', function($sce) {
183 return function(card) {
184 // text to display as html
185 var cardText = "";
186
templates/cardlist.html View file @ 3688791
<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 s6 right"> 5 5 <div class="input-field col s4 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' | orderBy:-material_week_num"> 63 63 ng-repeat="(weeknum, week_cards) in cards | filter:searchText | filter:filterByDate | groupBy: 'material_week_num'">
<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>
67 <span ng-bind-html="card | displayCard"></span>
<span class="badge">{{dayofweek(card)}}</span> 67 68 <span class="badge">{{dayofweek(card)}}</span>
<p class="right-align" ng-show="expand"> 68 69 <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 70 <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 71 <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 72 <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 73 <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 74 <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 75 <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 76 <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 77 <i class="mdi-action-visibility small"></i></a>
<a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag"> 77 78 <a href="" ng-click="flag(card)" data-position="bottom" data-delay="50" data-tooltip="Flag">
<i class="mdi-content-flag small"></i></a> 78 79 <i class="mdi-content-flag small"></i></a>
</p> 79 80 </p>
</div> 80 81 </div>
</li> 81 82 </li>
</ul> 82 83 </ul>
</div> 83 84 </div>
84 85
85 86
<div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;"> 86 87 <div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;">
<a class="btn-floating btn-large"> 87 88 <a class="btn-floating btn-large">
<i class="mdi-editor-publish medium"></i> 88 89 <i class="mdi-editor-publish medium"></i>
</a> 89 90 </a>