#3 Add photos and use it with AJAX

.gitignore

@@ -6,4 +6,6 @@ test/dummy/db/*.sqlite3-journal
 test/dummy/log/*.log
 test/dummy/tmp/
 test/dummy/.sass-cache
-.idea/
+.idea/
+.DS*
+.directory

app/assets/javascripts/kebapage/photos.js

@@ -0,0 +1,2 @@
+// Place all the behaviors and hooks related to the matching controller here.
+// All this logic will automatically be available in application.js.

app/assets/javascripts/kebapage/static_pages.js

@@ -2,7 +2,7 @@
 // All this logic will automatically be available in application.js.
 
 $('.wysihtml5').each(function(i, elem) {
-  $(elem).wysihtml5();
+  document.wysi = $(elem).wysihtml5();
 });
 
 $(document).on('page:load', function(){

app/assets/stylesheets/kebapage/application.css

@@ -8,11 +8,9 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require bootstrap-wysihtml5
+ *= require bootstrap-wysihtml5/core-b3
+ *= require hierapolis
+ *= require dropzone/dropzone
  *= require_self
  *= require_tree .
- */
-
-@import 'hierapolis';
-@import "bootstrap-wysihtml5/core-b3";
-@import 'dropzone/dropzone'
+ */

app/assets/stylesheets/kebapage/photos.css

@@ -0,0 +1,4 @@
+/*
+  Place all the styles related to the matching controller here.
+  They will automatically be included in application.css.
+*/

app/controllers/kebapage/photos_controller.rb

@@ -0,0 +1,25 @@
+require_dependency "kebapage/application_controller"
+
+module Kebapage
+  class PhotosController < ApplicationController
+    def create
+      @photo = Photo.create(photo: params[:photo])
+      render json: @photo
+    end
+
+    def destroy
+      @photo = Photo.find(params[:id])
+      @photo.destroy
+      render nothing: true
+    end
+
+    def photos
+      @uploads = Photo.all
+
+      respond_to do |format|
+        format.json { render json: @uploads }
+        format.js
+      end
+    end
+  end
+end

app/controllers/kebapage/static_pages_controller.rb

@@ -19,9 +19,11 @@ def show
 
     def new
       @static_page = StaticPage.new
+      @photo = Photo.new
     end
 
     def edit
+      @photo = Photo.new
     end
 
     def create

app/helpers/kebapage/photos_helper.rb

@@ -0,0 +1,4 @@
+module Kebapage
+  module PhotosHelper
+  end
+end

app/models/kebapage/photo.rb

@@ -0,0 +1,6 @@
+module Kebapage
+  class Photo < ActiveRecord::Base
+    belongs_to :static_page
+    has_attached_file :photo
+  end
+end

app/models/kebapage/static_page.rb

@@ -2,6 +2,7 @@
 
 module Kebapage
   class StaticPage < ActiveRecord::Base
+    has_many :photos
     validates :title, :content, presence: true
     extend FriendlyId
     friendly_id :title, use: [:slugged, :history]

app/views/kebapage/photos/create.html.erb

@@ -0,0 +1,2 @@
+<h1>Photos#create</h1>
+<p>Find me in app/views/kebapage/photos/create.html.erb</p>

app/views/kebapage/photos/destroy.html.erb

@@ -0,0 +1,2 @@
+<h1>Photos#destroy</h1>
+<p>Find me in app/views/kebapage/photos/destroy.html.erb</p>

app/views/kebapage/photos/photos.js.erb

@@ -0,0 +1,3 @@
+<% @uploads.each do |photo| %>
+  document.wysi.data("wysihtml5").editor.composer.setValue($('#static_page_content').val() + "<img src='<%= photo.photo.url %>' />");
+<% end %>

app/views/kebapage/static_pages/_form.html.haml

@@ -19,4 +19,29 @@
         %button.btn.btn-default{type: 'submit'} #{I18n.t('kebapage.submit')}
         %a.btn{href: static_pages_path} #{I18n.t('kebapage.cancel')}
 
-=javascript_include_tag "kebapage/application"
+    =form_for @photo, multipart: true, html: { class: :dropzone, id: 'photo-dropzone' } do |f|
+      =f.hidden_field :photo
+
+=javascript_include_tag "kebapage/application"
+:javascript
+  Dropzone.options.photoDropzone = {
+      paramName: "photo",
+      maxFilesize: 2,
+      clickable: true,
+      addRemoveLinks: true,
+      init: function () {
+          this.on("complete", function (file) {
+              return $.ajax({
+                  url: "#{photos_photos_url(format: :js)}"
+              });
+          });
+          return this.on('removedfile', function(file) {
+            if (file.xhr) {
+              return $.ajax({
+                url: "" + ($("#photo-dropzone").attr("action")) + "/" + (JSON.parse(file.xhr.response).id),
+                type: 'DELETE'
+              });
+            }
+          });
+      }
+  };

config/routes.rb

@@ -1,4 +1,7 @@
 Kebapage::Engine.routes.draw do
+  resources :photos, only: [:create, :destroy, :photos] do
+    get :photos, on: :collection
+  end
   resources :static_pages, except: [:show]
   root 'static_pages#index'
 end

db/migrate/20140119094017_create_kebapage_photos.rb

@@ -0,0 +1,10 @@
+class CreateKebapagePhotos < ActiveRecord::Migration
+  def change
+    create_table :kebapage_photos do |t|
+      t.attachment :photo
+      t.references :static_page, index: true
+
+      t.timestamps
+    end
+  end
+end

test/controllers/kebapage/photos_controller_test.rb

@@ -0,0 +1,16 @@
+require 'test_helper'
+
+module Kebapage
+  class PhotosControllerTest < ActionController::TestCase
+    test "should get create" do
+      get :create
+      assert_response :success
+    end
+
+    test "should get destroy" do
+      get :destroy
+      assert_response :success
+    end
+
+  end
+end

test/fixtures/kebapage/photos.yml

@@ -0,0 +1,9 @@
+# Read about fixtures at http://api.rubyonrails.org/classes/ActiveRecord/FixtureSet.html
+
+one:
+  photo: 
+  static_page_id: 
+
+two:
+  photo: 
+  static_page_id: 

test/helpers/kebapage/photos_helper_test.rb

@@ -0,0 +1,6 @@
+require 'test_helper'
+
+module Kebapage
+  class PhotosHelperTest < ActionView::TestCase
+  end
+end

test/models/kebapage/photo_test.rb

@@ -0,0 +1,9 @@
+require 'test_helper'
+
+module Kebapage
+  class PhotoTest < ActiveSupport::TestCase
+    # test "the truth" do
+    #   assert true
+    # end
+  end
+end