[３２]予約フォーム<< [ホームに戻る] >> [３４]ページ修正
宿泊者（ゲスト）の予約確認ページを作成します。
記述追加 app\controllers\reservations_controller.rb(26行目)
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'」の記述追加（14行目）
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {registrations: 'registrations'} get 'pages/home' get '/dashboard', to: 'users#dashboard' get '/users/:id', to: 'users#show' get '/your_trips' => 'reservations#your_trips' 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 # 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（新規作成したファイル）
<section class="section"> <div class="container"> <p class="title">ご予約内容</p> <br/> <table class="table is-fullwidth" style="text-align: center;"> <thead> <tr> <th>申し込み日</th> <th>ステータス</th> <th>お部屋</th> <th>ホスト</th> <th></th> <th>料金</th> <th>アクション</th> </tr> </thead> <tbody> <% if @trips.blank? %> <tr> <td colspan="7" class="has-text-centered"><h1>表示できるご予約はありません。</h1></td> </tr> <% end %> <% @trips.each do |trip| %> <tr> <td style="padding-top: 30px;"><%= I18n.l(trip.created_at, format: :full_date) %></td> <!-- ステータス --> <td style="padding-top: 30px;"> </td> <td> <%= link_to room_path(trip.room), data: { turbolinks: false} do %> <%= image_tag room_cover(trip.room), class: "image is-64x64" %> <%= trip.room.listing_name %> <% end %> </td> <td style="padding-top: 30px;"> <%= link_to user_path(trip.room.user), class: "tootip" do %> <figure class="image is-48x48"> <%= image_tag avatar_url(trip.room.user), class: "is-rounded" %> </figure> <%= trip.room.user.full_name %> <% end %> </td> <td style="padding-top: 30px;"> 宿泊日：<%= I18n.l(trip.start_date, format: :full_date) %><br/> ご出発：<%= I18n.l(trip.end_date, format: :full_date) %> </td> <td style="padding-top: 30px;"><%= number_to_currency(trip.total) %></td> <!-- アクション --> <td style="padding-top: 30px;"> </td> </tr> <% end %> </tbody> </table> </div> </section>
ブラウザ確認
宿泊者の予約確認ページです。
http://localhost:3000/your_trips
お部屋登録者（ホスト）の予約確認ページを作成します。
記述追加 app\controllers\reservations_controller.rb（30行目）
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
15行目に「get '/your_reservations' => 'reservations#your_reservations'」の記述を追加
Rails.application.routes.draw do # ルートを app\views\pages\home.html.erb に設定 root 'pages#home' devise_for :users, path: '', path_names: {sign_up: 'register', sign_in: 'login', edit: 'profile', sign_out: 'logout'}, controllers: {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' 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 # 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(新規作成したファイル)
<section class="section"> <div class="container"> <p class="title">受注予約の一覧</p> <br/> <table class="table is-fullwidth" style="text-align: center;"> <thead> <tr> <th>申し込み日</th> <th>ステータス</th> <th>お部屋</th> <th>ゲスト</th> <th></th> <th>料金</th> <th>アクション</th> </tr> </thead> <tbody> <% if @rooms.blank? %> <tr> <td colspan="7" class="has-text-centered"><h1>表示できる受注予約はありません。</h1></td> </tr> <% end %> <% @rooms.each do |room| %> <% room.reservations.each do |reservation| %> <tr> <td style="padding-top: 30px;"><%= I18n.l(reservation.created_at, format: :full_date) %></td> <!-- ステータス --> <td style="padding-top: 30px;"> </td> <td> <%= link_to room_path(reservation.room), data: { turbolinks: false} do %> <%= image_tag room_cover(reservation.room), class: "image is-64x64" %> <%= reservation.room.listing_name %> <% end %> </td> <td style="padding-top: 30px;"> <%= link_to user_path(reservation.user), class: "tootip" do %> <figure class="image is-48x48"> <%= image_tag avatar_url(reservation.user), class: "is-rounded" %> </figure> <%= reservation.user.full_name %> <% end %> </td> <td style="padding-top: 30px;"> 宿泊日：<%= I18n.l(reservation.start_date, format: :full_date) %><br/> ご出発：<%= I18n.l(reservation.end_date, format: :full_date) %> </td> <td style="padding-top: 30px;"><%= number_to_currency(reservation.total) %></td> <!-- アクション --> <td style="padding-top: 30px;"> </td> </tr> <% end %> <% end %> </tbody> </table> </div> </section>
ブラウザ確認
お部屋登録者（ホスト）用の予約確認ページです。
http://localhost:3000/your_reservations
ナビゲーションバーのリンク部分を追加します。
１．64行目に「<%= link_to "受注予約の管理", your_reservations_path, class: "navbar-item" %>」
２．70行目に「<%= link_to "ご予約の確認", your_trips_path, class: "navbar-item" %>」
記述追加 app\views\shared\_navbar.html.erb
<nav class="navbar is-light" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/"> <h1>テストサイトMinpaku6</h1> </a> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu"> <div class="navbar-start"> <div class="navbar-item"> </div> </div> <div class="navbar-end"> <a class="navbar-item"></a> <a class="navbar-item"></a> <!-- もしログインしていなかったら--> <% if (!user_signed_in?) %> <div class="navbar-item"> <div class="buttons"> <%= link_to "新規ユーザ登録", new_user_registration_path, class: "button is-white" %> <%= link_to "ログイン", new_user_session_path, class: "button is-white" %> </div> </div> <!-- ログインしていたら --> <% else %> <div class="navbar-item has-dropdown is-hoverable" style="margin-right: 100px;"> <a class="navbar-item"> <figure class="image is-48x48 m-r-5"> <div style="margin-top: 0.6rem;"> <%= image_tag avatar_url(current_user), class: "is-rounded" %> </div> </figure> <%= current_user.full_name %> </a> <div class="navbar-dropdown"> <%= link_to "ユーザ登録情報編集", edit_user_registration_path, class: "navbar-item" %> <a href="" class="navbar-item"></a> <hr class="navbar-divider"> <%= link_to "ログアウト", destroy_user_session_path, method: :delete, class: "navbar-item" %> </div> </div> <% end %> </div> </div> </nav> <% if (user_signed_in?) %> <nav class="navbar has-shadow" style="z-index: 3;"> <div class="container"> <div class="navbar"> <%= link_to 'ダッシュボード', dashboard_path, class: "navbar-item" %> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">ホスト</a> <div class="navbar-dropdown"> <%= link_to "お部屋を新規登録", new_room_path, class: "navbar-item" %> <%= link_to "登録したお部屋一覧", rooms_path, class: "navbar-item" %> <%= link_to "受注予約の管理", your_reservations_path, class: "navbar-item" %> </div> </div> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link">ゲスト</a> <div class="navbar-dropdown"> <%= link_to "ご予約の確認", your_trips_path, class: "navbar-item" %> <a class="navbar-item"></a> </div> </div> </div> </div> </nav> <% end %> <script> $(document).ready(function() { // navbar burgerアイコンでクリックイベントを確認する $(".navbar-burger").click(function() { // 「navbar-burger」と「navbar-menu」の両方で「is-active」クラスを切り替える $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); </script>
↓↓クリックして頂けると励みになります。
[３２]予約フォーム<< [ホームに戻る] >> [３４]ページ修正
