110swag / flashy-frontend

Commit 9eb54c646ee802c859082eb84aa7088e79a6a197

Authored by Rachel Lee 2015-05-28 23:23:00 -0700

Not working study page but can be picked up i guess :p

Showing 6 changed files with 133 additions and 41 deletions Side-by-side Diff

config.js
home.html
scripts/SelectDirective.js
scripts/StudyController.js
styles/flashy.css
templates/study.html

...	...	@@ -9,10 +9,12 @@
9	9	'flashy.StudyController',
10	10	'flashy.UserService',
11	11	'flashy.FlashcardDirective',
	12	+ //'flashy.SelectDirective',
	13	+ // DOESNT WORK RN
12	14	'flashy.ResetPasswordController',
13	15	'flashy.VerifyEmailController',
14	16	'flashy.CardListController',
15		- 'flashy.SettingsController',
	17	+ 'flashy.SettingsController',
16	18	'ngCookies']).
17	19	config(function($stateProvider, $urlRouterProvider, $resourceProvider, $httpProvider, $locationProvider) {
18	20	'use strict';

...	...	@@ -163,6 +163,7 @@
163	163
164	164	<!-- Directives -->
165	165	<script src="scripts/FlashcardDirective.js"></script>
	166	+<script src="scripts/SelectDirective.js"></script>
166	167
167	168	<!-- Other -->
168	169	<!--<script src="scripts/StudyController.js"></script>-->

	1	+/* Credits to vinciciusmelquiades:
	2	+https://github.com/viniciusmelquiades/firstExample/blob/master/app/src/directive/directive.js */
	3	+(function () {
	4	+ 'use strict';
	5	+
	6	+ angular.module('flashy.SelectDirective', [])
	7	+ .directive('select', materialSelect);
	8	+ console.log("coming inside directive");
	9	+ materialSelect.$inject = ['$timeout'];
	10	+
	11	+ function materialSelect($timeout) {
	12	+ var directive = {
	13	+ link: link,
	14	+ restrict: 'E',
	15	+ require: '?ngModel'
	16	+ };
	17	+
	18	+ function link(scope, element, attrs, ngModel) {
	19	+ $timeout(create);
	20	+
	21	+ if (ngModel) {
	22	+ ngModel.$render = create;
	23	+ }
	24	+
	25	+ function create() {
	26	+ element.material_select();
	27	+ }
	28	+
	29	+ //if using materialize v0.96.0 use this
	30	+ element.one('$destroy', function () {
	31	+ element.material_select('destroy');
	32	+ });
	33	+ }
	34	+
	35	+ return directive;
	36	+ }
	37	+
	38	+})();

...	...	@@ -6,13 +6,16 @@
6	6	sectionId = $stateParams.sectionId;
7	7
8	8	$(document).ready(function() {
9		- $('.datepicker').pickadate({
10		- selectMonths: true, // Creates a dropdown to control month
11		- selectYears: 15 // Creates a dropdown of 15 years to control year
12		- });
	9	+ $('.datepicker').pickadate({
	10	+ selectMonths: true, // Creates a dropdown to control month
	11	+ selectYears: 15 // Creates a dropdown of 15 years to control year
	12	+ });
	13	+
	14	+ $('select').material_select();
13	15	});
14	16
15	17	$scope.UserService = UserService;
	18	+ $scope.isParamOpen = true;
16	19
17	20	console.log($scope.UserService.getUserData().sections);
18	21
...	...	@@ -20,6 +23,15 @@
20	23	console.log('toggle sect', id);
21	24	$scope.sectionToStudy = id;
22	25	};
	26	+
	27	+ $scope.openParams = function() {
	28	+ $scope.isParamOpen = !$scope.isParamOpen;
	29	+ }
	30	+
	31	+ $scope.fetchQuiz = function (a,b) {
	32	+ //console.log($scope.startDate, $scope.endDate);
	33	+ console.log(a,b);
	34	+ }
23	35
24	36	/*
25	37	$scope.fetchQuiz = function() {

...	...	@@ -364,6 +364,7 @@
364	364	opacity: 0;
365	365	}
366	366
	367	+
367	368	/.repeated-card.ng-move + div div {/
368	369	/background-color:blue;/
369	370	/top: -150px;/
...	...	@@ -396,7 +397,7 @@
396	397	}
397	398
398	399
399		-#resetPasswordForm{
	400	+#resetPasswordForm
400	401	display: block;
401	402	margin-left: auto;
402	403	margin-right: auto;
...	...	@@ -408,5 +409,29 @@
408	409	margin-right: auto;
409	410	display: block;
410	411	width: 200px;
	412	+}
	413	+
	414	+.study-params {
	415	+ background-color: #f6f6f6;
	416	+ height: 100%;
	417	+ overflow: hidden;
	418	+ transition: all 1.2s cubic-bezier(0, 0, 0.6, 1);
	419	+ will-change: opacity;
	420	+}
	421	+.dropping.ng-enter {
	422	+ height: 0%;
	423	+ opacity: 0;
	424	+}
	425	+.dropping.ng-enter-active {
	426	+ height: 100%;
	427	+ opacity: 1;
	428	+}
	429	+.dropping.ng-leave {
	430	+ height: 100%;
	431	+ opacity: 1;
	432	+}
	433	+.dropping.ng-leave-active {
	434	+ opacity: 0;
	435	+ height: 0%;
411	436	}

1	1	<!-- Parameters for the studying -->
2		-<div class="row">
3		- <div class="col s6 offset-s3">
4		- <h3>Choose what to study</h3>
5		- <!-- lots of difficulty with materializecss select and angularjs. If we want to
6		- refactor into a select(which prob looks better), maybe refer to this article:
7		- http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button
8		- -->
9		- <!-- Also suffered huge casualties trying to do radios...let's just do buttons...
10		- -->
11		- <a class="waves-effect waves-light btn toggley"
12		- ng-init="sectionToStudy = null"
13		- ng-click="toggleSectionToStudy(null)"
14		- ng-class="{'pink white-text': sectionToStudy == null}">
15		- All classes</a>
16		- <div ng-repeat="section in UserService.getUserData().sections">
17		- <a class="waves-effect waves-light btn toggley"
18		- ng-click="toggleSectionToStudy(section.id)"
19		- ng-class="{'pink white-text': sectionToStudy == section.id}">
20		- {{section.short_name}}</a>
21		- </div>
22	2
23		- <input type="date" class="datepicker">
	3	+<div class="collapsible-header param-header"
	4	+ ng-click="openParams()">
	5	+<i class="mdi-image-filter-drama"></i>Choose study settings</div>
	6	+
	7	+<div class="study-params dropping" ng-init="isParamOpen = true" ng-if="isParamOpen">
	8	+ <div class="row">
	9	+ <h3>Choose what to study</h3>
	10	+ <!-- lots of difficulty with materializecss select and angularjs. If we want to
	11	+ refactor into a select(which prob looks better), maybe refer to this article:
	12	+ http://stackoverflow.com/questions/29402495/values-not-showing-up-in-select-button
	13	+ -->
	14	+ <!-- Also suffered huge casualties trying to do radios...let's just do buttons...
	15	+ -->
	16	+ <a class="waves-effect waves-light btn toggley"
	17	+ ng-init="sectionToStudy = null"
	18	+ ng-click="toggleSectionToStudy(null)"
	19	+ ng-class="{'pink white-text': sectionToStudy == null}">
	20	+ All classes</a>
	21	+ <div ng-repeat="section in UserService.getUserData().sections">
	22	+ <a class="waves-effect waves-light btn toggley"
	23	+ ng-click="toggleSectionToStudy(section.id)"
	24	+ ng-class="{'pink white-text': sectionToStudy == section.id}">
	25	+ {{section.short_name}}
	26	+ </a>
	27	+ </div>
	28	+
	29	+<!--
	30	+ <div class="input-field col s12">
	31	+ <select ng-model="selectedClass"
	32	+ ng-options="section.short_name for section in UserService.getUserData().sections">
	33	+ </select>
	34	+ <label>Materialize Select</label>
	35	+ </div>
	36	+ -->
24	37	</div>
25		-</div>
26	38
27		-<div class="row">
28		- <div class="col s6 offset-s3">
29		- <div class="card-action">
30		- <button class="btn waves-effect waves-light" ng-click="fetchQuiz()">
31		- Fetch!
32		- <i class="mdi-content-send right"></i>
33		- </button>
34		- </div>
	39	+ <div class="row">
	40	+ <div class="card">
	41	+ <h3>Choose Date</h3>
	42	+ <input type="date" class="datepicker" ng-model="startDate" placeholder="Start Date"/>
	43	+ <input type="date" class="datepicker" ng-model"endDate" placeholder="End Date"/>
	44	+ </div>
35	45	</div>
	46	+
	47	+ <div class="row">
	48	+ <div class="card-action">
	49	+ <button class="btn waves-effect waves-light" ng-click="fetchQuiz()">
	50	+ Fetch!
	51	+ <i class="mdi-content-send right"></i>
	52	+ </button>
	53	+ </div>
	54	+ </div>
36	55	</div>
37	56
	57	+
38	58	<!-- Fetched card "quiz" -->
39	59	<div class="row">
40		- <div class="col s6 offset-s3">
41	60	<div class="card">
42	61	<div class="card-content">
43	62	<span ng-repeat="display in displayText">{{display}}<input ng-model="blank[displayText.indexOf(display)]" ng-show="displayText.indexOf(display) < blankText.length" class="" type="text"/></span>
...	...	@@ -48,6 +67,5 @@
48	67	</button>
49	68	</div>
50	69	</div>
51		- </div>
52	70	</div>