Merge pull request #16 from josefzacek/layout-update-basic-messages-i…

…mplementation

Layout update basic messages implementation

app/assets/javascripts/chatrooms.js

@@ -0,0 +1,8 @@
+$(document).on('turbolinks:load', function() {
+  $('#new_message').on('keypress', function(e) {
+    if(e && e.keyCode == 13){
+      e.preventDefault();
+      $(this).submit();
+    }
+  });
+});

app/assets/stylesheets/application.scss

@@ -1,3 +1,13 @@
 @import "bootstrap-sprockets";
 @import "bootstrap";
 @import 'devise_flash_messages';
+
+.container-fluid.content-container {
+  padding-top: 70px;
+}
+
+.sidebar-fixed-position {
+  position: fixed;
+  top: 70;
+  left: 0;
+}

app/assets/stylesheets/messages.scss

@@ -0,0 +1,3 @@
+// Place all the styles related to the Messages controller here.
+// They will automatically be included in application.css.
+// You can use Sass (SCSS) here: http://sass-lang.com/

app/controllers/chatrooms_controller.rb

@@ -10,6 +10,7 @@ def index
   # GET /chatrooms/1
   # GET /chatrooms/1.json
   def show
+    @messages = @chatroom.messages.order(created_at: :desc).limit(100).reverse
   end
 
   # GET /chatrooms/new

app/controllers/messages_controller.rb

@@ -0,0 +1,21 @@
+class MessagesController < ApplicationController
+  before_action :authenticate_user!
+  before_action :set_chatroom
+
+  def create
+    message = @chatroom.messages.new(message_params)
+    message.user = current_user
+    message.save
+    redirect_to @chatroom
+  end
+
+  private
+
+  def set_chatroom
+    @chatroom = Chatroom.find(params[:chatroom_id])
+  end
+
+  def message_params
+    params.require(:message).permit(:body)
+  end
+end

app/helpers/messages_helper.rb

@@ -0,0 +1,2 @@
+module MessagesHelper
+end

app/views/chatrooms/show.html.slim

@@ -0,0 +1,14 @@
+p 
+  strong Chatroom name: 
+  = @chatroom.name
+
+
+div data-behavior='messages'
+  - @messages.each do |message|
+    div
+      strong = message.user.username
+      |: 
+      = message.body
+
+= form_for [@chatroom, Message.new] do |f|
+  = f.text_area :body, rows: 1, autofocus: true, class: 'form-control' 

app/views/layouts/_header_navigation.html.slim

@@ -1,4 +1,4 @@
-nav.navbar.navbar-default.navbar-static-top
+nav.navbar.navbar-default.navbar-fixed-top
   .container-fluid
     .navbar-header
       button.navbar-toggle.collapsed type='button' data-toggle='collapse' data-target='#navbar' aria-expanded='false' aria-controls='navbar'

app/views/layouts/application.html.slim

@@ -15,18 +15,19 @@ html lang="en"
 
     = render "layouts/header_navigation"
 
-    .container-fluid
+    .container-fluid.content-container
 
       = render 'layouts/flash_messages'
 
       .row
-        .col-sm-2
+        .col-sm-3.sidebar-fixed-position
           - if user_signed_in?
             h5 Chatrooms
-            ul
+            ul.nav.nav-pills.nav-stacked
               - current_user.chatrooms.each do |chatroom|
-                li = link_to chatroom.name, '#'
-        .col-sm-10
+                li = link_to chatroom.name, chatroom
+
+        .col-sm-9.col-sm-offset-3
           = yield
 
       hr

config/routes.rb

@@ -3,6 +3,7 @@
 
   resources :chatrooms do
     resource :chatroom_users
+    resources :messages
   end
 
   root to: 'chatrooms#index'