Skip to content

pniebrzydowski #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
pniebrzydowski wants to merge 5 commits into
base: master
Choose a base branch
from
Open

pniebrzydowski #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9ba1bb4
Update index.html
pniebrzydowski Aug 11, 2014
2659612
Update results.html
pniebrzydowski Aug 11, 2014
472361a
Update app.js
pniebrzydowski Aug 11, 2014
d314867
Create form.html
pniebrzydowski Aug 11, 2014
bb95c00
Create style.css
pniebrzydowski Aug 11, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
h1 {
color: #900;
margin: 20px;
weight: bolder;
}

.text-error {
color: #f00;
}

.checkbox-all {
color: #333;
font-weight: normal;
}
31 changes: 31 additions & 0 deletions form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<div class="row">
<div class="col-md-6">
<form name="checkboxForm" ng-submit="submit()" no-validate>
<div class="form-group">
<label class="checkbox checkbox-all">
<input id="allSelected" type="checkbox" ng-model="allSelected" ng-change="selectAll()"/>Select All
</label>
</div>
<div class="form-group">
<label ng-repeat="field in fields" class="checkbox">
<input type="checkbox" name="fields" ng-model="field.checked"/>{{field.value}}
</label>
<label class="text-error" ng-show="formError == true"/>
Please choose more items!
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>

<div class="col-md-6">
<div class="well">
<h4>Selected Items ({{selectedFields.length}})</h2>
<ul>
<li ng-repeat="sel in selectedFields">
{{sel.value}}
</li>
</ul>
</div>
</div>
</div>
63 changes: 8 additions & 55 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org">
<html xmlns:ng="http://angularjs.org" ng-app="TestMe">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -8,13 +8,7 @@
<title ng-bind="title"></title>

<link rel="stylesheet" href="css/bootstrap.css"/>
<style>
h1 { color: darkred }
h1 { weight: bolder }
h1 { margin: 20px; display: block; opacity: 80%; }
h1:hover { opacity:1; }
</style>

<link rel="stylesheet" href="css/style.css"/>
<!--[if lte IE 7]>
<script src="js/vendor/json3.js"></script>
<![endif]-->
Expand All @@ -25,51 +19,10 @@
</head>
<body>
<div class="container">
<div class="row">
<h1>The User Interface Developer Test</h1>
</div>
<div class="well">
<div class="well">
<ul>
<li>This Page and results.html should be converted to AngularJS templates.</li>
<li>Add a select-all toggle for the checkbox list.</li>
<li>Select-all should be checked if all fields are checked, unchecked if all fields are unchecked and indeterminate if some are checked.</li>
<li>Sor the checkboxes by name</l>
<li>When submitting the form, if only "Language" is checked, then an error should appear stating &quot; Please choose more items! &quot;</li>
<li>Successfully submitting the form takes us to results.html and shows what the user submitted.</li>
<li>Maybe the page can look a little better?</li>
<p>Read the README.md</p>
</ul>
</div>
</div>
<form role="form">
<div class="form-group">
<input type="checkbox">Select All
</div>
<div class="form-group">
<label class="checkbox">
<input type="checkbox" name="fields" value="Abstract">Abstract
</label>
<label class="checkbox">
<input type="checkbox" name="fields" value="Abstract">Publication
</label>
<label class="checkbox">
<input type="checkbox" value="Abstract">Inventor
</label>
<label class="checkbox">
<input type="checkbox" name="fields" value="Abstract">Language
</label>
<label class="checkbox">
<input type="checkbox" name="field" value="Abstract">Source
</label>
<label class="checkbox">
<input type="checkbox" name="fields" value="Abstract">Priority
</label>

</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script>console.log('page loaded');</script>

<div class="row">
<h1>The User Interface Developer Test</h1>
</div>
<div ng-view></div>
<script>console.log('page loaded');</script>
</body>
</html>
</html>
104 changes: 103 additions & 1 deletion js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,103 @@
angular.module('TestMe', []);
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;
}]);
47 changes: 11 additions & 36 deletions results.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,37 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestMe_lite results!</title>
<link rel="stylesheet" href="css/bootstrap.css"/>
<!--[if IE 7]>
<script>
// Attach additional stylesheets and JS for ie.
//TODO: json3 not working??
document.createStyleSheet('/css/ie7.css');

var json3 = document.createElement('script');
json3.type = 'text/javascript';
json3.href = '/vendor/json3.js';
json3.appendChild(document.getElementsByTagName('head')[0]);
</script>
<![endif]-->
<script src="js/vendor/jquery.min.js"></script>
<script src="js/vendor/bootstrap.js"></script>

</head>
<body>
<div class="container">
<div class="row">
<h1>You made it to the results page!</h1>
</div>
<div class="well">
<p>On this page you will:</p>
<ul>
<li>Tastefully display the selections the user made .</li>
<li>Fix the json3 and css includes for IE7.</li>
</ul>

</div>
</body>
</html>
<div class="row">
<h2>Results</h2>
</div>
<div class="row well">
<p>You selected the following options:</p>
<ul>
<li ng-repeat="sel in selectionList">{{sel}}</li>
</ul>
<a href="index.html">Return to Form</a>
</div>
</div>