Adding voting system

Gemfile

@@ -1,5 +1,8 @@
 source 'https://rubygems.org'
 
+
+
+gem 'json'
 # Web socket gems
 gem 'websocket-rails'
 gem 'faye-websocket', '0.10.0'

Gemfile.lock

@@ -211,6 +211,7 @@ DEPENDENCIES
   faye-websocket (= 0.10.0)
   jbuilder (~> 2.0)
   jquery-rails
+  json
   omniauth-facebook
   pg (~> 0.15)
   pry

app/assets/javascripts/application.js

@@ -15,7 +15,7 @@
 //= require jquery_ujs
 //= require turbolinks
 //= require_tree .
-
+//= require websocket_rails/main
 
 $(document).ready(function(){
 	//array of ivited friends

app/assets/javascripts/room.js

@@ -2,6 +2,7 @@ $(document).ready(function(){
 	//Variables for DOM elements
 	var categoryListElem = $('#cat-select')	
 
+
 	// Selected categories are given the class of "active"
 	$('.category-select-indicator').on('click', function(e){
 		if ($(this).parent().hasClass('active')){
@@ -18,39 +19,54 @@ $(document).ready(function(){
 		// var c = $('#category_selected').val();
 		var arry = [];
 		var d = $('#date_selected').val();
-
+		var c ;
+
+		// Collect all chosen categories
 		for ( var i=0; i < categoryListElem.children('.active').length; i++){
 			arry.push(categoryListElem.children('.active')[i].getAttribute('value'));
-			c = arry.join(',')
+			c = arry.join(',');
 		}
-		console.log(c)
-		$.ajax({   
-			url: "http://api.eventful.com/json/events/search?callback=?",   
-			data: {     
-				app_key: "Q3knLXnFqsCt8wpQ",
-				location: "New York", 
-				categories: c,
-				date: d
-			},   
-			dataType: "json",   
-			success: function(response) 
-			{  
-				console.log(response)
-				events = response.events.event
-				for(var i =0; i < events.length; i++){
-					var elem = $('#event-results')
-					elem.append('<li>'+'<h4>'+ events[i].title+ '</h4>' +'</li>');
-
-					// Show image if valid url exist
-					elem.children().last().append('<img src="'+ (events[i].image ? events[i].image.medium.url : "/assets/no-picture.png" ) +'">');
-
-					// Show description, if description is invald display "No description"
-					elem.children().last().append('<p>'+ (events[i].description ? events[i].description: "No description" ) + '</p>')
-				}
-			} 
-		});
-	})
 
+		dispatcher.trigger('room_message_api', {categories: c, date: d, group_id: $('#group-info').val()});
+		$('#voting-stage-one').hide()
+		// $.ajax({   
+		// 	url: "http://api.eventful.com/json/events/search?callback=?",   
+		// 	data: {     
+		// 		app_key: "Q3knLXnFqsCt8wpQ",
+		// 		location: "New York", 
+		// 		categories: c,
+		// 		date: d
+		// 	},   
+		// 	dataType: "json",   
+		// 	success: function(response) 
+		// 	{  
+		// 		console.log(response)
+		// 		events = response.events.event
+		// 		for(var i =0; i < events.length; i++){
+		// 			var elem = $('#event-results')
+		// 			elem.append('<li>'+'<h4>'+ events[i].title+ '</h4>' +'</li>');
+
+		// 			// Show image if valid url exist
+		// 			elem.children().last().append('<img src="'+ (events[i].image ? events[i].image.medium.url : "/assets/no-picture.png" ) +'">');
 
+		// 			// Show description, if description is invald display "No description"
+		// 			elem.children().last().append('<p>'+ (events[i].description ? events[i].description: "No description" ) + '</p>')
+		// 		}
+		// 	} 
+		// });
+	})
+
+})
 
-})
+//function to check if user already voted returns true if an element was removed
+function removeMyVote(myId){
+	var vBoxes = $('.voting-box');
+	var rslt = false
+	vBoxes.children().each(function(){
+		if(this.getAttribute('id') == myId ){
+			rslt = true;
+			this.parentNode.removeChild(this);
+		}
+	})
+	return rslt;
+}

app/assets/stylesheets/groups.scss

@@ -7,8 +7,15 @@ $unit : 10px;
 	background: grey;
 }
 
