記述追加 app\views\rooms\show.html.erb
「<%= render 'reservations/form' %>」の記述追加(179行目)
<!-- 写真 --> <div class="row"> <div class="col-md-12"> <%= image_tag @room.cover_photo(nil), width: "100%" %> </div> </div> <br/> <div class="row"> <!-- 左パネル --> <div class="col-md-8"> <!-- お部屋の名前 --> <div class="row"> <div class="col-md-8"> <h1><%= @room.listing_name %></h1> <%= @room.address %> </div> <div class="col-md-4 text-center"> <%= image_tag @room.user.gravatar_url, class: "img-circle avatar-large" %><br/><br/> <%= @room.user.fullname %> </div> </div> <hr/> <!-- 部屋のインフォメーション --> <div class="row text-babu"> <div class="row text-center row-space-1"> <div class="col-md-3"> <i class="fa fa-home fa-2x"></i> </div> <div class="col-md-3"> <i class="fa fa-user-circle-o fa-2x"></i> </div> <div class="col-md-3"> <i class="fa fa-bed fa-2x"></i> </div> <div class="col-md-3"> <i class="fa fa-bath fa-2x"></i> </div> </div> <div class="row text-center"> <div class="col-md-3"><%= @room.home_type %></div> <div class="col-md-3"><%= pluralize(@room.accommodate, "人宿泊可能") %></div> <div class="col-md-3"><%= pluralize(@room.bed_room, "台") %></div> <div class="col-md-3"><%= pluralize(@room.bath_room, "部屋") %></div> </div> </div> <hr/> <!-- 詳細 --> <div class="row"> <div class="col-md-12"> <h3>お部屋の詳細</h3> <p><%= @room.summary %></p> </div> </div> <hr/> <!-- アメニティ --> <div class="row"> <div class="col-md-3"> <h4>アメニティ</h4> </div> <div class="col-md-9"> <div class="row"> <div class="col-md-6"> <ul class="amenities"> <li class="<%= 'text-line-through' if !@room.is_tv %>">テレビ</li> <li class="<%= 'text-line-through' if !@room.is_kitchen %>">キッチン</li> <li class="<%= 'text-line-through' if !@room.is_internet %>">インターネット</li> </ul> </div> <div class="col-md-6"> <ul class="amenities"> <li class="<%= 'text-line-through' if !@room.is_heating %>">暖房</li> <li class="<%= 'text-line-through' if !@room.is_air %>">エアコン</li> </ul> </div> </div> </div> </div> <hr/> <!-- カルーセル表示 --> <div class="row"> <% if @photos.length > 0 %> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- 表示 --> <ol class="carousel-indicators"> <% @photos.each do |photo| %> <li data-target="#myCarousel" data-slide-to="<%= photo.id %>"></li> <% end %> </ol> <!-- スライド --> <div class="carousel-inner"> <% @photos.each do |photo| %> <div class="item <%= 'active' if photo.id == @photos[0].id %>"> <%= image_tag photo.image.url() %> </div> <% end %> </div> <!-- 左右移動 --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> <span class="sr-only">戻る</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span> <span class="sr-only">次へ</span> </a> </div> <% end %> </div> <hr/> <!-- GOOGLE マップ --> <div class="row"> <div id="map" style="width: 100%; height: 400px"></div> <script src="https://maps.googleapis.com/maps/api/js"></script> <script> function initialize() { var location = {lat: <%= @room.latitude %>, lng: <%= @room.longitude %>}; var map = new google.maps.Map(document.getElementById('map'), { center: location, zoom: 14 }); var marker = new google.maps.Marker({ position: location, map: map }); var infoWindow = new google.maps.InfoWindow({ content: '<div id="content"><%= image_tag @room.cover_photo(:medium) %></div>' }); infoWindow.open(map, marker); } google.maps.event.addDomListener(window, 'load', initialize); </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBojDcZmScBkIOISjoYREjgid99iZUL2Tk&callback=initMap" type="text/javascript"></script> </div> <hr/> <!-- 近くのお部屋を検索 --> <div class="row"> <h3>お近くのお部屋</h3> <% for room in @room.nearbys(10) %> <div class="col-md-4"> <div class="panel panel-default"> <div class="panel-heading preview"> <%= image_tag room.cover_photo(:medium) %> </div> <div class="panel-body"> <%= link_to room.listing_name, room %><br/> (距離:<%= room.distance.round(2) %> Km) </div> </div> </div> <% end %> </div> </div> <!-- 右パネル --> <div class="col-md-4"> <!-- 予約フォーム --> <%= render 'reservations/form' %> </div> </div>
「app\views」フォルダに「reservations」フォルダを新規作成します。
作成した「reservations」フォルダに「_form.html.erb」ファイルを新規作成します。
app\views\reservations\_form.html.erb(新規作成したファイル)
<%= form_for([@room, @room.reservations.new]) do |f| %> <%= f.text_field :start_date %> <%= f.text_field :end_date %> <br/> <%= f.submit "予約する", class: "btn btn-normal btn-block" %> <% end %>
「app\controllers」フォルダに「reservations_controller.rb」ファイルを新規作成します。
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 private def reservation_params params.require(:reservation).permit(:start_date, :end_date) end end