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

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

Grouped_select, how to display previously selected item and/or category

问题

在预订表格中，我试图显示可用的房间和它们的房间类别，如果它们在特定的时间段内可用。在创建新预订时一切都正常运行。

问题

当我想编辑预订表格（更具体地说是时间跨度）时，表单下拉列表会清空并重新构建。出现的问题是，如果先前选择的房间及其房间类别仍然可用，它们不会显示为已选择。

问题

如何：

  • 如果先前选择的房间在新选择的日期范围内可用，如何选择它
  • 或者，如果房间不可用，如何自动选择之前选择的房间类别中的一个房间

代码

预订表格

  1. <div class="col col-sm-4">
  2.   <%= f.input :arrival,
  3.   as: :string,
  4.   label:false,
  5.   placeholder: "From",
  6.   wrapper_html: { class: "inline_field_wrapper" },
  7.   input_html:{ id: "start_date"} %>
  8. </div>
  9. <div class="col col-sm-4">
  10.   <%= f.input :departure,
  11.   as: :string,
  12.   label:false,
  13.   placeholder: "From",
  14.   wrapper_html: { class: "inline_field_wrapper" },
  15.   input_html:{ id: "end_date"} %>
  16. </div>
  18. <div class="col col-sm-4">
  19.   <%= f.input :room_id, collection: @room_categories.order(:name), as: :grouped_select, group_method: :rooms, label:false %>
  20. </div>

JS

  1. const checkIn = document.querySelector('#start_date');
  2. const checkOut = document.querySelector('#end_date');
  4. const checkInAndOut = [checkIn, checkOut];
  6. checkInAndOut.forEach((item) => {
  7.   item.addEventListener('change', (event) => {
  8.     if (checkIn.value.length > 0 && checkOut.value.length > 0) {
  9.       checkAvailability();
  10.     }
  11.   })
  12. });
  14. function checkAvailability() {
  15.   Rails.ajax({
  16.     url: "<%= rooms_availability_hotel_path(@hotel) %>",
  17.     dataType: 'json',
  18.     type: "POST",
  19.     data: `arrival=${start_date.value}&departure=${end_date.value}`,
  20.     success: function(data) {
  21.       console.log(data);
  22.     },
  23.     error: function(response) {
  24.       console.log(response);
  25.     }
  26.   });
  27. };

控制器检查可用性

  1. def rooms_availability
  2.   hotel = Hotel.includes(:rooms).find(params[:id])
  3.   arrival = Date.parse(room_params[:arrival])
  4.   departure = Date.parse(room_params[:departure])
  5.   time_span = arrival..departure
  6.   @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)
  7.   @hotel_cats = hotel.room_categories
  8.   @hotel_accos = Room.where(room_category: @hotel_cats)
  9.   @rooms = @hotel_accos - @unavailable_rooms
  10.   respond_to do |format|
  11.     format.js
  12.   end
  13. end

hotels/rooms_availability.js.erb

  1. var selectList = document.getElementById('reservation_room_id')
  2. function empty() {
  3.   selectList.innerHTML = "";
  4. }
  6. empty();
  8. <% unless @rooms.empty? %>
  9.   <% @hotel_cats.each do |cat| %>
  10.     selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
  11.     <% cat.rooms.each do |room| %>
  12.       <% if @rooms.include? room %>
  13.         selectList.insertAdjacentHTML('beforeend', '<option value="<%= room.id %>"><%= room.name %></option>');
  14.       <% end %>
  15.     <% end %>
  16.     selectList.insertAdjacentHTML('beforeend', '</optgroup>');
  17.   <% end %>
  18. <% 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

  1. &lt;div class=&quot;col col-sm-4&quot;&gt;
  2.         &lt;%= f.input :arrival,
  3.         as: :string,
  4.         label:false,
  5.         placeholder: &quot;From&quot;,
  6.         wrapper_html: { class: &quot;inline_field_wrapper&quot; },
  7.         input_html:{ id: &quot;start_date&quot;} %&gt;
  8.       &lt;/div&gt;
  9.       &lt;div class=&quot;col col-sm-4&quot;&gt;
  10.         &lt;%= f.input :departure,
  11.         as: :string,
  12.         label:false,
  13.         placeholder: &quot;From&quot;,
  14.         wrapper_html: { class: &quot;inline_field_wrapper&quot; },
  15.         input_html:{ id: &quot;end_date&quot;} %&gt;
  16.       &lt;/div&gt;
  18.       &lt;div class=&quot;col col-sm-4&quot;&gt;
  19.         &lt;%= f.input :room_id, collection: @room_categories.order(:name), as: :grouped_select, group_method: :rooms, label:false %&gt;
  20.       &lt;/div&gt;

