110swag / flashy-frontend

Download as
Browse Code ยป

Commit 807399a02054ed60bccc5e853e21b7a59d42423a

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

push dialog hopefully focuses properly now?

Showing 3 changed files with 30 additions and 25 deletions Inline Diff

home.html View file @ 807399a
<!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=Titillium+Web:200,200italic,300,600,400,900,700,400italic,700italic,300italic,600italic' 10 10 <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'> 11 11 rel='stylesheet' type='text/css'>
<title>Flashy</title> 12 12 <title>Flashy</title>
</head> 13 13 </head>
<header> 14 14 <header>
<a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i 15 15 <a href="#" style="position:absolute;top:0;left:0;" data-activates="sidebar" class="button-collapse"><i
class="medium mdi-navigation-menu"></i></a> 16 16 class="medium mdi-navigation-menu"></i></a>
<ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed"> 17 17 <ul ng-show="isLoggedIn" id="sidebar" class="side-nav fixed ng-cloak">
<li class="logo"><a href="//flashy.cards/" id="logo-container"> 18 18 <li class="logo"><a href="//flashy.cards/" id="logo-container">
19 19
<h1>Flashy</h1> 20 20 <h1>Flashy</h1>
</a></li> 21 21 </a></li>
<li class="no-padding"> 22 22 <li class="no-padding">
<ul class="collapsible" data-collapsible="accordion"> 23 23 <ul class="collapsible" data-collapsible="accordion">
<li class="bold"> 24 24 <li class="bold">
<a class="collapsible-header black-text">Classes</a> 25 25 <a class="collapsible-header black-text">Classes</a>
</li> 26 26 </li>
<div class="collapsible-body" style="display: block"> 27 27 <div class="collapsible-body" style="display: block">
<ul> 28 28 <ul>
<li ui-sref-active="active" ng-repeat="section in sections"> 29 29 <li ui-sref-active="active" ng-repeat="section in sections">
<a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a> 30 30 <a class="class bold" ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
</li> 31 31 </li>
</ul> 32 32 </ul>
</div> 33 33 </div>
</ul> 34 34 </ul>
</li> 35 35 </li>
<!--<li class="bold"> 36 36 <!--<li class="bold">
<a>Classes:</a></li> 37 37 <a>Classes:</a></li>
<div ng-repeat="section in sections"> 38 38 <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> 39 39 <li class="bold class" ui-sref-active="active"><a ui-sref="feed({sectionId:{{section.id}}})">{{section.short_name}}</a>
</li> 40 40 </li>
</div>--> 41 41 </div>-->
<li class="bold"><a ui-sref="addclass">Add Class</a></li> 42 42 <li class="bold"><a ui-sref="addclass">Add Class</a></li>
<li class="bold"><a ui-sref="study">Study</a></li> 43 43 <li class="bold"><a ui-sref="study">Study</a></li>
<li class="bold"><a ui-sref="logout">Logout</a></li> 44 44 <li class="bold"><a ui-sref="logout">Logout</a></li>
</ul> 45 45 </ul>
46 46
</header> 47 47 </header>
<body ng-controller="RootController"> 48 48 <body ng-controller="RootController">
49 49
<main> 50 50 <main>
<div class="" ui-view></div> 51 51 <div class="" ui-view></div>
</main> 52 52 </main>
53 53
</body> 54 54 </body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script> 55 55 <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> 56 56 <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> 57 57 <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> 58 58 <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.min.js"></script> 59 59 <script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script> 60 60 <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> 61 61 <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> 62 62 <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> 63 63 <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> 64 64 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
65 65
66 66
<script src="config.js"></script> 67 67 <script src="config.js"></script>
68 68
<!-- Controllers --> 69 69 <!-- Controllers -->
<script src="scripts/FeedController.js"></script> 70 70 <script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script> 71 71 <script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script> 72 72 <script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script> 73 73 <script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script> 74 74 <script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script> 75 75 <script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script> 76 76 <script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script> 77 77 <script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script> 78 78 <script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/CardListController.js"></script> 79 79 <script src="scripts/CardListController.js"></script>
<script src="scripts/VerifyEmailController.js"></script> 80 80 <script src="scripts/VerifyEmailController.js"></script>
<!--<script src="scripts/SidebarController.js"></script>--> 81 81 <!--<script src="scripts/SidebarController.js"></script>-->
82 82
scripts/FeedController.js View file @ 807399a
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
var loc = window.location, new_uri; 8 8 var loc = window.location, new_uri;
if (loc.protocol === 'https:') { 9 9 if (loc.protocol === 'https:') {
new_uri = 'wss:'; 10 10 new_uri = 'wss:';
} else { 11 11 } else {
new_uri = 'ws:'; 12 12 new_uri = 'ws:';
} 13 13 }
new_uri += '//' + loc.host; 14 14 new_uri += '//' + loc.host;
var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast'); 15 15 var ws = new WebSocket(new_uri + '/ws/feed/' + sectionId + '?subscribe-broadcast');
16 16
ws.onopen = function() { 17 17 ws.onopen = function() {
console.log('websocket connected'); 18 18 console.log('websocket connected');
}; 19 19 };
ws.onmessage = function(e) { 20 20 ws.onmessage = function(e) {
console.log('got websocket message ' + e.data); 21 21 console.log('got websocket message ' + e.data);
$scope.refreshCards(); 22 22 $scope.refreshCards();
}; 23 23 };
ws.onerror = function(e) { 24 24 ws.onerror = function(e) {
console.error(e); 25 25 console.error(e);
}; 26 26 };
ws.onclose = function(e) { 27 27 ws.onclose = function(e) {
console.log('connection closed'); 28 28 console.log('connection closed');
}; 29 29 };
30 30
$http.get('/api/sections/' + sectionId + '/feed/'). 31 31 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 32 32 success(function(data) {
console.log(data); 33 33 console.log(data);
$scope.cards = data; 34 34 $scope.cards = data;
}). 35 35 }).
error(function(err) { 36 36 error(function(err) {
console.log('pulling feed failed'); 37 37 console.log('pulling feed failed');
}); 38 38 });
39 39
$scope.viewDeck = function() { 40 40 $scope.viewDeck = function() {
$state.go('deck', {sectionId: sectionId}); 41 41 $state.go('deck', {sectionId: sectionId});
console.log('go to deck'); 42 42 console.log('go to deck');
}; 43 43 };
44 44
$scope.pushCard = function() { 45 45 $scope.pushCard = function() {
console.log('make! card content:' + $scope.text); 46 46 console.log('make! card content:' + $scope.text);
var pushed = new Date(Date.now()); 47 47 var pushed = new Date(Date.now());
console.log(pushed.toString()); 48 48 console.log(pushed.toString());
text = $scope.text; 49 49 text = $scope.text;
// attempt to make card :( 50 50 // attempt to make card :(
var myCard = { 51 51 var myCard = {
'text': $scope.text, 52 52 'text': $scope.text,
'material_date': pushed, 53 53 'material_date': pushed,
'mask': '[]', 54 54 'mask': '[]',
section: sectionId 55 55 section: sectionId
}; 56 56 };
$http.post('/api/flashcards/', myCard). 57 57 $http.post('/api/flashcards/', myCard).
success(function(data) { 58 58 success(function(data) {
console.log('pushed a card!'); 59 59 console.log('pushed a card!');
$scope.cards.unshift(myCard); // Add right away 60
$scope.refreshCards(); // Refresh list 61
listenForC = true; 62 60 listenForC = true;
}). 63 61 }).
error(function(error) { 64 62 error(function(error) {
console.log('haha, n00b'); 65 63 console.log('something went wrong pushing a card!');
}); 66 64 });
67 65
$scope.text = ''; 68 66 $scope.text = '';
}; 69 67 };
70 68
$scope.refreshCards = function() { 71 69 $scope.refreshCards = function() {
$http.get('/api/sections/' + sectionId + '/feed/'). 72 70 $http.get('/api/sections/' + sectionId + '/feed/').
success(function(data) { 73 71 success(function(data) {
console.log(data); 74 72 console.log(data);
$scope.cards = data; 75 73 $scope.cards = data;
console.log('success in refresh cards...'); 76 74 console.log('success in refresh cards...');
}). 77 75 }).
error(function(err) { 78 76 error(function(err) {
console.log('refresh fail'); 79 77 console.log('refresh fail');
}); 80 78 });
}; 81 79 };
82 80
/* Key bindings for the whole feed window. Hotkey it up! */ 83 81 /* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true; 84 82 var listenForC = true;
83
84 // Need to pass these options into openmodal and leanmodal,
85 // otherwise the ready handler doesn't get called
86
87 modal_options = {
88 dismissible: true, // Modal can be dismissed by clicking outside of the modal
89 opacity: 0, // Opacity of modal background
90 in_duration: 300, // Transition in duration
91 out_duration: 200, // Transition out duration
92 ready: function() {
93 listenForC = false;
94 console.log('modal OPENING');
95 $('#new-card-input').focus();
96 },
97 complete: function() {
98 listenForC = true;
99 console.log('modal done, closing');
100 $('#new-card-input').blur();
101 }
102 };
103
$(document).keydown(function(e) { 85 104 $(document).keydown(function(e) {
var keyed = e.which; 86 105 var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" or "C" for compose 87 106 if (keyed == 67 && listenForC) { // "c" or "C" for compose
$('#newCard').openModal(); 88 107 $('#newCard').openModal(modal_options);
108 e.preventDefault();
listenForC = false; 89 109 listenForC = false;
return false; 90 110 return false;
} else if (keyed == 13 || keyed == 27) { // enter or esc, respectively 91 111 } else if (keyed == 13 || keyed == 27) { // enter or esc, respectively
listenForC = true; 92 112 listenForC = true;
document.getElementById('new-card-input').value = ''; 93 113 document.getElementById('new-card-input').value = '';
} 94 114 }
}); 95 115 });
96 116
$scope.flashcard = ''; 97 117 $scope.flashcard = '';
$scope.text = ''; 98 118 $scope.text = '';
99 119
$(document).ready(function() { 100 120 $(document).ready(function() {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered 101 121 // the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal({ 102 122 $('.modal-trigger').leanModal(modal_options);
dismissible: true, // Modal can be dismissed by clicking outside of the modal 103
opacity: 0, // Opacity of modal background 104
in_duration: 300, // Transition in duration 105
out_duration: 200, // Transition out duration 106
ready: function() { 107
listenForC = false; 108
console.log('modal OPENING'); 109
$('#new-card-input').focus(); 110
}, 111
complete: function() { 112
listenForC = true; 113
console.log('modal done, closing'); 114
} 115
templates/feed.html View file @ 807399a
<div class="row"> 1 1 <div class="row">
<a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a> 2 2 <a class="btn" ng-click="viewDeck()" style="margin-top: 15px">View Deck</a>
</div> 3 3 </div>
4 4
<!--cards--> 5 5 <!--cards-->
<div class="row"> 6 6 <div class="row">
<div ng-repeat="card in cards"> 7 7 <div ng-repeat="card in cards">
<flashcard flashcard-obj="card" refresh="refreshCards()" /> 8 8 <flashcard flashcard-obj="card" refresh="refreshCards()" />
</div> 9 9 </div>
</div> 10 10 </div>
11 11
12 12
<!--Lil plus button in corner--> 13 13 <!--Lil plus button in corner-->
<div class="fixed-action-btn" style="bottom: 45px; right: 24px;"> 14 14 <div class="fixed-action-btn" style="bottom: 24px; right: 24px;">
<a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard"> 15 15 <a data-target="newCard" class="btn-floating btn-large modal-trigger" href="#newCard">
<i class="large mdi-content-add"></i> 16 16 <i class="large mdi-content-add"></i>
</a> 17 17 </a>
</div> 18 18 </div>
19 19
<form> 20 20 <form>
<div id="newCard" class="modal bottom-sheet"> 21 21 <div id="newCard" class="modal bottom-sheet">
<div class="modal-content"> 22 22 <div class="modal-content">
<div class="row"> 23 23 <div class="row">
<div class="input-field"> 24 24 <div class="input-field">
<i class="mdi-editor-mode-edit prefix"></i> 25 25 <i class="mdi-editor-mode-edit prefix"></i>
<input id="new-card-input" class="materialize-textarea" ng-model="text" type="text" maxlength="255" autofocus/> 26 26 <input id="new-card-input" class="materialize-textarea" ng-model="text" type="text" maxlength="255"/>
<label id="newCardSign" for="newCard">New Flashcard Description</label> 27 27 <label id="newCardSign" for="newCard">New Flashcard Text</label>
</div> 28 28 </div>
</div> 29 29 </div>
</div> 30 30 </div>
<div class="modal-footer"> 31 31 <div class="modal-footer">
<button class="btn modal-close" type="submit" ng-click="pushCard()">Submit 32 32 <button class="btn modal-close" type="submit" ng-click="pushCard()">Submit
<i class="mdi-content-send right"></i> 33 33 <i class="mdi-content-send right"></i>
</button> 34 34 </button>
</div> 35 35 </div>
</div> 36 36 </div>