110swag / flashy-frontend

Commit a1dbaa3590eb52851972547dd63257cf669589bc

Authored by Rachel Lee 2015-05-19 11:20:38 -0700

Deck WIP, flashcard directive now has pull card from feed but doesn't check it's already pulled

Showing 5 changed files with 45 additions and 57 deletions Inline Diff

gjslint.conf
scripts/FeedController.js
scripts/FlashcardDirective.js
templates/deck.html
templates/flashcard.html

--max_line_length=140	1		1	--max_line_length=80
	2		2

angular.module('flashy.FeedController', ['ui.router']).	1	1	angular.module('flashy.FeedController', ['ui.router']).
	2	2
controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function ($scope, $stateParams, $state, $http) {	3	3	controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function ($scope, $stateParams, $state, $http) {
console.log('Hello from feed');	4	4	console.log('Hello from feed');
sectionId = $stateParams.sectionId;	5	5	sectionId = $stateParams.sectionId;
$scope.cards = [];	6	6	$scope.cards = [];
	7	7
$http.get('/api/sections/' + sectionId + '/feed/').	8	8	$http.get('/api/sections/' + sectionId + '/feed/').
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.viewDeck = function () {	17	17	$scope.viewDeck = function () {
$state.go('deck', {sectionId: sectionId});	18	18	$state.go('deck', {sectionId: sectionId});
console.log('go to deck');	19	19	console.log('go to deck');
};	20	20	};
	21	21
		22	/*
$scope.pullCard = function(card) {	22	23	$scope.pullCard = function(card) {
/*	23	24	$http.post('/api/flashcards/' + card.id + '/pull/', card);
$http.post('/api/flashcards/' + card + '/pull',	24
{}	25
*/	26
var index = $scope.cards.indexOf(card);	27
	28	25
console.log($scope.cards[index]);	29	26	console.log("Pulling card w/ id: " + card.id);
};	30	27	};
		28	*/
	31	29
$scope.pushCard = function () {	32	30	$scope.pushCard = function () {
console.log('make! card content:' + $scope.text);	33	31	console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now());	34	32	var pushed = new Date(Date.now());
console.log(pushed.toString());	35	33	console.log(pushed.toString());
text = $scope.text;	36	34	text = $scope.text;
// attempt to make card :(	37	35	// attempt to make card :(
var myCard = {	38	36	var myCard = {
'text': $scope.text,	39	37	'text': $scope.text,
'material_date': pushed,	40	38	'material_date': pushed,
'mask': '[]',	41	39	'mask': '[]',
section: sectionId	42	40	section: sectionId
}	43	41	}
$http.post('/api/flashcards/', myCard).	44	42	$http.post('/api/flashcards/', myCard).
success(function (data) {	45	43	success(function (data) {
console.log('pushed a card!');	46	44	console.log('pushed a card!');
$scope.cards.push(myCard);	47	45	$scope.cards.push(myCard);
}).	48	46	}).
error(function (error) {	49	47	error(function (error) {
console.log('haha, n00b');	50	48	console.log('haha, n00b');
});	51	49	});
	52	50
$scope.text = '';	53	51	$scope.text = '';
};	54	52	};
	55	53
$scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' +	56	54	$scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' +
'know how long I am right now. Is it good enough now?????????? Howz about now???';	57	55	'know how long I am right now. Is it good enough now?????????? Howz about now???';
$scope.text = '';	58	56	$scope.text = '';
	59	57
