Build Folder Added
This commit is contained in:
514
build/js/hotel/hotel.js
Normal file
514
build/js/hotel/hotel.js
Normal file
@ -0,0 +1,514 @@
|
||||
|
||||
function roomCount() {
|
||||
document.getElementById("roomPax").classList.add("showRoomPax");
|
||||
}
|
||||
|
||||
function addmore_rooms() {
|
||||
var rooms = document.querySelectorAll(".HotelNoRoomWrapper");
|
||||
html = "";
|
||||
let RemoveHtml = `
|
||||
<div class="closeRoomCard" onclick="RemoveRoom(this)">
|
||||
<span class="material-icons"> close </span>
|
||||
</div> `
|
||||
|
||||
if (rooms.length < 6) {
|
||||
html = `<div class="HotelNoRoomWrapper">
|
||||
<div class="HotelNoRoomTitle">
|
||||
<span class="material-icons"> local_hotel </span>
|
||||
<h4 class="Rooms_no">Room ${rooms.length + 1}</h4>
|
||||
</div>
|
||||
<div class="HotelNoRoomCount AdultPax">
|
||||
<div class="HotelTravelerSteps">
|
||||
<button class="opacity" onclick="AddAdultPax(this , false)">
|
||||
<span class="material-icons"> remove </span>
|
||||
</button>
|
||||
<input type="text" value="1" autocomplete="off" readonly />
|
||||
<button onclick="AddAdultPax(this , true)">
|
||||
<span class="material-icons"> add </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="HotelNoRoomCount ChildPax">
|
||||
<div class="HotelTravelerSteps">
|
||||
<button class="opacity" onclick="AddChildPax(this , false)">
|
||||
<span class="material-icons"> remove </span>
|
||||
</button>
|
||||
<input type="text" value="0" autocomplete="off" readonly />
|
||||
<button onclick="AddChildPax(this , true)">
|
||||
<span class="material-icons"> add </span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="HotelNoageChild">
|
||||
|
||||
</div>
|
||||
${rooms.length != 0 ? RemoveHtml : ''}
|
||||
</div> `
|
||||
}
|
||||
if (rooms.length >= 5) document.getElementById('MoreOption').querySelector('.addMoreTravller').classList.add("HotelPaxSelectOption");
|
||||
document.getElementById('MoreOption').querySelector('.addMoreTravller').insertAdjacentHTML("beforebegin", html)
|
||||
TravellerCounter('');
|
||||
}
|
||||
addmore_rooms();
|
||||
|
||||
|
||||
function RemoveRoom(elem) {
|
||||
elem.closest(".HotelNoRoomWrapper").remove();
|
||||
let allRoom = document.querySelectorAll(".HotelNoRoomWrapper")
|
||||
allRoom.forEach((e, i) => {
|
||||
e.querySelector('.Rooms_no').innerHTML = `Room ${i + 1} `
|
||||
});
|
||||
TravellerCounter('');
|
||||
document.getElementById('MoreOption').querySelector('.addMoreTravller').classList.remove("HotelPaxSelectOption");
|
||||
};
|
||||
|
||||
|
||||
function AddChildPax(elem, check) {
|
||||
|
||||
if (check) {
|
||||
if (elem.previousElementSibling.value <= 3) {
|
||||
elem.previousElementSibling.value++
|
||||
elem.previousElementSibling.previousElementSibling.disabled = false
|
||||
elem.previousElementSibling.previousElementSibling.style.opacity = '1'
|
||||
children_number(elem, check, elem.previousElementSibling.value)
|
||||
TravellerCounter('');
|
||||
} if (elem.previousElementSibling.value == 4) {
|
||||
elem.disabled = true;
|
||||
elem.style.opacity = '0.6';
|
||||
}
|
||||
} else {
|
||||
if (elem.nextElementSibling.value >= 1) {
|
||||
elem.nextElementSibling.nextElementSibling.disabled = false;
|
||||
elem.nextElementSibling.nextElementSibling.style.opacity = '1';
|
||||
elem.nextElementSibling.value--;
|
||||
children_number(elem, check, elem.nextElementSibling.value);
|
||||
TravellerCounter('');
|
||||
} if (elem.nextElementSibling.value == 0) {
|
||||
elem.disabled = true;
|
||||
elem.style.opacity = '0.6';
|
||||
}
|
||||
}
|
||||
if (true) {
|
||||
if (document.querySelector('.child_1')) {
|
||||
document.querySelector('.Child-one').classList.remove('d-none');;
|
||||
} else document.querySelector('.Child-one').classList.add('d-none');
|
||||
if (document.querySelector('.child_2')) {
|
||||
document.querySelector('.Child-two').classList.remove('d-none');
|
||||
} else document.querySelector('.Child-two').classList.add('d-none');
|
||||
if (document.querySelector('.child_3')) {
|
||||
document.querySelector('.Child-three').classList.remove('d-none');
|
||||
} else document.querySelector('.Child-three').classList.add('d-none');
|
||||
if (document.querySelector('.child_4')) {
|
||||
document.querySelector('.Child-four').classList.remove('d-none');
|
||||
} else document.querySelector('.Child-four').classList.add('d-none');
|
||||
}
|
||||
};
|
||||
function AddAdultPax(elem, check) {
|
||||
|
||||
if (check) {
|
||||
if (elem.previousElementSibling.value <= 5) {
|
||||
elem.previousElementSibling.value++;
|
||||
elem.previousElementSibling.previousElementSibling.disabled = false;
|
||||
elem.previousElementSibling.previousElementSibling.style.opacity = '1';
|
||||
TravellerCounter('');
|
||||
} if (elem.previousElementSibling.value == 6) {
|
||||
|
||||
elem.disabled = true;
|
||||
elem.style.opacity = '0.6';
|
||||
}
|
||||
} else {
|
||||
if (elem.nextElementSibling.value >= 2) {
|
||||
elem.nextElementSibling.value--;
|
||||
elem.nextElementSibling.nextElementSibling.disabled = false;
|
||||
elem.nextElementSibling.nextElementSibling.style.opacity = '1';
|
||||
TravellerCounter('');
|
||||
} if (elem.nextElementSibling.value == 1) {
|
||||
elem.disabled = true;
|
||||
elem.style.opacity = '0.6';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
function apply_people(elem) {
|
||||
if (elem) {
|
||||
TravellerCounter(elem.getAttribute('data-room'))
|
||||
document.getElementById("roomPax").classList.remove("showRoomPax");
|
||||
if (elem.getAttribute('data-room') == "addmore") {
|
||||
document.getElementById("MoreOption").classList.remove("moreOptionWrapper")
|
||||
} else document.getElementById("MoreOption").classList.add("moreOptionWrapper")
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
var RoomDetails = []
|
||||
function TravellerCounter(optionType) {
|
||||
console.log(RoomDetails)
|
||||
let searchRooms = [];
|
||||
let totalRooms = "";
|
||||
|
||||
if (optionType === "1Room2Adult") {
|
||||
let array_age = [];
|
||||
let data = {
|
||||
"adult": "2",
|
||||
"child": "0",
|
||||
"childAge": array_age
|
||||
}
|
||||
searchRooms.push(data);
|
||||
totalRooms = "1";
|
||||
} else if (optionType === "1Room1Adult") {
|
||||
let array_age = [];
|
||||
let data = {
|
||||
"adult": "1",
|
||||
"child": "0",
|
||||
"childAge": array_age
|
||||
}
|
||||
totalRooms = "1";
|
||||
searchRooms.push(data);
|
||||
} else {
|
||||
let roomElem = [...document.querySelector('#MoreOption').querySelectorAll('.HotelNoRoomWrapper')];
|
||||
let roomData = roomElem.map(e => {
|
||||
let adultVal = e.querySelector('.AdultPax').querySelector('input').value;
|
||||
let childVal = e.querySelector('.ChildPax').querySelector('input').value;
|
||||
let html = e.querySelector('.HotelNoageChild').querySelectorAll('.HotelNoageSelect');
|
||||
let array_age = [...html].map(elem => elem.querySelector('.select_control').value);
|
||||
return {
|
||||
'adult': adultVal,
|
||||
'child': childVal,
|
||||
'childAge': array_age
|
||||
}
|
||||
});
|
||||
searchRooms = [...roomData];
|
||||
totalRooms = searchRooms.length;
|
||||
}
|
||||
RoomDetails = searchRooms;
|
||||
getRoomsInfo(searchRooms);
|
||||
}
|
||||
TravellerCounter('1Room2Adult')
|
||||
|
||||
function getRoomsInfo(rooms) {
|
||||
let roomsInfo = rooms.reduce((acc, elem) =>
|
||||
(
|
||||
{
|
||||
Adult: parseInt(acc.Adult) + parseInt(elem.adult),
|
||||
Child: parseInt(acc.Child) + parseInt(elem.child)
|
||||
})
|
||||
, ({ Adult: 0, Child: 0 }));
|
||||
roomsInfo['Rooms'] = rooms.length;
|
||||
console.log(roomsInfo)
|
||||
document.getElementById('RoomCount').value = `${rooms.length} Room, ${roomsInfo.Adult} Adult ${roomsInfo.Child > 0 ? ', ' + roomsInfo.Child + ' Child' : ''}`;
|
||||
}
|
||||
|
||||
|
||||
// child count
|
||||
|
||||
function children_number(elem, check, index) {
|
||||
let html = "";
|
||||
console.log(index)
|
||||
if (check) {
|
||||
html += ` <div class="HotelNoageSelect child_${index}">
|
||||
<select class="select_control" onchange="TravellerCounter('')">
|
||||
<option value="1">Under 1</option>
|
||||
<option value="2">2 </option>
|
||||
<option value="3">3</option>
|
||||
<option value="4">4</option>
|
||||
<option value="5">5</option>
|
||||
<option value="6">6</option>
|
||||
<option value="7">7</option>
|
||||
<option value="8">8</option>
|
||||
<option value="9">9</option>
|
||||
<option value="10">10</option>
|
||||
<option value="11">11</option>
|
||||
</select>
|
||||
</div>
|
||||
`;
|
||||
elem.closest(".HotelNoRoomWrapper").querySelector(".HotelNoageChild").insertAdjacentHTML("beforeend", html)
|
||||
} else {
|
||||
let elemet = elem.closest(".HotelNoRoomWrapper").querySelectorAll(".HotelNoageSelect");
|
||||
let ind =
|
||||
elemet.length - 1
|
||||
elemet[ind].remove();
|
||||
}
|
||||
TravellerCounter('');
|
||||
};
|
||||
|
||||
|
||||
// hote api
|
||||
|
||||
let HotelList = [];
|
||||
let NationalityList = [];
|
||||
getBindHotelList()
|
||||
async function getBindHotelList(inp) {
|
||||
const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/CityMaster/GetSelectedCity?cityCode=39942,12568,41325,38997,33324&LangCode=EN", {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
HotelList = data
|
||||
console.log(data)
|
||||
|
||||
}
|
||||
// onkeyup
|
||||
|
||||
async function GethotelList(Input) {
|
||||
if (Input.value.length >= 2) {
|
||||
const response = await fetch("https://hotelapi.uat.futuretravelplatform.com/api/hotel/location?searchKey=" + Input.value + "&langCode=EN", {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
HotelList = data
|
||||
autoHotelListbind(Input)
|
||||
console.log(data)
|
||||
}
|
||||
}
|
||||
|
||||
// bind hotel list
|
||||
|
||||
function ShowHotelList(element) {
|
||||
element.closest(".HotelSearchDestination").querySelector(".hideInput") ? element.closest(".HotelSearchDestination").querySelector(".hideInput").classList.remove('hideInput') : ''
|
||||
autoHotelListbind(element)
|
||||
}
|
||||
function autoHotelListbind(element) {
|
||||
let html = '';
|
||||
HotelList.map(e => {
|
||||
html += `
|
||||
<div class="HotelSearchOtionContent" onclick="ApplyHotelCity(this)">
|
||||
<span class="material-icons"> location_on </span>
|
||||
<a data-countryCode="${e.countryCode}" data-cityCode="${e.cityCode}" data-city_Id="${e.city_Id}" data-cityName="${e.cityName}" data-displayName="${e.displayName}"> ${e.displayName}</a>
|
||||
</div>`
|
||||
});
|
||||
element.closest(".HotelSearchDestination").querySelector(".HotelList").innerHTML = html;
|
||||
}
|
||||
|
||||
function ApplyHotelCity(elem) {
|
||||
console.log(elem)
|
||||
let countryCode = elem.querySelector('a').getAttribute('data-countryCode');
|
||||
let cityCode = elem.querySelector('a').getAttribute('data-cityCode');
|
||||
let city_Id = elem.querySelector('a').getAttribute('data-city_Id');
|
||||
let displayName = elem.querySelector('a').getAttribute('data-displayName');
|
||||
|
||||
let input = document.getElementById('FromHotel');
|
||||
input.value = displayName;
|
||||
input.setAttribute("data-countryCode", countryCode);
|
||||
input.setAttribute("data-cityCode", cityCode);
|
||||
input.setAttribute("data-city_Id", city_Id);
|
||||
|
||||
elem.closest('.HotelDestination').classList.add('hideInput');
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/// nationality list bind
|
||||
|
||||
function showNationality(elem) {
|
||||
elem.closest('.HotelSearchFormNationality').querySelector('.HotelNationality').classList.remove('hideInput');
|
||||
autonationalityListbind(elem);
|
||||
}
|
||||
|
||||
getBindNationalityList()
|
||||
async function getBindNationalityList() {
|
||||
const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/CountryMaster/GetSelectedCountry/EN/MA,TN,NG,EG,AE,SA,BH,QA,KW,OM", {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
NationalityList = data
|
||||
}
|
||||
|
||||
async function GetNationalityList(Input) {
|
||||
if (Input.value) {
|
||||
const response = await fetch("https://adminapi.uat.futuretravelplatform.com/api/MasterSearch/GetAllCountry/EN/" + Input.value, {
|
||||
method: 'GET',
|
||||
headers: { 'Content-Type': 'application/json', 'OrgId': '2206040706597097092' }
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP error! status: ${response.status}`);
|
||||
}
|
||||
const data = await response.json();
|
||||
NationalityList = data
|
||||
autonationalityListbind(Input)
|
||||
}
|
||||
}
|
||||
|
||||
function autonationalityListbind(elem) {
|
||||
let html = '';
|
||||
NationalityList.map(e => {
|
||||
html += `
|
||||
<div class="HotelSearchOtionContent" onclick="ApplyNationality(this)">
|
||||
<span class="material-icons"> location_on </span>
|
||||
<a data-countryCode="${e.country_code}" data-countryName="${e.country_name}" > ${e.country_name}</a>
|
||||
</div>`
|
||||
});
|
||||
elem.closest('.HotelSearchFormNationality').querySelector('.NationalityList').innerHTML = html;
|
||||
}
|
||||
|
||||
function ApplyNationality(elem) {
|
||||
let citycode = elem.querySelector('a').getAttribute('data-countryCode');
|
||||
let countryName = elem.querySelector('a').getAttribute('data-countryName');
|
||||
document.getElementById('FromNationality').value = countryName;
|
||||
document.getElementById('FromNationality').setAttribute('data-countryCode', citycode);
|
||||
elem.closest('.HotelNationality').classList.add('hideInput');
|
||||
}
|
||||
|
||||
// caleran js for calender
|
||||
|
||||
|
||||
var startDate, endDate, HotelStartInstance, HotelEndInstance;
|
||||
var HotelFillInputs = function () {
|
||||
HotelStartInstance.elem.value = startDate ? startDate.locale(HotelStartInstance.config.format).format('DD MMM YYYY') : "";
|
||||
HotelEndInstance.elem.value = endDate ? endDate.locale(HotelEndInstance.config.format).format('DD MMM YYYY') : "";
|
||||
};
|
||||
document.querySelector("#hotelStart").value = moment().format('DD MMM YYYY');
|
||||
document.querySelector("#hotelEnd").value = moment().format('DD MMM YYYY');
|
||||
caleran("#hotelStart", {
|
||||
startEmpty: document.querySelector("#hotelStart").value === "",
|
||||
startDate: document.querySelector("#hotelStart").value,
|
||||
endDate: document.querySelector("#hotelEnd").value,
|
||||
enableKeyboard: false,
|
||||
minDate: new Date,
|
||||
oninit: function (instance) {
|
||||
HotelStartInstance = instance;
|
||||
if (!instance.config.startEmpty && instance.config.startDate) {
|
||||
instance.elem.value = instance.config.startDate.locale(instance.config.format).format('DD MMM YYYY');
|
||||
startDate = instance.config.startDate.clone();
|
||||
}
|
||||
},
|
||||
onbeforeshow: function (instance) {
|
||||
if (startDate) {
|
||||
HotelStartInstance.config.startDate = startDate;
|
||||
HotelEndInstance.config.startDate = startDate;
|
||||
}
|
||||
if (endDate) {
|
||||
HotelStartInstance.config.endDate = endDate.clone();
|
||||
HotelEndInstance.config.endDate = endDate.clone();
|
||||
}
|
||||
HotelFillInputs();
|
||||
instance.updateHeader();
|
||||
instance.reDrawCells();
|
||||
},
|
||||
onfirstselect: function (instance, start) {
|
||||
startDate = start.clone();
|
||||
HotelStartInstance.globals.startSelected = false;
|
||||
HotelStartInstance.hideDropdown();
|
||||
HotelEndInstance.showDropdown();
|
||||
HotelEndInstance.config.minDate = startDate.clone();
|
||||
HotelEndInstance.config.startDate = startDate.clone();
|
||||
HotelEndInstance.config.endDate = null;
|
||||
HotelEndInstance.globals.startSelected = true;
|
||||
HotelEndInstance.globals.endSelected = false;
|
||||
HotelEndInstance.globals.firstValueSelected = true;
|
||||
HotelEndInstance.setDisplayDate(start);
|
||||
if (endDate && startDate.isAfter(endDate)) {
|
||||
HotelEndInstance.globals.endDate = endDate.clone();
|
||||
}
|
||||
HotelEndInstance.updateHeader();
|
||||
HotelEndInstance.reDrawCells();
|
||||
HotelFillInputs();
|
||||
}
|
||||
|
||||
});
|
||||
caleran("#hotelEnd", {
|
||||
startEmpty: document.querySelector("#hotelEnd").value === "",
|
||||
startDate: document.querySelector("#hotelStart").value,
|
||||
endDate: document.querySelector("#hotelEnd").value,
|
||||
enableKeyboard: false,
|
||||
autoCloseOnSelect: true,
|
||||
minDate: new Date,
|
||||
oninit: function (instance) {
|
||||
HotelEndInstance = instance;
|
||||
if (!instance.config.startEmpty && instance.config.endDate) {
|
||||
instance.elem.value = (instance.config.endDate.locale(instance.config.format).format('DD MMM YYYY'));
|
||||
endDate = instance.config.endDate.clone();
|
||||
}
|
||||
calcNumberOfNights(startDate, endDate)
|
||||
},
|
||||
onbeforeshow: function (instance) {
|
||||
if (startDate) {
|
||||
HotelStartInstance.config.startDate = startDate;
|
||||
HotelEndInstance.config.startDate = startDate;
|
||||
}
|
||||
if (endDate) {
|
||||
HotelStartInstance.config.endDate = endDate.clone();
|
||||
HotelEndInstance.config.endDate = endDate.clone();
|
||||
}
|
||||
HotelFillInputs();
|
||||
instance.updateHeader();
|
||||
instance.reDrawCells();
|
||||
},
|
||||
onafterselect: function (instance, start, end) {
|
||||
startDate = start.clone();
|
||||
endDate = end.clone();
|
||||
HotelEndInstance.hideDropdown();
|
||||
HotelStartInstance.config.endDate = endDate.clone();
|
||||
HotelStartInstance.globals.firstValueSelected = true;
|
||||
HotelFillInputs();
|
||||
HotelEndInstance.globals.startSelected = true;
|
||||
HotelEndInstance.globals.endSelected = false;
|
||||
calcNumberOfNights(startDate, endDate)
|
||||
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// hotel search query string
|
||||
|
||||
function searchHotel() {
|
||||
let hotelDetails = document.getElementById('FromHotel')
|
||||
let Nationality = document.getElementById('FromNationality').getAttribute('data-countryCode')
|
||||
let element = document.getElementsByClassName('toast-warning')[0]
|
||||
if (!hotelDetails) {
|
||||
element.classList.remove('d-none')
|
||||
element.querySelector('span').innerHTML = 'Please enter destination city'
|
||||
hideToaster(element)
|
||||
return
|
||||
}
|
||||
if (!Nationality) {
|
||||
element.classList.remove('d-none')
|
||||
element.querySelector('span').innerHTML = 'Please select nationality'
|
||||
hideToaster(element)
|
||||
return
|
||||
}
|
||||
let queryParams = {};
|
||||
queryParams['CityCode'] = hotelDetails.getAttribute('data-cityCode');
|
||||
queryParams['CityId'] = hotelDetails.getAttribute('data-city_Id');
|
||||
queryParams['Country'] = hotelDetails.getAttribute('data-countryCode');
|
||||
queryParams['nationality'] = Nationality;
|
||||
queryParams['langCode'] = 'EN';
|
||||
queryParams['checkinDate'] = moment(document.getElementById('hotelStart').value).format('DD-MMM-YYYY');
|
||||
queryParams['checkoutDate'] = moment(document.getElementById('hotelEnd').value).format('DD-MMM-YYYY');
|
||||
|
||||
RoomDetails.map((e, i) => {
|
||||
let room = []
|
||||
room.push(parseInt(e.adult))
|
||||
room.push(parseInt(e.child))
|
||||
room.push(...e.childAge.map(no => parseInt(no)))
|
||||
let roomdetails = room.join('-')
|
||||
console.log(roomdetails)
|
||||
queryParams[`room${i + 1}`] = roomdetails
|
||||
})
|
||||
// sessionStorage.setItem('SerachReqQueryObj', JSON.stringify(querystring));
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
var query = Object.keys(queryParams).map(key => key + '=' + queryParams[key]).join('&');
|
||||
window.location.href = 'https://travel.neuholidays.com/hotel/result?' + query;
|
||||
|
||||
};
|
||||
|
||||
function calcNumberOfNights(checkInDate, checkOutDate) {
|
||||
let night = moment(checkOutDate).diff(checkInDate, 'days');
|
||||
document.getElementsByClassName('nightCountgBox')[0].querySelector('.nightNum').innerHTML = night;
|
||||
};
|
||||
Reference in New Issue
Block a user