Adding images to registration process

app/assets/javascripts/darkswarm/all.js.coffee

@@ -15,6 +15,8 @@
 #= require ../shared/bindonce.min.js
 #= require ../shared/ng-infinite-scroll.min.js
 #= require ../shared/angular-local-storage.js
+#= require angularjs-file-upload
+
 
 #= require angular-rails-templates
 #= require_tree ../templates

app/assets/javascripts/darkswarm/controllers/enterprise_image_controller.js.coffee

@@ -0,0 +1,13 @@
+angular.module('Darkswarm').controller "EnterpriseImageCtrl", ($scope, EnterpriseImageService) ->
+  $scope.imageStep = 'logo'
+
+  $scope.imageSteps = ['logo', 'promo']
+
+  $scope.imageUploader = EnterpriseImageService.imageUploader
+
+  $scope.imageSelect = (image_step) ->
+    EnterpriseImageService.imageSrc = null
+    $scope.imageStep = image_step
+
+  $scope.imageSrc = ->
+    EnterpriseImageService.imageSrc

app/assets/javascripts/darkswarm/controllers/registration_form_controller.js.coffee

@@ -12,4 +12,4 @@ Darkswarm.controller "RegistrationFormCtrl", ($scope, RegistrationService, Enter
     EnterpriseRegistrationService.update(nextStep) if $scope.valid(form)
 
   $scope.selectIfValid = (nextStep, form) ->
-    RegistrationService.select(nextStep) if $scope.valid(form)
+    RegistrationService.select(nextStep) if $scope.valid(form)

app/assets/javascripts/darkswarm/darkswarm.js.coffee

@@ -1,18 +1,19 @@
-window.Darkswarm = angular.module("Darkswarm", ["ngResource", 
-  'mm.foundation', 
-  'angularLocalStorage', 
-  'pasvaz.bindonce', 
-  'infinite-scroll', 
-  'angular-flash.service', 
+window.Darkswarm = angular.module("Darkswarm", ["ngResource",
+  'mm.foundation',
+  'angularLocalStorage',
+  'pasvaz.bindonce',
+  'infinite-scroll',
+  'angular-flash.service',
   'templates',
   'ngSanitize',
   'ngAnimate',
   'google-maps',
   'duScroll',
+  'angularFileUpload',
   ]).config ($httpProvider, $tooltipProvider, $locationProvider, $anchorScrollProvider) ->
-  $httpProvider.defaults.headers.post['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content') 
-  $httpProvider.defaults.headers.put['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content') 
-  $httpProvider.defaults.headers['common']['X-Requested-With'] = 'XMLHttpRequest' 
+  $httpProvider.defaults.headers.post['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content')
+  $httpProvider.defaults.headers.put['X-CSRF-Token'] = $('meta[name="csrf-token"]').attr('content')
+  $httpProvider.defaults.headers['common']['X-Requested-With'] = 'XMLHttpRequest'
   $httpProvider.defaults.headers.common.Accept = "application/json, text/javascript, */*"
 
   # This allows us to trigger these two events on tooltips
@@ -20,4 +21,3 @@ window.Darkswarm = angular.module("Darkswarm", ["ngResource",
 
   # We manually handle our scrolling
   $anchorScrollProvider.disableAutoScrolling()
-

app/assets/javascripts/darkswarm/services/enterprise_image_service.js.coffee

@@ -0,0 +1,13 @@
+Darkswarm.factory "EnterpriseImageService", (EnterpriseRegistrationService, FileUploader, spreeApiKey) ->
+  new class EnterpriseImageService
+    imageSrc: null
+
+    imageUploader: new FileUploader
+      headers:
+        'X-Spree-Token': spreeApiKey
+      url: "/api/enterprises/#{EnterpriseRegistrationService.enterprise.id}/update_image"
+      autoUpload: true
+
+    constructor: ->
+      @imageUploader.onSuccessItem = (image, response) =>
+        @imageSrc = response

app/assets/javascripts/darkswarm/services/enterprise_registration_service.js.coffee

@@ -54,4 +54,4 @@ Darkswarm.factory "EnterpriseRegistrationService", ($http, RegistrationService,
         enterprise[key] = value
       enterprise.address_attributes = @enterprise.address if @enterprise.address?
       enterprise.address_attributes.country_id = @enterprise.country.id if @enterprise.country?
-      enterprise
+      enterprise

app/assets/javascripts/darkswarm/services/registration_service.js.coffee

@@ -1,4 +1,4 @@
-Darkswarm.factory "RegistrationService", (Navigation, $modal, Loading)->
+angular.module('Darkswarm').factory "RegistrationService", (Navigation, $modal, Loading)->
 
   new class RegistrationService
     constructor: ->
@@ -20,4 +20,4 @@ Darkswarm.factory "RegistrationService", (Navigation, $modal, Loading)->
 
     close: ->
       Loading.message = "Taking you back to the home page"
-      Navigation.go "/"
+      Navigation.go "/"

app/assets/javascripts/templates/registration/about.html.haml

@@ -9,7 +9,7 @@
         {{ enterprise.name }}
 
   %ng-include{ src: "'registration/steps.html'" }
-  %form{ name: 'about', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('social',about)" } }
+  %form{ name: 'about', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "update('images',about)" } }
     .row
       .small-12.columns
         .alert-box.alert{"data-alert" => ""}

app/assets/javascripts/templates/registration/images.html.haml

@@ -1,14 +1,20 @@
-.container#registration-images
+.container#registration-images{ 'nv-file-drop' => true, uploader: "imageUploader", options:"{ alias: imageStep }", ng: { controller: "EnterpriseImageCtrl" } }
   .header
     %h2 Thanks!
     %h5 Let's upload some pretty pictures so your profile looks great! :)
   %ng-include{ src: "'registration/steps.html'" }
-  .row.content
+  %form{ name: 'images', novalidate: true, ng: { controller: "RegistrationFormCtrl", submit: "select('social')" } }
+    .row{ ng: { repeat: 'image_step in imageSteps', show: "imageStep == image_step" } }
+      %ng-include{ src: "'registration/images/'+ image_step + '.html'" }
 
-  .row.buttons
-    .small-12.columns
-      %input.button.primary.left{ type: "button", value: "Back", ng: { click: "select('about')" } }
-       
-      %input.button.primary.right{ type: "button", value: "Continue", ng: { click: "select('social')" } }
-      
-      
+    .row.buttons.pad-top{ ng: { if: "imageStep == 'logo'" } }
+      .small-12.columns
+        %input.button.primary{ type: "button", value: "Back", ng: { click: "select('about')" } }
+         
+        %input.button.primary{ type: "button", value: "Continue", ng: { click: "imageSelect('promo')" } }
+
+    .row.buttons.pad-top{ ng: { if: "imageStep == 'promo'" } }
+      .small-12.columns
+        %input.button.primary{ type: "button", value: "Back", ng: { click: "imageSelect('logo')" } }
+         
+        %input.button.primary{ type: "submit", value: "Continue" }

app/assets/javascripts/templates/registration/images/logo.html.haml

@@ -0,0 +1,41 @@
+.small-12.medium-12.large-6.columns
+  .row
+    .small-12.columns.center
+      .row
+        .small-12.columns.center
+          %h4
+            Step 1. Select Logo Image
+      .row
+        .small-12.columns.center
+          %span.small
+            Tip: Square images will work best, preferably at least 300×300px
+      .row.pad-top
+        .small-12.columns
+          .image-select.small-12.columns
+            %label.small-12.columns.button{ for: 'image-select' } Choose a logo image
+            %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' }
+  .row.show-for-large-up
+    .large-12.columns
+      %span#or.large-12.columns
+        OR
+  .row.show-for-large-up
+    .large-12.columns
+      #image-over{ 'nv-file-over' => true, uploader: "imageUploader" }
+        Drag and drop your logo here
+.small-12.medium-12.large-6.columns
+  .row
+    .small-12.columns.center
+      .row
+        .small-12.columns.center
+          %h4
+            Step 2. Review Your Logo
+      .row
+        .small-12.columns.center
+          %span.small
+            Tip: for best results, your logo should fill the available space
+      .row.pad-top
+        .small-12.columns.center
+          #image-placeholder.logo
+            %img{ ng: { show: "imageSrc()", src: '{{ imageSrc() }}' } }
+            .message{ ng: { hide: "imageSrc()" } }
+              Your logo will appear here for review once uploaded

app/assets/javascripts/templates/registration/images/promo.html.haml

@@ -0,0 +1,39 @@
+.small-12.medium-12.large-12.columns
+  .row
+    .small-12.columns.center
+      %h4
+        Step 3. Select Promo Image
+  .row
+    .small-12.medium-12.large-5.columns.center
+      .row
+        .small-12.columns.center
+          %span.small
+            Tip: Shown as a banner, preferred size is 1200×260px
+      .row.pad-top
+        .small-12.columns
+          .image-select.small-12.columns
+            %label.small-12.columns.button{ for: 'image-select' } Choose a promo image
+            %input#image-select{ type: 'file', hidden: true, 'nv-file-select' => true, uploader: "imageUploader", options: '{ alias: imageStep }' }
+    .large-2.columns
+      %span#or.horizontal.large-12.columns
+        OR
+    .large-5.columns
+      #image-over{ 'nv-file-over' => true, uploader: "imageUploader" }
+        Drag and drop your promo here
+.small-12.medium-12.large-12.columns.pad-top
+  .row
+    .small-12.columns.center
+      %h4
+        Step 4. Review Your Promo Banner
+  .row
+    .small-12.columns.center
+      .row
+        .small-12.columns.center
+          %span.small
+            Tip: for best results, your promo image should fill the available space
+      .row.pad-top
+        .small-12.columns.center
+          #image-placeholder.promo
+            %img{ ng: { show: "imageSrc()", src: '{{ imageSrc() }}' } }
+            .message{ ng: { hide: "imageSrc()" } }
+              Your logo will appear here for review once uploaded

app/assets/javascripts/templates/registration/introduction.html.haml

@@ -6,35 +6,34 @@
     .small-12.medium-3.large-2.columns.text-right.hide-for-small-only
       %img{:src => "/assets/potatoes.png"}
     .small-12.medium-9.large-10.columns
-      %p 
-        Your profile gives you an online presence on the 
-        %strong Open Food Network, 
+      %p
+        Your profile gives you an online presence on the
+        %strong Open Food Network,
         allowing you to easily connect with potential customers or partners. You can always choose to update your info later, as well as choose to upgrade your Profile to and Online Store, where you can sell products, track orders and receive payments. Creating a profile takes about 5-10 minutes.
   .row{ 'data-equalizer' => true }
     .small-12.medium-6.large-6.columns.pad-top{ 'data-equalizer-watch' => true }
       %h5 You'll need the following:
       %ul.check-list
-        %li 
+        %li
           Your enterprise address and contact details
-        %li 
+        %li
           Your logo image
-        %li 
+        %li
           A pretty picture for your profile header
-        %li 
+        %li
           Some 'About Us' text
 
     .small-12.medium-6.large-6.columns{ 'data-equalizer-watch' => true}
       .highlight-box
         %h5 Your profile entitles you to:
         %ul.small-block-grid-1
-          %li 
+          %li
             %i.ofn-i_020-search
             A searchable listing
-          %li 
+          %li
             %i.ofn-i_040-hub
             A pin on the OFN map
   .row
     .small-12.columns
       %hr
       %input.button.primary{ type: "button", value: "Let's get started!", ng: { click: "select('details')" } }
-  

app/assets/javascripts/templates/registration/social.html.haml

@@ -30,6 +30,6 @@
 
     .row.buttons
       .small-12.columns
-        %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('about')" } }
+        %input.button.secondary{ type: "button", value: "Back", ng: { click: "select('images')" } }
          
-        %input.button.primary{ type: "submit", value: "Continue" }
+        %input.button.primary{ type: "submit", value: "Continue" }