JS

  1. const checkIn = document.querySelector(&#39;#start_date&#39;);
  2. const checkOut = document.querySelector(&#39;#end_date&#39;);
  5.   const checkInAndOut = [checkIn, checkOut];
  7.   checkInAndOut.forEach((item) =&gt; {
  8.     item.addEventListener(&#39;change&#39;, (event) =&gt; {
  9.       if ((checkIn.value.length &gt; 0) &amp;&amp; (checkOut.value.length &gt; 0)){
  10.       checkAvailability();
  11.     }
  12.   })
  13. });
  15.     function checkAvailability(){
  17.       Rails.ajax({
  18.         url: &quot;&lt;%= rooms_availability_hotel_path(@hotel) %&gt;&quot; ,
  19.         dataType: &#39;json&#39;,
  20.         type: &quot;POST&quot;,
  21.         data: `arrival=${start_date.value}&amp;departure=${end_date.value}`,
  22.         success: function(data) {
  23.           console.log(data);
  24.         },
  25.         error: function(response) {
  26.           console.log(response);
  27.         }
  28.       });
  29.     };

controller check availability

  1.   def rooms_availability
  2.     hotel = Hotel.includes(:rooms).find(params[:id])
  3.     arrival = Date.parse(room_params[:arrival])
  4.     departure = Date.parse(room_params[:departure])
  5.     time_span = arrival..departure
  6.     @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)
  7.     @hotel_cats = hotel.room_categories
  8.     @hotel_accos = Room.where(room_category: @hotel_cats)
  9.     @rooms = @hotel_accos - @unavailable_rooms
  10.     respond_to do |format|
  11.       format.js
  12.     end
  13.   end

