Rails6.1 | 民泊予約アプリ作成 | 29 | 予約機能実装

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

【28 | Datepicker】 << 【ホーム】 >> 【30 | 予約確認】

実際に予約ができるよう、実装していきます。

「app\controllers\rooms_controller.rb」ファイルを編集します。


１．記述追加　app\controllers\rooms_controller.rb(75行目)

  # 予約 開始日のAJAX処理
  def preload
    today = Date.today
    reservations = @room.reservations.where("start_date >= ? OR end_date >= ?", today, today)

    render json: reservations
  end

  #　予約 終了日のAJAX処理
  def preview
    start_date = Date.parse(params[:start_date])
    end_date = Date.parse(params[:end_date])

    output = {
      conflict: is_conflict(start_date, end_date, @room)
    }

    render json: output
  end

２．記述追加　app\controllers\rooms_controller.rb(113行目)

    # 予約　プライベートメソッド
    def is_conflict(start_date, end_date, room)
      check = room.reservations.where("? < start_date AND end_date < ?", start_date, end_date)
      check.size > 0? true : false
    end

app\controllers\rooms_controller.rb

class RoomsController < ApplicationController

  protect_from_forgery except: [:upload_photo]

  before_action :set_room, except: [:index, :new, :create]
  before_action :authenticate_user!, except: [:show]
  before_action :is_authorised, only: [:listing, :pricing, :photo_upload, :delete_photo, :amenities, :location, :update]

  def index
     @rooms = Room.all
  end

  def new
    @room = current_user.rooms.build
  end

  def create
    @room = current_user.rooms.build(room_params)
    if @room.save
      redirect_to listing_room_path(@room), notice: "保存しました。"
    else
      flash[:alert] = "問題が発生しました。"
      render :new
    end
  end

  def show
    @photos = @room.photos
    @i = 0

  end

  def listing
  end

  def pricing
  end

  def description
  end

  def photo_upload
  end

  def amenities
  end

  def location
  end

  def update

    new_params = room_params
    new_params = room_params.merge(active: true) if is_ready_room

    if @room.update(new_params)
      flash[:notice] = "保存しました。"
    else
      flash[:alert] = "問題が発生しました。"
    end
    redirect_back(fallback_location: request.referer)
  end

  def upload_photo
    @room.photos.attach(params[:file])
    render json: { success: true }
  end

  def delete_photo
    @image = ActiveStorage::Attachment.find(params[:photo_id])
    @image.purge
    redirect_to photo_upload_room_path(@room)
  end

  # 予約 開始日のAJAX処理
  def preload
    today = Date.today
    reservations = @room.reservations.where("start_date >= ? OR end_date >= ?", today, today)

    render json: reservations
  end

  #　予約 終了日のAJAX処理
  def preview
    start_date = Date.parse(params[:start_date])
    end_date = Date.parse(params[:end_date])

    output = {
      conflict: is_conflict(start_date, end_date, @room)
    }

    render json: output
  end


  private
  def set_room
    @room = Room.find(params[:id])
  end

  def room_params
    params.require(:room).permit(:home_type, :room_type, :accommodate, :bed_room, :bath_room, :listing_name, :summary, :address, :latitude, :longitude, :is_tv, :is_kitchen, :is_air, :is_heating, :is_internet, :price, :active, :description)
  end

  def is_authorised
    redirect_to root_path, alert: "権限がありません。" unless current_user.id == @room.user_id
  end
  
  def is_ready_room
    !@room.active && !@room.price.blank? && !@room.listing_name.blank? && !@room.photos.blank? && !@room.address.blank?
  end

  # 予約　プライベートメソッド
  def is_conflict(start_date, end_date, room)
    check = room.reservations.where("? < start_date AND end_date < ?", start_date, end_date)
    check.size > 0? true : false
  end

end

記述追加　config\routes.rb
「get 'preload'」の記述追加（22行目）と「get 'preview'」の記述追加（23行目）

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'

  # 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\_form.html.erb

<%= form_for([@room, @room.reservations.new]) do |f| %>

  <div class="card">
    <div class="card-body">
      <span class="badge bg-danger mb-2">1泊 <%= number_to_currency(@room.price) %></span>
      <h5 class="card-title text-danger h4 font1 mb-4"><strong><span>予約はこちら</span></strong></h5>

      <% if (!user_signed_in?) %>
        <%= link_to  "ログインすると予約ができます", new_user_session_path, class: "btn btn-success text-light" %>
      <% else %>
        <div class="row mb-4">
            <div class="col-6">
                <span class="badge bg-success">チェックイン　</span>
                <%= f.text_field :start_date, readonly: true, placeholder: "ﾁｪｯｸｲﾝ", class: "form-control" %>
            </div>
            <div class="col-6">
                <span class="badge bg-primary">チェックアウト</span>
                <%= f.text_field :end_date, readonly: true, placeholder: "ﾁｪｯｸｱｳﾄ", class: "form-control" %>
            </div>
        </div>
        <h4 class="message-alert text-center"><span id="message"></span></h4>
        <div id="preview" style="display: none">
          <table class="reservation-table">
            <tbody>
                <tr>
                  <td><span class="badge bg-secondary">1泊料金</span></td>
                  <td class="text-right", style="white-space: nowrap"><%= number_to_currency(@room.price) %></td>
                </tr>
                <tr>
                  <td><span class="badge bg-secondary">宿泊数</span></td>
                  <td class="text-right"><span id="reservation_nights"></span>泊</td>
                </tr>
                <tr>
                  <td class="total"><span class="badge bg-info">合計料金</span></td>
                  <td class="text-right", style="white-space: nowrap"><span id="reservation_total"></span>円</td>
                </tr>
              </tbody>
          </table>
        </div>  

        <div class="mt-4">
          <%= f.submit "予約する", id: "btn_book", class: "btn btn-danger w-100", disabled: true %>
        </div>
      <% end %>
    </div>
  </div>

