beautified the app and added online status field

app/assets/stylesheets/custom.css.scss

@@ -1,20 +1,38 @@
 @import "semantic-ui";
 
 .chatbox{
-  height: 1100px;
+  height: 1305px;
+}
+
+body{
+  background-image: linear-gradient(to right, rgb(35, 7, 77), rgb(204, 83, 51));
 }
 
 .half-chatbox{
   height: 200px;
 }
 
 .custom-container{
-  margin: 5% 5%;
+  margin: 0% 5%;
 }
 
 #messages{
   height: 15em;
   overflow: auto;
+  background-image: linear-gradient(to right, rgba(35, 7, 77, 1), rgba(204, 83, 51, 1));
+}
+
+#time-on-message{
+  float: right;
+  margin-top: 5px;
+  margin-right: 0px;
+}
+
+#username-on-message{
+  float: left;
+  margin-left: 0px;
+  color: smokewhite;
+  font-size: 15px;
 }
 
 #users{
@@ -25,6 +43,18 @@
 #my-message-body{
   margin: 2%;
   font-size: 25px;
+  background-image: linear-gradient(to right, rgba(35, 7, 77, 1), rgba(204, 83, 51, 1));
+  color: white;
+  border-bottom-left-radius: 50px;
+  border-top-left-radius: 50px;
+}
+#frnd-message-body{
+  margin: 2%;
+  border-bottom-right-radius: 50px;
+  border-top-right-radius: 50px;
+  font-size: 25px;
+  background-image: linear-gradient(to right, rgba(35, 7, 77, 1), rgba(204, 83, 51, 1));
+  color: white;
 }
 
 #message-submit{

app/channels/offline_users_channel.rb

@@ -0,0 +1,9 @@
+class OfflineUsersChannel < ApplicationCable::Channel
+  def subscribed
+    stream_from "offline_users_channel"
+  end
+
+  def unsubscribed
+    # Any cleanup needed when channel is unsubscribed
+  end
+end

app/channels/online_channel.rb → app/channels/online_users_channel.rb

@@ -1,6 +1,6 @@
-class OnlineChannel < ApplicationCable::Channel
+class OnlineUsersChannel < ApplicationCable::Channel
   def subscribed
-    stream_from "online_channel"
+    stream_from "online_users_channel"
   end
 
   def unsubscribed

app/controllers/chatroom_controller.rb

@@ -2,8 +2,8 @@ class ChatroomController < ApplicationController
   before_action :require_user
 
   def index
-    @messages = Message.all
     @message = Message.new
+    @messages = Message.custom_display
     @user = User.where(online: true)
   end
 

app/controllers/messages_controller.rb

@@ -4,7 +4,7 @@ def create
     # byebug
     message = current_user.messages.build(permit_params)
     if message.save
-      ActionCable.server.broadcast "chatroom_channel", mod_message: message_render(message)
+      ActionCable.server.broadcast "chatroom_channel", mod_message: message.body, current_user: current_user.id, user: message.user.id, username: message.user.username
     end
   end
 
@@ -13,8 +13,8 @@ def permit_params
     params.require(:message).permit(:body)
   end
 
-  def message_render(message)
-    render(partial: 'message', locals: {message: message})
-  end
+  # def message_render(message)
+  #   render(partial: 'message', locals: {message: message})
+  # end
 
 end

app/controllers/sessions_controller.rb

@@ -11,6 +11,7 @@ def create
     if @user
       session[:user_id] = @user.id
       User.find(@user.id).update(online: true);
+      ActionCable.server.broadcast "online_users_channel", username: @user.username, id: @user.id
       flash[:success] = "You are successfully logged in."
       redirect_to chatroom_path
     else
@@ -20,8 +21,10 @@ def create
   end
 
   def destroy
-    User.find(session[:user_id]).update(online: false);
+    @user = User.find(session[:user_id])
+    @user.update(online: false);
     session[:user_id] = nil
+    ActionCable.server.broadcast "offline_users_channel", id: @user.id
     flash[:success] = "You are successfully logged out."
     redirect_to login_path
   end

app/javascript/channels/chatroom_channel.js

