-
-
The User Interface Developer Test
-
-
-
-
- - This Page and results.html should be converted to AngularJS templates.
- - Add a select-all toggle for the checkbox list.
- - Select-all should be checked if all fields are checked, unchecked if all fields are unchecked and indeterminate if some are checked.
- - Sor the checkboxes by name
-
- When submitting the form, if only "Language" is checked, then an error should appear stating " Please choose more items! "
- - Successfully submitting the form takes us to results.html and shows what the user submitted.
- - Maybe the page can look a little better?
- Read the README.md
-
-
-
-
-
-
+
+
The User Interface Developer Test
+
+
+
-
\ No newline at end of file
+
diff --git a/js/app.js b/js/app.js
index e81250d..a1ec214 100644
--- a/js/app.js
+++ b/js/app.js
@@ -1 +1,103 @@
-angular.module('TestMe', []);
\ No newline at end of file
+var testModule = angular.module('TestMe', ['ngRoute']);
+
+testModule.
+config(['$routeProvider',
+ function($routeProvider) {
+ $routeProvider.
+ when('/', {
+ templateUrl: 'form.html',
+ controller: 'SelectListController'
+ }).
+ when('/results/:selections', {
+ templateUrl: 'results.html',
+ controller: 'ResultsController'
+ }).
+ otherwise({
+ redirectTo: '/'
+ });
+ }
+]);
+
+testModule.
+controller('SelectListController',['$scope','$filter',function($scope,$filter) {
+ $scope.fields = [
+ {value: "Abstract"},
+ {value: "Inventor"},
+ {value: "Language"},
+ {value: "Priority"},
+ {value: "Publication"},
+ {value: "Source"}
+ ];
+ $scope.submit = function() {
+ if( $scope.validate() === false ) return false;
+ var sel = "";
+ for( var i=0; i<$scope.selectedFields.length; i++ )
+ {
+ if(sel) sel += "|";
+ sel += $scope.selectedFields[i].value;
+ }
+ window.location.href = "#/results/" + sel;
+ };
+
+ $scope.validate = function() {
+ $scope.formError = false;
+ if( $scope.selectedFields.length === 1 && $scope.selectedFields[0].value === 'Language' )
+ {
+ $scope.formError = true;
+ return false;
+ }
+
+ return true;
+ };
+
+ $scope.selectAll = function() {
+ for( var i=0; i<$scope.fields.length; i++ )
+ {
+ if( $scope.allSelected === true )
+ {
+ $scope.fields[i].checked = true;
+ }
+ else
+ {
+ $scope.fields[i].checked = false;
+ }
+ }
+ };
+
+ $scope.selectedFields = [];
+ $scope.$watch(
+ 'fields',
+ function(n,o) {
+ if( n === o ) return;
+ var elem = document.getElementById('allSelected');
+ $scope.selectedFields = $filter('filter')($scope.fields,{checked:true},true);
+ elem.indeterminate = false;
+ if( $scope.selectedFields.length === $scope.fields.length )
+ {
+ //all selected
+ $scope.allSelected = true;
+ }
+ else
+ {
+ if( $scope.selectedFields.length === 0 )
+ {
+ //none selected
+ $scope.allSelected = false;
+ }
+ else
+ {
+ //indeterminant
+ elem.indeterminate = true;
+ }
+ }
+ },
+ true
+ );
+}]);
+
+testModule.
+controller('ResultsController',['$scope','$routeParams',function($scope,$routeParams) {
+ var sel = $routeParams.selections;
+ var list = sel.split('|');
+ $scope.selectionList = list;
+}]);
diff --git a/results.html b/results.html
index dfe49cf..4518c96 100644
--- a/results.html
+++ b/results.html
@@ -1,37 +1,12 @@
-
-
-
-
-
TestMe_lite results!
-
-
-
-
-
-
-
-
-
You made it to the results page!
-
-
-
On this page you will:
-
- - Tastefully display the selections the user made .
- - Fix the json3 and css includes for IE7.
-
-
-
-
-
\ No newline at end of file
+
+
Results
+
+
+