Rails6.0 | 民泊予約サイトの構築 | 94 | Bootstrap | 通知

[９３]Bootstrap | メッセージと会話 | 会話表示<<　[ホームに戻る]


「50 | 通知」の内容をBootstrapの記述に変更します。


コマンド
rails g model Notification content user:references


コマンド
rails g migration AddUnreadToUser unread:bigint


記述追加　db\migrate\20200729003608_add_unread_to_user.rb
3行目末尾に「, default: true」の記述追加

class AddUnreadToUser < ActiveRecord::Migration[6.0]
  def change
    add_column :users, :unread, :bigint, default: true
  end
end

コマンド　マイグレーション
rails db:migrate


記述追加　app\models\user.rb
7行目に「has_many :notifications」の記述追加

class User < ApplicationRecord

  has_many :rooms
  has_many :reservations
  has_many :guest_reviews, class_name: "GuestReview", foreign_key: "guest_id"
  has_many :host_reviews, class_name: "HostReview", foreign_key: "host_id"
  has_many :notifications

  has_one_attached :avatar

  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :confirmable, :omniauthable

  validates :full_name, presence: true, length: {maximum: 50}      

  def is_active_host
    !self.merchant_id.blank?
  end

  def self.from_omniauth(auth)
    user = User.where(email: auth.info.email).first
    if user
      if !user.provider
        user.update(uid: auth.uid, provider: auth.provider, image: auth.info.image)
      end      
      return user
    else
      where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
        user.email = auth.info.email
        user.password = Devise.friendly_token[0, 20]
        user.full_name = auth.info.name   # ユーザーモデルに名前があると仮定
        user.image = auth.info.image # ユーザーモデルに画像があると仮定
        user.uid = auth.uid
        user.provider = auth.provider
      end
    end
  end
  
end

記述追加　app\models\notification.rb
2行目に「after_create_commit { NotificationJob.perform_later self }」の記述追加

class Notification < ApplicationRecord
  after_create_commit { NotificationJob.perform_later self }
  belongs_to :user
end

「app\models\message.rb」ファイルを以下のように編集します。


１．6行目に以下の記述を追加します。

after_create_commit :create_notification

２．10行目に以下の記述を追加します。

  private
  def create_notification
    if self.conversation.sender_id == self.user_id
      sender = User.find(self.conversation.sender_id)
      Notification.create(content: "#{sender.full_name}から新しいメッセージがあります。", user_id: self.conversation.receiver_id)
    else
      sender = User.find(self.conversation.receiver_id)
      Notification.create(content: "#{sender.full_name}から新しいメッセージがあります。", user_id: self.conversation.sender_id)
    end
  end  

app\models\message.rb

class Message < ApplicationRecord

  belongs_to :user
  belongs_to :conversation

  after_create_commit :create_notification

  validates :content, presence: { message: '空白にはできません' }

  private
  def create_notification
    if self.conversation.sender_id == self.user_id
      sender = User.find(self.conversation.sender_id)
      Notification.create(content: "#{sender.full_name}から新しいメッセージがあります。", user_id: self.conversation.receiver_id)
    else
      sender = User.find(self.conversation.receiver_id)
      Notification.create(content: "#{sender.full_name}から新しいメッセージがあります。", user_id: self.conversation.sender_id)
    end
  end  

end

「app\models\reservation.rb」ファイルを以下のように編集します。


１．6行目に以下の記述を追加します。

after_create_commit :create_notification

２．13行目に以下の記述を追加します。

  private
  def create_notification
    type = self.room.Instant? ? "新規予約" : "承認待ち"
    guest = User.find(self.user_id)
    Notification.create(content: "#{guest.full_name}様から#{type}のリクエストがあります。", user_id: self.room.user_id)
  end

app\models\reservation.rb

