Merge pull request #10 from scalex/feature/dropzone

Заливка аватарок. Версия 0.1

Author: nilcolor

app/app.rb

@@ -42,14 +42,16 @@ def unauthorized_template
       failure_app: BadSteam,
     }
 
+    set :public_folder, Proc.new { File.join(root, 'public') }
+
     register Sinatra::Auth::Github
 
     get '/' do
       render_index
     end
 
     get '/login' do
-      github_organization_authenticate!(settings.github_options[:organization])
+      github_auth!
       redirect '/'
     end
 
@@ -59,39 +61,48 @@ def unauthorized_template
     end
 
     get '/new' do
+      github_auth!
       specimen = Specimen.new
       render_form specimen
     end
 
     post '/create' do
+      github_auth!
       specimen = Specimen.new
       specimen = Specimen::Creator.new(specimen).call params
       render_form specimen
     end
 
     get '/:nick/edit' do
+      github_auth!
       specimen = Specimen[params[:nick]]
       render_form specimen
     end
 
     post '/:nick/update' do
+      github_auth!
       specimen = Specimen[params[:nick]]
       specimen = Specimen::Updater.new(specimen).call params
       redirect "/#{params[:nick]}/edit"
     end
 
     post '/:nick/gimmick' do
+      github_auth!
       specimen = Specimen[params[:nick]]
       specimen = Specimen::Updater.new(specimen).call params
       redirect '/'
     end
 
     post '/:nick/foto' do
+      github_auth!
       content_type :json
-      File.open("#{params[:file][:filename]}", 'w') do |f|
-        f.write params[:file][:tempfile].read
+      file_name = params[:file][:filename]
+      File.open("#{public_folder}/#{file_name}", 'w') do |file|
+        file.write params[:file][:tempfile].read
+        specimen = Specimen[params[:nick]]
+        specimen = Specimen::Updater.new(specimen).call foto: file_name
       end
-      { foo: 'bar' }.to_json
+      { url: file_name }.to_json
     end
 
     private
@@ -119,5 +130,13 @@ def render_form specimen
     def render_index
       slim :index
     end
+
+    def github_auth!
+      github_organization_authenticate!(settings.github_options[:organization])
+    end
+
+    def public_folder
+      settings.public_folder
+    end
   end
 end

app/assets/scripts/app.js.coffee

@@ -1,12 +1,28 @@
 #= require jquery
 #= require bootstrap
+#= require dropzone
+
+# Dropzone.options.myAwesomeDropzone = {
+#   init: function() {
+#     this.on("addedfile", function(file) { alert("Added file."); });
+#   }
+# };
+Dropzone.autoDiscover = false
 
 jQuery ($) ->
-  # $('#container').on 'click', '[rel=push-gimmick]', (e) ->
   $('[rel=push-gimmick]').on 'click', (e) ->
     e.preventDefault()
     newGimmick e
     off
 
   newGimmick = (event) ->
-    $(event.currentTarget).before '<input type="text" name="gimmick" placeholder="new gimmick" autofocus />'
+    $(event.currentTarget).before '<input class="gimmick-input" type="text" name="gimmick" placeholder="new gimmick" autofocus />'
+
+  fotoUploaded = (file, response) ->
+    console.debug file, response, file.previewElement
+
+  $('.dropzone').each ->
+    new Dropzone(@, {
+      uploadMultiple: false
+      success: fotoUploaded
+    })

app/assets/styles/app.css.sass

@@ -1,6 +1,12 @@
 @import 'footer'
 @import 'bootstrap'
 @import 'font-awesome'
+@import 'basic-dropzone'
+
+.nav-user-avatar
+  width: 20px
+  height: 20px
+  margin-right: 5px
 
 .foto-placeholder
   width: 155px
@@ -11,12 +17,17 @@
   border-radius: 2px
   display: inline-block
 
-
 .img-thumbnail
   margin-bottom: 12px
+  width: 200px
+  height: 200px
+  background-color: aliceblue
 
+.foto
+  width: 190px
+  height: 190px
 
-input[name=gimmick]
+.gimmick-input
   outline: none
   border: none
   border-bottom: 1px solid black

app/schema.rb

@@ -1,8 +1,7 @@
 DB.transaction do
-  DB.extension :pg_hstore
-
   DB.create_table?(:specimens) do
     String :nick, :size => 255, :primary_key => true
+    String :foto
     String :position
     String :firstname
     String :lastname
@@ -12,4 +11,3 @@
     json :links
   end
 end
-

app/services/specimen/updater.rb

