finalized voting design + some design fixes + improved code

app/assets/javascripts/app/views/poll.js

@@ -2,7 +2,8 @@ app.views.Poll = app.views.Base.extend({
   templateName : "poll",
 
   events : {
-    "click .submit" : "vote"
+    "click .submit" : "vote",
+    "click .toggle_result" : "toggleResult"
   },
 
   initialize : function(options) {
@@ -14,6 +15,13 @@ app.views.Poll = app.views.Base.extend({
   postRenderTemplate : function() {
     if(this.poll) {
       this.setProgressBar();
+      this.hideResult();
+    }
+  },
+
+  hideResult : function() {
+    if(!this.model.attributes.already_participated_in_poll) {
+      this.$('.poll_result').hide();
     }
   },
 
@@ -24,27 +32,52 @@ app.views.Poll = app.views.Base.extend({
       if(this.poll.participation_count != 0) {
         percentage = answers[index].vote_count / this.poll.participation_count * 100;
       }
-      var input = this.$("input[value="+answers[index].id+"]");
-      var progressBar = $(input).parent().find(".poll_progress_bar");
+      var progressBar = this.$(".poll_progress_bar[data-answerid="+answers[index].id+"]");
+      progressBar.parents().eq(1).find(".percentage").html(" - " + percentage + "%");
       var width = percentage * this.progressBarFactor;
       progressBar.css("width", width + "px");
     }
-    //
+  },
+
+  toggleResult : function(e) {
+    $('.poll_result').toggle();
+    return false;
+  },
+
+  refreshResult : function(answerId) {
+    this.updateCounter(answerId);
+    this.setProgressBar();
+  },
+
+  updateCounter : function(answerId) {
+    this.poll.participation_count++;
+    this.$('.poll_statistic').html(Diaspora.I18n.t("poll.count", {"votes" : this.poll.participation_count}));
+    var answers = this.poll.poll_answers;
+    for(index = 0; index < answers.length; ++index) {
+      if(answers[index].id == answerId) {
+        answers[index].vote_count++;
+        return;
+      }
+    }
   },
 
   vote : function(evt){
     var result = parseInt($(evt.target).parent().find("input[name=vote]:checked").val());
     var pollParticipation = new app.models.PollParticipation();
+    var parent = this;
     pollParticipation.save({
       "poll_answer_id" : result,
       "poll_id" : this.poll.poll_id,
     },{
       url : "/posts/"+this.poll.post_id+"/poll_participations",
-      success : function() {
-        console.log(success);
-        //todo remove radios+input
+      success : function(model, response) {
+        parent.$('.poll_form form').remove();
+        parent.$('.toggle_result_wrapper').remove();
+        parent.$('.poll_result').show();
+        parent.refreshResult(result);
       }
     });
+    return false;
   }
 
 });

app/assets/javascripts/app/views/publisher_view.js

@@ -75,7 +75,7 @@ app.views.Publisher = Backbone.View.extend({
     });
 
     this.initSubviews();
-
+    this.addPollAnswer();
     return this;
   },
 
@@ -202,7 +202,7 @@ app.views.Publisher = Backbone.View.extend({
   },
 
   removePollAnswer: function(evt){
-    $(evt.target).parent().remove();
+    $(evt.target).parents().eq(1).remove();
     if($(".poll_answer").size() == 1) {
        $(".remove_poll_answer").css("visibility","hidden");;
     }

app/assets/stylesheets/poll.css.scss

@@ -14,16 +14,15 @@
 
 .poll_result {
   width:100%px;
-  display:inline;
 }
 
 .poll_progress_bar {
   position:absolute;
-  width:100px;
+  width:0px;
   height:15px;
   top:-10px;
   z-index:-1;
-  background-color:#3f8fba;
+  background-color:$background-grey;
 }
 
 .poll_statistic{
@@ -38,6 +37,9 @@
 }
 
 .poll_answer_entry{
-  display:inline;
   width:100%;
 }
+
+.percentage {
+  display:inline;
+}

app/assets/stylesheets/publisher_blueprint.css.scss

@@ -311,7 +311,8 @@
   }
   #poll_creator {
     @extend #locator;
-    right: 50px;
+    right: 60px;
+    margin-bottom:-5px;
   }
 
   .btn {
@@ -331,6 +332,12 @@
   visibility:hidden;
   float:right;
   display: table-cell;
+
+  .icons-deletelabel {
+    height: 14px;
+    width: 14px;
+    margin-top:5px;
+  }
 }
 
 .poll_answer_input {
@@ -342,6 +349,10 @@
   display:block;
 }
 
+#poll_question_wrapper {
+    margin-right:24px;
+}
+
 #poll_question {
   width: 100%;
   box-sizing: border-box;

app/assets/templates/poll_tpl.jst.hbs

@@ -1,19 +1,32 @@
 {{#if poll}}
   <div class="poll_form">
-    <p class="poll_statistic">{{t "poll.result" votes=poll.participation_count}}</p>
+    <p class="poll_statistic">{{t "poll.count" votes=poll.participation_count}}</p>
     <strong>{{poll.question}}</strong><br/>
-    {{#poll.poll_answers}}
-      <div class="poll_answer_entry">
-        <input type="radio" name="vote" value="{{id}}"/>
-        <div class="poll_result">
+    {{#unless already_participated_in_poll}}
+      <form action="/posts/{{poll.post_id}}/poll_participations" method="POST">
+        {{#poll.poll_answers}}
+            <input type="radio" name="vote" value="{{id}}"/>
+            {{answer}}
+          <br/>
+        {{/poll.poll_answers}}
+        <input type="submit" class="button submit" style="float:right;" value="{{t "poll.vote"}}"/>
+      </form>
+      <p class="toggle_result_wrapper">
+        <br/><a href="#" class="toggle_result">{{t "poll.toggle_result"}}</a><br/>
+      </p>
+    {{/unless}}
+    <div class="poll_result">
+      <br/><strong>{{t "poll.result"}}</strong><br/>
+      {{#poll.poll_answers}}
+        <div class="poll_answer_entry">
           <div class="poll_progress_bar_wrapper">
-            <div class="poll_progress_bar"> </div>
+            <div class="poll_progress_bar" data-answerid="{{id}}"> </div>
           </div>
           {{answer}}
-        </div> 
-      </div>
-      <br/>
-    {{/poll.poll_answers}}
-    <input type="submit" class="button submit" style="float:right;" value="{{t "poll.vote"}}"/>
+          <p class="percentage"></p>
+        </div>
+      {{/poll.poll_answers}}
+    </div>
+
   </div>
 {{/if}}

app/controllers/poll_participations_controller.rb

@@ -3,15 +3,15 @@ class PollParticipationsController < ApplicationController
   before_filter :authenticate_user!
 
   def create
-    answer = PollAnswer.find(params[:poll_answer_id])
-    poll_participation = current_user.participate_in_poll!(target, answer) if target rescue ActiveRecord::RecordInvalid
-  	if poll_participation
+    begin
+      answer = PollAnswer.find(params[:poll_answer_id])
+      poll_participation = current_user.participate_in_poll!(target, answer) if target
       respond_to do |format|
         format.html { redirect_to :back }
         format.mobile { redirect_to stream_path }
-        format.json { render :nothing => true, :status => 201 }
+        format.json { render json: poll_participation, :status => 201 }
       end
-    else
+    rescue ActiveRecord::RecordInvalid
       respond_to do |format|
         format.html { redirect_to :back }
         format.mobile { redirect_to stream_path }

app/models/poll.rb

@@ -13,8 +13,6 @@ class Poll < ActiveRecord::Base
   delegate :author, :author_id, :public?, :subscribers, to: :status_message
 
   validate :enough_poll_answers
-
-  #TODO check if user has the right to vote
   
   self.include_root_in_json = false
 
@@ -28,12 +26,15 @@ class Poll < ActiveRecord::Base
       :post_id => self.status_message.id,
       :question => self.question,
       :poll_answers => self.poll_answers,
-      :participation_count => self.participation_count
-      #TODO already participated?
+      :participation_count => self.participation_count,
     }
   end
 
   def participation_count
     poll_answers.sum("vote_count")
   end
+
+  def already_participated?(user)
+    poll_participations.where(:author_id => user.person.id).present?
+  end
 end

app/presenters/post_presenter.rb

@@ -35,7 +35,8 @@ class PostPresenter
         :root => root,
         :title => title,
         :address => @post.address,
-        :poll => @post.poll,
+        :poll => @post.poll(),
+        :already_participated_in_poll => already_participated_in_poll,
 
         :interactions => {
             :likes => [user_like].compact,
@@ -73,6 +74,14 @@ class PostPresenter
     @current_user.present?
   end
 
+  private
+
+  def already_participated_in_poll
+    if @post.poll
+      @post.poll.already_participated?(current_user)
+    end
+  end
+
 end
 
 class PostInteractionPresenter

app/views/publisher/_publisher_blueprint.html.haml

@@ -28,8 +28,7 @@
             %span#publisher-images
               %span.markdownIndications
                 != t('shared.publisher.formatWithMarkdown', markdown_link: link_to(t('help.markdown'), 'https://diasporafoundation.org/formatting', target: :blank))
-              #poll_creator.btn{:title => t('.create_poll')}
-                = image_tag 'icons/poll.png', :alt => t('.create_poll').titleize, :class => 'publisher_image'              
+              %a{:id => "poll_creator", :href => "#", :class => "entypo bar-graph gray small publisher_image"}             
               #locator.btn{:title => t('shared.publisher.get_location')}
                 = image_tag 'icons/marker.png', :alt => t('shared.publisher.get_location').titleize, :class => 'publisher_image'
               #file-upload.btn{:title => t('shared.publisher.upload_photos')}
@@ -39,12 +38,13 @@
           %br
           #poll_creator_wrapper
             = t('shared.publisher.poll.add_a_poll')
-            %input{:id => 'poll_question', :placeholder => t('shared.publisher.poll.question'), :name => 'poll_question'}
+            #poll_question_wrapper
+              %input{:id => 'poll_question', :placeholder => t('shared.publisher.poll.question'), :name => 'poll_question'}
             .poll_answer
               %span{:class => 'poll_answer_input_wrapper'}
                 %input{:class => 'poll_answer_input', :placeholder => t('shared.publisher.poll.option'), :name => 'poll_answers[]'}
-              %a{:class => 'remove_poll_answer'}
-                = t('shared.publisher.poll.remove_poll_answer')
+              %a{:class => 'remove_poll_answer', :title => t('shared.publisher.poll.remove_poll_answer')}
+                .icons-deletelabel
             #add_poll_answer_wrapper
               #add_poll_answer{:class => 'button creation'}
                 = t('shared.publisher.poll.add_poll_answer')

config/locales/javascript/javascript.en.yml

@@ -175,4 +175,6 @@ en:
 
     poll:
       vote: "Vote"
-      result: "<%=votes%> votes so far"
+      result: "Result"
+      count: "<%=votes%> votes so far"
+      toggle_result: "Toggle result"