class Reservation < ApplicationRecord

  #    status: {承認待ち: 0, 承認: 1, 不承認: 2}
  enum status: {Waiting: 0, Approved: 1, Declined: 2}

  after_create_commit :create_notification

  belongs_to :user
  belongs_to :room

  has_many :reviews

  private
  def create_notification
    type = self.room.Instant? ? "新規予約" : "承認待ち"
    guest = User.find(self.user_id)
    Notification.create(content: "#{guest.full_name}様から#{type}のリクエストがあります。", user_id: self.room.user_id)
  end

end

「app\controllers」フォルダに「notifications_controller.rb」ファイルを新規作成して下さい。


app\controllers\notifications_controller.rb(新規作成したファイル)

class NotificationsController < ApplicationController
    before_action :authenticate_user!
  
    def index
      current_user.unread = 0
      current_user.save
      @notifications = current_user.notifications.order(created_at: "DESC").page(params[:page]).per(5)
    end
  end

コマンド
rails g channel notifications


「app\javascript\channels」フォルダに「notifications.coffee」ファイルを新規作成してください。


app\javascript\channels\notifications.coffee(新規作成したファイル)

$(() ->
  App.notifications = App.cable.subscriptions.create {channel: "NotificationsChannel", id: $('#user_id').val() },
    received: (data) ->
      $('#num_of_unread').html(data.unread)
      $('#notifications').prepend(data.message)
      $('#navbar_num_of_unread').html(data.unread)
)

書き換え　app\channels\notifications_channel.rb

class NotificationsChannel < ApplicationCable::Channel
  def subscribed
    stream_from "notification_#{params[:id]}"
  end
end

コマンド
rails g job notification


書き換え　app\jobs\notification_job.rb

class NotificationJob < ApplicationJob
  queue_as :default

  def perform(notification)
    notification.user.increment!(:unread)
    ActionCable.server.broadcast "notification_#{notification.user.id}", message: render_notification(notification), unread: notification.user.unread
  end

  private

    def render_notification(notification)
      ApplicationController.render(partial: 'notifications/notification', locals: { notification: notification})
    end
end

記述追加　config\routes.rb
22行目に「get '/notifications' => 'notifications#index'」の記述追加

Rails.application.routes.draw do

  root 'pages#home'
  
  mount ActionCable.server => '/cable'

  devise_for :users, 
              path: '', 
              path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'},
              controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'}

  get 'pages/home'
  get '/dashboard', to: 'users#dashboard'
  get '/users/:id', to: 'users#show', as: 'user'
  get '/your_trips' => 'reservations#your_trips'
  get '/your_reservations' => 'reservations#your_reservations'
  get 'search' => 'pages#search'
  get 'settings/payment', to: 'users#payment', as: 'settings_payment'
  get 'settings/payout', to: 'users#payout', as: 'settings_payout'
  get '/conversations', to: 'conversations#list', as: "conversations"
  get '/conversations/:id', to: 'conversations#show', as: "conversation_detail"
  get '/notifications' => 'notifications#index'

  post '/users/edit', to: 'users#update'
  post '/settings/payment', to: 'users#update_payment', as: "update_payment"
  post 'messages', to: 'messages#create'

  resources :rooms, except: [:edit] do
    member do
      get 'listing'
      get 'pricing'
      get 'description'
      get 'photo_upload'
      get 'amenities'
      get 'location'
      get 'preload'
      get 'preview'
      delete :delete_photo
      post :upload_photo
    end
    resources :reservations, only: [:create]
  end

  resources :guest_reviews, only: [:create, :destroy]
  resources :host_reviews, only: [:create, :destroy]

  resources :reservations, only: [:approve, :decline] do
    member do
      post '/approve' => "reservations#approve"
      post '/decline' => "reservations#decline"
    end
  end  

  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

「app\views」フォルダに「notifications」フォルダを新規作成してください。
作成した「notifications」フォルダに「index.html.erb」ファイルを新規作成します。


app\views\notifications\index.html.erb(新規作成したファイル)

