↓↓クリックして頂けると励みになります。
【29 | 予約機能実装】 << 【ホーム】 >> 【31 | raty-js】
予約の確認ができるようにビューを実装していきます。
ゲスト側とホスト側で分けて実装します。
ゲスト側
宿泊者（ゲスト）の予約確認ページを作成します。
まずはコントローラの設定です。
「app\controllers\reservations_controller.rb」ファイルにyour_tripsメソッドを追加します。
記述追加 app\controllers\reservations_controller.rb(27行目)
def your_trips @trips = current_user.reservations.order(start_date: :asc) end
app\controllers\reservations_controller.rb
class ReservationsController < ApplicationController before_action :authenticate_user! def create room = Room.find(params[:room_id]) if current_user == room.user flash[:alert] = "ホストが予約することはできません。" else start_date = Date.parse(reservation_params[:start_date]) end_date = Date.parse(reservation_params[:end_date]) days = (end_date - start_date).to_i + 1 @reservation = current_user.reservations.build(reservation_params) @reservation.room = room @reservation.price = room.price @reservation.total = room.price * days @reservation.save flash[:notice] = "予約が完了しました。" end redirect_to room end def your_trips @trips = current_user.reservations.order(start_date: :asc) end private def reservation_params params.require(:reservation).permit(:start_date, :end_date) end end
ルートを設定します。
記述追加 config\routes.rb
「get '/your_trips' => 'reservations#your_trips'」の記述追加（10行目）
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' # get get '/dashboard', to: 'users#dashboard' get 'pages/home' get '/users/:id', to: 'users#show', as: 'user' get '/your_trips' => 'reservations#your_trips' # post post '/users/edit', to: 'users#update' 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 # device devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
「app\views\reservations」フォルダに「your_trips.html.erb」ファイルを新規作成します。
app\views\reservations\your_trips.html.erb（新規作成したファイル）
<div class="container mt-4"> <div class="card"> <div class="card-body"> <h5 class="card-title text-danger h3 font1">予約内容(ゲスト)</h5> <% if @trips.blank? %> <h5 class="font1">表示できる予約はありません。</h5> <% end %> <% @trips.each do |trip| %> <div class="card mt-4"> <div class="card-body"> <ul class="list-group"> <li class="list-group-item" style="border: none;"> <span class="font1">申込日：</span><%= I18n.l(trip.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">部屋名：</span> <%= link_to room_path(trip.room), style: "text-decoration: none;", data: { turbolinks: false} do %> <span class="btn btn-light"><%= trip.room.listing_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">ホスト：</span> <%= link_to user_path(trip.room.user), class: "tootip", style: "text-decoration: none;" do %> <span class="btn btn-light"><%= trip.room.user.full_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">宿泊日：</span> <%= I18n.l(trip.start_date, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">ご出発：</span> <%= I18n.l(trip.end_date, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">泊数：</span><%=trip.total/trip.price %>泊 </li> <li class="list-group-item" style="border: none;"> <span class="font1">料金：</span><%= number_to_currency(trip.total) %> </li> </ul> </div> </div> <% end %> </div> </div> </div>
ゲストの予約一覧が表示されています。
ブラウザ確認
宿泊者の予約確認ページです。
http://localhost:3000/your_trips
ホスト側
部屋登録者（ホスト）の予約確認ページを作成します。
記述追加 app\controllers\reservations_controller.rb（31行目）
def your_reservations @rooms = current_user.rooms end
app\controllers\reservations_controller.rb
class ReservationsController < ApplicationController before_action :authenticate_user! def create room = Room.find(params[:room_id]) if current_user == room.user flash[:alert] = "ホストが予約することはできません。" else start_date = Date.parse(reservation_params[:start_date]) end_date = Date.parse(reservation_params[:end_date]) days = (end_date - start_date).to_i + 1 @reservation = current_user.reservations.build(reservation_params) @reservation.room = room @reservation.price = room.price @reservation.total = room.price * days @reservation.save flash[:notice] = "予約が完了しました。" end redirect_to room end def your_trips @trips = current_user.reservations.order(start_date: :asc) end def your_reservations @rooms = current_user.rooms end private def reservation_params params.require(:reservation).permit(:start_date, :end_date) end end
記述追加 config\routes.rb
11行目に「get '/your_reservations' => 'reservations#your_reservations'」の記述を追加
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' # get get '/dashboard', to: 'users#dashboard' get 'pages/home' get '/users/:id', to: 'users#show', as: 'user' get '/your_trips' => 'reservations#your_trips' get '/your_reservations' => 'reservations#your_reservations' # post post '/users/edit', to: 'users#update' 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 # device devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {omniauth_callbacks: 'omniauth_callbacks', registrations: 'registrations'} # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html end
「app\views\reservations」フォルダに「your_reservations.html.erb」ファイルを新規作成します。
app\views\reservations\your_reservations.html.erb(新規作成したファイル)
<div class="container mt-4"> <div class="card"> <div class="card-body"> <h5 class="card-title text-danger h3 font1">予約内容(ホスト)</h5> <% if @rooms.blank? %> <h5 class="font1">表示できる予約はありません。</h5> <% end %> <% @rooms.each do |room| %> <% room.reservations.each do |reservation| %> <div class="card mt-4"> <div class="card-body"> <ul class="list-group"> <li class="list-group-item" style="border: none;"> <span class="font1">申込日：</span><%= I18n.l(reservation.created_at, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">部屋名：</span> <%= link_to room_path(reservation.room), style: "text-decoration: none;", data: { turbolinks: false} do %> <span class="btn btn-light"><%= reservation.room.listing_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">ゲスト：</span> <%= link_to user_path(reservation.room.user), class: "tootip", style: "text-decoration: none;" do %> <span class="btn btn-light"><%= reservation.user.full_name %></span> <% end %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">宿泊日：</span> <%= I18n.l(reservation.start_date, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">ご出発：</span> <%= I18n.l(reservation.end_date, format: :full_date) %> </li> <li class="list-group-item" style="border: none;"> <span class="font1">泊数：</span><%=reservation.total/reservation.price %>泊 </li> <li class="list-group-item" style="border: none;"> <span class="font1">料金：</span><%= number_to_currency(reservation.total) %> </li> </ul> </div> </div> <% end %> <% end %> </div> </div> </div>
ホストの人が入った予約を確認できるようになりました。
ブラウザ確認
部屋登録者（ホスト）用の予約確認ページです。
http://localhost:3000/your_reservations
ナビゲーションバーのリンク部分を追加します。
１．37行目に「<%= link_to "受注予約管理", your_reservations_path, class: "dropdown-item btn btn-light" %>」
２．39行目に「<%= link_to "予約確認", your_trips_path, class: "dropdown-item btn btn-light" %>」
記述追加 app\views\shared\_navbar.html.erb
<nav class="navbar navbar-expand-lg bg-body-tertiary"> <div class="container-fluid"> <a class="navbar-brand" href="/"><span class="font1">Vacation Rental</span></a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarSupportedContent"> <ul class="navbar-nav me-auto mb-2 mb-lg-0"> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <li class="nav-item" style="margin-bottom: 0.1rem;"> <span style="margin-left: 1rem;"> <%= link_to "新規登録", new_user_registration_path, class: "btn btn-danger" %> </span> </li> <li class="nav-item"> <span style="margin-left: 1rem;"> <%= link_to "ログイン", new_user_session_path, class: "btn btn-success text-light" %> </span> </li> </ul> <!-- ログインしていたら --> <% else %> <ul class="navbar-nav" style="margin-left: 2rem;"> <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false"> <figure style="position:relative; top: 0.2rem;" 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> <ul class="dropdown-menu"> <li><%= link_to "ダッシュボード", dashboard_path, class: "dropdown-item btn btn-lightt" %></li> <li><%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"><span class="badge bg-danger">ホスト</span></li> <li><%= link_to "部屋を新規登録", new_room_path, class: "dropdown-item btn btn-light" %></li> <li><%= link_to "受注予約管理", your_reservations_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"><span class="badge bg-primary">ゲスト</span></li> <li><%= link_to "予約確認", your_trips_path, class: "dropdown-item btn btn-light" %></li> <li><hr class="dropdown-divider"></li> <li><%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "dropdown-item btn btn-light" %></li> </ul> </li> </ul> <% end %> </div> </div> </nav>
表示を確認します。
【29 | 予約機能実装】 << 【ホーム】 >> 【31 | raty-js】
↓↓クリックして頂けると励みになります。