-#cat-select {
-	.active-indicator{
-		background: green;
-	};
-}
+
+.active-indicator{
+	background: green;
+};
+
+
+
+.event-results-indicator{
+	background: grey;
+	height: $unit * 2;
+	width: $unit * 2;
+};

app/controllers/groups_controller.rb

@@ -8,7 +8,6 @@ def show
 		end
 	end
 	def create 
-		binding.pry
 		@group=Group.new(group_params)
 		if @group.save
 			@members = params[:group][:fname].split(',')
@@ -20,7 +19,7 @@ def create
 			end
 			redirect_to group_path(@group.id)
 		else 
-			redirect_to 
+			redirect_to :back
 		end 
 	end
 

app/controllers/transfers_controller.rb

@@ -0,0 +1,22 @@
+require 'net/http'
+
+class TransfersController < WebsocketRails::BaseController
+
+	def update_room
+
+	end
+
+	#request events from eventful api and sends it browser 
+	def eventful_response
+		uri = URI("http://api.eventful.com/json/events/search?callback=?&app_key=Q3knLXnFqsCt8wpQ&location=New+York&categories=#{message[:categories]}&date=#{message[:date]}") 
+
+		response = Net::HTTP.get(uri)
+		rslt = JSON.parse(response)
+
+		broadcast_message :api_response, rslt
+
+		group = Group.find(message[:group_id].to_i)
+		group.update(stage: "STAGE2")
+	end
+
+end

app/views/groups/show.html.erb

@@ -2,23 +2,140 @@ This is the group show page
 
 <h2>Group id: <%= @group.id %></h2>
 <h2>Group Name: <%= @group.name %></h2>
-
+<!-- Super secret div to pass group id to js -->
+<input id="group-info" type="hidden" value="<%= @group.id%>">
 <% @members.each do |member|%>
 	<h4><%=member.fname%></h4>
 <% end %>
 
