Merge pull request #42 from valentinz/volunteer-list

Implementation of Volunteer Overview

bower.json

@@ -22,7 +22,8 @@
 		"angular-translate": "~2.8.0",
 		"lodash": "~3.10.1",
 		"bootstrap": "~3.3.5",
-		"angular-google-maps": "~2.2.1"
+		"angular-google-maps": "~2.2.1",
+        "angular-smart-table": "~2.1.5"
 	},
 	"resolutions": {
 		"angular": "1.4.6"

index.html

@@ -13,10 +13,12 @@
 	<script src="bower_components/angular-simple-logger/dist/index.js"></script>
 	<script src="bower_components/angular-translate/angular-translate.min.js"></script>
 	<script src="bower_components/angular-google-maps/dist/angular-google-maps.min.js"></script>
+	<script src="bower_components/angular-smart-table/dist/smart-table.min.js"></script>
 	<script src="js/app.js"></script>
 	<script src="js/controller.js"></script>
 	<script src="js/api.js"></script>
 	<script src="js/register.js"></script>
+	<script src="js/organisation.js"></script>
 	<script src="js/i18n.js"></script>
 	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
 	<link rel="stylesheet" href="build/css/style.css" />

js/app.js

@@ -2,7 +2,8 @@ angular.module('Come2HelpApp', [
 	'ngRoute',
 	'Come2HelpController',
 	'uiGmapgoogle-maps',
-	'pascalprecht.translate'
+	'pascalprecht.translate',
+	'smart-table'
 ])
 	.config(['$routeProvider',
 		function ($routeProvider) {
@@ -15,6 +16,11 @@ angular.module('Come2HelpApp', [
 				when('/register/done', {
 					templateUrl: 'partials/registerDone.html'
 				}).
+				when('/organisation/volunteerList', {
+					templateUrl: 'partials/organisation/volunteerList.html',
+					controller: 'VolunteerListController',
+					controllerAs: 'ctrl'
+				}).
 				otherwise({
 					redirectTo: '/register'
 				});

js/organisation.js

@@ -0,0 +1,24 @@
+angular.module('Come2HelpController').factory('Volunteers', ['$resource', function ($resource) {
+	return $resource('api/volunteers/:id');
+}]);
+
+angular.module('Come2HelpController').controller('VolunteerListController', ['Volunteers', 'geocoder', function (Volunteers, geocoder) {
+	var vm = this;
+
+	vm.volunteers = [];
+
+	vm.search = function () {
+		var result = geocoder.geocode('Germany, ' + vm.zipCode, function (results) {
+			var latitude = results.results[0].geometry.location.lat();
+			var longitude = results.results[0].geometry.location.lng();
+
+			Volunteers.query({
+				latitude: latitude,
+				longitude: longitude,
+				distance: vm.distance * 1000
+			}, function (data) {
+				vm.volunteers = data;
+			});
+		});
+	};
+}]);

partials/organisation/volunteerList.html

@@ -0,0 +1,30 @@
+<h1>{{ 'Volunteers' | translate }}</h1>
+<form class="navbar-form navbar-left" role="search" ng-submit="ctrl.search()">
+	<div class="form-group">
+		<input class="form-control" ng-model="ctrl.zipCode" placeholder="{{ 'Zip Code' | translate }}"/>
+		<div class="input-group">
+			<input class="form-control" ng-model="ctrl.distance" placeholder="{{ 'Distance' | translate }}"/>
+			<span class="input-group-addon">{{ 'km' | translate }}</span>
+		</div>
+	</div>
+	<button type="submit" class="btn btn-default">{{ 'Search' | translate }}</button>
+</form>
+
+<table class="table table-striped" st-table="ctrl.displayedVolunteers" st-safe-src="ctrl.volunteers">
+	<tr>
+		<th st-sort="givenName">{{ 'Given Name' | translate }}</th>
+		<th st-sort="surname">{{ 'Surname' | translate }}</th>
+		<th st-sort="address.zipCode">{{ 'Zip Code' | translate }}</th>
+		<th st-sort="phone">{{ 'Phone' | translate }}</th>
+		<th st-sort="email">{{ 'E-Mail' | translate }}</th>
+		<th>{{ 'Abilities' | translate }}</th>
+	</tr>
+	<tr ng-repeat="volunteer in ctrl.displayedVolunteers">
+		<td>{{volunteer.givenName}}</td>
+		<td>{{volunteer.surname}}</td>
+		<td>{{volunteer.address.zipCode}}</td>
+		<td>{{volunteer.phone}}</td>
+		<td>{{volunteer.email}}</td>
+		<td>{{volunteer.abilities}}</td>
+	</tr>
+</table>

test/behaviour/mocks/volunteers.js

@@ -1,4 +1,29 @@
 module.exports = [
+	{
+		request: {
+			path: '/volunteers',
+			method: 'GET'
+		},
+		response: {
+			data: [{
+				id: 1,
+				givenName: 'Max 1',
+				surname: 'Mustermann 1',
+				address: {zipCode: '76133'},
+				phone: '01234 567890',
+				adult: true,
+				abilities: []
+			}, {
+				id: 1,
+				givenName: 'Max 2',
+				surname: 'Mustermann 2',
+				address: {zipCode: '76133'},
+				phone: '01234 567890',
+				adult: true,
+				abilities: []
+			}]
+		}
+	},
 	{
 		request: {
 			path: '/volunteers',

test/behaviour/organisation.js

@@ -0,0 +1,33 @@
+require('./asserters')();
+
+var mock = require('./http-mock');
+
+describe('Volunteer List', function () {
+	this.timeout(2 * 60 * 1000);
+
+	var volunteers = by.repeater('volunteer in ctrl.displayedVolunteers');
+
+	it('is default an empty list', function () {
+		expect(element.all(volunteers).count()).to.eventually.equal(0);
+	});
+
+	it('allows searching zip code of "Karlsruhe" and result contains two "Max Mustermann" entries', function () {
+		mock(['volunteers']);
+
+		browser.getPart('organisation/volunteerList');
+
+		var zipCode = browser.findElement(by.model('ctrl.zipCode'));
+		zipCode.sendKeys('76133');
+
+		var distance = browser.findElement(by.model('ctrl.distance'));
+		distance.sendKeys('10');
+
+		element(by.partialButtonText('Search')).click(function () {
+			expect(element.all(volunteers).count()).to.eventually.equal(2);
+			for (var i = 0; i < 2; i++) {
+				expect(element(volunteers.column('volunteer.surname').row(i)).getInnerHtml()).to.eventually.contain('Mustermann');
+				expect(element(volunteers.column('volunteer.givenName').row(i)).getInnerHtml()).to.eventually.contain('Max');
+			}
+		});
+	});
+});