@@ -8,6 +8,7 @@ def call params
     @specimen[:firstname] = params[:firstname] if params[:firstname]
     @specimen[:position] = params[:position] if params[:position]
     @specimen[:about] = params[:about] if params[:about]
+    @specimen[:foto] = params[:foto] if params[:foto]
 
     update_links params
     add_gimmick params

app/views/index.slim

@@ -2,25 +2,23 @@
   - Specimen.all.each do |spec|
     .col-9.col-sm-9.col-lg-6
       .row
-        .col-4.col-sm-4.col-lg-4
-          .img-thumbnail
-            form.dropzone action="/#{spec.nick}/foto"
-              i.foto-placeholder.fa.fa-user.icon-4x
-          p
-            .btn-group
-              button.btn.btn-default type="button" Actions »
-              button.btn.btn-default.dropdown-toggle type="button" data-toggle="dropdown"
-                span.caret
-              ul.dropdown-menu role="menu"
-                li
-                  a href="/#{spec.nick}/edit"
-                    i.icon-edit-sign.icon-large
-                    |  Подправить
-                li
-                  a href="mailto:"
-                    i.icon-envelope.icon-large
-                    |  WTF
-        .col-8.col-sm-8.col-lg-8
+        .col-5.col-sm-5.col-lg-5
+          - if spec.foto
+            .img-thumbnail: img.foto src="/#{spec.foto}"
+          - else
+            .img-thumbnail class="#{github_user ? 'dropzone' : nil}" action="/#{spec.nick}/foto"
+
+          - if github_user
+            p
+              .btn-group
+                a.btn.btn-default href='mailto:' WTF
+                button.btn.btn-default.dropdown-toggle type='button' data-toggle='dropdown'
+                  span.caret
+                  span.sr-only Toggle Dropdown
+                ul.dropdown-menu role='menu'
+                  li: a href="/#{spec.nick}/edit" Подправить...
+
+        .col-7.col-sm-7.col-lg-7
           h2.media-heading
             = spec.nick
             br
@@ -29,20 +27,16 @@
 
           - spec.links.each do |k, link|
             p
-              a href="//#{link}"
+              a href="#{link}"
                 i.fa class="fa-#{guess_icon link}"
                 = " #{link}"
           blockquote = spec.about
           p.gimmicks-list
-
-            form action="/#{spec.nick}/gimmick" method="post"
-              - spec.gimmicks && spec.gimmicks.each do |g|
-                span.label.label-info = g
-                |  
-              a.btn.btn-default.btn-xs href="#" rel="push-gimmick"
-                i.fa.fa-terminal
+            - spec.gimmicks && spec.gimmicks.each do |g|
+              span.label.label-info = g
               |  
-
-hr
-
-a.btn.btn-default href="/specimens/new" Зарегать особь...
+            - if github_user
+              form action="/#{spec.nick}/gimmick" method="post"
+                a.btn.btn-default.btn-xs href="#" rel="push-gimmick"
+                  i.fa.fa-plus
+                |  

app/views/layout.slim

@@ -22,10 +22,12 @@ html
           .collapse.navbar-collapse
             ul.nav.navbar-nav
               li.active
-                a href='/' Home
-            ul.nav.navbar-nav.navbar-right
-
+                a href='/' Главная
+              - if github_user
+                li
+                  a href='/new' Добавить друга
 
+            ul.nav.navbar-nav.navbar-right
               - if github_user
                 li.dropdown
                   a.dropdown-toggle href='#' data-toggle='dropdown'
@@ -36,15 +38,15 @@ html
                     li: a href='/logout' Logout
               - else
                 li: a href='/login'
-                  i.icon-github
+                  i.fa.fa-github.fa-lg
                   '  Login using GitHub
 
 
       .container#container
         .row.row-offcanvas.row-offcanvas-right
           .col-xs-12.col-sm-9.col-lg-12
             p.pull-right.visible-xs
-              button.btn.btn-primary.btn-xs type="button" data-toggle="offcanvas" Toggle nav
+              button.btn.btn-primary.btn-xs type='button' data-toggle='offcanvas' Меню
             == yield
 
     footer

config.ru

@@ -18,10 +18,10 @@ fonts.append_path 'vendor/assets/fonts'
 images = Sprockets::Environment.new
 images.append_path 'app/assets/images'
 
-map("/css")      { run stylesheets }
-map("/fonts")    { run fonts }
-map("/font")    { run fonts }
-map("/js")       { run javascripts }
-map("/img")       { run images }
+map('/css')   { run stylesheets }
+map('/fonts') { run fonts }
+map('/font')  { run fonts }
+map('/js')    { run javascripts }
+map('/img')   { run images }
 
 map('/') { run Steam::App }