<div class="card">
    <div class="card-body">
        <div style="margin-left: 50px; margin-bottom: 30px;">
            <%= link_to 'メッセージを見る', conversations_path, class: "button is-primary" %>
        </div>
        <table class="table" style="margin-left: 50px; margin-bottom: 50px;">
            <div class="card" id="notifications">
                <% @notifications.each do |n| %>
                    <tr>
                        <td>
                            <strong><%= n.content %></strong>
                            <span class="pull-right"><%= time_ago_in_words(n.created_at) %>&nbsp;&nbsp;&nbsp;(&nbsp;<%= n.created_at.strftime('%Y年%-m月%-d日 %-H時%-M分') %>&nbsp;)&nbsp;</span>
                        </td>
                    </tr>
                <% end %>
            </div>
        </table>
        <!-- ページネーション -->
        <div class="card">
            <div class="card-header-title is-centered">
                <%= paginate @notifications %>
            </div>
        </div>
    </div>
</div>

ダッシュボードビューを更新します。


app\views\users\dashboard.html.erb

<div class="row" style="margin: 20px;">

    <!-- 左側 -->
    <div class="col-4">
        <div class="card">
            <div class="card-body">
                <!--通知 -->
                <div class="mx-auto" style="width: 300px;">
                    <div class="content" style="margin-left: 30px; margin-bottom: 10px;">
                        <%= link_to notifications_path do %>
                            <span id="num_of_unread"><%= current_user.unread %></span>　件の通知があります。
                        <% end %>
                    </div>
                </div>

                <!-- アバター -->
                <%= image_tag avatar_url(current_user), class: "img-fluid img-thumbnail rounded-pill" %>

                <!-- 画像アップロードボタン -->
                <div class="mx-auto" style="width: 200px;">
                    <h5 class="card-title btn-block" style="margin-left: 15px; margin-top: 10px;"><%= current_user.full_name %></h5>
                </div>            


                <a data-toggle="collapse" href="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3">
                    <div>
                        <strong>
                            <button type="button" class="btn btn-info btn-block"><i class="fas fa-upload"></i>アバター画像アップロード</button>
                        </strong>
                </a>
                <br/>
                        <div class="collapse" id="collapseExample3">

                            <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>

                                <%= f.file_field :avatar, class: "input-group-text", onchange: "this.form.submit();" %>

                            <% end %>   

                        </div>
                        <br/>
                    </div>

                <hr/>

                <!-- アカウント情報 -->
                <div style="margin-top: 10px; margin-left: 30px;">
                    アカウント登録日
                </div>      
                <div class="mx-auto" style="width: 200px;">
                    <h5 class="card-title btn-block" style="margin-top: 10px;"><strong><%= I18n.l(current_user.created_at, format: :full_date) %></strong></h5>
                </div>                      

                <hr/>

                <!-- オンラインステータス -->
                <div style="margin-top: 10px; margin-left: 30px;">
                    ステータス
                </div>
                <br/>                     
                <a data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
                    <div style="margin-left: 20px;">
                        <strong>
                            <% if current_user.status %>
                                <span class="btn btn-success"><i class="toggle far fa-edit"></i>オンライン</span>
                            <% else %>
                                <span class="btn btn-danger"><i class="toggle far fa-edit"></i>オフライン</span>
                            <% end %>
                        </strong>
                </a>
                        <div class="collapse" id="collapseExample">
                            <div class="card card-body">
                                <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>

                                        <%= f.select(:status, options_for_select([["オンライン", true], ["オフライン", false]]), {}, {class: "custom-select"}) %>
                                    <br/>
                                    <br/>
                                    <%= f.submit "保存", class: "btn btn-danger" %>
                                <% end %>

                            </div>
                        </div>
                    </div>

                    <hr/>

                    <!-- 自己紹介 -->
                    <div style="margin-top: 10px; margin-left: 30px;">
                        自己紹介
                        <br/>
                        <br/>
                        <%= current_user.about %>                        
                    </div>
                    <br/>                     
                    <a data-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2">
                        <div style="margin-left: 20px;">
                            <strong>
                                <span class="btn btn-danger"><i class="toggle far fa-edit"></i>編集</span>
                            </strong>
                    </a>
                            <div class="collapse" id="collapseExample2">
                                <div class="card card-body">
                                    <%= form_for :user, url: users_edit_url(current_user), action: :update, method: :post do |f| %>

                                        <%= f.text_area :about, autofocus: true, autocomplete: 'form'%>
                                        <br/>
                                        <br/>
                                        <%= f.submit "保存", class: "btn btn-danger" %>
                                    <% end %>
    
                                </div>
                            </div>
                        </div>

                        <hr class="h-10">
                                
                        <!-- 電話番号 -->
                        <% if !current_user.phone_number.blank? %>
                            <span class="pull-right icon-babu" style="margin-left: 20px;"><i class="far fa-check-circle" style="color:#528fff;"></i></span>&nbsp;&nbsp;電話番号登録済
                        <% else %>
                             <span style="margin-left: 20px;">電話番号を登録していません</span>
                        <% end %>

            </div>
        </div>
    </div>

    <!-- 右側 -->
    <div class="col-8">
 
        <!-- お知らせ -->
        <div class="card">
            <div class="card-header">
                お知らせ
            </div>
            <div class="card-body">
                <h5 class="card-title"></h5>
                <p class="card-text"></p>
            </div>
        </div>
        <br/>
        <!-- 登録しているお部屋 -->
        <div class="card">
            <div class="card-header">
                登録しているお部屋()
            </div>
            <div class="card-body">
                <div class="row">

                    <% current_user.rooms.each do |room| %>
                        <% if room.active? %>
                        
                            <div class="col-6 col-md-4" style="margin-bottom: 20px;">
                                <%= link_to listing_room_path(room), data: { turbolinks: false} do %>

                                    <%= image_tag room_cover(room), style: "width: 100%; height: 180;" %>

                                <% end %>
                                <%= link_to room.listing_name, room_path(room), data: { turbolinks: false} %><br/>
                                <%= room.address %>
                                <footer><%= number_to_currency(room.price) %></footer>
                            </div>
 
                        <%  end %>

                    <% end %>

                </div>

            </div>
        </div>

    </div>