@@ -10,7 +10,11 @@ consumer.subscriptions.create("ChatroomChannel", {
   },
 
   received(data) {
-    $('#message-container').append(data.mod_message)
+    if ($('#h1-tag-index').data('current') == data.user) {
+      $('#message-container').append("<p class= 'ui right green aligned header' id='my-message-body'><big><em>" + data.username + "</em>:</big> " + data.mod_message + "</p>")
+    } else {
+      $('#message-container').append("<p class= 'ui left teal aligned header' id='my-message-body'><big><em>" + data.username + "</em>:</big> " + data.mod_message + "</p>")
+    }
     scroll_bottom()
   }
 });

app/javascript/channels/offline_users_channel.js

@@ -0,0 +1,16 @@
+import consumer from "./consumer"
+
+consumer.subscriptions.create("OfflineUsersChannel", {
+  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) {
+    // Called when there's incoming data on the websocket for this channel
+    $('#'+data.id).remove();
+  }
+});

app/javascript/channels/online_users_channel.js

@@ -0,0 +1,16 @@
+import consumer from "./consumer"
+
+consumer.subscriptions.create("OnlineUsersChannel", {
+  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) {
+    // Called when there's incoming data on the websocket for this channel
+    $('#online-users-container').append("<div class='item' id='"+ data.id +"'><img class= 'ui avatar image' src= '/assets/avtar-for-message-me.png' id= 'profile-pic-online'><div class='content'><div class='header'>" + data.username + "</div></div></div>")
+  }
+});

app/models/message.rb

@@ -1,4 +1,5 @@
 class Message < ApplicationRecord
   validates :body, presence: true
   belongs_to :user
+  scope :custom_display, -> { order(:created_at).last(50) }
 end

app/views/chatroom/index.html.erb

@@ -1,4 +1,7 @@
-<h1>Welcome to Chatroom</h1>
+<%= content_tag "h1", class: "ui center aligned inverted icon header", id: "h1-tag-index", data: {current: current_user.id} do%>
+  <i class="users icon"></i>
+  Welcome to Chatroom
+<% end %>
 <div class="ui stackable two column grid">
   <div class="sixteen wide column">
     <div class="ui fluid raised card half-chatbox">
@@ -20,8 +23,9 @@
       <div class="extra content">
         <%= form_for(@message, html: {class: "ui reply form", role: "form"}, url: message_path, remote: true) do |f| %>
           <div class="field">
-            <div class="ui left massive icon input">
+            <div class="ui right massive icon input">
               <%= f.text_field :body, id: "message_body", placeholder: "Enter your message"%>
+              <i class="rocket icon"></i>
               <%= f.button '<i class="rocket icon"></i>'.html_safe, id: "message-submit" %>
             </div>
           </div>

app/views/messages/_message.html.erb

@@ -1,9 +1,29 @@
 <div class="content">
   <div class="summary">
     <% if session[:user_id] == message.user.id%>
-      <p class= "ui right green aligned header" id="my-message-body"><big><em><%= message.user.username %></em>:</big> <%= message.body %></p>
+      <p class= "ui right green aligned header">
+        <span class="ui label" id="my-message-body">
+          <%= message.body %>
+          <br>
+          <span class= "ui grey circular mini label" id="time-on-message">
+            <%= message.created_at.strftime("%I:%M %p") %>
+          </span>
+        </span>
+      </p>
     <% else %>
-      <p class= "ui left teal aligned header" id="my-message-body"><big><em><%= message.user.username %></em>:</big> <%= message.body %></p>
+      <p class= "ui left teal aligned header">
+        <span class="ui label" id="frnd-message-body">
+          <span class= "" id="username-on-message">
+            <em><%= message.user.username %>:</em>
+          </span>
+          <br>
+          <%= message.body %>
+          <br>
+          <span class= "ui grey circular mini label" id="time-on-message">
+            <%= message.created_at.strftime("%I:%M %p") %>
+          </span>
+        </span>
+      </p>
     <% end %>
   </div>
 </div>

test/channels/offline_users_channel_test.rb

@@ -0,0 +1,8 @@
+require "test_helper"
+
+class OfflineUsersChannelTest < ActionCable::Channel::TestCase
+  # test "subscribes" do
+  #   subscribe
+  #   assert subscription.confirmed?
+  # end
+end

test/channels/online_users_channel_test.rb

@@ -0,0 +1,8 @@
+require "test_helper"
+
+class OnlineUsersChannelTest < ActionCable::Channel::TestCase
+  # test "subscribes" do
+  #   subscribe
+  #   assert subscription.confirmed?
+  # end
+end