Grouped_select,如何显示之前选择的项目和/或类别。

huangapple go评论96阅读模式
英文:

Grouped_select, how to display previously selected item and/or 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 %>
英文:

In a reservation form, I'm trying to show available rooms and their room_category if they are available for a specific time span. Everything works fine when creating a new reservation.

Issue

When I want to edit the reservation form (and more specifically the time span), the form drop-down list empties and gets build up again. The issue that arrises is that the previously chosen room and its room_category are not shown as selected when they are available.

Question

How to:

  • select the previously picked room if it's available for the newly selected dates
  • alternatively, if the room is not available, how to automatically select a room from the previously chosen room_category

Code

reservation form

&lt;div class=&quot;col col-sm-4&quot;&gt;
        &lt;%= f.input :arrival,
        as: :string,
        label:false,
        placeholder: &quot;From&quot;,
        wrapper_html: { class: &quot;inline_field_wrapper&quot; },
        input_html:{ id: &quot;start_date&quot;} %&gt;
      &lt;/div&gt;
      &lt;div class=&quot;col col-sm-4&quot;&gt;
        &lt;%= f.input :departure,
        as: :string,
        label:false,
        placeholder: &quot;From&quot;,
        wrapper_html: { class: &quot;inline_field_wrapper&quot; },
        input_html:{ id: &quot;end_date&quot;} %&gt;
      &lt;/div&gt;

      &lt;div class=&quot;col col-sm-4&quot;&gt;
        &lt;%= f.input :room_id, collection: @room_categories.order(:name), as: :grouped_select, group_method: :rooms, label:false %&gt;
      &lt;/div&gt;

JS

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


  const checkInAndOut = [checkIn, checkOut];

  checkInAndOut.forEach((item) =&gt; {
    item.addEventListener(&#39;change&#39;, (event) =&gt; {
      if ((checkIn.value.length &gt; 0) &amp;&amp; (checkOut.value.length &gt; 0)){
      checkAvailability();
    }
  })
});

    function checkAvailability(){

      Rails.ajax({
        url: &quot;&lt;%= rooms_availability_hotel_path(@hotel) %&gt;&quot; ,
        dataType: &#39;json&#39;,
        type: &quot;POST&quot;,
        data: `arrival=${start_date.value}&amp;departure=${end_date.value}`,
        success: function(data) {
          console.log(data);
        },
        error: function(response) {
          console.log(response);
        }
      });
    };

controller check availability

  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(&quot;reservations.arrival &lt;= ? AND ? &gt;= reservations.departure&quot;, arrival, departure).distinct + (Room.joins(:reservations).where(reservations: {hotel: hotel}).where(&quot;reservations.arrival &lt;= ? AND ? &lt;= reservations.departure&quot;, 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(&#39;reservation_room_id&#39;)
function empty() {
  selectList.innerHTML = &quot;&quot;;
}

empty();

&lt;% unless @rooms.empty? %&gt;
      &lt;% @hotel_cats.each do |cat|%&gt;
        selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup label=&lt;%= cat.name %&gt;&gt;&#39;);
        &lt;% cat.rooms.each do |room|%&gt;
          &lt;% if @rooms.include? room %&gt;
            selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;option value=&quot;&lt;%= room.id %&gt;&quot;&gt;&lt;%= room.name %&gt;&lt;/option&gt;&#39;);
          &lt;% end %&gt;
        &lt;% end %&gt;
        selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup&gt;&#39;);
      &lt;% end %&gt;
    &lt;% end %&gt;

答案1

得分: 1

以下是代码部分的翻译:

# 如果之前选择的房间在新选择的日期可用,则选择之前选择的房间
```ruby
<% 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 %>

# 或者,如果房间不可用,如何自动选择之前选择的房间类别中的房间
```ruby
<% 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)
          # 当之前的房间可用时
          %>
          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)
          # 当之前的房间不可用并且这是之前类别的第一个房间时
          %>
          selectList.insertAdjacentHTML(
            'beforeend',
            <%= "<option value='#{room.id}' selected>#{room.name}</option>" %>
          );
          <%
          # 设置第一个房间为已选中
          set_selected = true
        else
          %>
          selectList.insertAdjacentHTML(
            'beforeend',
            <%= "<option value='#{room.id}'>#{room.name}</option>" %>
          );
          <%
        end
        %>
      <% end %>
    <% end  %>
    selectList.insertAdjacentHTML('beforeend', '</optgroup>');
  <% end  %>
<% end %>
英文:

select the previously picked room if it's available for the newly selected dates

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

alternatively, if the room is not available, how to automatically select a room from the previously chosen room_category

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

huangapple
  • 本文由 发表于 2020年1月6日 19:19:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/59611173.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定