App.chatChannel = App.cable.subscriptions.create { channel: “ChatChannel”, room: “Best_Room” },
received: (data) -> @appendLine(data) appendLine: (data) -> if (data.type_of_message == "chat_person") html = @createLine(data) $("#room").append(html) $('#chat-message-counter').text(parseInt($('#chat-message-counter').text()) + 1) $('.chat-feedback').hide() $('#room').animate({scrollTop: $('#room').prop("scrollHeight")}, 500) else if (data.type_of_message == "bot") html = @createLine(data) $("#room").append(html) $('#chat-message-counter').text(parseInt($('#chat-message-counter').text()) + 1) $('.chat-feedback').hide() $('#room').animate({scrollTop: $('#room').prop("scrollHeight")}, 500) else if (data.type_of_message == "search") html = @createCard(data) $("#room").append(html) $('#chat-message-counter').text(parseInt($('#chat-message-counter').text()) + 1) $('.chat-feedback').hide() $('#room').animate({scrollTop: $('#room').prop("scrollHeight")}, 500) createLine: (data) -> """ <div class="chat-message clearfix"> <img src="http://gravatar.com/avatar/2c0ad52fc5943b78d6abe069cc08f320?s=32" alt="" width="32" height="32"> <div class="chat-message-content clearfix"> <span class="chat-time">#{data["time"]}</span> <h5>#{data["sent_by"]}</h5> <p>#{data["body"]}</p> </div> <!-- end chat-message-content --> </div> <!-- end chat-message --> <hr> """ createCard: (data) -> div_data = """ <h4>Here are results for #{data['query']}</h4><div class="chat-message clearfix" style="width:700px;overflow-x:scroll;overflow:hidden;"> """ for data in data.products div_data += """ <div class="card" style="width:100px;float:left;margin-right:10px;padding: 10px; border: 1px solid grey;"> <a href="#{data['link']}"><img src="#{data['image']}" alt="Avatar" style="width:100%;max-height:100px;max-width:100px;"></a> <div class="container"> <h4><b>#{data["body"]}</b></h4> </div> </div> """ div_data += "</div>" $(document).ready -> $('form#message_form').submit (event) -> #HERE App.chatChannel.send({ sent_by: $('#name').val(), body: $('#msg_text').val(), type_of_message: "chat_person" }) event.preventDefault() $('#chat-message-counter').text('0') $('.chat-feedback').show() $('#msg_text').val('')