$(document).ready(function () {	60	58	$(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered	61	59	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({	62	60	$('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal	63	61	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background	64	62	opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration	65	63	in_duration: 300, // Transition in duration

angular.module('flashy.FlashcardDirective', []).	1	1	angular.module('flashy.FlashcardDirective', []).
	2	2
directive('flashcard', function() {	3	3	directive('flashcard', ['$http', function($http) {
return {	4	4	return {
templateUrl: '/app/templates/flashcard.html',	5	5	templateUrl: '/app/templates/flashcard.html',
restrict: 'E',	6	6	restrict: 'E',
scope: {	7	7	scope: {
flashcard: '=flashcardObj' // flashcard-obj in html	8	8	flashcard: '=flashcardObj' // flashcard-obj in html
},	9	9	},
link: function(scope) {	10	10	link: function(scope, $scope) {
console.log("HELLO FROM FLASHCARD DIRECTIVE");	11	11	console.log("HELLO FROM FLASHCARD DIRECTIVE");
console.log(scope.flashcard);	12	12	console.log(scope.flashcard);
	13	13
		14	scope.pullCard = function(flashcard) {
		15	$http.post('/api/flashcards/' + flashcard.id + '/pull/', flashcard);
		16	console.log("pulled flashcard #" + flashcard.id);
		17	}
		18
		19
// Put flashcard-specific functions here.	14	20	// Put flashcard-specific functions here.
// This will probably include add/hide/modals/etc.	15	21	// This will probably include add/hide/modals/etc.
}	16	22	}
};	17	23	};
});	18	24	}]);
	19	25

	1	1	<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->	2	2	<div class="row">
		3	<div ng-repeat="card in cards">
		4	<flashcard flashcard-obj="card"/>
		5
		6	<!--
		7	<div class="col s6">
		8	<div class="card">
		9	<div class="card-content">
		10	<p>{{card.content}}</p>
		11	</div>
	3	12
	4	13	<div class="card-action">
<div>	5	14	<i class="small mdi-action-delete" ng-click="removeCard(card)"></i>
	6	15	<a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>
<div class="row">	7	16	<!-- Modal Structure -->
<div ng-repeat="card in cards">	8	17	<div id="editModal" class="modal modal-fixed-footer">
<div class="col s6">	9	18	<div class="modal-content">
<div class="card">	10	19	<div class="row">
<div class="card-content">	11	20	<form class="col s12">
<p>{{card.content}}</p>	12	21	<div class="row">
</div>	13	22	<div class="input-field col s6">
	14	23	<i class="mdi-editor-mode-edit prefix"></i>
<div class="card-action">	15	24	<textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>
	16	25	<label for="icon_prefix2"></label>
<i class="small mdi-action-delete" ng-click="removeCard(card)"></i>	17
	18
<a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>	19
	20
<!-- Modal Structure -->	21
<div id="editModal" class="modal modal-fixed-footer">	22
<div class="modal-content">	23
<div class="row">	24
<form class="col s12">	25
<div class="row">	26
<div class="input-field col s6">	27
<i class="mdi-editor-mode-edit prefix"></i>	28
<textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>	29
<label for="icon_prefix2"></label>	30
</div>	31
</div>	32	26	</div>
</form>	33	27	</div>
</div>	34	28	</form>
	35
</div>	36	29	</div>
	37
	38
<div class="modal-footer">	39
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>	40
</div>	41
</div>	42	30	</div>
	43	31	<div class="modal-footer">
	44	32	<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
		33	</div>
</div>	45	34	</div>
	46
</div>	47	35	</div>
	48
</div>	49	36	</div>
	50
	51
</div>	52	37	</div>
		38	-->
</div>	53	39	</div>
</div>	54	40	</div>
	55	41
	56
	57

<div class="card flashy">	1	1	<div class="card flashy">
<div class="card-content">	2	2	<div class="card-content">
<p>{{flashcard.text}}</p>	3	3	<p>{{flashcard.text}}</p>
</div>	4	4	</div>
<div class="card-overlay">	5	5	<div class="card-overlay">
<a href="#">	6	6	<a href="#">
<div class="top-box">	7	7	<div class="top-box" ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>	8	8	<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div>	9	9	</div>
</a>	10	10	</a>
<div class="bottom-box">	11	11	<div class="bottom-box">
<a href="#">	12	12	<a href="#">
<div class="left-box">	13	13	<div class="left-box">
<div class="center-me"><i class="mdi-action-info-outline small"></i></div>	14	14	<div class="center-me"><i class="mdi-action-info-outline small"></i></div>
</div>	15	15	</div>
</a>	16	16	</a>
<a href="#">	17	17	<a href="#">
<div class="right-box">	18	18	<div class="right-box">
<div class="center-me"><i class="mdi-action-delete small"></i></div>	19	19	<div class="center-me"><i class="mdi-action-delete small"></i></div>
</div>	20	20	</div>
</a>	21	21	</a>
</div>	22	22	</div>
</div>	23	23	</div>
</div>	24	24	</div>
	25	25