英文:
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 aroom
from the previously chosenroom_category
Code
reservation form
<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);
}
});
};
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("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
以下是代码部分的翻译:
# 如果之前选择的房间在新选择的日期可用,则选择之前选择的房间
```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
<% 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 %>
alternatively, if the room is not available, how to automatically select a room from the previously chosen room_category
<% 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 %>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论