110swag / flashy-frontend

Commit 1167ab44a0a38136da297ccc26efd4ec3db08804

Authored by Rachel Lee 2015-05-19 10:22:32 -0700

Feed submit is good and flashcard directive is gooder

Showing 4 changed files with 23 additions and 25 deletions Inline Diff

scripts/FeedController.js
scripts/FlashcardDirective.js
templates/feed.html
templates/flashcard.html

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) {
for (var i = 0; i < data.length; i++) {	10	10	console.log(data);
$scope.cards.push({'title': data[i].title, 'content': data[i].text});	11	11	$scope.cards = data;
}	12
}).	13	12	}).
error(function (err) {	14	13	error(function (err) {
console.log('pulling feed failed');	15	14	console.log('pulling feed failed');
});	16	15	});
	17	16
$scope.viewDeck = function () {	18	17	$scope.viewDeck = function () {
$state.go('deck', {sectionId: sectionId});	19	18	$state.go('deck', {sectionId: sectionId});
console.log('go to deck');	20	19	console.log('go to deck');
};	21	20	};
	22	21
$scope.pullCard = function(card) {	23	22	$scope.pullCard = function(card) {
/*	24	23	/*
$http.post('/api/flashcards/pk/pull',	25	24	$http.post('/api/flashcards/' + card + '/pull',
{}	26	25	{}
*/	27	26	*/
var index = $scope.cards.indexOf(card);	28	27	var index = $scope.cards.indexOf(card);
	29	28
console.log($scope.cards[index]);	30	29	console.log($scope.cards[index]);
};	31	30	};
	32	31
$scope.pushCard = function () {	33	32	$scope.pushCard = function () {
console.log('make! card content:' + $scope.text);	34	33	console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now());	35	34	var pushed = new Date(Date.now());
console.log(pushed.toString());	36	35	console.log(pushed.toString());
text = $scope.text;	37	36	text = $scope.text;
// attempt to make card :(	38	37	// attempt to make card :(
$http.post('/api/flashcards/', {	39	38	var myCard = {
'text': $scope.text,	40	39	'text': $scope.text,
'material_date': pushed,	41	40	'material_date': pushed,
'mask': '[]',	42	41	'mask': '[]',
section: sectionId	43	42	section: sectionId
}).	44	43	}
		44	$http.post('/api/flashcards/', myCard).
success(function (data) {	45	45	success(function (data) {
console.log('pushed a card!');	46	46	console.log('pushed a card!');
$scope.cards.push({content: text});	47	47	$scope.cards.push(myCard);
}).	48	48	}).
error(function (error) {	49	49	error(function (error) {
console.log('haha, n00b');	50	50	console.log('haha, n00b');
});	51	51	});
	52	52
$scope.text = '';	53	53	$scope.text = '';
};	54	54	};
	55	55
$scope.flashcard = 'hi i am a flashcard. I need to be really long and awesome I ain\'t ' +	56	56	$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	57	'know how long I am right now. Is it good enough now?????????? Howz about now???';
$scope.text = '';	58	58	$scope.text = '';
	59	59
$(document).ready(function () {	60	60	$(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered	61	61	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({	62	62	$('.modal-trigger').leanModal({
dismissible: true, // Modal can be dismissed by clicking outside of the modal	63	63	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background	64	64	opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration	65	65	in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration	66	66	out_duration: 200, // Transition out duration
/*ready: function() { alert('Ready'); }, // Callback for Modal open	67	67	/*ready: function() { alert('Ready'); }, // Callback for Modal open
complete: function() { alert('Closed'); } // Callback for Modal close*/	68	68	complete: function() { alert('Closed'); } // Callback for Modal close*/
}	69	69	}
);	70	70	);

angular.module('flashy.FlashcardDirective', []).	1	1	angular.module('flashy.FlashcardDirective', []).
	2	2
directive('flashcard', function() {	3	3	directive('flashcard', function() {
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: {
content: '=flashcardContent' //flashcard-content in outer scope	8	8	flashcard: '=flashcardObj' // flashcard-obj in html
},	9	9	},
link: function(scope) {	10	10	link: function(scope) {
console.log("HELLO FROM FLASHCARD DIRECTIVE");	11	11	console.log("HELLO FROM FLASHCARD DIRECTIVE");
console.log(scope.content);	12	12	console.log(scope.flashcard);
	13
	14	13
// Put flashcard-specific functions here.	15	14	// Put flashcard-specific functions here.
// This will probably include add/hide/modals/etc.	16	15	// This will probably include add/hide/modals/etc.
}	17	16	}
};	18	17	};

<body>	1	1	<body>
<div class="col s12">	2	2	<div class="col s12">
<div class="row">	3	3	<div class="row">
<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a>	4	4	<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a>
</div>	5	5	</div>
	6	6
<!--cards-->	7	7	<!--cards-->
<div class="row">	8	8	<div class="row">
<div ng-repeat="card in cards">	9	9	<div ng-repeat="card in cards">
<flashcard flashcard-content="card.content"/>	10	10	<flashcard flashcard-obj="card"/>
</div>	11	11	</div>
</div>	12	12	</div>
	13	13
	14	14
<!--Lil plus button in corner-->	15	15	<!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">	16	16	<div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">	17	17	<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">
<i class="large mdi-content-add"></i>	18	18	<i class="large mdi-content-add"></i>
</a>	19	19	</a>
<!--Maybe this will come in handy later? Floating bubbles on mouseover-->	20	20	<!--Maybe this will come in handy later? Floating bubbles on mouseover-->
<ul>	21	21	<ul>
<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>	22	22	<li><a class="btn-floating red"><i class="large mdi-editor-insert-chart"></i></a></li>
<li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>	23	23	<li><a class="btn-floating yellow darken-1"><i class="large mdi-editor-format-quote"></i></a></li>
<li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>	24	24	<li><a class="btn-floating green"><i class="large mdi-editor-publish"></i></a></li>
<li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>	25	25	<li><a class="btn-floating blue"><i class="large mdi-editor-attach-file"></i></a></li>
</ul>	26	26	</ul>
</div>	27	27	</div>
</div>	28	28	</div>
	29	29
<div id="newCard" class="modal bottom-sheet">	30	30	<form>
<div class="modal-content">	31	31	<div id="newCard" class="modal bottom-sheet">
<form>	32	32	<div class="modal-content">
<div class="row">	33	33	<div class="row">
<div class="input-field">	34	34	<div class="input-field">
<i class="mdi-editor-mode-edit prefix"></i>	35	35	<i class="mdi-editor-mode-edit prefix"></i>
<textarea class="materialize-textarea" ng-model="text" type="text"></textarea>	36	36	<input class="materialize-textarea" ng-model="text" type="text"/>
<label id="newCardSign" for="newCard">New Flashcard</label>	37	37	<label id="newCardSign" for="newCard">New Flashcard</label>
</div>	38	38	</div>
</div>	39	39	</div>
</form>	40	40	</div>
		41	<div class="modal-footer">
		42	<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit
		43	<i class="mdi-content-send right"></i>
		44	</button>
		45	</div>
</div>	41	46	</div>
<div class="modal-footer">	42	47	</form>
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit	43
<i class="mdi-content-send right"></i>	44
</button>	45
</div>	46
</div>	47
</div>	48
</body>	49	48	</body>
	50	49

<div class="card flashy">	1	1	<div class="card flashy">
<div class="card-content">	2	2	<div class="card-content">
<p>{{content}}</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">
<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