110swag / flashy-frontend

Commit 362cfb056dc4688d77976dbc9fd4a22e55bc7619

Authored by Melody 2015-05-28 20:57:59 -0700

Flag cards and back to top

Showing 2 changed files with 127 additions and 75 deletions Inline Diff

scripts/CardListController.js
templates/cardlist.html

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
$scope.cards = data;	11	10	$scope.cards = data;
}).	12	11	}).
error(function(err) {	13	12	error(function(err) {
console.log('pulling feed failed');	14	13	console.log('pulling feed failed');
});	15	14	});
	16	15
$scope.viewFeed = function() {	17	16	$scope.viewFeed = function() {
$state.go('feed', {sectionId: sectionId});	18	17	$state.go('feed', {sectionId: sectionId});
console.log('go to feed');	19	18	console.log('go to feed');
};	20	19	};
	21	20
// unhide card	22	21	// unhide card
$scope.unhide = function(card) {	23	22	$scope.unhide = function(card) {
$http.post('/api/flashcards/' + card.id + '/unhide/').	24	23	$http.post('/api/flashcards/' + card.id + '/unhide/').
success(function(data) {	25	24	success(function(data) {
console.log(card.text + ' unhidden');	26	25	console.log(card.text + ' unhidden');
	27	26
// locally change hidden	28	27	// locally change hidden
card.is_hidden = false;	29	28	card.is_hidden = false;
Materialize.toast('Unhidden', 3000, 'rounded');	30	29	Materialize.toast('Unhidden', 3000, 'rounded');
}).	31	30	}).
error(function(err) {	32	31	error(function(err) {
console.log('no unhide for you');	33	32	console.log('no unhide for you');
});	34	33	});
};	35	34	};
	36	35
// hide card	37	36	// hide card
$scope.hide = function(card) {	38	37	$scope.hide = function(card) {
$http.post('/api/flashcards/' + card.id + '/hide/').	39	38	$http.post('/api/flashcards/' + card.id + '/hide/').
success(function(data) {	40	39	success(function(data) {
console.log(card.text + ' hidden');	41	40	console.log(card.text + ' hidden');
	42	41
// locally change hidden	43	42	// locally change hidden
card.is_hidden = true;	44	43	card.is_hidden = true;
Materialize.toast('Hidden', 3000, 'rounded');	45	44	Materialize.toast('Hidden', 3000, 'rounded');
}).	46	45	}).
error(function(err) {	47	46	error(function(err) {
console.log('no hide for you');	48	47	console.log('no hide for you');
});	49	48	});
};	50	49	};
	51	50
// pull card	52	51	// pull card
$scope.pull = function(card) {	53	52	$scope.pull = function(card) {
$http.post('/api/flashcards/' + card.id + '/pull/').	54	53	$http.post('/api/flashcards/' + card.id + '/pull/').
success(function(data) {	55	54	success(function(data) {
console.log(card.text + ' pulled');	56	55	console.log(card.text + ' pulled');
	57	56
// locally change boolean for display purposes	58	57	// locally change boolean for display purposes
card.is_in_deck = true;	59	58	card.is_in_deck = true;
Materialize.toast('Added to Your Deck', 3000, 'rounded');	60	59	Materialize.toast('Added to Your Deck', 3000, 'rounded');
}).	61	60	}).
error(function(err) {	62	61	error(function(err) {
console.log('no hide for you');	63	62	console.log('no hide for you');
});	64	63	});
};	65	64	};
	66	65
// unpull card	67	66	// unpull card
$scope.unpull = function(card) {	68	67	$scope.unpull = function(card) {
$http.post('/api/flashcards/' + card.id + '/unpull/').	69	68	$http.post('/api/flashcards/' + card.id + '/unpull/').
success(function(data) {	70	69	success(function(data) {
console.log(card.text + ' unpulled');	71	70	console.log(card.text + ' unpulled');
	72	71
// local change for display purposes	73	72	// local change for display purposes
card.is_in_deck = false;	74	73	card.is_in_deck = false;
Materialize.toast('Removed from Your Deck', 3000, 'rounded');	75	74	Materialize.toast('Removed from Your Deck', 3000, 'rounded');
}).	76	75	}).
error(function(err) {	77	76	error(function(err) {
console.log('no hide for you');	78	77	console.log('no hide for you');
});	79	78	});
};	80	79	};
	81	80
		81	// unpull card
		82	$scope.flag = function(card) {
		83	$http.post('/api/flashcards/' + card.id + '/report/').
		84	success(function(data) {
		85	console.log(card.text + ' reported');
		86
		87	// local change for display purposes
		88	Materialize.toast('Card Flagged', 3000, 'rounded');
		89	}).
		90	error(function(err) {
		91	console.log('no hide for you');
		92	});
		93	};
		94