<% end %>

<script>
function checkDate(date) {
  dmy = date.getDate() + "-" + (date.getMonth() + 1) + "-" + date.getFullYear();
  return [$.inArray(dmy, unavailableDates) == -1];
}
$(function() {
  unavailableDates = [];
  $.ajax({
    url: '<%= preload_room_path(@room) %>',
    dateTyp: 'json',
    success: function(data) {
      $.each(data, function(arrID, arrValue) {
          for(var d = new Date(arrValue.start_date); d <= new Date(arrValue.end_date); d.setDate(d.getDate() + 1)) {
            unavailableDates.push($.datepicker.formatDate('d-m-yy', d));
          }
      });
      $('#reservation_start_date').datepicker({
        dateFormat: 'dd-mm-yy',
        //今日から３ヶ月先まで予約可能
        minDate: 0,
        maxDate: '3m',
        beforeShowDay: checkDate,
        onSelect: function(selected) {
          $('#reservation_end_date').datepicker("option", "minDate", selected);
          $('#reservation_end_date').attr("disabled", false);
          var start_date = $('#reservation_start_date').datepicker('getDate');
          var end_date = $('#reservation_end_date').datepicker('getDate');
          //２日選択すると１泊になる
          var nights = (end_date - start_date)/1000/60/60/24;
          var input = {
            'start_date': start_date,
            'end_date': end_date
          }
          $.ajax({
            url: '<%= preview_room_path(@room) %>',
            data: input,
            success: function(data) {

              if(data.conflict) {
                $('#message').text("この日付はご利用できません。");
                $('#preview').hide();
                $('#btn_book').attr('disabled', true);
              } else {
                $('#message').text("");
                $('#preview').show();
                $('#btn_book').attr('disabled', false);

                var total = nights * <%= @room.price %>
                $('#reservation_nights').text(nights);
                $('#reservation_total').text(total);
              }
            }
          });
        }
      });

      $('#reservation_end_date').datepicker({
        dateFormat: 'dd-mm-yy',
        //今日から３ヶ月先まで予約可能
        minDate: 0,
        maxDate: '3m',
        beforeShowDay: checkDate,
        onSelect: function(selected) {
          $('#reservation_start_date').datepicker("option", "maxDate", selected);
          
          var start_date = $('#reservation_start_date').datepicker('getDate');
          var end_date = $('#reservation_end_date').datepicker('getDate');
          var nights = (end_date - start_date)/1000/60/60/24;
          var input = {
            'start_date': start_date,
            'end_date': end_date
          }
          $.ajax({
            url: '<%= preview_room_path(@room) %>',
            data: input,
            success: function(data) {
              if(data.conflict) {
                $('#message').text("この日付ではご予約できません。");
                $('#preview').hide();
                $('#btn_book').attr('disabled', true);
              }
              else if(nights ==0 ){
                $('#message').text("この日付ではご予約できません。");
                $('#preview').hide();
                $('#btn_book').attr('disabled', true);
              }
            
              else {
                $('#message').text("");
                $('#preview').show();
                $('#btn_book').attr('disabled', false);
                var total = nights * <%= @room.price %>
                $('#reservation_nights').text(nights);
                $('#reservation_total').text(total);
              }
            }
          });
        }
      });
    }
  });
});

//確認ダイアログ用
function check_form() {
  var start_date = $('#reservation_start_date').datepicker('getDate');
  var end_date = $('#reservation_end_date').datepicker('getDate');

  var check_in_year = start_date.getFullYear()
  var check_in_month = start_date.getMonth()+1
  var check_in_day = start_date.getDate()

  var check_out_year = end_date.getFullYear()
  var check_out_month = end_date.getMonth()+1
  var check_out_day = end_date.getDate()

  var nights = (end_date - start_date)/1000/60/60/24;
  var total = nights * <%= @room.price %>
  var listing_name = '<%= @room.listing_name %>'

  var submitMessage = window.confirm(
    listing_name + 'の予約内容を確認してください。\r\n\r\n'+ 'チェックイン: ' + check_in_year + '年' + check_in_month +'月' + check_in_day + '日　14:00〜\r\n'
     + 'チェックアウト: '+ check_out_year + '年' + check_out_month +'月' + check_out_day + '日　〜11:00\r\n'
      +'宿泊日数: ' + nights + '泊\r\n'
       + '合計金額: ' + total + '円(税＋サービス料含む)\r\n\r\n'
       + 'この内容で予約してもよろしいですか？'
    
    );

  if (!submitMessage) {
    return false;
  };

};
</script>

実際に予約をして動作を確認してください。
ログインしないと予約カレンダーが出ないようになっています。
実際に予約できるか確認してください。
ブラウザ確認
http://localhost:3000/rooms/1

PCレイアウト

モバイルレイアウト

【28 | Datepicker】 << 【ホーム】 >> 【30 | 予約確認】

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