5 files changed, 140 insertions, 23 deletions
diff --git a/src/main/webapp/apps/app.css b/src/main/webapp/apps/app.css
new file mode 100644
index 0000000..761b765
--- /dev/null
+++ b/src/main/webapp/apps/app.css
@@ -0,0 +1,41 @@
+/*
+    bronze = #8c7853
+    bronze ii = #a67d3d
+    */
+
+.badge-level-1 { background-color: #a67d3d; }
+.badge-level-2 { background-color: silver; }
+.badge-level-3 { background-color: #ffd700; }
+
+#content {
+    background-color: #ffffff;
+    padding-bottom: 60px;
+}
+
+#footer {
+    background-color: #f5f5f5;
+    border-top: 1px solid #ccc;
+    color: #000000;
+}
+
+#footer .container {
+    padding: 60px 0;
+}
+
+#footer abbr[title] {
+    border-bottom: 1px dotted #000;
+}
+
+#footer p {
+    margin-bottom: 0;
+    color: #777;
+}
+
+#footer-links {
+    margin: 10px 0;
+}
+
+#footer-links li {
+    display: inline;
+    margin-right: 10px;
+}
diff --git a/src/main/webapp/apps/frontPageApp/frontPage.html b/src/main/webapp/apps/frontPageApp/frontPage.html
index bfa2477..4523e6f 100644
--- a/src/main/webapp/apps/frontPageApp/frontPage.html
+++ b/src/main/webapp/apps/frontPageApp/frontPage.html
@@ -1,24 +1,15 @@
 <div class="container">
 
-<div class="page-header">
-  <h1>Users</h1>
-</div>
+  <div class="page-header">
+    <h1>Newcomers</h1>
+  </div>
+
+  <style>
+    .personsGrid {
+      height: 400px;
+    }
+  </style>
 
-<p>
-  <table>
-    <thead>
-      <th>Name</th>
-      <th>Level</th>
-      <th>Count</th>
-      <th>Progress</th>
-      <th>Goal</th>
-    </thead>
-    <tbody ng-repeat="person in persons">
-    <tr>
-      <td>{{person.name}}</td>
-      <td>{{person.badges.length}}</td>
-    </tr>
-  </table>
-</p>
+  <div class="personsGrid" ng-grid="personsGridOptions"><!-- --></div>
 
 </div>
diff --git a/src/main/webapp/apps/frontPageApp/frontPageApp.js b/src/main/webapp/apps/frontPageApp/frontPageApp.js
index 4c5df8b..d92a163 100644
--- a/src/main/webapp/apps/frontPageApp/frontPageApp.js
+++ b/src/main/webapp/apps/frontPageApp/frontPageApp.js
@@ -1,12 +1,68 @@
 'use strict';
 
-var frontPageApp = angular.module('frontPageApp', ['personService']).config(function ($routeProvider, $locationProvider) {
+var frontPageApp = angular.module('frontPageApp', ['ngGrid', 'personService']).config(function ($routeProvider, $locationProvider) {
   $routeProvider.
       when('/', {controller: FrontPageCtrl, templateUrl: '/apps/frontPageApp/frontPage.html?noCache=' + noCache});
 });
 
-function FrontPageCtrl($scope, $location, PersonService) {
-  PersonService.query(function (persons) {
-    $scope.persons = persons;
+function FrontPageCtrl($scope, $http, PersonService) {
+  $scope.persons = [];
+
+  $scope.pagingOptions = {
+    pageSizes: [10],
+    pageSize: 10,
+    totalServerItems: 0,
+    currentPage: 1
+  };
+
+  $scope.personsGridOptions = {
+    data: 'persons',
+    displayFooter: true,
+    enablePaging: true,
+    showFilter: false,
+    showColumnMenu: false,
+    canSelectRows: false,
+    displaySelectionCheckbox: false,
+    pagingOptions: $scope.pagingOptions,
+    columnDefs: [
+      {
+        field: 'name',
+        displayName: 'Name',
+        cellTemplate: '<a href="/person/{{row.getProperty(\'uuid\')}}">{{row.getProperty(col.field)}}</a>'
+      },
+      {
+        field: 'badges',
+        displayName: 'Badges',
+        cellTemplate: '<div>{{row.getProperty(col.field).length}}</div>'
+      }
+    ]
+  };
+
+  $scope.setPagingData = function(data, page, pageSize){
+//    $scope.persons = data.slice((page - 1) * pageSize, page * pageSize);
+    $scope.persons = data;
+    $scope.personsGridOptions.totalServerItems = data.length;
+    if (!$scope.$$phase) {
+      $scope.$apply();
+    }
+  };
+
+  $scope.getPagedDataAsync = function (pageSize, page/*, searchText*/) {
+    setTimeout(function () {
+
+      PersonService.query({startIndex: page * pageSize, count: pageSize}, function (persons) {
+        $scope.setPagingData(persons, page, pageSize);
+      });
+    }, 100);
+  };
+
+  $scope.$watch('pagingOptions', function () {
+    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
+  }, true);
+
+  $http.get('/resource/core/person-count').success(function(count) {
+    $scope.pagingOptions.totalServerItems = count;
+
+    $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
   });
 }
diff --git a/src/main/webapp/apps/personApp/person.html b/src/main/webapp/apps/personApp/person.html
new file mode 100644
index 0000000..4189f20
--- /dev/null
+++ b/src/main/webapp/apps/personApp/person.html
@@ -0,0 +1,17 @@
+<div class="container">
+
+  <div class="page-header">
+    <h1>{{person.name}}</h1>
+  </div>
+
+  <h3>Badges</h3>
+  <p ng-repeat="badge in person.badges">
+    <span class="badge-level-{{badge.level}} badge">{{badge.name}}</span><span ng-show="badge.count > 1"> x {{badge.count}}</span>
+  </p>
+
+  <h3>Badges in progress</h3>
+  <p ng-repeat="badge in person.badgesInProgress">
+    <span class="badge badge-level-{{badge.level}}">{{badge.name}}</span> progress: {{badge.progress}} of {{badge.goal}}
+  </p>
+
+</div>
diff --git a/src/main/webapp/apps/personApp/personApp.js b/src/main/webapp/apps/personApp/personApp.js
new file mode 100644
index 0000000..59f5a7d
--- /dev/null
+++ b/src/main/webapp/apps/personApp/personApp.js
@@ -0,0 +1,12 @@
+'use strict';
+
+var personApp = angular.module('personApp', ['personService']).config(function ($routeProvider, $locationProvider) {
+  $routeProvider.
+      when('/', {controller: PersonCtrl, templateUrl: '/apps/personApp/person.html?noCache=' + noCache});
+});
+
+function PersonCtrl($scope, $location, PersonService) {
+  PersonService.get({uuid: uuid}, function (person) {
+    $scope.person = person;
+  });
+}