学生向けプログラミング入門

学生向けにプログラミングを解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails

Ruby on Rails6.0 | 空き部屋を登録・予約・決済できるWebサイトを作成する 87 | Bootstrap | jQueryスライダー

「38 | jQueryスライダー」をBootstrapの記述に書き換えます。


記述追加 app\javascript\packs\application.js
「require("jquery-ui/ui/widgets/slider");」の記述を14行目に追加

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")

require("jquery-ui/ui/widgets/datepicker");
require("jquery-ui/ui/widgets/slider");

require("raty-js")

import 'bootstrap';
import '../stylesheets/application';

window.Noty = require("noty")
window.Dropzone = require("dropzone")


// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

require("trix")
require("@rails/actiontext")



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


記述更新 app\views\pages\search.html.erb

<div id="main">
  <div id="left" style="padding-left: 50px;">
    <!-- 検索パネル -->
    <div class="row">
      <br/>
      <div id="collapsePanel">
        <%= search_form_for @search, url: search_path, remote: true do |f| %>

              <div class="row">

                <div class="col-md-8">
                <label><i class="fas fa-yen-sign"></i>&nbsp;&nbsp;宿泊費(円)</label>
                <div id="slider-range" style="margin-top: 20px;"></div>
                </div>
                <div class="col-md-2">
                  <label>最低(円)</label>
                  <%= f.text_field :price_gteq, class: "form-control" %>
                </div>
                <div class="col-md-2">
                  <label>最高(円)</label>
                  <%= f.text_field :price_lteq, class: "form-control" %>
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-8">
                    <label><i class="far fa-calendar-alt"></i>&nbsp;&nbsp;宿泊日</label>
                </div>
                <div class="col-md-6">
                  <%= text_field_tag :start_date, params[:start_date], readonly: true, placeholder: "チェックイン日", class: "form-control datepicker" %>
                </div>
                <div class="col-md-6">
                  <%= text_field_tag :end_date, params[:end_date], readonly: true, placeholder: "チェックアウト日", class: "form-control datepicker" %>
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-4">
                  <%= check_box_tag "q[room_type_eq_any][]", "プライベート" %> プライベート
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[room_type_eq_any][]", "シェア" %> シェア
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group select">
                    <label><i class="fas fa-user-friends"></i>&nbsp;宿泊人数</label>
                    <%= f.select :accommodate_gteq, [["2人", 2], ["3人", 3], ["4人", 4], ["5人", 5], ["6人", 6]], id: "accommodate", prompt: "選択してください", class: "form-control" %>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group select">
                    <label><i class="fas fa-bed"></i>&nbsp;ベッド数</label>
                    <%= f.select :bed_room_gteq, [["1台", 1], ["2台", 2], ["3台", 3], ["4台", 4], ["5台", 5], ["6台", 6]], id: "bed_room", prompt: "選択してください", class: "form-control" %>
                  </div>
                </div>
                <div class="col-md-4">
                  <div class="form-group select">
                    <label><i class="fas fa-door-closed"></i>&nbsp;部屋数</label>
                    <%= f.select :bath_room_gteq, [["1部屋", 1], ["2部屋", 2], ["3部屋", 3], ["4部屋", 4], ["5部屋", 5], ["6部屋", 6]], id: "bath_rooms", prompt: "選択してください", class: "form-control" %>
                  </div>
                </div>
              </div>
              <hr/>
              <div class="row">
                <div class="col-md-4">
                  <%= check_box_tag "q[is_tv_eq]", true %> <i class="fas fa-tv"></i>&nbsp;テレビ
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_kitchen_eq]", true %> <i class="fas fa-blender"></i>&nbsp;キッチン
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_Internet_eq]", true %> <i class="fas fa-wifi"></i>&nbsp;インターネット
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_heating_eq]", true %> <i class="fab fa-hotjar"></i>&nbsp;暖房
                </div>
                <div class="col-md-4">
                  <%= check_box_tag "q[is_air_eq]", true %> <i class="fas fa-temperature-low"></i>&nbsp;エアコン
                </div>
              </div>
              <hr/>
              <div class="row text-center">
                <%= f.submit "検索", class: "btn btn-primary btn-block" %>
              </div>
        <% end %>
      </div>
      <br/>
     <!-- お部屋 -->
      <div class="row" id="room_listing" style="margin-top: 50px;">
      <%= render partial: "rooms/rooms_list", locals: {rooms: @arrRooms} %>
  </div>



    </div>
  </div>

  <div id="right" style="width: 400px;">
    <!-- GOOGLEマップ -->
    <div id="map" style="width: 100%; height: 100%"></div>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
        function initialize(rooms) {
          var location = {lat: 43.061771, lng: 141.354451}
          if (rooms.length > 0) {
            location = {lat: rooms[0].latitude, lng: rooms[0].longitude}
          }
          var map = new google.maps.Map(document.getElementById('map'), {
            center: location,
            zoom: 12
          });
          var marker, inforwindow;
          rooms.forEach(function(room) {
            marker = new google.maps.Marker({
              position: {lat: room.latitude, lng: room.longitude},
              map: map
            });
            inforwindow = new google.maps.InfoWindow({
              content: "<div class='map_price'>" + room.price + "円</div>"
            });
            inforwindow.open(map, marker);
          })
        }
        google.maps.event.addDomListener(window, 'load', function() {
          initialize(<%= raw @arrRooms.to_json %>)
        });
    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDoAh6S8kEpArgzGFEvjT_0xK_VeUL5SEs&callback=initMap" type="text/javascript"></script>
  </div>
</div>

<script>
  $('#start_date').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    maxDate: '3m',
    onSelect: function(selected) {
      $('#end_date').datepicker("option", "minDate", selected);
      $('#end_date').attr("disabled", false);
    }
  });
  $('#end_date').datepicker({
    dateFormat: 'dd-mm-yy',
    minDate: 0,
    maxDate: '3m',
    onSelect: function(selected) {
      $('#start_date').datepicker("option", "maxDate", selected);
    }
  });
</script>

<script>
  $(function() {
    $("#q_price_gteq").val('1000');
    $("#q_price_lteq").val('15000');
    $("#slider-range").slider({
      range: true,
      min: 0,
      max: 15000,
      values: [1000, 15000],
      slide: function(event, ui) {
        $("#q_price_gteq").val(ui.values[0]);
        $("#q_price_lteq").val(ui.values[1]);
      }
    });
    $(".ui-widget-header").css('background', '#00A699');
    $(".ui-state-default, .ui-widget-content").css('background', 'white');
    $(".ui-state-default, .ui-widget-content").css('border-color', '#00A699');
  })
</script>



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

スライダー
スライダー