</div>

「app\views\layouts\application.html.erb」ファイルを編集します。


記述追加　app\views\layouts\application.html.erb(29行目)

    <% if current_user %>
        <input type="hidden" id="user_id" value="<%= current_user.id %>">
    <% end %>

app\views\layouts\application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MinpakuBs</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <!-- Googleフォント　-->
    <link href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap" rel="stylesheet">    
    <!--　アイコン　Font Awesome　-->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- 日付ピッカー　デザインsunny-->
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/sunny/jquery-ui.css">
    <!-- 日付ピッカーの日本語化-->
    <script src="https://rawgit.com/jquery/jquery-ui/master/ui/i18n/datepicker-ja.js"></script>   
  </head>

  <body>

    <!-- ナビゲーションバー　-->
    <%= render  "shared/navbar" %>

    <!-- noty -->
    <%= render 'shared/notification' %>

    <!-- 通知用 -->
    <% if current_user %>
        <input type="hidden" id="user_id" value="<%= current_user.id %>">
    <% end %>

    <%= yield %>
  </body>
</html>

ナビゲーションバーを更新します。


記述追加　app\views\shared\_navbar.html.erb(19行目)

<!-- 通知 -->
<div style="position: relative; top: 15px; left: -35px;">
    <%= link_to notifications_path do %>
        <i class="fa fa-bell fa-2x icon-babu"></i>

        <%if current_user.unread > 0 %>
            <span class="badge" id="navbar_num_of_unread"><%= current_user.unread %></span>
        <% end %>

    <% end %>
</div>

app\views\shared\_navbar.html.erb

