sshepard · tpratch · Dec 9, 2015 · Dec 9, 2015 · Dec 9, 2015 · Dec 9, 2015
diff --git a/README.md b/README.md
diff --git a/css/ie7.css b/css/ie7.css
@@ -0,0 +1 @@
+//no styles for IE7 use tan hack for the less than handful of styles which aren't compatible. Problem solved.
diff --git a/css/test.css b/css/test.css
@@ -0,0 +1,8 @@
+
+body{background:#EFF;color:#122;}
+h1 { color: #368; weight: bolder; margin: 20px; display: block; opacity: 80%; }
+h1:hover { opacity:1; }
+.well{border-radius:8px;background-color: #CDD;border-color:#356;}
+.fail, .status{color:#c00;}
+.ib{display:inline-block;*display:inline;}
+.message{background-color:#fcc;padding:1em;border:1px solid #900;border-radius:8px;}
diff --git a/index.html b/index.html
@@ -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">
@@ -8,68 +8,73 @@
   <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>
+  <!-- because no matter how great the temptation, you should actively avoid in-page and inline styling like the plague -->
+  <link rel="stylesheet" href='css/test.css'/> 
 
   <!--[if lte IE 7]>
     <script src="js/vendor/json3.js"></script>
   <![endif]-->
-
   <script src="js/vendor/angular.min.js"></script>
   <script src="js/vendor/angular-route.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.4/angular-resource.min.js"></script>
   <script src="js/app.js"></script>
+  <script src="js/TestMe.js"></script>
+  <script src="js/results.js"></script>
 </head>
 <body>
+
+<section class='view' ng-controller="indexController">
+<h1 class='title' ng-bind="title"></h1>
 <div class="container">
 	<div class="row">
 		<h1>The User Interface Developer Test</h1>
 	</div>
-	<div class="well">
+	<div class="well" ng-show="true">
 		<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>Sort the checkboxes by name</li>
 				<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 class="message" ng-model="system.message" ng-show="(system.message.status!='')">
+	<span class="status">{{system.message.status}}</span>
+	</div>
+	<form role="form" ng-submit="processPage()" name="form">
+		<div class="form-group" >
+			<label class="checkbox small">
+			<input type="checkbox" name="checkAll" ng-model="selectAll" ng-click="checkAll()" ng-init="selectAll=false;system.message.status=''">Select All</label>
 		</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>
+	<span ng-repeat="check in checks | orderBy:'+label'">
+            <label class="checkbox">
+            <input type="checkbox" name="fields" value="{{check.id}}" ng-change="updateCheckValues(check)" ng-model="check.checked"  />
+                {{check.label}}
+            </label>
+    </span>
+    <button type="submit" class="btn btn-default" ng-click="ngSubmit()">Submit</button>
+    <span class="ib">
+    	<label class="checkbox small fail">
+    	<input type="checkbox" ng-model="serverfail.checked" name="serverFail" ng-change="updateServerFail(serverfail)" />
+    	Force Server Fail
+    	</label>
+    </form>
+
+</div>
+<div class="floater" ng-show="false">
+    <p name="item" ng-repeat="n in checkedList">
+    <span ng-model="checkedList">{{checkedList}}</span>
+    </p>
+</div>
+</section>
 
-		</div>
-		<button type="submit" class="btn btn-default">Submit</button>
-	</form>
-	<script>console.log('page loaded');</script>
+<script>console.log('hey, I\'m javascript right before the </body> element because it\'s supposed to be this way!');</script>
+<script>console.warn('(but really, don\'t abuse inline javascript for this...)');</script>
 
 </body>
 </html>
diff --git a/js/TestMe.js b/js/TestMe.js
@@ -0,0 +1,117 @@
+function indexController($scope, $http) {
+    $scope.title = "Index Controller";
+    var flaggedID = 3;
+    $scope.errorMessages = [{
+        "message": ""},
+    {
+        "message": "Please make a selection!"},
+    {   
+        "message": "Please choose more items!"},
+    {
+        "message": "The system is down!"
+    }];
+
+    $scope.checks = [{
+        "id": 0,
+        "value": "1",
+        "label": "Abstract",
+        "checked": false},
+    {
+        "id": 1,
+        "value": "2",
+        "label": "Publication",
+        "checked": false},
+    {
+        "id": 2,
+        "value": "3",
+        "label": "Inventor",
+        "checked": false},
+    {
+        "id": 3,
+        "value": "4",
+        "label": "Language",
+        "checked": false},
+    {
+        "id": 4,
+        "value": "5",
+        "label": "Source",
+        "checked": false},
+    {
+        "id": 5,
+        "value": "6",
+        "label": "Priority",
+        "checked": false}];
+
+    $scope.value = [];
+    $scope.checkedList = [];
+    $scope.updateServerFail = function(boolHolder){
+        $scope.failServer = boolHolder.checked;
+    }
+    $scope.updateCheckValues = function(checky){
+        answered=[];
+        answered = $scope.answered();
+        if (answered.length==$scope.checks.length){
+            $scope.selectAll = true;
+        }
+        if (answered.length<1){
+            $scope.selectAll = false;
+        }
+    };
+    $scope.checkAll = function(){
+        $scope.selectAll = !$scope.selectAll;
+        angular.forEach($scope.checks, function (check) {
+            check.checked = $scope.selectAll;
+        });
+        answered = [];
+        angular.forEach($scope.checks, function (check){
+            if(check.checked){
+                answered.push(check.id);
+            }
+        });
+    };
+    $scope.answered = function(){
+        answered = [];
+        $scope.checkedList = [];
+        angular.forEach($scope.checks, function (check){
+            if(check.checked){
+                answered.push(check.id);
+                $scope.checkedList.push(check.label);
+            }
+        });
+        return answered;
+    }
+    $scope.validation = function(){
+        answered = $scope.answered();
+       if(answered.length<1){
+            $scope.system.message.status = $scope.errorMessages[1].message;
+            return false;
+        }else if(answered.indexOf(flaggedID) > -1&&answered.length==1){
+            $scope.system.message.status = $scope.errorMessages[2].message;
+            return false;
+        }else{
+            $scope.system.message.status = $scope.errorMessages[0].message;
+            return true;
+        }
+    }
+    $scope.processPage = function(){
+        if($scope.validation()==true){
+            if($scope.failServer){
+                $scope.system.message.status = $scope.errorMessages[3].message;
+            }else{
+            /*$http.get('js/mock.json')
+            .then(function(response) {
+            console.log('Success', response);
+                //response.data
+            }, function(error) {
+            console.error('ERR', error);
+                $scope.system.message.status = $scope.errorMessages[3].message;
+            })*/
+            return true;
+            }
+        }
+
+    }
+
+    //set-and-get
+
+};
diff --git a/js/app.js b/js/app.js
@@ -1 +1,32 @@
-angular.module('TestMe', []);
+var angular = angular;
+
+var app = angular.module('TestMe', ['ngRoute', 'ngResource']);
+
+
+app.config(function($routeProvider, $locationProvider) {
+  $routeProvider
+   .when('/', {
+    templateUrl: 'index.html',
+    title: 'Index Page',
+    controller: 'indexController',
+    resolve: {
+      delay: function($q, $timeout) {
+        var delay = $q.defer();
+        $timeout(delay.resolve, 1000);
+        return delay.promise;
+      }
+    }
+  })
+  .when('/results.html', {
+    templateUrl: 'results.html',
+    title: 'Results Page',
+    controller: 'resultsController'
+  });
+  $locationProvider.html5Mode(true);
+});
+
+app.run(['$rootScope', function($rootScope) {
+    $rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
+        $rootScope.title = current.$$route.title;
+    });
+}]);
diff --git a/js/mock.json b/js/mock.json
@@ -0,0 +1 @@
+{ "spoon": "moo" }
diff --git a/js/results.js b/js/results.js
@@ -0,0 +1,3 @@
+function resultsController($scope, $http) {
+    $scope.title = "Results Controller";
+}
diff --git a/js/route.js b/js/route.js
diff --git a/js/service.js b/js/service.js
@@ -0,0 +1 @@
+//get/set data
diff --git a/results.html b/results.html
@@ -2,18 +2,23 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>TestMe_lite results!</title>
-	<link rel="stylesheet" href="css/bootstrap.css"/>
+	<title>TestMe results!</title>
+
+  <link rel="stylesheet" href="css/bootstrap.css"/>
+  <!-- because no matter how great the temptation, you should actively avoid in-page and inline styling like the plague -->
+  <link rel="stylesheet" href='css/test.css'/> 
 	<!--[if IE 7]>
 	<script>
 		// Attach additional stylesheets and JS for ie.
-		//TODO: json3 not working??
-		document.createStyleSheet('/css/ie7.css');
-
+		//NOTE: I have no IE7 to test this with - I simply fixed the javascript to not use 'href' as an attribute, and variablized the head call
+		//With MS about to officially stop supporting IE<10 - it's probably not worth harping on these things. Or let's go the full monty
+		//Make this script work on Netscape 3.01 Gold (even though stylesheets don't)!
+		document.createStyleSheet('css/ie7.css');
+		var head = document.getElementsByTagName('head')[0];
 		var json3 = document.createElement('script');
 		json3.type = 'text/javascript';
-		json3.href = '/vendor/json3.js';
-		json3.appendChild(document.getElementsByTagName('head')[0]);
+		json3.src = '/vendor/json3.js';
+		head.appendChild(json3);
 	</script>
 	<![endif]-->
 	<script src="js/vendor/jquery.min.js"></script>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		//no styles for IE7 use tan hack for the less than handful of styles which aren't compatible. Problem solved.