Grouped_select, как отобразить ранее выбранный элемент и / или категорию - PullRequest
Новая
       7

Grouped_select, как отобразить ранее выбранный элемент и / или категорию

0 голосов
/ 06 января 2020

В форме бронирования я пытаюсь показать доступные rooms и их room_category, если они доступны в течение определенного c промежутка времени. Все отлично работает при создании нового бронирования.

Выпуск

Когда я хочу отредактировать форму бронирования (а точнее промежуток времени), раскрывающийся список формы очищается и снова создается. Проблема, которая возникает, заключается в том, что ранее выбранный room и его room_category не отображаются как выбранные, когда они доступны.

Вопрос

Как:

  • выберите ранее выбранный room, если он доступен для вновь выбранных дат
  • или, если room недоступен, как автоматически выбрать room из ранее выбранный room_category

код

форма бронирования 

<div class="col col-sm-4">
        <%= f.input :arrival,
        as: :string,
        label:false,
        placeholder: "From",
        wrapper_html: { class: "inline_field_wrapper" },
        input_html:{ id: "start_date"} %>
      </div>
      <div class="col col-sm-4">
        <%= f.input :departure,
        as: :string,
        label:false,
        placeholder: "From",
        wrapper_html: { class: "inline_field_wrapper" },
        input_html:{ id: "end_date"} %>
      </div>

      <div class="col col-sm-4">
        <%= f.input :room_id, collection: @room_categories.order(:name), as: :grouped_select, group_method: :rooms, label:false %>
      </div>

JS

const checkIn = document.querySelector('#start_date');
const checkOut = document.querySelector('#end_date');


  const checkInAndOut = [checkIn, checkOut];

  checkInAndOut.forEach((item) => {
    item.addEventListener('change', (event) => {
      if ((checkIn.value.length > 0) && (checkOut.value.length > 0)){
      checkAvailability();
    }
  })
});

    function checkAvailability(){

      Rails.ajax({
        url: "<%= rooms_availability_hotel_path(@hotel) %>" ,
        dataType: 'json',
        type: "POST",
        data: `arrival=${start_date.value}&departure=${end_date.value}`,
        success: function(data) {
          console.log(data);
        },
        error: function(response) {
          console.log(response);
        }
      });
    };

контроллер проверить наличие 

  def rooms_availability
    hotel = Hotel.includes(:rooms).find(params[:id])
    arrival = Date.parse(room_params[:arrival])
    departure = Date.parse(room_params[:departure])
    time_span = arrival..departure
    @unavailable_rooms = Room.joins(:reservations).where(reservations: {hotel: hotel}).where("reservations.arrival <= ? AND ? >= reservations.departure", arrival, departure).distinct + (Room.joins(:reservations).where(reservations: {hotel: hotel}).where("reservations.arrival <= ? AND ? <= reservations.departure", arrival, departure).distinct)
    @hotel_cats = hotel.room_categories
    @hotel_accos = Room.where(room_category: @hotel_cats)
    @rooms = @hotel_accos - @unavailable_rooms
    respond_to do |format|
      format.js
    end
  end

hotels / rooms_availability. js .erb 

var selectList = document.getElementById('reservation_room_id')
function empty() {
  selectList.innerHTML = "";
}

empty();

<% unless @rooms.empty? %>
      <% @hotel_cats.each do |cat|%>
        selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
        <% cat.rooms.each do |room|%>
          <% if @rooms.include? room %>
            selectList.insertAdjacentHTML('beforeend', '<option value="<%= room.id %>"><%= room.name %></option>');
          <% end %>
        <% end %>
        selectList.insertAdjacentHTML('beforeend', '<optgroup>');
      <% end %>
    <% end %>

1 Ответ

1 голос
/ 09 января 2020

выберите ранее выбранную комнату, если она доступна для вновь выбранных дат 

<% unless @rooms.empty? %>
  <% @hotel_cats.each do |cat|%>
    selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
    <% cat.rooms.each do |room|%>
      <% if @rooms.include? room %>
        selectList.insertAdjacentHTML(
          'beforeend',
          <%= "<option value='#{room.id}' #{@previous_room.id == room.id ? "selected" : ""}>#{room.name}</option>" %>
        );  
      <% end %>
    <% end %>
    selectList.insertAdjacentHTML('beforeend', '<optgroup>');
  <% end %>
<% end %>

или, если комната недоступна, как автоматически выбрать комнату из ранее выбранной комнаты_категория 

<% unless @rooms.empty? %>
  <%
  is_previous_room_available = @rooms.include? @previous_room
  set_selected = false
  %>
  <% @hotel_cats.each do |cat|%>
    selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
    <% cat.rooms.each do |room|%>
      <% if @rooms.include? room %>
        <%
        if (is_previous_room_available)
          # When previous room is available
          %>
          selectList.insertAdjacentHTML(
            'beforeend',
            <%= "<option value='#{room.id}' #{@previous_room.id == room.id ? "selected" : ""}>#{room.name}</option>" %>
          );
          <%
        elsif (is_previous_room_available.! && set_selected.! && @previous_cat.id == cat.id)
          # When previous room not available and this room is first room of previous category
          %>
          selectList.insertAdjacentHTML(
            'beforeend',
            <%= "<option value='#{room.id}' selected>#{room.name}</option>" %>
          );
          <%
          # set first room is selected
          set_selected = true
        else
          %>
          selectList.insertAdjacentHTML(
            'beforeend',
            <%= "<option value='#{room.id}'>#{room.name}</option>" %>
          );
          <%
        end
        %>
      <% end %>
    <% end %>
    selectList.insertAdjacentHTML('beforeend', '<optgroup>');
  <% end %>
<% end %>
...