I'm trying to create a "lobby" where you can join parties and the other user accepts who he wants from the list, i'm using ActionCable and Ruby on Rails
The incomming requests shows the info from the last user connected on receiving data and must show the info of incomming requests to ours (not to change our view with the other user data!).
That's the js file (coffee)
App.join = App.cable.subscriptions.create "JoinChannel",
connected: ->
# Called when the subscription is ready for use on the server
disconnected: ->
# Called when the subscription has been terminated by the server
received: (data) ->
$('#join_list_table').empty()
this.render_list(data)
$(".button-collapse").sideNav();
$(".modal-trigger").click ->
joinListId = $(this).attr('id')
App.join.joinTheList joinListId
# Called when there's incoming data on the websocket for this channel
joinTheList: (listId) ->
@perform "join", list_id: listId
$('.modal').modal opacity: 0
leave: ->
render_list: (data) ->
joinLists = data['joinLists']
for joinList in joinLists
joinings = joinList['joinings']
if joinList['user']['id'] != data['current_user_id'] # here must say if the joinlist have the same id than the user
$('#join_list_table').append(
"<tr>
<td>#{joinList['user']['name']}</td>
<td>#{joinList['user']['email']}</td>
<td>#{joinList['user']['language']}</td>
<td>#{joinList['user']['country_code']}</td>
<td>#{joinList['user']['price']}</td>
<td>#{joinList['user']['currency']}</td>
<td>
<a class='modal-trigger' id='#{joinList['list']['id']}' href='#modal#{joinList['list']['id']}' >
Join
</a>
</td>
</tr>
")
$('main').append(
"<div class='modal z-depth-0' id='modal#{joinList['list']['id']}'>
<div class='modal-content'>
<div class='col s12'>
<ul id='joinings#{joinList['list']['id']}' class='collection with-header'>
<li class='collection-header'><h4>Join list for #{joinList['user']['name']}</h4></li>
</ul>
</div>
</div>
</div>")
for joining in joinings
$("#user_#{joining['user']['id']}_joining").remove();
$("#joinings#{joinList['list']['id']}").append("<li id='user_#{joining['user']['id']}_joining'><a class='collection-item z-depth-0 center-align'>#{joining['user']['name']}</a></li>")
else
joinings = joinList['joinings']
for joining in joinings
$('#slide-out').append("<li id='user_#{joining['user']['id']}_joining'><a class='collection-item z-depth-0 center-align'>#{joining['user']['name']}</a></li>")
document.addEventListener 'turbolinks:load', ->
App.join.perform "render_all"
$('#query').on 'keyup', ->
value = $(this).val().toLowerCase()
$('tr').filter ->
$(this).toggle $(this).text().toLowerCase().indexOf(value) > -1
That's the ruby file
class JoinChannel < ApplicationCable::Channel
def subscribed
unless current_user.join_list
current_user.create_join_list
end
stream_from "join_channel"
render_all
end
def unsubscribed
if current_user.join_list.joinings
current_user.join_list.joinings.destroy_all
end
current_user.join_list.destroy
# Any cleanup needed when channel is unsubscribed
end
def join(data)
joinlist = JoinList.find(data['list_id'])
unless current_user.joining
puts "esta creando"
current_user.create_joining(join_list_id: joinlist.id)
else
puts "esta actualizando"
current_user.joining.update(join_list_id: joinlist.id)
end
render_all
end
def render_all
joinlistArr = []
joinlists = JoinList.joins(:user)
joinlists.each do |joinlist|
joiningusers = []
joinlist.joinings.each do |joining|
joiningusers << {'user' => joining.user}
end
joinlistArr << {'list' => joinlist, 'user' => joinlist.user, 'joinings' => joiningusers}
end
puts "dame los joinings de la joinlist del current_user"
puts current_user.join_list.joinings
ActionCable.server.broadcast "join_channel", {joinLists: joinlistArr, current_user_id: current_user.id}
end
end
