Added submit js to bikes/new view

* Added displayFormErrors utility
* Added 4th option to bike styles “OTHER”

app/assets/javascripts/application.js

@@ -13,3 +13,4 @@
 //= require jquery
 //= require jquery_ujs
 //= require twitter/bootstrap/bootstrap-button
+//= require utils

app/assets/javascripts/bikes.js

@@ -1 +1,30 @@
 $('.btn').button();
+
+$("#add_bike_submit").click(function(){
+
+  json_data = { bike: {
+      serial_number:      $("#serial_number").val(),
+      bike_brand_id:      parseInt($("#bike_brand_id").val()),
+      shop_id:            parseInt($("#shop_id").val()),
+      model:              $("#model").val(),
+      bike_style_id:      parseInt($('input[name=bike_style]:checked').val()),
+      seat_tube_height:   parseInt($("#seat_tube_height").val()),
+      bike_condition_id:  parseInt($('input[name=bike_condition]:checked').val()),
+      bike_purpose_id:    1,
+      bike_wheel_size_id: parseInt($("#bike_wheel_size_id").val()),
+    }};
+
+  $.ajax({
+    url: $("#add_bike_submit").data("url"),
+    type: "POST",
+    data: json_data,
+    dataType: "json",
+    success: function(data, status, xhr){
+      //window.location = "";
+    },
+    error: function(data, status ){
+      displayFormErrors(data.responseJSON);
+    }
+  });
+
+});

app/assets/javascripts/utils.js

@@ -0,0 +1,8 @@
+function displayFormErrors(data){
+  if( data.errors != undefined ){
+    $.each( data.errors, function( field, errorMsg) {
+      $("#"+field).parents(".control-group").addClass("error");
+      $("#"+field).siblings(".help-block").html(errorMsg);
+    });
+  }
+}

app/views/bikes/new.html.haml

@@ -1,39 +1,56 @@
 %h2 Add Bike
 
 %p
-  %p
+  .control-group
-    %input{id: "bike_shop_id", placeholder: "Shop ID", type: "number", min:0, class: "input-lg" }
+    .controls
-  %p
+      %input{id: "shop_id", placeholder: "Shop ID", type: "number", min:0, class: "input-lg" }
-    = select_tag(:bike_brand_id, options_for_select(@brands))
+      .help-block
-  %p
+  .control-group
-    %input{id: "bike_model", placeholder: "Model", type: "text", class: "input-lg" }
+    .controls
+      = select_tag(:bike_brand_id, options_for_select(@brands))
+      .help-block
+  .control-group
+    .controls
+      %input{id: "model", placeholder: "Model", type: "text", class: "input-lg" }
+      .help-block
+  .control-group
+    .controls
+      %input{id: "serial_number", placeholder: "Serial Number", type: "text", class: "input-lg" }
+      .help-block
   %p
     .btn-group{ "data-toggle" => "buttons-radio"}
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} RD
+        %input{ type: "radio", name: "bike_style", value: 3} RD
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} MTN
+        %input{ type: "radio", name: "bike_style", value: 1} MTN
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} HYB
+        %input{ type: "radio", name: "bike_style", value: 2} HYB
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} OTHER
+        %input{ type: "radio", name: "bike_style", value: 4} OTHER
-  %p
+      .help-block
-    = select_tag(:bike_wheel_size, options_for_select(@wheel_sizes))
+  .control-group
+    .controls
+      = select_tag(:bike_wheel_size, options_for_select(@wheel_sizes), id: :bike_wheel_size_id)
+      .help-block
   %p
     .btn-group{ "data-toggle" => "buttons-radio"}
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} Poor
+        %input{ type: "radio", name: "bike_condition", value: 2} Poor
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} Fair
+        %input{ type: "radio", name: "bike_condition", value: 3} Fair
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} Good
+        %input{ type: "radio", name: "bike_condition", value: 4} Good
       %label{ class: "btn btn-default"}
-        %input{ type: "radio", name: "options"} Excellent
+        %input{ type: "radio", name: "bike_condition", value: 5} Excellent
-  %p
+      .help-block
-    %input{id: "bike_seat_tube", placeholder: "Seat Tube (cm)", type: "number", min: 0, max: 100, class: "input-lg" }
+  .control-group
+    .controls
+      %input{id: "seat_tube_height", placeholder: "Seat Tube (cm)", type: "number", min: 0, max: 100, class: "input-lg" }
+      .help-block
   -# Commenting this out until description is added to Bike
     %p
       %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
-  %p
+  .control-group
-    %input{id: "index_logout", value: "Add Bike", type: "button", class: "btn btn-lg btn-block btn-primary", "data-url" => "api_add_bike_path"}
+    .controls
+      %input{id: "add_bike_submit", value: "Add Bike", type: "button", class: "btn btn-lg btn-block btn-primary", "data-url" => "#{api_create_bike_path}"}
 

db/seed/fixtures/bike_styles.yml

@@ -7,3 +7,6 @@ hybrid:
 road:
   id: 3
   style: ROAD
+road:
+  id: 4
+  style: OTHER