# vote.html.erb
<legend>Vote</legend>

<% powers = [
  ['Telekenisis', :telekenisis],
  ['Mind Control', :mind_control],
  ['Flying', :flying],
  ['Invisibility', :invisibility],
  ['Super Strength', :super_strength]] %>

<%= simple_form_for :vote do |f| %>
  <div class='form-group'>
    <%= f.label :power, label: 'Which super power would you choose?', class: 'col-xs-4' %>
    <div class='col-xs-8'>
      <%= f.input_field :power, as: :radio_buttons, collection: powers %>
    </div>
  </div>
<% end %>

<legend>Results</legend>
<div class='results'>
  <% powers.each do |label, symbol| %>
    <%= content_tag :div, class: symbol do %>
      <span><%= label %></span>
      <span class='count'>
        <div class="progress">
          <div class="progress-bar progress-bar-success" role="progressbar">0</div>
        </div>
      </span>
    <% end %>
  <% end %>
</div>

# vote.js
App.vote = App.cable.subscriptions.create("VoteChannel", {
  connected: function() {
  },

  disconnected: function() {
  },

  received: function(data) {
    var power =  data['power'];
    var count = parseInt($('.' + power + ' .count').text());  
    if (data['method'] == 'add') {
      $('.results ' + '.' + power + ' .count .progress-bar').html(count + 1);
    } else if (data['method'] == 'subtract') {
      $('.results ' + '.' + power + ' .count .progress-bar').html(count - 1);
    }

    var total_count = 0;
    $('.count .progress-bar').each( function(){
      total_count = total_count + parseInt($(this).text());
    })

    $('.count .progress-bar').each( function(){
      $(this).css('width',parseInt($(this).text()) / total_count * 100 + '%');
    })
  },

  voted: function(power) {
    return this.perform('voted', { power: power });
  },

  reduce: function(power) {
    return this.perform('reduce', { power: power });
  }
});

# vote_channel.rb
class VoteChannel < ApplicationCable::Channel
  def subscribed
    stream_from "vote"
  end

  def unsubscribed
    # Any cleanup needed when channel is unsubscribed
  end

  def voted(data)
    ActionCable.server.broadcast 'vote', power: data['power'], method: 'add'
  end

  def reduce(data)
    ActionCable.server.broadcast 'vote', power: data['power'], method: 'subtract'
  end
end

# visitors.coffee
vote = ->
  clicks = new Array
  $('input[type=radio]').change ->
    clicks.push @value
    App.vote.voted @value
    App.vote.reduce clicks[clicks.length - 2]

$(document).on 'turbolinks:load', vote

# visitors.js
// Javascript version of visitors.coffee
var vote = function(){
  var clicks = new Array();
  $('input[type=radio]').change(function() {
    clicks.push(this.value);
    App.vote.voted(this.value);
    App.vote.reduce(clicks[clicks.length - 2]);
  });
}
$(document).on('turbolinks:load', vote)