hotels/rooms_availability.js.erb

  1. var selectList = document.getElementById(&#39;reservation_room_id&#39;)
  2. function empty() {
  3.   selectList.innerHTML = &quot;&quot;;
  4. }
  6. empty();
  8. &lt;% unless @rooms.empty? %&gt;
  9.       &lt;% @hotel_cats.each do |cat|%&gt;
  10.         selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup label=&lt;%= cat.name %&gt;&gt;&#39;);
  11.         &lt;% cat.rooms.each do |room|%&gt;
  12.           &lt;% if @rooms.include? room %&gt;
  13.             selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;option value=&quot;&lt;%= room.id %&gt;&quot;&gt;&lt;%= room.name %&gt;&lt;/option&gt;&#39;);
  14.           &lt;% end %&gt;
  15.         &lt;% end %&gt;
  16.         selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup&gt;&#39;);
  17.       &lt;% end %&gt;
  18.     &lt;% end %&gt;

答案1

得分: 1

以下是代码部分的翻译：

  1. # 如果之前选择的房间在新选择的日期可用，则选择之前选择的房间
  2. ```ruby
  3. <% unless @rooms.empty? %>
  4.   <% @hotel_cats.each do |cat| %>
  5.     selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
  6.     <% cat.rooms.each do |room| %>
  7.       <% if @rooms.include? room %>
  8.         selectList.insertAdjacentHTML(
  9.           'beforeend',
  10.           <%= "<option value='#{room.id}' #{@previous_room.id == room.id ? 'selected' : ''}>#{room.name}</option>" %>
  11.         );
  12.       <% end %>
  13.     <% end %>
  14.     selectList.insertAdjacentHTML('beforeend', '</optgroup>');
  15.   <% end %>
  16. <% end %>
  18. # 或者，如果房间不可用，如何自动选择之前选择的房间类别中的房间
  19. ```ruby
  20. <% unless  @rooms.empty? %>
  21.   <%
  22.   is_previous_room_available = @rooms.include? @previous_room
  23.   set_selected = false
  24.   %>
  25.   <% @hotel_cats.each  do |cat| %>
  26.     selectList.insertAdjacentHTML('beforeend', '<optgroup label=<%= cat.name %>>');
  27.     <% cat.rooms.each do |room| %>
  28.       <% if @rooms.include? room %>
  29.         <%
  30.         if (is_previous_room_available)
  31.           # 当之前的房间可用时
  32.           %>
  33.           selectList.insertAdjacentHTML(
  34.             'beforeend',
  35.             <%= "<option value='#{room.id}' #{@previous_room.id == room.id ? 'selected' : ''}>#{room.name}</option>" %>
  36.           );
  37.           <%
  38.         elsif (!is_previous_room_available && !set_selected && @previous_cat.id == cat.id)
  39.           # 当之前的房间不可用并且这是之前类别的第一个房间时
  40.           %>
  41.           selectList.insertAdjacentHTML(
  42.             'beforeend',
  43.             <%= "<option value='#{room.id}' selected>#{room.name}</option>" %>
  44.           );
  45.           <%
  46.           # 设置第一个房间为已选中
  47.           set_selected = true
  48.         else
  49.           %>
  50.           selectList.insertAdjacentHTML(
  51.             'beforeend',
  52.             <%= "<option value='#{room.id}'>#{room.name}</option>" %>
  53.           );
  54.           <%
  55.         end
  56.         %>
  57.       <% end %>
  58.     <% end  %>
  59.     selectList.insertAdjacentHTML('beforeend', '</optgroup>');
  60.   <% end  %>
  61. <% end %>
英文:

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

  1. &lt;% unless @rooms.empty? %&gt;
  2. &lt;% @hotel_cats.each do |cat|%&gt;
  3. selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup label=&lt;%= cat.name %&gt;&gt;&#39;);
  4. &lt;% cat.rooms.each do |room|%&gt;
  5. &lt;% if @rooms.include? room %&gt;
  6. selectList.insertAdjacentHTML(
  7. &#39;beforeend&#39;,
  8. &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;
  9. );  
  10. &lt;% end %&gt;
  11. &lt;% end %&gt;
  12. selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup&gt;&#39;);
  13. &lt;% end %&gt;
  14. &lt;% end %&gt;

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

  1. &lt;% unless @rooms.empty? %&gt;
  2. &lt;%
  3. is_previous_room_available = @rooms.include? @previous_room
  4. set_selected = false
  5. %&gt;
  6. &lt;% @hotel_cats.each do |cat|%&gt;
  7. selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup label=&lt;%= cat.name %&gt;&gt;&#39;);
  8. &lt;% cat.rooms.each do |room|%&gt;
  9. &lt;% if @rooms.include? room %&gt;
  10. &lt;%
  11. if (is_previous_room_available)
  12. # When previous room is available
  13. %&gt;
  14. selectList.insertAdjacentHTML(
  15. &#39;beforeend&#39;,
  16. &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;
  17. );
  18. &lt;%
  19. elsif (is_previous_room_available.! &amp;&amp; set_selected.! &amp;&amp; @previous_cat.id == cat.id)
  20. # When previous room not available and this room is first room of previous category
  21. %&gt;
  22. selectList.insertAdjacentHTML(
  23. &#39;beforeend&#39;,
  24. &lt;%= &quot;&lt;option value=&#39;#{room.id}&#39; selected&gt;#{room.name}&lt;/option&gt;&quot; %&gt;
  25. );
  26. &lt;%
  27. # set first room is selected
  28. set_selected = true
  29. else
  30. %&gt;
  31. selectList.insertAdjacentHTML(
  32. &#39;beforeend&#39;,
  33. &lt;%= &quot;&lt;option value=&#39;#{room.id}&#39;&gt;#{room.name}&lt;/option&gt;&quot; %&gt;
  34. );
  35. &lt;%
  36. end
  37. %&gt;
  38. &lt;% end %&gt;
  39. &lt;% end %&gt;
  40. selectList.insertAdjacentHTML(&#39;beforeend&#39;, &#39;&lt;optgroup&gt;&#39;);
  41. &lt;% end %&gt;
  42. &lt;% end %&gt;

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

发表评论

匿名网友

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

确定