home.html.erb

<nav class="navbar-nav navbar-default">
  <% if user_signed_in? %>
  <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
      <span class="glyphicon glyphicon-globe"></span>
    </a>
    <ul class="dropdown-menu" role="menu">
      <% if @messages.any? %>
        <% @messages.each do |msg| %>
      <li class="drop-links"> <%= link_to 'you received a message from ' + User.find(msg.sender_id).username, conversation_path(msg.conversation_id), remote: true %></li>
        <% end %>
        <% else  %>
      <li class="drop-links"><p style="margin-right:20px;">No new messages</p></li>
      <% end %>
    </ul>
  </li>

  <ul>
    <li>signed in as <%= current_user.email %></li>
    <li> <%= link_to 'Sign out', destroy_user_session_path, method: :delete %></li>
    <li> <%= link_to 'Account', edit_user_registration_path %></li>
    <% else %>
    <li> <%= link_to 'Sign In', new_user_session_path %></li>
    <li> <%= link_to 'Sign up', new_user_registration_path %></li>
    <% end %>
  </ul>
</nav>

<div class="chat-sidebar">
  <% @users.each do |user| %>
  <div class="sidebar-name">
    <td><p class="username"> <%= user.username %></p></td>
    <% if user_signed_in? %>
    <td> <%= link_to 'Message', new_conversation_path(:recipient_id => user.id, :sender_id => current_user.id), remote: true, :class => 'btn btn-primary' %></td>
    <% end %>
  </div>
  <% end %>
</div>

<div class="well container col-md-8">
  <h1>Directions</h1>
  <p>Log in as email: [email protected] and password: password, </p>
  <p>or [email protected] and password: password.</p>
  <p>Leave comments or questions below, and enjoy!</p>
</div>



    <table class="table table-striped table-bordered">
      <tbody>
        <% @posts.each do |post| %>
        <tr>
          <td class="post-content"><%= post.body %></td>
          <td class="message-sm"> <%= post.created_at.strftime("%d %b. %Y, %H:%M") %></td>
          <td class="message-sm"> <%= post.user.username %></td>
        </tr>
        <% end %>
      </tbody>
    </table>


  <div class="container input-box">
    <%= form_for @post, remote: true do |f| %>
    <div class="field">
      <%= f.text_area :body, :class => 'text-field', placeholder: 'type a message here' %>
    </div>
    <div class="actions">
      <%= f.submit 'Send', :class => 'btn btn-primary post-submit' %>
    </div>
    <%= f.hidden_field :user_id, :value => current_user.id %>
    <% end %>
  </div>
  </div>

<% if user_signed_in? %>
<% if @messages.any?%>
<script>
  $('.glyphicon-globe').addClass('pulsit');
</script>
<% end %>
<% end %>

// Script for home.html.erb //
// function to remove an array element //
Array.remove = function(array, from, to) {
var rest = array.slice((to || from) + 1 || array.length);
array.length = from < 0 ? array.length + from : from;
return array.push.apply(array, rest);
};

       var total_popups = 0;
       var popups = [];

       // function to close a chatbox // 
       function close_popup(id) {
       for (var i = 0; i < popups.length; i++) {
           if(id === popups[i]) {
               Array.remove(popups, i);
               document.getElementById(id).style.display = "none";
               calculate_popups();
               return; 
               }
           }
       }

       // function to display chatboxes // 
       function display_popups() {
           var right = 220;
           var i = 0;
           for(i; i < total_popups; i++) {
               if(popups[i] != undefined) {
                   var element = document.getElementById(popups[i]);
                   element.style.right = right + 'px';
                   right += 320; 
                   element.style.display = "block";
               }
           }
           for(var j = i; j < popups.length; j++) {
               var element = document.getElementById(popups[j]);
               element.style.display = "none";
               }
           }

       // create markup for a new chatbox // 
       function register_popup(id, name) { 
           for(var i = 0; i < popups.length; i++) {
               if(id === popups[i]) {
                   Array.remove(popups, i); 
                   popups.unshift(id);
                   calculate_popups();
                   return;
                   }
               }
           var element = '<div class="popup-box chat-popup" id="' + id + '">'
      element += '<div class="popup-head">';
       element += '<div class="popup-head-left">' + name + '</div>';
       element += '<div class="popup-head-right"><a href="javascript:close_popup(\''+id+'\');">&#1005;</a></div>';
       element += '<div style="clear: both"></div></div><div class="popup-messages"></div></div>';
       document.getElementsByTagName('body')[0].innerHTML += element;
       popups.unshift(id);
       calculate_popups();
       }

       // calculate total number of popups // 
       function calculate_popups() {
           var width = window.innerWidth;
           if(width < 540) {
               total_popups = 0;
           }
           else {
               width -= 200;
       total_popups = parseInt(width/320);
       }
       display_popups();
      }
       // recalculate window when resized or loaded // 
       window.addEventListener("resize", calculate_popups);
       window.addEventListener("load", calculate_popups);