-<ul id="cat-select">
-	<% categories_list.each do |cat|%>
-		<li class="category" value="<%= cat %>">
-			<div class="category-select-indicator"></div>
-				<p> <%= cat %></p>
-		</li>
-	<% end %>
-</ul>
-
-<p>API Form</p>
-<%= select(:category,:selected, options_for_select(categories_list.collect{|loc| [ loc , loc] }), promt: "Category")%>
-<%= select(:date,:selected, options_for_select(date_options.collect{|loc| [ loc , loc] }), promt: "Category")%>
-<button id="event-search">Search</button>
-
-<ul id="event-results"></ul>
+<!-- Stage one should only be visible by the group owner -->
+<% if current_user.id == @group.user_id%>
+	<div id="voting-stage-one">
+		<!-- this is the category selector list -->
+		<ul id="cat-select">
+			<% categories_list.each do |cat|%>
+				<li class="category" value="<%= cat %>">
+					<div class="category-select-indicator"></div>
+						<p> <%= cat %></p>
+				</li>
+			<% end %>
+		</ul>
+
+
+
+		<%= select(:date,:selected, options_for_select(date_options.collect{|loc| [ loc , loc] }), promt: "Date")%>
+		<button id="event-search">Search</button>
+	</div>
+<% end %>
+
+<!-- User put in their votes in this stage -->
+<div id="voting-stage-two">
+
+
+	<!-- Events show up in this list -->
+	<ul id="event-results"></ul>
+</div>
+
+
+
+
+
+
+<!-- Page specific javascript -->
+<script type="text/javascript">
+	// Used to open Websocket with server
+	dispatcher = new WebSocketRails($('#echo').data('uri'));
+	dispatcher.on_open = function(){ 
+ 		console.log("Connection Established"); 
+	}; 
+	// All users that see this page are on the same channel
+	room_channel = dispatcher.subscribe("<%= @group.name%>_<%= @group.id%>")
+	console.log("subscribed to: <%= @group.name%>_<%= @group.id%>")
+
+	// Listen to server api response
+	dispatcher.bind('api_response',function(data){
+		console.log(data)
+		// send the room the message from the server 
+		room_channel.trigger('channel_api_response', data);
+	})
+
+	// non-room members voting starts at this point
+	room_channel.bind('channel_api_response', function(data){
+		events = data.events.event
+		for(var i =0; i < events.length; i++){
+			var elem = $('#event-results')
+			elem.append('<li id="event-' + i +'">'+'<h4>'+ events[i].title+ '</h4>' +'</li>');
+
+			elem.children().last().append('<div class="event-results-indicator"></div>');
+
+			// Show image if valid url exist
+			elem.children().last().append('<img src="'+ (events[i].image ? events[i].image.medium.url : "https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/No_image_available.svg/200px-No_image_available.svg.png" ) +'">');
+
+			// Show description, if description is invald display "No description"
+			elem.children().last().append('<p>'+ (events[i].description ? events[i].description: "No description" ) + '</p>');
+
+			elem.children().last().append('<div class="voting-box"></div>')
+		}
+
+		// Adding a listener to all newly added events
+		$('.event-results-indicator').on('click', function(e){
+			$('.event-results-indicator').parent().removeClass('active');
+			$('.event-results-indicator').removeClass('active-indicator');
+			$('.event-results-indicator').css('background','grey');
+
+			$(this).parent().addClass('active');
+			$(this).addClass('active-indicator');
+			$(this).css('background','green');
+
+			//Websocket code to update all users in the room
+			room_channel.trigger('voting_activity', {user_id: "<%= current_user.id%>", vote: $(this).parent().attr('id') })
+		});
+
+		$('#voting-stage-two').append('<button id="finalize-button">Finalize Voting</button>');
+
+		// Adding a click listen to newly created button
+		$('#finalize-button').on('click', function(){
+			var votes = {};
+			var winner = null;
+			var winnerName;
+			$('.voting-box').children().each(function(){
+				console.log(this.parentNode.parentNode.getAttribute('id'))
+
+				if(votes[this.parentNode.parentNode.getAttribute('id')]){
+					votes[this.parentNode.parentNode.getAttribute('id')] += 1 
+				}else{
+					votes[this.parentNode.parentNode.getAttribute('id')] = 1
+				}
+			});
+
+
+			for(var key in votes){
+				if(winner){
+					if(winner < votes[key]){
+						winner = votes[key]
+						winnerName = key
+					}
+				}else{
+					winner = votes[key]
+					winnerName = key
+				}
+			}
+
+			console.log(winnerName)
+		});
+	})
+
+
+	room_channel.bind('voting_activity', function(data){
+		removeMyVote();
+		console.log("3")
+		var elem = document.getElementById(data.user_id.toString())
+		if (elem){
+			elem.parentNode.removeChild(elem);
+		}
+		$('#'+ data.vote).children('.voting-box').append('<img id="'+ data.user_id +'" src="https://www.glendaleaz.com/clerk/images/Vote_002.jpg">');
+	});
+
+
+
+</script>

app/views/layouts/application.html.erb

@@ -18,6 +18,10 @@
 </style>
 </head>
 <body>
+<!-- Used to pass information needed for websockets to js -->
+<div id="echo" data-uri="<%= request.host %>:<%= request.port %>/websocket"></div>
+
+
 <div class="bs-example">
     <nav role="navigation" class="navbar navbar-default">
         <!-- Brand and toggle get grouped for better mobile display -->

config/events.rb

@@ -11,4 +11,7 @@
   #     subscribe :new, :to => ProductController, :with_method => :new_product
   #   end
   # The above will handle an event triggered on the client like `product.new`.
+
+  subscribe :room_message_api, :to => TransfersController, :with_method => :eventful_response
+
 end

db/migrate/20160602162559_add_stage_column_to_group.rb

@@ -0,0 +1,5 @@
+class AddStageColumnToGroup < ActiveRecord::Migration
+  def change
+    add_column :groups, :stage, :string
+  end
+end