Bike photo upload

app/assets/javascripts/application.js

@@ -16,4 +16,5 @@
 //= require utils
 //= require moment
 //= require bootstrap-datetimepicker
+//= require jquery.form
 

app/assets/javascripts/bikes.js

@@ -1,31 +1,11 @@
 $('.btn').button();
 
-$("#add_bike_submit").click(function(){
-
-  json_data = { bikes: [{
-      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:   parseFloat($("#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.stringify(json_data),
-    contentType: 'application/json',
+$("#add_bike_form").ajaxForm({
     dataType: "json",
-    success: function(data, status, xhr){
+    success: function(data){
       window.location = data.bikes[0].id + "?add_bike=1";
     },
-    error: function(data, status ){
+    error: function(data){
       displayFormErrors(data.responseJSON);
     }
-  });
-
-});
+})

app/assets/javascripts/utils.js

@@ -2,7 +2,7 @@ function displayFormErrors(data){
   if(data.errors != undefined ){
     $.each(data.errors, function(field, errorMsg) {
       $("#"+field).closest(".form-group").addClass("has-error");
-      $("#"+field).siblings(".help-block").html(errorMsg);
+      $("#"+field).siblings(".help-block").html(errorMsg.join(", "));
     });
   }
 }

app/controllers/bikes_controller.rb

@@ -1,6 +1,7 @@
 class BikesController < AuthenticatedController
 
   def new
+    @bike = Bike.new bike_purpose_id: 1
     @brands = BikeBrand.all.map{ |b| [b.brand, b.id] }
     @brands.unshift( ["Select a brand", -1] )
     @wheel_sizes = BikeWheelSize.all.map{ |w| [w.display_string, w.id] }

app/models/bike.rb

@@ -1,7 +1,7 @@
 class Bike < ActiveRecord::Base
   acts_as_loggable
   attr_accessible :shop_id, :serial_number, :bike_brand_id, :model, :color, :bike_style_id, :seat_tube_height,
-    :top_tube_length, :bike_wheel_size_id, :value, :bike_condition_id, :bike_purpose_id
+    :top_tube_length, :bike_wheel_size_id, :value, :bike_condition_id, :bike_purpose_id, :photo
 
   has_many :transactions
 
@@ -13,6 +13,8 @@ class Bike < ActiveRecord::Base
   belongs_to :bike_purpose
   belongs_to :bike_wheel_size
 
+  has_attached_file :photo, :styles => {:thumb => '100x100>'}
+
   validates :shop_id, :presence => true, :uniqueness => true, :numericality => { :only_integer => true }
   validates :serial_number, :length => { :minimum => 3 }
   validates :model, :length => { :maximum => 50 }
@@ -24,6 +26,9 @@ class Bike < ActiveRecord::Base
   validates :bike_condition_id, :presence => true, :numericality => { greater_than: 0, message: "is not a valid condition" }
   validates :bike_purpose_id, :presence => true, :numericality => { greater_than: 0, message: "is not a valid purpose" }
 
+  validates_attachment :photo,  :content_type => {:content_type => %w{ image/jpeg image/gif image/png }},
+                                :file_name => {:matches => [/png\Z/, /jpe?g\Z/, /gif\Z/]}
+
   self.per_page = 15
 
   after_create :create_task_list

app/views/bikes/new.html.haml

@@ -4,70 +4,77 @@
 
 .row
   .col-xs-12.col-sm-6.col-lg-4
-    %fieldset
-      .form-group
-        = number_field_tag nil, nil, id: 'shop_id', placeholder: 'Shop ID', min: 0, class: 'form-control'
-        .help-block
+    = form_for @bike, as: 'bikes', index: '', url: api_create_bike_path, method: :post, enctype: 'multipart/form-data', html: {id: 'add_bike_form'} do |f|
+      = f.hidden_field 'bike_purpose_id'
+      %fieldset
+        .form-group
+          = f.number_field 'shop_id', placeholder: 'Shop ID', min: 0, class: 'form-control', id: 'shop_id'
+          .help-block
 
-      .form-group
-        = select_tag :bike_brand_id, options_for_select(@brands), class: 'form-control'
-        .help-block
+        .form-group
+          = f.select 'bike_brand_id', options_for_select(@brands), {}, class: 'form-control', id: 'bike_brand_id'
+          .help-block
 
-      .form-group
-        = text_field_tag nil, nil, id: 'model', placeholder: 'Model', class: 'form-control'
-        .help-block
+        .form-group
+          = f.text_field 'model', placeholder: 'Model', class: 'form-control', id: 'model'
+          .help-block
 
-      .form-group
-        = text_field_tag nil, nil, id: 'serial_number', placeholder: 'Serial Number', class: 'form-control'
-        .help-block
+        .form-group
+          = f.text_field 'serial_number', placeholder: 'Serial Number', class: 'form-control', id: 'serial_number'
+          .help-block
 
-      .form-group
-        .btn-group(data-toggle="buttons")
-          %label.btn.btn-default
-            = radio_button_tag 'bike_style', 3
-            RD
-          %label.btn.btn-default
-            = radio_button_tag 'bike_style', 1
-            MTN
-          %label.btn.btn-default
-            = radio_button_tag 'bike_style', 2
-            HYB
-          %label.btn.btn-default
-            = radio_button_tag 'bike_style', 4
-            OTHER
-        = hidden_field_tag nil, nil, id: 'bike_style_id'
-        .help-block
+        .form-group
+          .btn-group(data-toggle="buttons")
+            %label.btn.btn-default
+              = f.radio_button 'bike_style_id', 3
+              RD
+            %label.btn.btn-default
+              = f.radio_button 'bike_style_id', 1
+              MTN
+            %label.btn.btn-default
+              = f.radio_button 'bike_style_id', 2
+              HYB
+            %label.btn.btn-default
+              = f.radio_button 'bike_style_id', 4
+              OTHER
+          = hidden_field_tag nil, nil, id: 'bike_style_id'
+          .help-block
 
-      .form-group
-        = select_tag :bike_wheel_size_id, options_for_select(@wheel_sizes), id: :bike_wheel_size_id, class: 'form-control'
-        .help-block
+        .form-group
+          = f.select 'bike_wheel_size_id', options_for_select(@wheel_sizes), {}, class: 'form-control', id: 'bike_wheel_size_id'
+          .help-block
 
-      .form-group
-        .btn-group(data-toggle="buttons")
-          %label.btn.btn-default
-            = radio_button_tag 'bike_condition', 2
-            Poor
-          %label.btn.btn-default
-            = radio_button_tag 'bike_condition', 3
-            Fair
-          %label.btn.btn-default
-            = radio_button_tag 'bike_condition', 4
-            Good
-          %label.btn.btn-default
-            = radio_button_tag 'bike_condition', 5
-            Excellent
-        = hidden_field_tag nil, nil, id: 'bike_condition_id'
-        .help-block
+        .form-group
+          .btn-group(data-toggle="buttons")
+            %label.btn.btn-default
+              = f.radio_button 'bike_condition_id', 2
+              Poor
+            %label.btn.btn-default
+              = f.radio_button 'bike_condition_id', 3
+              Fair
+            %label.btn.btn-default
+              = f.radio_button 'bike_condition_id', 4
+              Good
+            %label.btn.btn-default
+              = f.radio_button 'bike_condition_id', 5
+              Excellent
+          = hidden_field_tag nil, nil, id: 'bike_condition_id'
+          .help-block
 
-      .form-group
-        .input-group
-          = number_field_tag nil, nil, id: 'seat_tube_height', placeholder: 'Seat Tube', min: 0, max: 100, class: 'form-control'
-          .input-group-addon cm
-        .help-block
+        .form-group
+          .input-group
+            = f.number_field 'seat_tube_height', placeholder: 'Seat Tube', min: 0, max: 100, class: 'form-control', id: 'seat_tube_height'
+            .input-group-addon cm
+          .help-block
 
-      -# Commenting this out until description is added to Bike
-        /.form-group
-          %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
+        .form-group
+          %label Bike photo (optional)
+          = f.file_field 'photo', id: 'photo'
+          .help-block
 
-      .form-group
-        = button_tag 'Add Bike', id: 'add_bike_submit', class: 'btn btn-primary', data: {url: api_create_bike_path}
+        -# Commenting this out until description is added to Bike
+          /.form-group
+            %input{id: "bike_description", placeholder: "Short description", type: "text", class: "input-lg" }
+
+        .form-group
+          = button_tag 'Add Bike', class: 'btn btn-primary'

app/views/bikes/show.html.haml

@@ -7,34 +7,49 @@
 %h1 #{@bike.shop_id}: #{@bike.bike_brand}
 %h4= @bike.model
 
-%dl.dl-horizontal
-  %dt Type
-  %dd= @bike.bike_style
-
-  %dt Wheel Size
-  %dd= @bike.bike_wheel_size.display_string
-
-  %dt Condition
-  %dd= @bike.bike_condition
-
-  %dt Seat Tube (cm)
-  %dd= @bike.seat_tube_height
-
-  %dt Purpose
-  %dd= @bike.bike_purpose
+.form-horizontal
+  - if @bike.photo?
+    .form-group
+      %label.col-sm-2.control-label Photo
+      .col-sm-10
+        = link_to @bike.photo.url, target: '_blank' do
+          %img{src: @bike.photo.url(:thumb),  class: 'img-thumbnail'}
+
+  .form-group
+    %label.col-sm-2.control-label Type
+    .col-sm-10.form-control-static= @bike.bike_style
+
+  .form-group
+    %label.col-sm-2.control-label Wheel Size
+    .col-sm-10.form-control-static= @bike.bike_wheel_size.display_string
+
+  .form-group
+    %label.col-sm-2.control-label Condition
+    .col-sm-10.form-control-static= @bike.bike_condition
+
+  .form-group
+    %label.col-sm-2.control-label Seat Tube (cm)
+    .col-sm-10.form-control-static= @bike.seat_tube_height
+
+  .form-group
+    %label.col-sm-2.control-label Purpose
+    .col-sm-10.form-control-static= @bike.bike_purpose
 
   - unless @bike.value.nil?
-    %dt Value
-    %dd= @bike.value
+    .form-group
+      %label.col-sm-2.control-label Value
+      .col-sm-10.form-control-static= @bike.value
 
   - unless @bike.color.nil?
-    %dt Color
-    %dd
-      .bike-color(style="background-color: ##{@bike.color}")= @bike.color
+    .form-group
+      %label.col-sm-2.control-label Color
+      .col-sm-10.form-control-static
+        .bike-color(style="background-color: ##{@bike.color}")= @bike.color
 
   - if @task_list
     - tasks = @task_list.tasks.to_a
-    %dt Task list
-    %dd
-      = link_to edit_task_list_path(@task_list.id) do
-        #{tasks.select(&:done).count}/#{tasks.count}
+    .form-group
+      %label.col-sm-2.control-label Task list
+      .col-sm-10.form-control-static
+        = link_to edit_task_list_path(@task_list.id) do
+          #{tasks.select(&:done).count}/#{tasks.count}

db/migrate/20170118112258_add_attachment_photo_to_bikes.rb

@@ -0,0 +1,11 @@
+class AddAttachmentPhotoToBikes < ActiveRecord::Migration
+  def self.up
+    change_table :bikes do |t|
+      t.attachment :photo
+    end
+  end
+
+  def self.down
+    remove_attachment :bikes, :photo
+  end
+end

db/schema.rb

@@ -11,7 +11,7 @@
 #
 # It's strongly recommended to check this file into your version control system.
 
-ActiveRecord::Schema.define(:version => 20170118110330) do
+ActiveRecord::Schema.define(:version => 20170118112258) do
 
   create_table "bike_actions", :force => true do |t|
     t.string   "action",     :limit => 128, :null => false
@@ -73,6 +73,10 @@ ActiveRecord::Schema.define(:version => 20170118110330) do
     t.string   "model"
     t.integer  "shop_id"
     t.integer  "bike_wheel_size_id"
+    t.string   "photo_file_name"
+    t.string   "photo_content_type"
+    t.integer  "photo_file_size"
+    t.datetime "photo_updated_at"
   end
 
   create_table "credit_conversions", :force => true do |t|