110swag / flashy-frontend

Download as
Browse Code ยป

Commit 54c942ddfc0a2d78857202c9d3d9933fdeea9a65

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

recovered cardlist view, committing before I lose!

Showing 5 changed files with 55 additions and 3 deletions Inline Diff

config.js View file @ 54c942d
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',
14 'flashy.CardListController',
'ngCookies']). 14 15 'ngCookies']).
config(['$stateProvider', '$urlRouterProvider', '$httpProvider', 15 16 config(['$stateProvider', '$urlRouterProvider', '$httpProvider',
'$locationProvider', 16 17 '$locationProvider',
function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) { 17 18 function($stateProvider, $urlRouterProvider, $httpProvider, $locationProvider) {
'use strict'; 18 19 'use strict';
$httpProvider.defaults.withCredentials = true; 19 20 $httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.xsrfCookieName = 'csrftoken'; 20 21 $httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; 21 22 $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$locationProvider.html5Mode(true); 22 23 $locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/home'); 23 24 $urlRouterProvider.otherwise('/home');
var auth_resolve = { 24 25 var auth_resolve = {
authorize: ['$q', 'UserService', 25 26 authorize: ['$q', 'UserService',
function($q, UserService) { 26 27 function($q, UserService) {
console.log('resolving user before continuing'); 27 28 console.log('resolving user before continuing');
return UserService.getUserData(); 28 29 return UserService.getUserData();
} 29 30 }
] 30 31 ]
}; 31 32 };
$stateProvider. 32 33 $stateProvider.
state('login', { 33 34 state('login', {
url: '/login', 34 35 url: '/login',
templateUrl: 'templates/login.html', 35 36 templateUrl: 'templates/login.html',
controller: 'LoginController' 36 37 controller: 'LoginController'
}). 37 38 }).
state('logout', { 38 39 state('logout', {
resolve: auth_resolve, 39 40 resolve: auth_resolve,
url: '/logout', 40 41 url: '/logout',
templateUrl: 'templates/logout.html', 41 42 templateUrl: 'templates/logout.html',
controller: 'LogoutController' 42 43 controller: 'LogoutController'
}). 43 44 }).
state('root', { 44 45 state('root', {
resolve: auth_resolve, 45 46 resolve: auth_resolve,
url: '/', 46 47 url: '/',
templateUrl: 'templates/root.html', 47 48 templateUrl: 'templates/root.html',
controller: 'RootController' 48 49 controller: 'RootController'
}). 49 50 }).
state('feed', { 50 51 state('feed', {
resolve: auth_resolve, 51 52 resolve: auth_resolve,
url: '/feed/{sectionId}', 52 53 url: '/feed/{sectionId}',
templateUrl: 'templates/feed.html', 53 54 templateUrl: 'templates/feed.html',
controller: 'FeedController' 54 55 controller: 'FeedController'
56 }).
57 state('cardlist', {
58 resolve: auth_resolve,
59 url: '/cards/{sectionId}',
60 templateUrl: 'templates/cardlist.html',
61 controller: 'CardListController'
}). 55 62 }).
state('addclass', { 56 63 state('addclass', {
resolve: auth_resolve, 57 64 resolve: auth_resolve,
url: '/addclass', 58 65 url: '/addclass',
templateUrl: 'templates/addclass.html', 59 66 templateUrl: 'templates/addclass.html',
controller: 'ClassAddController' 60 67 controller: 'ClassAddController'
}). 61 68 }).
state('deck', { 62 69 state('deck', {
resolve: auth_resolve, 63 70 resolve: auth_resolve,
url: '/deck/{sectionId}', 64 71 url: '/deck/{sectionId}',
templateUrl: 'templates/deck.html', 65 72 templateUrl: 'templates/deck.html',
controller: 'DeckController' 66 73 controller: 'DeckController'
}). 67 74 }).
state('study', { 68 75 state('study', {
resolve: auth_resolve, 69 76 resolve: auth_resolve,
url: '/study', 70 77 url: '/study',
templateUrl: 'templates/study.html', 71 78 templateUrl: 'templates/study.html',
controller: 'StudyController' 72 79 controller: 'StudyController'
}). 73 80 }).
state('flashcard', { 74 81 state('flashcard', {
resolve: auth_resolve, 75 82 resolve: auth_resolve,
url: '/flashcard', 76 83 url: '/flashcard',
templateUrl: 'templates/flashcard.html', 77 84 templateUrl: 'templates/flashcard.html',
controller: 'FlashcardController' 78 85 controller: 'FlashcardController'
}). 79 86 }).
state('requestpasswordreset', { 80 87 state('requestpasswordreset', {
url: '/requestpasswordreset', 81 88 url: '/requestpasswordreset',
templateUrl: 'templates/requestpasswordreset.html', 82 89 templateUrl: 'templates/requestpasswordreset.html',
controller: 'RequestResetController' 83 90 controller: 'RequestResetController'
}). 84 91 }).
state('resetpassword', { 85 92 state('resetpassword', {
url: '/resetpassword/{uid}/{token}', 86 93 url: '/resetpassword/{uid}/{token}',
templateUrl: 'templates/resetpassword.html', 87 94 templateUrl: 'templates/resetpassword.html',
controller: 'ResetPasswordController' 88 95 controller: 'ResetPasswordController'
}). 89 96 }).
state('verifyemail', { 90 97 state('verifyemail', {
resolve: auth_resolve, 91 98 resolve: auth_resolve,
url: '/verifyemail/{key}', 92 99 url: '/verifyemail/{key}',
templateUrl: 'templates/verifyemail.html', 93 100 templateUrl: 'templates/verifyemail.html',
controller: 'VerifyEmailController' 94 101 controller: 'VerifyEmailController'
}); 95 102 });
}]).run(['$rootScope', '$state', '$stateParams', '$location', 'UserService', 96 103 }]).run(['$rootScope', '$state', '$stateParams', '$location', 'UserService',
function($rootScope, $state, $stateParams, $location, UserService) { 97 104 function($rootScope, $state, $stateParams, $location, UserService) {
$rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) { 98 105 $rootScope.$on('$stateChangeStart', function(event, toState, toStateParams) {
if (UserService.isLoggedIn()) return console.log('no login required; going straight to ' + toState.name); 99 106 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 :)'); 100 107 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'); 101 108 if (!UserService.isUserResolved()) return console.log('user not yet resolved; hold off');
$rootScope.returnToState = toState; 102 109 $rootScope.returnToState = toState;
$rootScope.returnToStateParams = toStateParams; 103 110 $rootScope.returnToStateParams = toStateParams;
console.log('going to ' + toState.name + ' after login'); 104 111 console.log('going to ' + toState.name + ' after login');
$state.go('login'); 105 112 $state.go('login');
}); 106 113 });
$rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) { 107 114 $rootScope.$on('$stateChangeError', function(event, toState, toParams, fromState, fromParams, error) {
console.log('failed to change state: ' + error); 108 115 console.log('failed to change state: ' + error);
$state.go('login'); 109 116 $state.go('login');
}); 110 117 });
} 111 118 }
]); 112 119 ]);
home.html View file @ 54c942d
<!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>
<link rel="stylesheet" 5 5 <link rel="stylesheet"
href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css"> 6 6 href="https://ajax.googleapis.com/ajax/libs/angular_material/0.9.0/angular-material.min.css">
7 7
<link rel="stylesheet" href="styles/flashier.css"/> 8 8 <link rel="stylesheet" href="styles/flashier.css"/>
<link rel="stylesheet" href="styles/flashy.css"/> 9 9 <link rel="stylesheet" href="styles/flashy.css"/>
<link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' 10 10 <link href='https://fonts.googleapis.com/css?family=Changa+One:400,400italic|Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic'
rel='stylesheet' type='text/css'> 11 11 rel='stylesheet' type='text/css'>
</head> 12 12 </head>
<header> 13 13 <header>
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed"> 14 14 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed">
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 15 15 <li class="logo"><a href="//flashy.cards/" id="logo-container">
16 16
<h1>Flashy</h1> 17 17 <h1>Flashy</h1>
</a></li> 18 18 </a></li>
<li class="no-padding"> 19 19 <li class="no-padding">
<ul class="collapsible" data-collapsible="accordion"> 20 20 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 21 21 <li class="bold">
<a class="collapsible-header black-text">Classes</a> 22 22 <a class="collapsible-header black-text">Classes</a>
</li> 23 23 </li>
<div class="collapsible-body" style="display: block"> 24 24 <div class="collapsible-body" style="display: block">
<ul> 25 25 <ul>
<li ng-repeat="section in sections"> 26 26 <li ng-repeat="section in sections">
<a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 27 27 <a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
</li> 28 28 </li>
</ul> 29 29 </ul>
</div> 30 30 </div>
</ul> 31 31 </ul>
</li> 32 32 </li>
<!--<li class="bold"> 33 33 <!--<li class="bold">
<a>Classes:</a></li> 34 34 <a>Classes:</a></li>
<div ng-repeat="section in sections"> 35 35 <div ng-repeat="section in sections">
<li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 36 36 <li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
</li> 37 37 </li>
</div>--> 38 38 </div>-->
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 39 39 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
<li class="bold"><a ui-sref="study">Study</a></li> 40 40 <li class="bold"><a ui-sref="study">Study</a></li>
<li class="bold"><a ui-sref="logout">Logout</a></li> 41 41 <li class="bold"><a ui-sref="logout">Logout</a></li>
</ul> 42 42 </ul>
<a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a> 43 43 <a href="#" data-activates="sidebar" class="button-collapse"><i class="medium mdi-navigation-menu"></i></a>
</header> 44 44 </header>
<body ng-controller="RootController"> 45 45 <body ng-controller="RootController">
46 46
<main> 47 47 <main>
<div class="" ui-view></div> 48 48 <div class="" ui-view></div>
</main> 49 49 </main>
50 50
</body> 51 51 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 52 52 <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> 53 53 <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> 54 54 <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> 55 55 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.min.js"></script> 56 56 <script type="text/javascript" src="scripts/materialize.min.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 57 57 <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> 58 58 <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> 59 59 <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> 60 60 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
61 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
61 62
63
<script src="config.js"></script> 62 64 <script src="config.js"></script>
63 65
<!-- Controllers --> 64 66 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 65 67 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 66 68 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 67 69 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 68 70 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 69 71 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 70 72 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 71 73 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 72 74 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 73 75 <script src="scripts/ResetPasswordController.js"></script>
76 <script src="scripts/CardListController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 74 77 <script src="scripts/VerifyEmailController.js"></script>
<!--<script src="scripts/SidebarController.js"></script>--> 75 78 <!--<script src="scripts/SidebarController.js"></script>-->
76 79
scripts/CardListController.js View file @ 54c942d
File was created 1 angular.module('flashy.CardListController', ['ui.router']).
2 controller('CardListController', ['$scope', '$state', '$http', '$stateParams',
3 function ($scope, $state, $http, $stateParams) {
4 // cards array
5 sectionId = $stateParams.sectionId;
6 $scope.cards = [];
7
8 $http.get('/api/sections/' + sectionId + '/flashcards/').
9 success(function (data) {
10 console.log(data);
11 $scope.cards = data;
12 }).
13 error(function (err) {
14 console.log('pulling feed failed');
15 });
16 $scope.viewFeed = function () {
17 $state.go('feed', {sectionId: sectionId});
18 console.log('go to feed');
19 };
templates/cardlist.html View file @ 54c942d
File was created 1 <div class="row">
2 <a class="btn" ng-click="viewFeed()" style="margin-top: 15px">View Feed</a>
3 </div>
4
5 <!--<i class="small mdi-content-sort" ng-click="filter()">Filter</i>-->
6 <div class="row">
7 <table>
8 <thead>
9 <tr>
10 <th data-field="id">Name</th>
11 </tr>
12 </thead>
13
14 <tbody>
15 <tr ng-repeat="card in cards">
16 <td>{{card.text}}</td>
17 </tr>
18 </tbody>
templates/flashcard.html View file @ 54c942d
<div class="card flashy smallify" ng-init="startShrink = false" 1 1 <div class="card flashy smallify" ng-init="startShrink = false"
ng-class="{'shrinky': startShrink}"> 2 2 ng-class="{'shrinky': startShrink}">
<div class="card-content"> 3 3 <div class="card-content">
<p>{{flashcard.text}}</p> 4 4 <p>{{flashcard.text}}</p>
</div> 5 5 </div>
<div class="card-overlay"> 6 6 <div class="card-overlay">
<div class="top-box no-user-select" 7 7 <div class="top-box no-user-select"
ng-click="pullCard(flashcard)"> 8 8 ng-click="pullCard(flashcard)">
<div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div> 9 9 <div class="center-me"><i class="mdi-content-add-circle-outline medium"></i></div>
</div> 10 10 </div>
11 11
<div class="bottom-box no-user-select"> 12 12 <div class="bottom-box no-user-select">
<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>
<div class="right-box" ng-click="unpullCard(flashcard); 16 16 <div class="right-box" ng-click="unpullCard(flashcard);
hideCard(flashcard)"> 17 17 hideCard(flashcard)">
<div class="center-me"><i class="mdi-action-delete small"></i></div> 18 18 <div class="center-me"><i class="mdi-action-delete small"></i></div>
</div> 19 19 </div>
20 20
</div> 21 21 </div>
</div> 22 22 </div>
</div> 23 23 </div>