110swag / flashy-frontend

Download as
Browse Code »

Commit f0541be900e37f9c65f920ea1de48d7f927a30ab

Authored by Andrew Buss
1 parent 39233e64c7
Exists in master and in 1 other branch ef9f9dd363e92d55eb4d80d036193be39572172b

navbar icons!

Showing 7 changed files with 45 additions and 84 deletions Inline Diff

config.js View file @ f0541be
angular.module('flashy', [ 1 1 angular.module('flashy', [
'flashy.LogoutController', 2 2 'flashy.LogoutController',
'flashy.LoginController', 3 3 'flashy.LoginController',
'flashy.RootController', 4 4 'flashy.RootController',
'flashy.FeedController', 5 5 'flashy.FeedController',
'flashy.DeckController', 6 6 'flashy.DeckController',
'flashy.ClassAddController', 7 7 'flashy.ClassAddController',
'flashy.RequestResetController', 8 8 'flashy.RequestResetController',
'flashy.StudyController', 9 9 'flashy.StudyController',
'flashy.UserService', 10 10 'flashy.UserService',
'flashy.FlashcardDirective', 11 11 'flashy.FlashcardDirective',
'flashy.ResetPasswordController', 12 12 'flashy.ResetPasswordController',
'flashy.VerifyEmailController', 13 13 'flashy.VerifyEmailController',
'flashy.CardListController', 14 14 'flashy.CardListController',
'ngCookies']). 15 15 'ngCookies']).
config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 16 16 config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
'$locationProvider', 17 17 '$locationProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { 18 18 function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
'use strict'; 19 19 'use strict';
$httpProvider.defaults.withCredentials = true; 20 20 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 21 21 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 22 22 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
23 23
var arrayMethods = Object.getOwnPropertyNames(Array.prototype); 24 24 var arrayMethods = Object.getOwnPropertyNames(Array.prototype);
arrayMethods.forEach(attachArrayMethodsToNodeList); 25 25 arrayMethods.forEach(attachArrayMethodsToNodeList);
function attachArrayMethodsToNodeList(methodName) { 26 26 function attachArrayMethodsToNodeList(methodName) {
if (methodName !== 'length') { 27 27 if (methodName !== 'length') {
NodeList.prototype[methodName] = Array.prototype[methodName]; 28 28 NodeList.prototype[methodName] = Array.prototype[methodName];
} 29 29 }
}; 30 30 };
31 31
$httpProvider.interceptors.push(function($q) { 32 32 $httpProvider.interceptors.push(function($q) {
return { 33 33 return {
'responseError': function(rejection) { 34 34 'responseError': function(rejection) {
if (rejection.status >= 500) { 35 35 if (rejection.status >= 500) {
console.log('got error'); 36 36 console.log('got error');
console.log(rejection); 37 37 console.log(rejection);
$('body').html('<div class="card">Sorry, the server is not serving requests properly. Try again later</div>'); 38 38 $('body').html('<div class="card">Sorry, the server is not serving requests properly. Try again later</div>');
} 39 39 }
return $q.reject(rejection); 40 40 return $q.reject(rejection);
} 41 41 }
}; 42 42 };
}); 43 43 });
$locationProvider.html5Mode(true); 44 44 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/login'); 45 45 $urlRouterProvider.otherwise('/login');
var auth_resolve = { 46 46 var auth_resolve = {
authorize: ['$q', 'UserService', 47 47 authorize: ['$q', 'UserService',
function($q, UserService) { 48 48 function($q, UserService) {
console.log('resolving user before continuing'); 49 49 console.log('resolving user before continuing');
return UserService.getUserData(); 50 50 return UserService.getUserData();
} 51 51 }
] 52 52 ]
}; 53 53 };
$stateProvider. 54 54 $stateProvider.
state('login', { 55 55 state('login', {
url: '/login', 56 56 url: '/login',
templateUrl: 'templates/login.html', 57 57 templateUrl: 'templates/login.html',
controller: 'LoginController' 58 58 controller: 'LoginController'
}). 59 59 }).
state('logout', { 60 60 state('logout', {
resolve: auth_resolve, 61 61 resolve: auth_resolve,
url: '/logout', 62 62 url: '/logout',
templateUrl: 'templates/logout.html', 63 63 templateUrl: 'templates/logout.html',
controller: 'LogoutController' 64 64 controller: 'LogoutController'
}). 65 65 }).
state('root', { 66 66 state('root', {
resolve: auth_resolve, 67 67 resolve: auth_resolve,
url: '/', 68 68 url: '',
templateUrl: 'templates/root.html', 69 69 templateUrl: 'templates/root.html',
controller: 'RootController' 70 70 controller: 'RootController'
}). 71 71 }).
state('feed', { 72 72 state('feed', {
resolve: auth_resolve, 73 73 resolve: auth_resolve,
url: '/feed/{sectionId}', 74 74 url: '/feed/{sectionId}',
templateUrl: 'templates/feed.html', 75 75 templateUrl: 'templates/feed.html',
controller: 'FeedController' 76 76 controller: 'FeedController'
}). 77 77 }).
state('cardlist', { 78 78 state('cardlist', {
resolve: auth_resolve, 79 79 resolve: auth_resolve,
url: '/cards/{sectionId}', 80 80 url: '/cards/{sectionId}',
templateUrl: 'templates/cardlist.html', 81 81 templateUrl: 'templates/cardlist.html',
controller: 'CardListController' 82 82 controller: 'CardListController'
}). 83 83 }).
state('addclass', { 84 84 state('addclass', {
resolve: auth_resolve, 85 85 resolve: auth_resolve,
url: '/addclass', 86 86 url: '/addclass',
templateUrl: 'templates/addclass.html', 87 87 templateUrl: 'templates/addclass.html',
controller: 'ClassAddController' 88 88 controller: 'ClassAddController'
}). 89 89 }).
state('deck', { 90 90 state('deck', {
resolve: auth_resolve, 91 91 resolve: auth_resolve,
url: '/deck/{sectionId}', 92 92 url: '/deck/{sectionId}',
templateUrl: 'templates/deck.html', 93 93 templateUrl: 'templates/deck.html',
controller: 'DeckController' 94 94 controller: 'DeckController'
}). 95 95 }).
state('study', { 96 96 state('study', {
resolve: auth_resolve, 97 97 resolve: auth_resolve,
url: '/study', 98 98 url: '/study',
templateUrl: 'templates/study.html', 99 99 templateUrl: 'templates/study.html',
controller: 'StudyController' 100 100 controller: 'StudyController'
}). 101 101 }).
state('flashcard', { 102 102 state('flashcard', {
resolve: auth_resolve, 103 103 resolve: auth_resolve,
url: '/flashcard', 104 104 url: '/flashcard',
templateUrl: 'templates/flashcard.html', 105 105 templateUrl: 'templates/flashcard.html',
controller: 'FlashcardController' 106 106 controller: 'FlashcardController'
}). 107 107 }).
state('requestpasswordreset', { 108 108 state('requestpasswordreset', {
url: '/requestpasswordreset', 109 109 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 110 110 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 111 111 controller: 'RequestResetController'
}). 112 112 }).
state('resetpassword', { 113 113 state('resetpassword', {
url: '/resetpassword/{uid}/{token}', 114 114 url: '/resetpassword/{uid}/{token}',
templateUrl: 'templates/resetpassword.html', 115 115 templateUrl: 'templates/resetpassword.html',
controller: 'ResetPasswordController' 116 116 controller: 'ResetPasswordController'
}). 117 117 }).
state('verifyemail', { 118 118 state('verifyemail', {
resolve: auth_resolve, 119 119 resolve: auth_resolve,
url: '/verifyemail/{key}', 120 120 url: '/verifyemail/{key}',
templateUrl: 'templates/verifyemail.html', 121 121 templateUrl: 'templates/verifyemail.html',
controller: 'VerifyEmailController' 122 122 controller: 'VerifyEmailController'
}); 123 123 });
} 124 124 }
]). 125 125 ]).
run(['$rootScope', '$state', '$stateParams', '$location', 'UserService', 126 126 run(['$rootScope', '$state', '$stateParams', '$location', 'UserService',
function($rootScope, $state, $stateParams, $location, UserService) { 127 127 function($rootScope, $state, $stateParams, $location, UserService) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) { 128 128 $rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
if (UserService.isLoggedIn()) return console.log('no login required; going straight to ' + toState.name); 129 129 if (UserService.isLoggedIn()) return console.log('no login required; going straight to ' + toState.name);
if (toState.name == 'login') return console.log('we are going to login anyway; just let it happen :)'); 130 130 if (toState.name == 'login') return console.log('we are going to login anyway; just let it happen :)');
if (!UserService.isUserResolved()) return console.log('user not yet resolved; hold off'); 131 131 if (!UserService.isUserResolved()) return console.log('user not yet resolved; hold off');
$rootScope.returnToState = toState; 132 132 $rootScope.returnToState = toState;
$rootScope.returnToStateParams = toStateParams; 133 133 $rootScope.returnToStateParams = toStateParams;
console.log('going to ' + toState.name + ' after login'); 134 134 console.log('going to ' + toState.name + ' after login');
$state.go('login'); 135 135 $state.go('login');
}); 136 136 });
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 137 137 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
console.log('failed to change state: ' + error); 138 138 console.log('failed to change state: ' + error);
$state.go('login'); 139 139 $state.go('login');
}); 140 140 });
} 141 141 }
home.html View file @ f0541be
<!DOCTYPE html> 1 1 <!DOCTYPE html>
<html ng-app="flashy"> 2 2 <html ng-app="flashy">
<base href="/app/"> 3 3 <base href="/app/">
<head> 4 4 <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" 6 6 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 7 7 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
8 8
<link rel="stylesheet" href="styles/flashier.css"/> 9 9 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 10 10 <link rel="stylesheet" href="styles/flashy.css"/>
<link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' 11 11 <link href='https://fonts.googleapis.com/css?family=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
rel='stylesheet' type='text/css'> 12 12 rel='stylesheet' type='text/css'>
<title>Flashy</title> 13 13 <title>Flashy</title>
</head> 14 14 </head>
<header> 15 15 <header>
16 16
<!--<a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i 17
class="medium mdi-navigation-menu"></i></a> 18
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed ng-cloak"> 19
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 20
21
<h1>Flashy</h1> 22
</a></li> 23
<li class="no-padding"> 24
<ul class="collapsible" data-collapsible="accordion"> 25
<li class="bold"> 26
<a class="collapsible-header black-text">Classes</a> 27
</li> 28
<div class="collapsible-body" style="display: block"> 29
<ul> 30
<li ui-sref-active="active" ng-repeat="section in sections"> 31
<a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 32
</li> 33
</ul> 34
</div> 35
</ul> 36
</li> 37
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 38
<li class="bold"><a ui-sref="study">Study</a></li> 39
<li class="bold"><a ui-sref="logout">Logout</a></li> 40
</ul>--> 41
42
43
</header> 44 17 </header>
<body ng-controller="RootController"> 45 18 <body ng-controller="RootController">
46 19
<!-- Menu Bar --> 47 20 <!-- Menu Bar -->
<nav> 48 21 <nav>
<div class="nav-wrapper"> 49 22 <div class="nav-wrapper">
23 <ul ng-show="sectionId && isLoggedIn" class="left">
24 <li ui-sref-active="active"><a ui-sref="feed({sectionId:sectionId})" class="tooltipped" data-position="bottom"
25 data-delay="50" data-tooltip="Feed"><i
26 class="mdi-action-view-module"></i></a></li>
27 <li ui-sref-active="active"><a ui-sref="deck({sectionId:sectionId})" class="tooltipped" data-position="bottom"
28 data-delay="50" data-tooltip="Deck"><i
29 class="mdi-action-view-carousel"></i></a></li>
30 <li ui-sref-active="active"><a ui-sref="cardlist({sectionId:sectionId})" class="tooltipped" data-position="bottom"
31 data-delay="50" data-tooltip="Card List"><i
32 class="mdi-action-view-list"></i></a></li>
33 </ul>
<a href="#" class="brand-logo center">Flashy</a> 50 34 <a href="#" class="brand-logo center">Flashy</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a> 51 35 <a href="#" data-activates="mobile-demo" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
<ul ng-show="isLoggedIn" id="nav-mobile" class="right hide-on-med-and-down"> 52 36 <ul ng-show="isLoggedIn" id="nav-mobile" class="right hide-on-med-and-down">
<!-- User's classes dropdown --> 53 37 <!-- User's classes dropdown -->
<ul id="dropdown1" class="dropdown-content"> 54 38 <ul id="dropdown1" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in sections"> 55 39 <li ui-sref-active="active" ng-repeat="section in sections">
<a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 56 40 <a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 57 41 </li>
<li class="divider"></li> 58 42 <li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li> 59 43 <li><a ui-sref="addclass">Add Class</a></li>
</ul> 60 44 </ul>
61 45
<!--<ul ui-sref-active="active" >--> 62
<!--<li><a ui-sref="deck">Deck</a></li>--> 63
<!--</ul>--> 64
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Classes<i 65 46 <li><a class="dropdown-button" href="#!" data-activates="dropdown1">Classes<i
class="mdi-navigation-arrow-drop-down right"></i></a></li> 66 47 class="mdi-navigation-arrow-drop-down right"></i></a></li>
<li><a ui-sref="study">Study</a></li> 67 48 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="logout">Logout</a></li> 68 49 <li><a ui-sref="logout">Logout</a></li>
</ul> 69 50 </ul>
70 51
<!-- Slide-in side-nav for small screens --> 71 52 <!-- Slide-in side-nav for small screens -->
<ul class="side-nav" id="mobile-demo"> 72 53 <ul class="side-nav" id="mobile-demo">
<!-- Collapsible menu for all the User's classes --> 73 54 <!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion"> 74 55 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 75 56 <li class="bold">
<a class="collapsible-header black-text"> 76 57 <a class="collapsible-header black-text">
Classes<i class="mdi-navigation-arrow-drop-down right"></i> 77 58 Classes<i class="mdi-navigation-arrow-drop-down right"></i>
</a> 78 59 </a>
</li> 79 60 </li>
<div class="collapsible-body" style="display: block"> 80 61 <div class="collapsible-body" style="display: block">
<ul> 81 62 <ul>
<li ui-sref-active="active" ng-repeat="section in sections"> 82 63 <li ng-repeat="section in sections">
<a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 83 64 <a ui-sref-active="active" class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li> 84 65 </li>
<hr> 85 66 <hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add"> Add Class</i></a></li> 86 67 <li><a ui-sref="addclass"><i class="tiny mdi-content-add"> Add Class</i></a></li>
</ul> 87 68 </ul>
</div> 88 69 </div>
</ul> 89 70 </ul>
<li><a ui-sref="study">Study</a></li> 90 71 <li><a ui-sref="study">Study</a></li>
<li><a ui-sref="logout">Logout</a></li> 91 72 <li><a ui-sref="logout">Logout</a></li>
</ul> 92 73 </ul>
</div> 93 74 </div>
</nav> 94 75 </nav>
95
<main ui-view></main> 96 76 <main ui-view></main>
97 77
</body> 98 78 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 99 79 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script> 100 80 <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.14/angular-ui-router.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script> 101 81 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-cookies.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> 102 82 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script> 103 83 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 104 84 <script type="text/javascript" src="scripts/jquery.collapsible.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script> 105 85 <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script> 106 86 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script> 107 87 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script> 108 88 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
109 89
110 90
<script src="config.js"></script> 111 91 <script src="config.js"></script>
112 92
<!-- Controllers --> 113 93 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 114 94 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 115 95 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 116 96 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 117 97 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 118 98 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 119 99 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 120 100 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 121 101 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 122 102 <script src="scripts/ResetPasswordController.js"></script>
scripts/FeedController.js View file @ f0541be
angular.module('flashy.FeedController', ['ui.router']). 1 1 angular.module('flashy.FeedController', ['ui.router']).
2 2 controller('FeedController', function ($scope, $rootScope, $stateParams, $state, $http) {
controller('FeedController', ['$scope', '$stateParams', '$state', '$http', function($scope, $stateParams, $state, $http) { 3
4
5
console.log('Hello from feed'); 6 3 console.log('Hello from feed');
sectionId = $stateParams.sectionId; 7 4 sectionId = $stateParams.sectionId;
5 $rootScope.sectionId = sectionId;
$scope.cards = []; 8 6 $scope.cards = [];
9 7
var loc = window.location, new_uri; 10 8 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 11 9 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 12 10 new_uri = 'wss:';
} else { 13 11 } else {
new_uri = 'ws:'; 14 12 new_uri = 'ws:';
} 15 13 }
new_uri += '//' + loc.host; 16 14 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 17 15 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
18 16
ws.onopen = function() { 19 17 ws.onopen = function () {
console.log('websocket connected'); 20 18 console.log('websocket connected');
}; 21 19 };
ws.onmessage = function(e) { 22 20 ws.onmessage = function (e) {
console.log('got websocket message ' + e.data); 23 21 console.log('got websocket message ' + e.data);
$scope.refreshCards(); 24 22 $scope.refreshCards();
}; 25 23 };
ws.onerror = function(e) { 26 24 ws.onerror = function (e) {
console.error(e); 27 25 console.error(e);
}; 28 26 };
ws.onclose = function(e) { 29 27 ws.onclose = function (e) {
console.log('connection closed'); 30 28 console.log('connection closed');
}; 31 29 };
32 30
$http.get('/api/sections/' + sectionId + '/feed/'). 33 31 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 34 32 success(function (data) {
console.log(data); 35 33 console.log(data);
$scope.cards = data; 36 34 $scope.cards = data;
}). 37 35 }).
error(function(err) { 38 36 error(function (err) {
console.log('pulling feed failed'); 39 37 console.log('pulling feed failed');
}); 40 38 });
41 39
$scope.viewDeck = function() { 42 40 $scope.viewDeck = function () {
$state.go('deck', {sectionId: sectionId}); 43 41 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 44 42 console.log('go to deck');
}; 45 43 };
46 44
$scope.pushCard = function() { 47 45 $scope.pushCard = function () {
var pushed = new Date(Date.now()); 48 46 var pushed = new Date(Date.now());
var i = 0; 49 47 var i = 0;
var blanks = []; 50 48 var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function(node) { 51 49 $('#new-card-input')[0].childNodes.forEach(function (node) {
node = $(node)[0]; 52 50 node = $(node)[0];
console.log(node); 53 51 console.log(node);
if (node.tagName == 'B') { 54 52 if (node.tagName == 'B') {
text = $(node).text(); 55 53 text = $(node).text();
blanks.push([i, i + text.length]); 56 54 blanks.push([i, i + text.length]);
i += text.length; 57 55 i += text.length;
} else { 58 56 } else {
i += node.data.length; 59 57 i += node.data.length;
} 60 58 }
}); 61 59 });
console.log(blanks); 62 60 console.log(blanks);
text = $('#new-card-input').text(); 63 61 text = $('#new-card-input').text();
var myCard = { 64 62 var myCard = {
'text': text, 65 63 'text': text,
'material_date': pushed, 66 64 'material_date': pushed,
'mask': JSON.stringify(blanks), 67 65 'mask': JSON.stringify(blanks),
section: sectionId 68 66 section: sectionId
}; 69 67 };
$http.post('/api/flashcards/', myCard). 70 68 $http.post('/api/flashcards/', myCard).
success(function(data) { 71 69 success(function (data) {
console.log('pushed a card!'); 72 70 console.log('pushed a card!');
listenForC = true; 73 71 listenForC = true;
}). 74 72 }).
error(function(error) { 75 73 error(function (error) {
console.log('something went wrong pushing a card!'); 76 74 console.log('something went wrong pushing a card!');
}); 77 75 });
78 76
$('#new-card-input').html(''); 79 77 $('#new-card-input').html('');
}; 80 78 };
81 79
$scope.refreshCards = function() { 82 80 $scope.refreshCards = function () {
$http.get('/api/sections/' + sectionId + '/feed/'). 83 81 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 84 82 success(function (data) {
console.log(data); 85 83 console.log(data);
$scope.cards = data; 86 84 $scope.cards = data;
console.log('success in refresh cards...'); 87 85 console.log('success in refresh cards...');
}). 88 86 }).
error(function(err) { 89 87 error(function (err) {
console.log('refresh fail'); 90 88 console.log('refresh fail');
}); 91 89 });
}; 92 90 };
93 91
/* Key bindings for the whole feed window. Hotkey it up! */ 94 92 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 95 93 var listenForC = true;
96 94
// Need to pass these options into openmodal and leanmodal, 97 95 // Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called 98 96 // otherwise the ready handler doesn't get called
99 97
modal_options = { 100 98 modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal 101 99 dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background 102 100 opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration 103 101 in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration 104 102 out_duration: 200, // Transition out duration
ready: function() { 105 103 ready: function () {
listenForC = false; 106 104 listenForC = false;
console.log('modal OPENING'); 107 105 console.log('modal OPENING');
$('#new-card-input').focus(); 108 106 $('#new-card-input').focus();
}, 109 107 },
complete: function() { 110 108 complete: function () {
listenForC = true; 111 109 listenForC = true;
console.log('modal done, closing'); 112 110 console.log('modal done, closing');
$('#new-card-input').blur(); 113 111 $('#new-card-input').blur();
} 114 112 }
}; 115 113 };
116 114
$(document).keydown(function(e) { 117 115 $(document).keydown(function (e) {
var keyed = e.which; 118 116 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" or "C" for compose 119 117 if (keyed == 67 && listenForC) { // "c" or "C" for compose
$('#newCard').openModal(modal_options); 120 118 $('#newCard').openModal(modal_options);
e.preventDefault(); 121 119 e.preventDefault();
listenForC = false; 122 120 listenForC = false;
return false; 123 121 return false;
} else if (keyed == 27) { // enter or esc, respectively 124 122 } else if (keyed == 27) { // enter or esc, respectively
listenForC = true; 125 123 listenForC = true;
document.getElementById('new-card-input').value = ''; 126 124 document.getElementById('new-card-input').value = '';
} 127 125 }
}); 128 126 });
$scope.flashcard = ''; 129 127 $scope.flashcard = '';
$scope.text = ''; 130 128 $scope.text = '';
var selected_start = 0; 131 129 var selected_start = 0;
var selected_end = 0; 132 130 var selected_end = 0;
$(document).ready(function() { 133 131 $(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 134 132 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options); 135 133 $('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function(e) { 136 134 $('#new-card-input').on('keydown', function (e) {
if (e.which == 13) { 137 135 if (e.which == 13) {
e.preventDefault(); 138 136 e.preventDefault();
$scope.pushCard(); 139 137 $scope.pushCard();
$('#newCard').closeModal(modal_options); 140 138 $('#newCard').closeModal(modal_options);
return false; 141 139 return false;
} 142 140 }
}); 143 141 });
$('#new-card-input').on('mouseup', function() { 144 142 $('#new-card-input').on('mouseup', function () {
console.log('got selection: ' + selected_start); 145 143 console.log('got selection: ' + selected_start);
}); 146 144 });
$('button#blank-selected').click(function() { 147 145 $('button#blank-selected').click(function () {
console.log(window.getSelection()); 148 146 console.log(window.getSelection());
document.execCommand('bold'); 149 147 document.execCommand('bold');
}); 150 148 });
}); 151 149 });
152 150
$scope.$on('$destroy', function() { 153 151 $scope.$on('$destroy', function () {
ws.close(); 154 152 ws.close();
$(document).off('keydown'); 155 153 $(document).off('keydown');
}); 156 154 });
157 155
}]); 158 156 });
159 157
scripts/RootController.js View file @ f0541be
angular.module('flashy.RootController', ['ui.router']). 1 1 angular.module('flashy.RootController', ['ui.router']).
2 2
controller('RootController', ['$rootScope', '$scope', '$state', 'UserService', function($rootScope, $scope, $state, UserService) { 3 3 controller('RootController', function ($rootScope, $scope, $state, UserService) {
//UserService.getUserData(); 4
//$('#top').collapsible('accordion'); 5
//$('.button-collapse').sideNav(); 6
if (UserService.isLoggedIn()) $state.go('login'); 7
else $state.go('addclass'); 8
$rootScope.isLoggedIn = false; 9 4 $rootScope.isLoggedIn = false;
console.log(UserService._user); 10 5 $rootScope.sectionId = 0;
UserService.getUserData().then(function(data) { 11 6 UserService.getUserData().then(function (data) {
console.log(data); 12 7 console.log(data);
$rootScope.user = data; 13 8 $rootScope.user = data;
}); 14 9 });
$('.button-collapse').sideNav({ 15 10 $('.button-collapse').sideNav({
menuWidth: 240, // Default is 240 16 11 menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin 17 12 edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor 18 13 closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
} 19 14 }
); 20 15 );
}]); 21 16 });
22 17
templates/cardlist.html View file @ f0541be
<div class="row"> 1
<a class="btn" ng-click="viewFeed()" style="margin-top: 15px">View Feed</a> 2
</div> 3
4
<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>--> 5 1 <!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
<div class="row"> 6 2 <div class="row">
<table> 7 3 <table>
<thead> 8 4 <thead>
<tr> 9 5 <tr>
<th data-field="id">Name</th> 10 6 <th data-field="id">Name</th>
</tr> 11 7 </tr>
</thead> 12 8 </thead>
13 9
<tbody> 14 10 <tbody>
<tr ng-repeat="card in cards"> 15 11 <tr ng-repeat="card in cards">
<td>{{card.text}}</td> 16 12 <td>{{card.text}}</td>
</tr> 17 13 </tr>
</tbody> 18 14 </tbody>
templates/deck.html View file @ f0541be
<div class="row"> 1 1 <!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
<a class="btn" ui-sref="feed({sectionId:{{sectionId}}})" style="margin-top: 15px">View Feed</a> 2
</div> 3
4
<!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>--> 5
<div class="row"> 6 2 <div class="row">
<div ng-repeat="card in cards"> 7 3 <div ng-repeat="card in cards">
<flashcard flashcard-obj="card" refresh="refreshCards()"/> 8 4 <flashcard flashcard-obj="card" refresh="refreshCards()"/>
9 5
<!-- 10 6 <!--
<div class="col s6"> 11 7 <div class="col s6">
<div class="card"> 12 8 <div class="card">
<div class="card-content"> 13 9 <div class="card-content">
<p>{{card.content}}</p> 14 10 <p>{{card.content}}</p>
</div> 15 11 </div>
16 12
<div class="card-action"> 17 13 <div class="card-action">
<i class="small mdi-action-delete" ng-click="removeCard(card)"></i> 18 14 <i class="small mdi-action-delete" ng-click="removeCard(card)"></i>
<a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a> 19 15 <a class="modal-trigger" href="#editModal"><i class="small mdi-editor-border-color modal-trigger" ng-click="editCard(card)"></i></a>
<!-- Modal Structure --> 20 16 <!-- Modal Structure -->
<div id="editModal" class="modal modal-fixed-footer"> 21 17 <div id="editModal" class="modal modal-fixed-footer">
<div class="modal-content"> 22 18 <div class="modal-content">
<div class="row"> 23 19 <div class="row">
<form class="col s12"> 24 20 <form class="col s12">
<div class="row"> 25 21 <div class="row">
<div class="input-field col s6"> 26 22 <div class="input-field col s6">
<i class="mdi-editor-mode-edit prefix"></i> 27 23 <i class="mdi-editor-mode-edit prefix"></i>
<textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea> 28 24 <textarea id="icon_prefix2" class="materialize-textarea" ng-model="$parent.editableContent">{{card.content}}</textarea>
<label for="icon_prefix2"></label> 29 25 <label for="icon_prefix2"></label>
</div> 30 26 </div>
</div> 31 27 </div>
</form> 32 28 </form>
</div> 33 29 </div>
</div> 34 30 </div>
<div class="modal-footer"> 35 31 <div class="modal-footer">
<a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a> 36 32 <a href="#!" class="modal-action modal-close waves-effect waves-green btn-flat">Done</a>
</div> 37 33 </div>
</div> 38 34 </div>
templates/feed.html View file @ f0541be
<div class="row"> 1
<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a> 2
</div> 3
4 1
<!--cards--> 5
<div class="row"> 6 2 <div class="row">
<div ng-repeat="card in cards"> 7 3 <div ng-repeat="card in cards">
<flashcard flashcard-obj="card" refresh="refreshCards()"/> 8 4 <flashcard flashcard-obj="card" refresh="refreshCards()"/>
</div> 9 5 </div>
</div> 10 6 </div>
11 7
12 8
<!--Lil plus button in corner--> 13 9 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 24px; right: 24px;"> 14 10 <div class="fixed-action-btn" style="bottom: 24px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard"> 15 11 <a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">
<i class="large mdi-content-add"></i> 16 12 <i class="large mdi-content-add"></i>
</a> 17 13 </a>
</div> 18 14 </div>
19 15
<div id="newCard" class="modal bottom-sheet"> 20 16 <div id="newCard" class="modal bottom-sheet">
<form id="new-card-form"> 21 17 <form id="new-card-form">
<div class="modal-content"> 22 18 <div class="modal-content">
<div class="input-field"> 23 19 <div class="input-field">
<!--<label id="newCardSign" for="newCard">New Flashcard Text</label>--> 24 20 <!--<label id="newCardSign" for="newCard">New Flashcard Text</label>-->
<div id="new-card-input" contenteditable> 25 21 <div id="new-card-input" contenteditable>
26 22
</div> 27 23 </div>
</div> 28 24 </div>
</div> 29 25 </div>
<div class="modal-footer"> 30 26 <div class="modal-footer">
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit 31 27 <button class="btn modal-close" type="submit" ng-click="pushCard()">Submit
<i class="mdi-content-send right"></i> 32 28 <i class="mdi-content-send right"></i>