110swag / flashy-frontend

Download as
Browse Code ยป

Commit 2f199068c8c9e391f3cee8447f4d519db9bff854

Authored by Andrew Buss
1 parent 8e5fad9456
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

focus input on card push

Showing 4 changed files with 65 additions and 61 deletions Inline Diff

scripts/FeedController.js View file @ 2f19906
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
$scope.pullCard = function(card) { 22 22 $scope.pullCard = function(card) {
/* 23 23 /*
$http.post('/api/flashcards/' + card + '/pull', 24 24 $http.post('/api/flashcards/' + card + '/pull',
{} 25 25 {}
*/ 26 26 */
var index = $scope.cards.indexOf(card); 27 27 var index = $scope.cards.indexOf(card);
28 28
console.log($scope.cards[index]); 29 29 console.log($scope.cards[index]);
}; 30 30 };
31 31
$scope.pushCard = function () { 32 32 $scope.pushCard = function() {
console.log('make! card content:' + $scope.text); 33 33 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 34 34 var pushed = new Date(Date.now());
console.log(pushed.toString()); 35 35 console.log(pushed.toString());
text = $scope.text; 36 36 text = $scope.text;
// attempt to make card :( 37 37 // attempt to make card :(
var myCard = { 38 38 var myCard = {
'text': $scope.text, 39 39 'text': $scope.text,
'material_date': pushed, 40 40 'material_date': pushed,
'mask': '[]', 41 41 'mask': '[]',
section: sectionId 42 42 section: sectionId
} 43 43 };
$http.post('/api/flashcards/', myCard). 44 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(myCard); 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() {
complete: function() { alert('Closed'); } // Callback for Modal close*/ 68 68 $('input:text:visible:first').focus();
69 },
70 complete: function() {
71 } // Callback for Modal close*/
} 69 72 }
); 70 73 );
}); 71 74 });
72 75
}]); 73 76 }]);
74 77
scripts/FlashcardDirective.js View file @ 2f19906
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: {
flashcard: '=flashcardObj' // flashcard-obj in html 8 8 flashcard: '=flashcardObj' // flashcard-obj in html
}, 9 9 },
link: function(scope) { 10 10 link: function(scope, element) {
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 console.log(element);
13 14
// Put flashcard-specific functions here. 14 15 // Put flashcard-specific functions here.
// This will probably include add/hide/modals/etc. 15 16 // This will probably include add/hide/modals/etc.
} 16 17 }
}; 17 18 };
}); 18 19 });
scripts/StudyController.js View file @ 2f19906
angular.module('flashy.StudyController', ['ui.router']). 1 1 angular.module('flashy.StudyController', ['ui.router']).
2 2
controller('StudyController', ['$scope', '$state', 3 3 controller('StudyController', ['$scope', '$state',
function($scope, $state) { 4 4 function($scope, $state) {
console.log("Flashy study controller content in this file. also hell0"); 5 5 console.log('Flashy study controller content in this file. also hell0');
6 6
// Flashcard content 7 7 // Flashcard content
$scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk '; 8 8 $scope.htmlContent = 'sample text here longwordddddddddddddddddddddddddddd hello there from js review ctrl alwkejflakewjflk awjkefjkwefjlkea jfkewjaweajkakwef jk fjeawkafj kaewjf jawekfj akwejfk ';
$scope.samples = [ 9 9 $scope.samples = [
{ 10 10 {
'name': 'lol', 11 11 'name': 'lol',
'desc': 'sample text here 111111' 12 12 'desc': 'sample text here 111111'
}, 13 13 },
{ 14 14 {
'name': 'lol 2', 15 15 'name': 'lol 2',
'desc': 'sample text here 22222222222222' 16 16 'desc': 'sample text here 22222222222222'
}, 17 17 },
{ 18 18 {
'name': 'lol3', 19 19 'name': 'lol3',
'desc': 'sample text here 33333333333333' 20 20 'desc': 'sample text here 33333333333333'
} 21 21 }
]; 22 22 ];
} 23 23 }
]); 24 24 ]);
templates/feed.html View file @ 2f19906
<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-obj="card"/> 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
<form> 30 30 <form>
<div id="newCard" class="modal bottom-sheet"> 31 31 <div id="newCard" class="modal bottom-sheet">
<div class="modal-content"> 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>
<input class="materialize-textarea" ng-model="text" type="text"/> 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
</div> 39
</div> 40
<div class="modal-footer"> 41
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit 42
<i class="mdi-content-send right"></i> 43
</button> 44
</div> 45
</div> 46 38 </div>
</form> 47 39 </div>
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>
46 </div>
47 </form>
</body> 48 48 </body>
49 49