// toggle button text from show to hide	82	95	// toggle button text from show to hide
$(function() {	83	96	$(function() {
$('#showHidden').click(function() {	84	97	$('#showHidden').click(function() {
$(this).text(function(i, text) {	85	98	$(this).text(function(i, text) {
return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden';	86	99	return text === 'Show Hidden' ? 'Hide Hidden' : 'Show Hidden';
});	87	100	});
});	88	101	});
});	89	102	});
$scope.$on('$destroy', function() {	90	103	$scope.$on('$destroy', function() {
$rootScope.currentSection = {};	91	104	$rootScope.currentSection = {};
$(document).off('keydown');	92	105	$(document).off('keydown');
});	93	106	});
	94	107
		108	// Tooltips!
		109	$(document).ready(function(){
		110	$('.tooltipped').tooltip({delay: 50});
	95	111
		112	//back to top
		113	var offset = 300;
		114	var duration = 300;
		115	$(window).scroll(function() {
		116	if ($(this).scrollTop() > offset) {
		117	$('.back-to-top').fadeIn(duration);
		118	} else {
		119	$('.back-to-top').fadeOut(duration);
		120	}
		121	});
		122
		123	jQuery('.back-to-top').click(function(event) {
		124	event.preventDefault();
		125	jQuery('html, body').animate({scrollTop: 0}, duration);
		126	return false;
		127	})
		128	});
		129
		130	// to display day of the week badges
$scope.dayofweek = function(item) {	96	131	$scope.dayofweek = function(item) {
var date = new Date(item.material_date);	97	132	var date = new Date(item.material_date);
switch(date.getDay()) {	98	133	switch(date.getDay()) {
case 0:	99	134	case 0:
return "Su";	100	135	return "Su";
case 1:	101	136	case 1:
return "M";	102	137	return "M";
case 2:	103	138	case 2:
return "T";	104	139	return "T";
case 3:	105	140	case 3:
return "W";	106	141	return "W";
case 4:	107	142	case 4:
return "R";	108	143	return "R";
case 5:	109	144	case 5:
return "F";	110	145	return "F";
case 6:	111	146	case 6:
return "Sa";	112	147	return "Sa";
}	113	148	}
};	114	149	};
	115	150
// checkbox filter	116	151	// checkbox filter
$scope.filter = {	117	152	$scope.filter = {
'week1': true,	118	153	'week1': true,
'week2': true,	119	154	'week2': true,
'week3': true,	120	155	'week3': true,
'week4': true,	121	156	'week4': true,
'week5': true,	122	157	'week5': true,
'week6': true,	123	158	'week6': true,
'week7': true,	124	159	'week7': true,
'week8': true,	125	160	'week8': true,
'week9': true,	126	161	'week9': true,
'week10': true,	127	162	'week10': true,
};	128	163	};
	129	164

<div class="row">	1	1	<body>
<a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a>	2	2	<div class="row">
		3	<a class="btn" id="showHidden" ng-click="show = !show" style="margin-top: 15px">Show Hidden</a>
	3	4
<div class="input-field col s4 right">	4	5	<div class="input-field col s4 right">
<i class="mdi-action-search prefix"></i>	5	6	<i class="mdi-action-search prefix"></i>
<input id="search" type="text" class="validate" ng-model="searchText"/>	6	7	<input id="search" type="text" class="validate" ng-model="searchText"/>
<label for="search">Search</label>	7	8	<label for="search">Search</label>
		9	</div>
</div>	8	10	</div>
</div>	9
	10	11
<div class="row">	11	12	<div class="row">
<form>	12	13	<form>
<div class="col s12">	13	14	<div class="col s12">
<div class="col s2">	14	15	<div class="col s2">
<input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/>	15	16	<input type="checkbox" class="filled-in" id="weekOneCheck" ng-model="filter['week1']"/>
<label for="weekOneCheck">Week One</label>	16	17	<label for="weekOneCheck">Week One</label>
		18	</div>
		19	<div class="col s2">
		20	<input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/>
		21	<label for="weekTwoCheck">Week Two</label>
		22	</div>
		23	<div class="col s2">
		24	<input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/>
		25	<label for="weekThreeCheck">Week Three</label>
		26	</div>
		27	<div class="col s2">
		28	<input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/>
		29	<label for="weekFourCheck">Week Four</label>
		30	</div>
		31	<div class="col s2">
		32	<input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/>
		33	<label for="weekFiveCheck">Week Five</label>
		34	</div>
</div>	17	35	</div>
<div class="col s2">	18	36	<div class="col s12">
<input type="checkbox" class="filled-in" id="weekTwoCheck" ng-model="filter['week2']"/>	19	37	<div class="col s2">
<label for="weekTwoCheck">Week Two</label>	20	38	<input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/>
		39	<label for="weekSixCheck">Week Six</label>
		40	</div>
		41	<div class="col s2">
		42	<input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/>
		43	<label for="weekSevenCheck">Week Seven</label>
		44	</div>
		45	<div class="col s2">
		46	<input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/>
		47	<label for="weekEightCheck">Week Eight</label>
		48	</div>
		49	<div class="col s2">
		50	<input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/>
		51	<label for="weekNineCheck">Week Nine</label>
		52	</div>
		53	<div class="col s2">
		54	<input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/>
		55	<label for="weekTenCheck">Week Ten</label>
		56	</div>
