Merge pull request #40 from valentinz/volunteer-frontend

Volunteer registration form with some tests

api/abilities

@@ -0,0 +1,10 @@
+[
+	{
+		"id": 12,
+		"name": "Ability 1"
+	},
+	{
+		"id": 14,
+		"name": "Ability 2"
+	}
+]

index.html

@@ -15,6 +15,8 @@
 	<script src="bower_components/angular-google-maps/dist/angular-google-maps.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/i18n.js"></script>
 	<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css" />
 	<link rel="stylesheet" href="build/css/style.css" />
@@ -31,9 +33,10 @@
 				</div>
 				<div class="collapse navbar-collapse">
 					<ul class="nav navbar-nav">
-						<li><a href="#/map">{{ 'Map' | translate }}</a></li>
-						<li><a href="#/list">{{ 'List' | translate }}</a></li>
-						<li><a href="#/new">{{ 'Add' | translate }}</a></li>
+						<li><a href="#/register">{{ 'Register' | translate }}</a></li>
+					</ul>
+					<ul class="nav navbar-nav navbar-right">
+						<li><a href="#/login">{{ 'Login' | translate }}</a></li>
 					</ul>
 				</div>
 			</div>

js/api.js

@@ -0,0 +1,7 @@
+angular.module('Come2HelpController').factory('Abilities', ['$resource', function ($resource) {
+	return $resource('api/abilities/:id');
+}]);
+
+angular.module('Come2HelpController').factory('Volunteers', ['$resource', function ($resource) {
+	return $resource('api/volunteers/:id');
+}]);

js/app.js