<nav class="navbar navbar-expand-lg navbar-dark bg-info" style="z-index: 5;">
  <a class="navbar-brand" href="/"><h1 class="navh1">MinpakuBs</h1></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
    <ul class="navbar-nav">
    <!-- もしログインしていなかったら-->
    <% if (!user_signed_in?) %>
      <li class="nav-item" style="margin-right: 20px; margin-bottom: 5px;">
        <%= link_to  "新規ユーザ登録", new_user_registration_path, class: "btn btn-light" %>
      </li>
      <li class="nav-item">
        <%= link_to  "ログイン", new_user_session_path, class: "btn btn-light", style: "margin-right: 80px;" %>
      </li>
    <!-- ログインしていたら　-->
    <% else %>

    <!-- 通知 -->
    <div style="position: relative; top: 15px; left: -35px;">
        <%= link_to notifications_path do %>
            <i class="fa fa-bell fa-2x icon-babu"></i>
            <%if current_user.unread > 0 %>
                <span class="badge" id="navbar_num_of_unread"><%= current_user.unread %></span>
            <% end %>
        <% end %>
    </div>
    
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

        <figure class="avatar <%= current_user.status ? "online" : "offline" %>"></figure>  
        <%= image_tag avatar_url(current_user), class: "bd-placeholder-img figure-img img-fluid rounded-pill", style: "width: 40px; height: 30px;" %>
 

        <%= current_user.full_name %>

        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <span class="dropdown-item"><i class="fas fa-user-edit"></i><%= link_to  "ユーザ登録情報編集", edit_user_registration_path, class: "btn btn-white" %></span>
          <hr/>
          <span class="dropdown-item"><i class="fas fa-sign-out-alt"></i><%= link_to  "ログアウト", destroy_user_session_path, method: :delete, class: "btn btn-white" %></span>
        </div>
      </li>
    <% end %>
    </ul>
  </div>
</nav>

<% if (user_signed_in?) %>

  <nav class="navbar navbar-expand-lg navbar-light bg-light" style="z-index: 4;">

    <div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
      <ul class="navbar-nav mr-auto">

        <li class="nav-item" style="margin-left: 100px; margin-bottom: 5px; margin-right: 80px;">
        <span style="margin-top:13px;"><i class="fas fa-tachometer-alt"></i></span><%= link_to 'ダッシュボード', dashboard_path, class: "btn btn-light" %>
        <span style="margin-top:13px;"><i class="far fa-comment-dots fa-flip-horizontal	"></i></i></span><%= link_to 'メッセージの確認', conversations_path, class: "btn btn-light", data: { turbolinks: false} %>
        </li>

        <li class="nav-item dropdown" style="margin-right: 50px;">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-hospital-symbol"></i>&nbsp;ホスト
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <span class="dropdown-item"><i class="fas fa-edit"></i></i><%= link_to  "お部屋を新規登録", new_room_path, class: "btn btn-white" %></span>
            <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to  "登録したお部屋一覧", rooms_path, class: "btn btn-white" %></span>
            <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "受注予約の管理", your_reservations_path, class: "btn btn-white" %></span>
            <span class="dropdown-item"><i class="far fa-credit-card"></i></i><%= link_to  "振込口座の登録", settings_payout_path, class: "btn btn-white" %></span>
            
          </div>
        </li>

        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <i class="fas fa-user-friends"></i>&nbsp;ゲスト
          </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <span class="dropdown-item"><i class="far fa-list-alt"></i><%= link_to "ご予約の確認", your_trips_path, class: "btn btn-white" %></span>
            <span class="dropdown-item"><i class="far fa-credit-card"></i><%= link_to 'クレジットカード登録', settings_payment_path, class: "btn btn-white", data: { turbolinks: false} %></span>
          </div>
        </li>

      </ul>
    </div>
  </nav>
<% end %>

記述追加　app/javascript/stylesheets/application.scss(522行目)

  //通知用数字
  .badge {
    background-color: #fad4d4;
    position: relative;
    top: -15px;
    left: -15px;
    border-radius: 50%;
    padding-left: 5px;
    padding-right: 5px;
  }

  //通知用ベル
  .fa-bell{color:#cad16c;}

ブラウザ確認
http://localhost:3000/dashboard


何かアクションがあると通知がきてわかるようになりました。

通知の表示

通知の一覧

↓↓クリックして頂けると励みになります。

[９３]Bootstrap | メッセージと会話 | 会話表示<<　[ホームに戻る]