task add completed

index.html

@@ -80,6 +80,7 @@
 					</div>
 					<div class="panel-footer">
 						<button type="submit" form="form-create-student" class="btn btn-success">Create</button>
+						<button type="button" id="add-field" class="btn btn-default pull-right"><span class="glyphicon glyphicon-plus"></span></button>
 					</div>
 				</div>
 			</div>

js/script.js

@@ -4,8 +4,11 @@ var http = new HttpService('http://helloworld.filonitta.fe4.a-level.com.ua/api/v
 var $studentList = $('#students-list');
 var $formEditStudent = $('#form-edit-student');
 var request = http.getStudents();
+var $formCreateStudent = $('#form-create-student');
+var $addField = $('#add-field').data('counter', 1);
 
 request.done(function(response){
+	console.log(response);
 	response.forEach(function(student){
 		$('<a href="">')
 		.text(student.lastname + ' ' + student.firstname)
@@ -24,8 +27,23 @@ $studentList.on('click', '[data-id]', function(event){
 	var studentId = $(this).data('id');
 
 	$('.has-error', $formEditStudent).removeClass('has-error');
+	$('.has-error', $formCreateStudent).removeClass('has-error');
+	$formEditStudent.find('[id="extraField"]').remove();
 
-	http.getStudentsById(studentId).done(function(response) { 
+	http.getStudentsById(studentId)
+		.done(function(response) { 
+		console.log(response);
+
+		if (response.extraField) {
+			for(var key in response.extraField) {
+				var $extraField = $('<div>').addClass('form-group').appendTo($formEditStudent);;
+				var $extraFieldInput = $('<input>')
+									.attr({'type': 'text', 'name': 'extraField[' + key + ']', 'id': 'extraField'})
+									.val(response.extraField[key])
+									.addClass('form-control')
+									.appendTo($extraField);
+			}
+		}
 
 		for(var key in response) {
 			$formEditStudent.find('[name="' + key + '"]').val(response[key]);
@@ -41,25 +59,63 @@ $formEditStudent.on('submit', function(event){
 
 	var data = $(this).serialize(),
 		studentId = $(this).find('[name=id]').val();
-		console.log(studentId)
+
 	http.updateUserById(studentId, data)
 		.done(function(response){
-		console.log(response);
 		$studentList
 			.find('[data-id="' + studentId + '"]')
 			.text(response.lastname + ' ' + response.firstname);
 		})
 		.fail(function(response){
 
-		var errors = response.responseJSON.errors;
+			var errors = response.responseJSON.errors;
+				errors.forEach(function(error) {
+					console.log(error.field);
+					console.log(that);
+					$(that)
+						.find('[name="' + error.field + '"]')
+						.parent()
+							.addClass('has-error');
+				})
+		})
+})
 
-			errors.forEach(function(error) {
-				console.log(error.field);
-				console.log(that);
-				$(that)
-					.find('[name="' + error.field + '"]')
-					.parent()
-						.addClass('has-error');
-			})
+$formCreateStudent.on('submit', function(event){
+	event.preventDefault();
+	var data = $(this).serialize();
+	var that =this;
+
+	console.log(data);
+	
+	$('.has-error', this).removeClass('has-error');
+	
+	http.createStudent(data)
+		.done(function(response){
+			$('<a href="">')
+				.text(response.lastname + ' ' + response.firstname)
+				.attr('data-id', response.id)
+				.addClass('list-group-item')
+				.appendTo($studentList);
+		})
+		.fail(function(response){	
+			var errors = response.responseJSON.errors;
+				errors.forEach(function(error) {
+					$(that)
+						.find('[name="' + error.field + '"]')
+						.parent()
+							.addClass('has-error');
+				})
 		})
+})
+
+$addField.on('click', function(event){
+	var counter = $addField.data('counter');
+	$addField.data('counter', counter + 1);
+
+	var $extraField = $('<div>').addClass('form-group').appendTo($formCreateStudent);;
+	var $extraFieldInput = $('<input>')
+								.attr({'type': 'text', 'name': 'extraField[' + counter + ']', 'placeholder': 'field' + counter})
+								.addClass('form-control')
+								.appendTo($extraField);
+
 })