@@ -7,30 +7,15 @@ angular.module('Come2HelpApp', [
 	.config(['$routeProvider',
 		function ($routeProvider) {
 			$routeProvider.
-				when('/map', {
-					templateUrl: 'partials/map.html',
-					controller: 'MapController',
+				when('/register', {
+					templateUrl: 'partials/register.html',
+					controller: 'RegisterController',
 					controllerAs: 'ctrl'
-
 				}).
-				when('/list', {
-					templateUrl: 'partials/list.html',
-					controller: 'ListController',
-					controllerAs: 'ctrl'
-				}).
-				when('/detail/:locationId', {
-					templateUrl: 'partials/detail.html',
-					controller: 'DetailController',
-					controllerAs: 'ctrl'
-
-				}).
-				when('/new', {
-					templateUrl: 'partials/new.html',
-					controller: 'NewController',
-					controllerAs: 'ctrl'
-
+				when('/register/done', {
+					templateUrl: 'partials/registerDone.html'
 				}).
 				otherwise({
-					redirectTo: '/map'
+					redirectTo: '/register'
 				});
 		}]);

js/controller.js

@@ -1,13 +1,5 @@
 angular.module('Come2HelpController', ['ngResource']);
 
-angular.module('Come2HelpController').factory('Locations', ['$resource', function ($resource) {
-	return $resource('api/locations/:id');
-}]);
-
-angular.module('Come2HelpController').factory('Tasks', ['$resource', function ($resource) {
-	return $resource('api/tasks/:id');
-}]);
-
 angular.module('Come2HelpController').service('geocoder', [function () {
 	this.geocode = function (address, outerCallback) {
 		var geocoder = new google.maps.Geocoder();
@@ -24,54 +16,4 @@ angular.module('Come2HelpController').service('geocoder', [function () {
 			}
 		});
 	};
-}]);
-
-angular.module('Come2HelpController').controller('MapController', ['Locations', function (Locations) {
-	var vm = this;
-
-	vm.map = {center: {latitude: 51.163333, longitude: 10.447778}, zoom: 6};
-
-	Locations.query(function (data) {
-		vm.locations = data;
-	});
-
-	vm.openDetails = function (id) {
-		location.href = '#/detail/' + id;
-	};
-}]);
-
-angular.module('Come2HelpController').controller('ListController', ['Locations', function (Locations) {
-	var vm = this;
-
-	Locations.query(function (data) {
-		vm.locations = data;
-	});
-}]);
-
-angular.module('Come2HelpController').controller('DetailController', ['Locations', '$routeParams', function (Locations, $routeParams) {
-	var vm = this;
-
-	vm.locationId = $routeParams.locationId;
-}]);
-
-angular.module('Come2HelpController').controller('NewController', ['Locations', 'Tasks', 'geocoder', function (Locations, Tasks, geocoder) {
-	var vm = this;
-
-	Tasks.query(function (data) {
-		vm.tasks = data;
-	});
-
-	vm.addNew = function () {
-		var result = geocoder.geocode(vm.inputLocation, function (results) {
-			Locations.save({
-				'name': vm.inputName,
-				'location': vm.inputLocation,
-				'latitude': results.results[0].geometry.location.G,
-				'longitude': results.results[0].geometry.location.K
-			});
-
-			vm.inputName = '';
-			vm.inputLocation = '';
-		});
-	};
 }]);

js/i18n.js

@@ -8,7 +8,17 @@ angular.module('Come2HelpApp').config(['$translateProvider', function ($translat
 		'Show': 'Show',
 		'New Operation Request': 'New Operation Request',
 		'Project': 'Project',
-		'Tasks': 'Tasks'
+		'Tasks': 'Tasks',
+		'Name': 'Name',
+		'Givenname': 'Givenname',
+		'Surname': 'Surname',
+		'Zip Code': 'Zip Code',
+		'E-Mail-Address': 'E-Mail-Address',
+		'Phone': 'Phone',
+		'Is Adult': 'Is Adult',
+		'Abilities': 'Abilities',
+		'Please correct the highlighted fields.': 'Please correct the highlighted fields.',
+		'Thank you for register!': 'Thank you for register!'
 	});
 
 	$translateProvider.translations('de', {
@@ -20,7 +30,17 @@ angular.module('Come2HelpApp').config(['$translateProvider', function ($translat
 		'Show': 'Anzeigen',
 		'New Operation Request': 'Neue Einsatzanfrage',
 		'Project': 'Projekt',
-		'Tasks': 'Aufgaben'
+		'Tasks': 'Aufgaben',
+		'Name': 'Name',
+		'Givenname': 'Vorname',
+		'Surname': 'Nachname',
+		'Zip Code': 'PLZ',
+		'E-Mail-Address': 'E-Mail-Adresse',
+		'Phone': 'Telefonnummer',
+		'Is Adult': 'Volljährig?',
+		'Abilities': 'Fähigkeiten',
+		'Please correct the highlighted fields.': 'Bitte korrigiere die hervorgebenen Felder.',
+		'Thank you for register!': 'Danke für die Registrierung!'
 	});
 
 	$translateProvider.fallbackLanguage('en')

js/register.js

@@ -0,0 +1,39 @@
+angular.module('Come2HelpController').controller('RegisterController', ['Abilities', 'Volunteers', '$routeParams', '$location', function (Abilities, Volunteers, $routeParams, $location) {
+	var vm = this;
+
+	vm.errors = null;
+
+	Abilities.query(function (data) {
+		vm.abilities = data;
+	});
+
+	vm.doRegister = function () {
+		Volunteers.save({
+			'givenName': vm.givenName,
+			'surname': vm.surname,
+			'address': {
+				'zipCode': vm.zipCode
+			},
+			'phone': vm.phone,
+			'adult': vm.adult == true
+
+		}, function() {
+			vm.errors = null;
+
+			vm.givenName = '';
+			vm.surname = '';
+			vm.zipCode = '';
+			vm.phone = '';
+			vm.adult = null;
+
+			$location.path('/register/done');
+		}, function (response) {
+			vm.errors = {};
+
+			for (var i = 0; i < response.data.clientErrors.length; i++) {
+				var errorData = response.data.clientErrors[i];
+				vm.errors[errorData.path] = true;
+			}
+		});
+	};
+}]);

partials/register.html

@@ -0,0 +1,49 @@
+<form class="form-horizontal" ng-submit="ctrl.doRegister()">
+
+	<div ng-show="ctrl.errors" id="error" class="alert alert-danger" role="alert">{{ 'Please correct the highlighted fields.' | translate }}</div>
+
+	<div ng-class="['form-group', {'has-error': ctrl.errors.surname}, {'has-error': ctrl.errors.givenName}]">
+		<label for="surname" class="col-sm-2 control-label">{{ 'Name' | translate }}</label>
+		<div class="col-sm-5">
+			<input class="form-control" ng-model="ctrl.givenName" id="givenName" placeholder="{{ 'Givenname' | translate }}" value="" type="text">
+		</div>
+		<div class="col-sm-5">
+			<input class="form-control" ng-model="ctrl.surname" name="surname" id="surname" placeholder="{{ 'Surname' | translate }}" value="" type="text">
+		</div>
+	</div>
+	<div ng-class="['form-group', {'has-error': ctrl.errors.zipCode}]">
+		<label for="zipCode" class="col-sm-2 control-label">{{ 'Zip Code' | translate }}</label>
+		<div class="col-sm-10">
+			<input class="form-control" ng-model="ctrl.zipCode" name="city" id="zipCode" placeholder="{{ 'Zip Code' | translate }}" value="" type="text">
+		</div>
+	</div>
+	<div ng-class="['form-group', {'has-error': ctrl.errors.email}]">
+		<label for="email" class="col-sm-2 control-label">{{ 'E-Mail-Address' | translate }}</label>
+		<div class="col-sm-10">
+			<input class="form-control" ng-model="ctrl.email" name="email" id="email" placeholder="{{ 'E-Mail-Address' | translate }}" value="" type="text">
+		</div>
+	</div>
+	<div ng-class="['form-group', {'has-error': ctrl.errors.phone}]">
+		<label for="phone" class="col-sm-2 control-label">{{ 'Phone' | translate }}</label>
+		<div class="col-sm-10">
+			<input class="form-control" ng-model="ctrl.phone" name="phone" id="phone" placeholder="{{ 'Phone' | translate }}" value="" type="text">
+		</div>
+	</div>
+	<div ng-class="['form-group', {'has-error': ctrl.errors.adult}]">
+		<label for="adult" class="col-sm-2 control-label">{{ 'Is Adult' | translate }}</label>
+		<div class="col-sm-1">
+			<input class="form-control" ng-model="ctrl.adult" name="adult" id="adult" value="true" type="checkbox">
+		</div>
+	</div>
+	<div ng-class="['form-group', {'has-error': ctrl.errors.abilities}]">
+		<label for="inputAbilities[]" class="col-sm-2 control-label">{{ 'Abilities' | translate }}</label>
+		<div class="col-sm-8" ng-repeat="ability in ctrl.abilities">
+			<input type="checkbox" name="inputAbilities[]" id="inputAbilities[]" value="{{ability.id}}"> <span>{{ability.name}}</span>
+		</div>
+	</div>
+	<div class="form-group">
+		<div class="col-sm-offset-2 col-sm-10">
+			<button class="btn btn-primary" type="submit">{{ 'Register' | translate }}</button>
+		</div>
+	</div>
+</form>

partials/registerDone.html

@@ -0,0 +1,4 @@
+<div class="jumbotron">
+	<h1>{{ 'Thank you for register!' | translate }}</h1>
+	<p>{{ 'We will contact you ...' | translate }}</p>
+</div>

test/behaviour/example.js

@@ -5,8 +5,6 @@
 
 require('./asserters')();
 
-var mock = require('./http-mock');
-
 describe('Home', function() {
 	this.timeout(1 * 60 * 1000);
 
@@ -15,21 +13,4 @@ describe('Home', function() {
 
 		expect(browser.getTitle()).to.eventually.equal('come2.help');
 	});
-});
-
-describe('List', function() {
-	this.timeout(2 * 60 * 1000);
-
-	var locationlist = by.repeater('location in ctrl.locations');
-
-	it('should have two entries: "Sandsäcke füllen" and "Transport"', function() {
-		mock(['locations']);
-
-		browser.getPart('list');
-
-		expect(element.all(locationlist).count()).to.eventually.equal(3);
-		expect(element(locationlist.column('location.name').row(0)).getInnerHtml()).to.eventually.contain('Sandsäcke füllen');
-		expect(element(locationlist.column('location.name').row(1)).getInnerHtml()).to.eventually.contain('Transport');
-		expect(element(locationlist.column('location.name').row(2)).getInnerHtml()).to.eventually.contain('Test 3');
-	});
 });

test/behaviour/mocks/abilities.js

@@ -0,0 +1,19 @@
+module.exports = [
+	{
+		request: {
+			path: '/abilities',
+			method: 'GET'
+		},
+		response: {
+			status: 200,
+			data: [{
+				id: 42,
+				name: 'Mocked Ability 1'
+			},
+			{
+				id: 69,
+				name: 'Mocked Ability 1'
+			}]
+		}
+	}
+];