110swag / flashy-frontend

Commit 20f4dcac7c6626cd8976f47d7cb7603de0951172

Authored by Andrew Buss 2015-05-25 00:57:13 -0700

class name at top of dropdown

Showing 3 changed files with 9 additions and 6 deletions Inline Diff

home.html
scripts/FeedController.js
scripts/RootController.js

angular.module('flashy.FeedController', ['ui.router']).	1	1	angular.module('flashy.FeedController', ['ui.router']).
controller('FeedController', function ($scope, $rootScope, $stateParams, $state, $http) {	2	2	controller('FeedController', function ($scope, $rootScope, $stateParams, $state, $http) {
console.log('Hello from feed');	3	3	console.log('Hello from feed');
sectionId = $stateParams.sectionId;	4	4	sectionId = $stateParams.sectionId;
$rootScope.sectionId = sectionId;	5	5	$rootScope.currentSection = $rootScope.SectionResource.get({sectionId: 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 () {
var pushed = new Date(Date.now());	46	46	var pushed = new Date(Date.now());
var i = 0;	47	47	var i = 0;
var blanks = [];	48	48	var blanks = [];
$('#new-card-input')[0].childNodes.forEach(function (node) {	49	49	$('#new-card-input')[0].childNodes.forEach(function (node) {
node = $(node)[0];	50	50	node = $(node)[0];
console.log(node);	51	51	console.log(node);
if (node.tagName == 'B') {	52	52	if (node.tagName == 'B') {
text = $(node).text();	53	53	text = $(node).text();
blanks.push([i, i + text.length]);	54	54	blanks.push([i, i + text.length]);
i += text.length;	55	55	i += text.length;
} else {	56	56	} else {
i += node.data.length;	57	57	i += node.data.length;
}	58	58	}
});	59	59	});
console.log(blanks);	60	60	console.log(blanks);
text = $('#new-card-input').text();	61	61	text = $('#new-card-input').text();
var myCard = {	62	62	var myCard = {
'text': text,	63	63	'text': text,
'material_date': pushed,	64	64	'material_date': pushed,
'mask': JSON.stringify(blanks),	65	65	'mask': JSON.stringify(blanks),
section: sectionId	66	66	section: sectionId
};	67	67	};
$http.post('/api/flashcards/', myCard).	68	68	$http.post('/api/flashcards/', myCard).
success(function (data) {	69	69	success(function (data) {
console.log('pushed a card!');	70	70	console.log('pushed a card!');
listenForC = true;	71	71	listenForC = true;
}).	72	72	}).
error(function (error) {	73	73	error(function (error) {
console.log('something went wrong pushing a card!');	74	74	console.log('something went wrong pushing a card!');
});	75	75	});
	76	76
$('#new-card-input').html('');	77	77	$('#new-card-input').html('');
};	78	78	};
	79	79
$scope.refreshCards = function () {	80	80	$scope.refreshCards = function () {
$http.get('/api/sections/' + sectionId + '/feed/').	81	81	$http.get('/api/sections/' + sectionId + '/feed/').
success(function (data) {	82	82	success(function (data) {
console.log(data);	83	83	console.log(data);
$scope.cards = data;	84	84	$scope.cards = data;
console.log('success in refresh cards...');	85	85	console.log('success in refresh cards...');
}).	86	86	}).
error(function (err) {	87	87	error(function (err) {
console.log('refresh fail');	88	88	console.log('refresh fail');
});	89	89	});
};	90	90	};
	91	91
/* Key bindings for the whole feed window. Hotkey it up! */	92	92	/* Key bindings for the whole feed window. Hotkey it up! */
var listenForC = true;	93	93	var listenForC = true;
	94	94
// Need to pass these options into openmodal and leanmodal,	95	95	// Need to pass these options into openmodal and leanmodal,
// otherwise the ready handler doesn't get called	96	96	// otherwise the ready handler doesn't get called
	97	97
modal_options = {	98	98	modal_options = {
dismissible: true, // Modal can be dismissed by clicking outside of the modal	99	99	dismissible: true, // Modal can be dismissed by clicking outside of the modal
opacity: 0, // Opacity of modal background	100	100	opacity: 0, // Opacity of modal background
in_duration: 300, // Transition in duration	101	101	in_duration: 300, // Transition in duration
out_duration: 200, // Transition out duration	102	102	out_duration: 200, // Transition out duration
ready: function () {	103	103	ready: function () {
listenForC = false;	104	104	listenForC = false;
console.log('modal OPENING');	105	105	console.log('modal OPENING');
$('#new-card-input').focus();	106	106	$('#new-card-input').focus();
},	107	107	},
complete: function () {	108	108	complete: function () {
listenForC = true;	109	109	listenForC = true;
console.log('modal done, closing');	110	110	console.log('modal done, closing');
$('#new-card-input').blur();	111	111	$('#new-card-input').blur();
}	112	112	}
};	113	113	};
	114	114
$(document).keydown(function (e) {	115	115	$(document).keydown(function (e) {
		116	console.log(e.which);
var keyed = e.which;	116	117	var keyed = e.which;
if (keyed == 67 && listenForC) { // "c" or "C" for compose	117	118	if (keyed == 67 && listenForC) { // "c" or "C" for compose
$('#newCard').openModal(modal_options);	118	119	$('#newCard').openModal(modal_options);
e.preventDefault();	119	120	e.preventDefault();
listenForC = false;	120	121	listenForC = false;
return false;	121	122	return false;
} else if (keyed == 27) { // enter or esc, respectively	122	123	} else if (keyed == 27) { // enter or esc, respectively
listenForC = true;	123	124	listenForC = true;
document.getElementById('new-card-input').value = '';	124	125	document.getElementById('new-card-input').value = '';
}	125	126	}
});	126	127	});
$scope.flashcard = '';	127	128	$scope.flashcard = '';
$scope.text = '';	128	129	$scope.text = '';
var selected_start = 0;	129	130	var selected_start = 0;
var selected_end = 0;	130	131	var selected_end = 0;
$(document).ready(function () {	131	132	$(document).ready(function () {
// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered	132	133	// the "href" attribute of .modal-trigger must specify the modal ID that wants to be triggered
$('.modal-trigger').leanModal(modal_options);	133	134	$('.modal-trigger').leanModal(modal_options);
$('#new-card-input').on('keydown', function (e) {	134	135	$('#new-card-input').on('keydown', function (e) {
if (e.which == 13) {	135	136	if (e.which == 13) {
e.preventDefault();	136	137	e.preventDefault();
$scope.pushCard();	137	138	$scope.pushCard();
$('#newCard').closeModal(modal_options);	138	139	$('#newCard').closeModal(modal_options);
return false;	139	140	return false;
}	140	141	}
});	141	142	});
$('#new-card-input').on('mouseup', function () {	142	143	$('#new-card-input').on('mouseup', function () {
console.log('got selection: ' + selected_start);	143	144	console.log('got selection: ' + selected_start);
});	144	145	});

angular.module('flashy.RootController', ['ui.router']).	1	1	angular.module('flashy.RootController', ['ui.router', 'ngResource']).
	2	2
controller('RootController', function ($rootScope, $scope, $state, UserService) {	3	3	controller('RootController', function ($rootScope, $resource, $scope, $state, UserService) {
		4	$rootScope.SectionResource = $resource('/api/sections/:sectionId/');
		5	window.rootscope = $rootScope;
$rootScope.isLoggedIn = false;	4	6	$rootScope.isLoggedIn = false;
$rootScope.sectionId = 0;	5	7	$rootScope.currentSection = {};
UserService.getUserData().then(function (data) {	6	8	UserService.getUserData().then(function (data) {
console.log(data);	7	9	console.log(data);
$rootScope.user = data;	8	10	$rootScope.user = data;
});	9	11	});
$('.button-collapse').sideNav({	10	12	$('.button-collapse').sideNav({
menuWidth: 240, // Default is 240	11	13	menuWidth: 240, // Default is 240
edge: 'left', // Choose the horizontal origin	12	14	edge: 'left', // Choose the horizontal origin
closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor	13	15	closeOnClick: true // Closes side-nav on <a> clicks, useful for Angular/Meteor
}	14	16	}
);	15	17	);
});	16	18	});
	17	19

<!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
</header>	17	17	</header>
<body ng-controller="RootController">	18	18	<body ng-controller="RootController">
	19	19
<!-- Menu Bar -->	20	20	<!-- Menu Bar -->
<nav>	21	21	<nav>
<div class="nav-wrapper">	22	22	<div class="nav-wrapper">
<a href="#" data-activates="mobile-demo" class="left button-collapse"><i class="mdi-navigation-menu"></i></a>	23	23	<a href="#" data-activates="mobile-demo" class="left button-collapse"><i class="mdi-navigation-menu"></i></a>
<ul ng-show="sectionId && isLoggedIn" class="left hide-on-small-and-down">	24	24	<ul ng-show="sectionId && isLoggedIn" class="left hide-on-small-and-down">
<li ui-sref-active="active"><a ui-sref="feed({sectionId:sectionId})" class="tooltipped" data-position="bottom"	25	25	<li ui-sref-active="active"><a ui-sref="feed({sectionId:sectionId})" class="tooltipped" data-position="bottom"
data-delay="50" data-tooltip="Feed"><i	26	26	data-delay="50" data-tooltip="Feed"><i
class="mdi-action-view-module"></i></a></li>	27	27	class="mdi-action-view-module"></i></a></li>
<li ui-sref-active="active"><a ui-sref="deck({sectionId:sectionId})" class="tooltipped" data-position="bottom"	28	28	<li ui-sref-active="active"><a ui-sref="deck({sectionId:sectionId})" class="tooltipped" data-position="bottom"
data-delay="50" data-tooltip="Deck"><i	29	29	data-delay="50" data-tooltip="Deck"><i
class="mdi-action-view-carousel"></i></a></li>	30	30	class="mdi-action-view-carousel"></i></a></li>
<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:sectionId})" class="tooltipped" data-position="bottom"	31	31	<li ui-sref-active="active"><a ui-sref="cardlist({sectionId:sectionId})" class="tooltipped" data-position="bottom"
data-delay="50" data-tooltip="Card List"><i	32	32	data-delay="50" data-tooltip="Card List"><i
class="mdi-action-view-list"></i></a></li>	33	33	class="mdi-action-view-list"></i></a></li>
</ul>	34	34	</ul>
<a href="#" class="brand-logo center">Flashy</a>	35	35	<a href="#" class="brand-logo center">Flashy</a>
	36	36
<ul ng-show="isLoggedIn" id="nav-mobile" class="right hide-on-small-and-down">	37	37	<ul ng-show="isLoggedIn" id="nav-mobile" class="right hide-on-small-and-down">
<!-- User's classes dropdown -->	38	38	<!-- User's classes dropdown -->
<ul id="dropdown1" class="dropdown-content">	39	39	<ul id="dropdown1" class="dropdown-content">
<li ui-sref-active="active" ng-repeat="section in sections">	40	40	<li ui-sref-active="active" ng-repeat="section in sections">
<a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>	41	41	<a class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li>	42	42	</li>
<li class="divider"></li>	43	43	<li class="divider"></li>
<li><a ui-sref="addclass">Add Class</a></li>	44	44	<li><a ui-sref="addclass">Add Class</a></li>
</ul>	45	45	</ul>
	46	46	<li ng-show="currentSection"><a class="dropdown-button" href="#!" data-activates="dropdown1">{{currentSection?currentSection.short_name:"Classes"}}<i
<li><a class="dropdown-button" href="#!" data-activates="dropdown1">Classes<i	47
class="mdi-navigation-arrow-drop-down right"></i></a></li>	48	47	class="mdi-navigation-arrow-drop-down right"></i></a></li>
<li><a ui-sref="study">Study</a></li>	49	48	<li><a ui-sref="study">Study</a></li>
<li><a ui-sref="logout">Logout</a></li>	50	49	<li><a ui-sref="logout">Logout</a></li>
</ul>	51	50	</ul>
	52	51
<!-- Slide-in side-nav for small screens -->	53	52	<!-- Slide-in side-nav for small screens -->
<ul class="side-nav" id="mobile-demo">	54	53	<ul class="side-nav" id="mobile-demo">
<!-- Collapsible menu for all the User's classes -->	55	54	<!-- Collapsible menu for all the User's classes -->
<ul class="collapsible" data-collapsible="accordion">	56	55	<ul class="collapsible" data-collapsible="accordion">
<li class="bold">	57	56	<li class="bold">
<a class="collapsible-header black-text">	58	57	<a class="collapsible-header black-text">
Classes<i class="mdi-navigation-arrow-drop-down right"></i>	59	58	Classes<i class="mdi-navigation-arrow-drop-down right"></i>
</a>	60	59	</a>
</li>	61	60	</li>
<div class="collapsible-body" style="display: block">	62	61	<div class="collapsible-body" style="display: block">
<ul>	63	62	<ul>
<li ng-repeat="section in sections">	64	63	<li ng-repeat="section in sections">
<a ui-sref-active="active" class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>	65	64	<a ui-sref-active="active" class="class bold" ui-sref="feed({sectionId:section.id})">{{section.short_name}}</a>
</li>	66	65	</li>
<hr>	67	66	<hr>
<li><a ui-sref="addclass"><i class="tiny mdi-content-add"> Add Class</i></a></li>	68	67	<li><a ui-sref="addclass"><i class="tiny mdi-content-add"> Add Class</i></a></li>
</ul>	69	68	</ul>
</div>	70	69	</div>
</ul>	71	70	</ul>
<li><a ui-sref="study">Study</a></li>	72	71	<li><a ui-sref="study">Study</a></li>
<li><a ui-sref="logout">Logout</a></li>	73	72	<li><a ui-sref="logout">Logout</a></li>
</ul>	74	73	</ul>
</div>	75	74	</div>
</nav>	76	75	</nav>
<main ui-view></main>	77	76	<main ui-view></main>
	78	77
</body>	79	78	</body>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>	80	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>	81	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>	82	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>	83	82	<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="scripts/materialize.js"></script>	84	83	<script type="text/javascript" src="scripts/materialize.js"></script>
<script type="text/javascript" src="scripts/jquery.collapsible.js"></script>	85	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>	86	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>	87	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>	88	87	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>
		88	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-resource.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>	89	89	<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-filter/0.5.4/angular-filter.js"></script>
	90	90
	91	91
<script src="config.js"></script>	92	92	<script src="config.js"></script>
	93	93
<!-- Controllers -->	94	94	<!-- Controllers -->
<script src="scripts/FeedController.js"></script>	95	95	<script src="scripts/FeedController.js"></script>
<script src="scripts/RootController.js"></script>	96	96	<script src="scripts/RootController.js"></script>
<script src="scripts/LoginController.js"></script>	97	97	<script src="scripts/LoginController.js"></script>
<script src="scripts/LogoutController.js"></script>	98	98	<script src="scripts/LogoutController.js"></script>
<script src="scripts/DeckController.js"></script>	99	99	<script src="scripts/DeckController.js"></script>
<script src="scripts/RequestResetController.js"></script>	100	100	<script src="scripts/RequestResetController.js"></script>
<script src="scripts/ClassAddController.js"></script>	101	101	<script src="scripts/ClassAddController.js"></script>
<script src="scripts/StudyController.js"></script>	102	102	<script src="scripts/StudyController.js"></script>
<script src="scripts/ResetPasswordController.js"></script>	103	103	<script src="scripts/ResetPasswordController.js"></script>
<script src="scripts/CardListController.js"></script>	104	104	<script src="scripts/CardListController.js"></script>