RoomCloud Horizontal Template Multi
<!--
-->
var locale="en-gb";
//bg cs de en-gb es fr hr hu it ja nl pl pt ru zh-cn
var str_night="night";
var str_nights="nights";
$( document ).ready(function() {
$("#btn-search").click(function(e){
e.preventDefault();
var roomEmpty=false;
$(".rm-cnt").each(function(x){
if ($(this).find("input[name='adults']").val()==0 && $(this).find("input[name='children']").val()==0){
$("#room_error_"+x).text('please add 1 person or remove the room');
roomEmpty=true;
}
});
if (!roomEmpty) $("#formSearch").submit();
else return false;
});
/****************** DROPDOWN ****************/
$("#travelers_group").click(function(e){
$(this).next(".rc-dropdown-menu").slideToggle("fast");
e.stopPropagation();
});
// Hide dropdown menu on click outside
$(document).on("click", function(event){
if(!$(event.target).closest("#traveler_details").length){
var roomEmpty=false;
$(".rm-cnt").each(function(x){
if ($(this).find("input[name='adults']").val()==0 && $(this).find("input[name='children']").val()==0){
$("#room_error_"+x).text('please add 1 person or remove the room');
roomEmpty=true;
}
});
if (roomEmpty) return;
$(".rc-dropdown-menu").slideUp("fast");
$("#travelers").val(getUpdatedText());
}
});
$("#close_dropdown").on("click", function(event){
var roomEmpty=false;
$(".rm-cnt").each(function(x){
if ($(this).find("input[name='adults']").val()==0 && $(this).find("input[name='children']").val()==0){
$("#room_error_"+x).text('please add 1 person or remove the room');
roomEmpty=true;
}
});
if (roomEmpty) return;
$(".rc-dropdown-menu").slideUp("fast");
$("#travelers").val(getUpdatedText());
});
function getUpdatedText(){
var rooms=0;
var adults=0;
var children=0;
$(".rm-cnt").each(function(){
rooms++;
var target=($(this).attr("id")).split("_")[1];
adults+=parseInt($("#adults_"+target).val(), 10);
children+=parseInt($("#children_"+target).val(), 10);
});
var text=""
text+=rooms;
if (rooms==1) text+=" Room - ";
else text+=" Rooms - ";
text+=adults;
if (adults==1) text+=" Adult";
else text+=" Adults";
if (children!=0) text+=" - "+children+" Children";
return (text);
}
/*############################# LITEPICKER #####################################*/
var today= new moment();
var tomorrow= new moment();
tomorrow=tomorrow.add(1,'days');
$("#checkin").val(today.format("YYYYMMDD"));
$("#checkout").val(tomorrow.format("YYYYMMDD"));
const picker = new Litepicker({
element: document.getElementById('search_calendar'),
plugins: ['mobilefriendly'],
autoApply: true,
singleMode: false, //true picker - false range picker
allowRepick: false, //can repick only one date of range
startDate: today.format("YYYY-MM-DD"),
endDate: tomorrow.format("YYYY-MM-DD"),
// buttonText:{"apply":"Applyss","cancel":"Cancelss"/*,"previousMonth":"...","nextMonth":"...","reset":"..."*/},
firstDay:0,
lang: locale,
format:"YYYY-MM-DD",
//desktop
numberOfColumns: 2,
numberOfMonths: 2,
position: "bottom left",
scrollToDate: false,
// disallowLockDaysInRange: true,
selectBackward:false,
selectForward:true,
showTooltip:true,
tooltipNumber:(totalDays) => {
return totalDays - 1;
},
tooltipText:{"one":str_night,"other":str_nights},
minDays:2,
minDate:today.format("YYYY-MM-DD"),
setup: (picker) => {
picker.on('selected', (date1, date2) => {
$(".dates_calendar").css("animation", "none");
$("#search_group").addClass("search_calendar_border_fixed");
//remove pulse effect on checkin/checout calendar when a value is setted
$(".dates_calendar").css("animation", "none");
select_start = date1.format('YYYYMMDD');
select_end = date2.format('YYYYMMDD');
$("#checkin").val(select_start);
$("#checkout").val(select_end);
});
}
});
$("#calendar_search_span").click(function(){
picker.show();
});
/****************** ADD AND REMOVE GUEST ****************/
$("#room_add_span").click(function(){
new_room="";
new_idx=$(".rm-cnt").length;
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="Room "+(parseInt(new_idx, 10)+1)+"";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="Adults";
new_room+="";
new_room+="";
new_room+="";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
-";
new_room+="
";
new_room+="0";
new_room+="";
new_room+="
";
new_room+="
+";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="Children";
new_room+="";
new_room+="";
new_room+="";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
-";
new_room+="
";
new_room+="0";
new_room+="";
new_room+="
";
new_room+="
+";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="
";
new_room+="Remove Room";
new_room+="
";
new_room+="
";
new_room+="
";
$("#rooms_container").append(new_room);
$("#btn-resume").text(getUpdatedText());
});
$(document).on('click', ".room-remove", function(e) {
e.stopPropagation();
var room_to_remove=$(this).attr("id").split("-")[2];
/**/
room_counter=$(".rm-cnt").length;
$("#room_"+room_to_remove+"_container").remove();
for (k=(parseInt(room_to_remove,10)+1);k<room_counter;k++){
switchId(k);
}
/**/
$("#btn-resume").text(getUpdatedText());
});
function switchId(k){
newk=k-1;
num_children=$("#children_"+k).val();
for (i=0;i<num_children;i++){
$("#room_"+k+"_app_child_"+i).removeClass("app_child_cnt_"+k);
$("#room_"+k+"_app_child_"+i).addClass("app_child_cnt_"+k);
$("#room_"+k+"_app_child_"+i).attr("id","room_"+newk+"_app_child_"+i);
$("#age_room_"+k+"_child_"+i+"_less").attr("id","age_room_"+newk+"_child_"+i+"_less");
$("#age_room_"+k+"_child_"+i+"_more").attr("id","age_room_"+newk+"_child_"+i+"_more");
$("#age_room_"+k+"_child_"+i).attr("name","ages_"+newk);
$("#age_room_"+k+"_child_"+i).attr("id","age_room_"+newk+"_child_"+i);
$("#age_span_room_"+k+"_child_"+i).attr("id","age_span_room_"+newk+"_child_"+i);
}
$("#room_"+k+"_container").attr("id","room_"+newk+"_container");
$("#room-num-span-"+k).text("Room "+k);
$("#room-num-span-"+k).attr("id","#room-num-span-"+newk);
$("#room-remove-"+k).attr("id","#room-remove-"+newk);
$("#room_error_"+k).attr("id","room_error_"+newk);
$("#room_"+k+"_children_append_container").attr("id","room_"+newk+"_children_append_container");
// $("#room_"+k+"_header_div").attr("id","room_"+newk+"_header_div");
// $("#room_"+k+"_header_room_number").html(' #'+k);
// $("#room_"+k+"_header_room_number").attr("id","room_"+newk+"_header_room_number")
// $("#room_"+k+"_header_remove").attr("id","room_"+newk+"_header_remove");
// $("#room_"+k+"_header_add").attr("id","room_"+newk+"_header_add");
// $("#room_body_div_"+k).attr("id","room_body_div_"+newk);
$("#adults_less_"+k).attr("id","adults_less_"+newk);
$("#adults_span_"+k).attr("id","adults_span_"+newk);
$("#adults_"+k).attr("id","adults_"+newk);
$("#adults_more_"+k).attr("id","adults_more_"+newk);
$("#children_less_"+k).attr("id","children_less_"+newk);
$("#children_span_"+k).attr("id","children_span_"+newk);
$("#children_"+k).attr("id","children_"+newk);
$("#children_more_"+k).attr("id","children_more_"+newk);
}
/****************** GUEST BUTTONS + - ****************/
$(document).on('click','.box-btn-round', function() {
btn_id=$(this).attr("id");
// children and adults
btn_target=btn_id.split("_")[0];
btn_action=btn_id.split("_")[1];
btn_target_room=btn_id.split("_")[2];
$("#room_error_"+btn_target_room).text('');
if (btn_target=="age"){
split=btn_id.split("_");
btn_target_room=split[1]+"_"+split[2]+"_"+split[3]+"_"+split[4];
btn_action=split[5];
}
//calculate new value
new_val=parseInt($("#"+btn_target+"_"+btn_target_room).val(),10);
if (isNaN(new_val)){
new_val=0;
}else{
if (btn_action=="more")new_val+=1;
if (btn_action=="less")new_val-=1;
if (new_val=21) new_val=20;
if (btn_target=="age" && new_val>=17){
new_val=17;
}
}
//apply disabled if necessary
if (btn_target=="adults"){
if (btn_target_room=="0"){
if ($("#"+btn_target+"_"+btn_target_room).val()==2 && new_val==1) $("#"+btn_target+"_less_"+btn_target_room).addClass("disabled_btn");
else if ($("#"+btn_target+"_"+btn_target_room).val()==1 && new_val==2) $("#"+btn_target+"_less_"+btn_target_room).removeClass("disabled_btn");
}else{
if ($("#"+btn_target+"_"+btn_target_room).val()==1 && new_val==0) $("#"+btn_target+"_less_"+btn_target_room).addClass("disabled_btn");
else if ($("#"+btn_target+"_"+btn_target_room).val()==0 && new_val==1) $("#"+btn_target+"_less_"+btn_target_room).removeClass("disabled_btn");
}
}
if (btn_target=="children"){
if ($("#"+btn_target+"_"+btn_target_room).val()==1 && new_val==0) $("#"+btn_target+"_less_"+btn_target_room).addClass("disabled_btn");
else if ($("#"+btn_target+"_"+btn_target_room).val()==0 && new_val==1) $("#"+btn_target+"_less_"+btn_target_room).removeClass("disabled_btn");
}
if (btn_target=="age"){
if ($("#"+btn_target+"_"+btn_target_room).val()==1 && new_val==0) $("#"+btn_target+"_"+btn_target_room+"_less").addClass("disabled_btn");
else if ($("#"+btn_target+"_"+btn_target_room).val()==0 && new_val==1) $("#"+btn_target+"_"+btn_target_room+"_less").removeClass("disabled_btn");
}
if (btn_target=="adults" && $("#"+btn_target+"_"+btn_target_room).val()==19 && new_val==20) $("#"+btn_target+"_more_"+btn_target_room).addClass("disabled_btn");
else if (btn_target=="adults" && $("#"+btn_target+"_"+btn_target_room).val()==20 && new_val==19) $("#"+btn_target+"_more_"+btn_target_room).removeClass("disabled_btn");
if (btn_target=="age" && $("#"+btn_target).val()==16 && new_val==17) $("#"+btn_target+"_more").addClass("disabled_btn");
else if (btn_target=="age" && $("#"+btn_target).val()==17 && new_val==16) $("#"+btn_target+"_more").removeClass("disabled_btn");
//update children fields
if (btn_target=="children") appendRemoveChildren(new_val,btn_action,btn_target_room);
$("#"+btn_target+"_"+btn_target_room).val(new_val);
$("#"+btn_target+"_span_"+btn_target_room).html(new_val);
$(this).fadeTo(100, 0.5).fadeTo(100, 1.0);
$("#btn-resume").text(getUpdatedText());
});
function appendRemoveChildren(idx,action,btn_target_room){
child_cnt=$(".app_child_cnt_"+btn_target_room).size();
size=idx;
if ("less"==action) size=child_cnt;
for (k=0;k=idx && target_div.length==1){
target_div.remove();
}
}
}
function addChild(index,btn_target_room){
html='
';
html+='
';
html+='';
html+='age '+(index+1)+'';
html+='
';
name="ages_";
child_trg=btn_target_room;
html+='
';
html+='
-';
html+='
';
html+='0';
html+='';
html+='
';
html+='
+';
html+='
';
html+='
';
$("#room_"+btn_target_room+"_children_append_container").append(html);
}
});