</div>	21	57	</div>
<div class="col s2">	22	58	</form>
<input type="checkbox" class="filled-in" id="weekThreeCheck" ng-model="filter['week3']"/>	23	59	</div>
<label for="weekThreeCheck">Week Three</label>	24
</div>	25
<div class="col s2">	26
<input type="checkbox" class="filled-in" id="weekFourCheck" ng-model="filter['week4']"/>	27
<label for="weekFourCheck">Week Four</label>	28
</div>	29
<div class="col s2">	30
<input type="checkbox" class="filled-in" id="weekFiveCheck" ng-model="filter['week5']"/>	31
<label for="weekFiveCheck">Week Five</label>	32
</div>	33
</div>	34
<div class="col s12">	35
<div class="col s2">	36
<input type="checkbox" class="filled-in" id="weekSixCheck" ng-model="filter['week6']"/>	37
<label for="weekSixCheck">Week Six</label>	38
</div>	39
<div class="col s2">	40
<input type="checkbox" class="filled-in" id="weekSevenCheck" ng-model="filter['week7']"/>	41
<label for="weekSevenCheck">Week Seven</label>	42
</div>	43
<div class="col s2">	44
<input type="checkbox" class="filled-in" id="weekEightCheck" ng-model="filter['week8']"/>	45
<label for="weekEightCheck">Week Eight</label>	46
</div>	47
<div class="col s2">	48
<input type="checkbox" class="filled-in" id="weekNineCheck" ng-model="filter['week9']"/>	49
<label for="weekNineCheck">Week Nine</label>	50
</div>	51
<div class="col s2">	52
<input type="checkbox" class="filled-in" id="weekTenCheck" ng-model="filter['week10']"/>	53
<label for="weekTenCheck">Week Ten</label>	54
</div>	55
</div>	56
</form>	57
</div>	58
	59	60
<div class="list" style="padding: 0px 15px">	60	61	<div class="list" style="padding: 0px 15px">
<ul class="collection"	61	62	<ul class="collection"
ng-repeat="(weeknum, week_cards) in cards \| filter:searchText \| filter:filterByDate \| groupBy: 'material_week_num'">	62	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>	63	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">	64	65	<li class="collection-item" ng-click="expand = !expand" ng-repeat="card in week_cards" ng-show="show \|\| !card.is_hidden">
<div>{{card.text}}	65	66	<div>{{card.text}}
<span class="badge">{{dayofweek(card)}}</span>	66	67	<span class="badge">{{dayofweek(card)}}</span>
<p class="right-align" ng-show="expand">	67	68	<p class="right-align" ng-show="expand">
<a href="" ng-click="pull(card)" ng-show="!card.is_in_deck"><i	68	69	<a href="" class="tooltipped" data-position="bottom" data-delay="50" data-tooltip="Add to Deck" ng-click="pull(card)" ng-show="!card.is_in_deck">
class="mdi-content-add-circle-outline small"></i></a>	69	70	<i class="mdi-content-add-circle-outline small"></i></a>
<a href="" ng-click="unpull(card)" ng-show="card.is_in_deck"><i	70	71	<a href="" ng-click="unpull(card)" ng-show="card.is_in_deck"><i
class="mdi-content-remove-circle-outline small"></i></a>	71	72	class="mdi-content-remove-circle-outline small tooltipped"
<a href="" ng-click="hide(card)" ng-show="!card.is_hidden"><i	72	73	data-position="bottom" data-delay="50"
class="mdi-action-delete small"></i></a>	73	74	data-tooltip="Remove from Deck"></i></a>
<a href="" ng-click="unhide(card)" ng-show="card.is_hidden"><i	74	75	<a href="" ng-click="hide(card)" ng-show="!card.is_hidden"><i
class="mdi-image-remove-red-eye small"></i></a>	75	76	class="mdi-action-delete small tooltipped"
</p>	76	77	data-position="bottom" data-delay="50"
</div>	77	78	data-tooltip="Hide"></i></a>
</li>	78	79	<a href="" ng-click="unhide(card)" ng-show="card.is_hidden"><i
</ul>	79	80	class="mdi-image-remove-red-eye small tooltipped"
</div>	80	81	data-position="bottom" data-delay="50"
		82	data-tooltip="Unhide"></i></a>
		83	<a href="" ng-click="flag(card)"><i
		84	class="mdi-content-flag small"></i></a>
		85	</p>
		86	</div>
		87	</li>
		88	</ul>
		89	</div>
		90
		91
		92	<div class="fixed-action-btn back-to-top" style="bottom: 45px; right: 24px; display: none;">
		93	<a class="btn-floating btn-large">
		94	<i class="mdi-editor-publish medium"></i>
		95	</a>
		96	</div>
		97	</body>
	81	98