diff options
author | Trygve Laugstøl <trygvis@inamo.no> | 2012-12-26 21:45:38 +0100 |
---|---|---|
committer | Trygve Laugstøl <trygvis@inamo.no> | 2012-12-26 21:45:38 +0100 |
commit | 422b1caeaa9f7d069a9208ecb0d0249485b1a05e (patch) | |
tree | 90ef9e1d0b6f26178f1fae3e3df20226a1d91087 /src/main/webapp/apps | |
parent | 348ec4e14aeaf4e98fcab96f0ae7242d178db69b (diff) | |
download | esper-testing-422b1caeaa9f7d069a9208ecb0d0249485b1a05e.tar.gz esper-testing-422b1caeaa9f7d069a9208ecb0d0249485b1a05e.tar.bz2 esper-testing-422b1caeaa9f7d069a9208ecb0d0249485b1a05e.tar.xz esper-testing-422b1caeaa9f7d069a9208ecb0d0249485b1a05e.zip |
o Adding details page for persons.
o Better front page.
Diffstat (limited to 'src/main/webapp/apps')
-rw-r--r-- | src/main/webapp/apps/app.css | 41 | ||||
-rw-r--r-- | src/main/webapp/apps/frontPageApp/frontPage.html | 29 | ||||
-rw-r--r-- | src/main/webapp/apps/frontPageApp/frontPageApp.js | 64 | ||||
-rw-r--r-- | src/main/webapp/apps/personApp/person.html | 17 | ||||
-rw-r--r-- | src/main/webapp/apps/personApp/personApp.js | 12 |
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; + }); +} |