This is a custom code placeholder.
Switch to Preview or publish the page
to see how your code works.
Double-click to edit
<script src="https://unpkg.com/vue@3.2.41/dist/vue.global.js"></script>
<!--
<script src="https://unpkg.com/@vuepic/vue-datepicker@3.5.2/dist/vue-datepicker.iife.js" ></script> -->
<link
rel="stylesheet"
href="https://unpkg.com/@vuepic/vue-datepicker@3.5.2/dist/main.css"
/>
<div id="app">
<div :class="['main-div', 'row',hideClass]" style="visibility: hidden">
<div class="col-6 select-div">
<select v-model="selected" class="select-hotels" placeholder="please">
<option v-for="option in data" :value="option.value">
{{ option.text }}{{ option.textCity }}
</option>
</select>
</div>
<div class="calendar-div col-5">
<Datepicker
id="calendar-range"
class="calendar-range"
v-model="date"
:enableTimePicker="false"
:format="format"
:autoApply="true"
cancelText="Close"
range
/>
</div>
<div class="btn-div col-1">
<button @click="redirectTo" class="btn-search"></button>
</div>
</div>
</div>
<script>
const page = "PuebloBonitoSunset";
const loadDatePickerScript = (url, id = "box") => {
const script = document.createElement("script");
// 👇️ local file
// script.setAttribute('src', 'another-file.js');
// 👇️ remote file
script.setAttribute(
"src",
url
// "https://unpkg.com/@vuepic/vue-datepicker@3.5.2/dist/vue-datepicker.iife.js"
);
// script.setAttribute("async", "");
script.async = false;
// 👇️ optionally set script to be treated as JS module
// script.setAttribute('type', 'module');
script.onload = function handleScriptLoaded() {
console.log("script has loaded");
// document.getElementById(id).textContent = "Script loaded successfully";
};
script.onerror = function handleScriptError() {
console.log("error loading script");
};
document.head.appendChild(script);
setTimeout(() => {
console.log("Script loaded successfully");
}, 500);
return true;
};
const main = () => {
const { ref, createApp, onMounted } = Vue;
const getParams = () => {
if (typeof window != "undefined") {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
const vid = urlParams.get("vid");
const checkin = urlParams.get("checkin");
const checkout = urlParams.get("checkout");
const paxConfig = urlParams.get("paxConfig");
console.log("vid", vid, checkin, checkout);
// 2022-09-24
let checkinDate;
let checkoutDate;
if (checkin && checkout) {
checkinDate = new Date(checkin);
checkoutDate = new Date(checkout);
}
return {
vid,
checkin,
checkout,
checkinDate,
checkoutDate,
paxConfig,
};
}
return null;
};
const getData = () => {
const data = ref(null);
const error = ref(null);
const selected = ref(null);
const hideClass = ref();
const params = getParams();
let myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");
myHeaders.append("withCredentials", "true");
myHeaders.append("crossorigin", "true");
myHeaders.append("mode", "cors");
let requestOptions = {
method: "GET",
redirect: "follow",
headers: myHeaders,
};
fetch(
"https://hotelslanding.inspirayouth.com/hotels-groups/" + page,
requestOptions
)
.then((res) => res.json())
.then((json) => {
const mapping = json?.map((r) => {
const city = decodeURIComponent(escape(r.city || ""));
const textCity = city ? ` - ${city}` : "";
return {
vid: r.vid,
value: r._id,
text: r.hotel,
url: r.searchUrl,
city: city,
textCity: textCity,
};
});
data.value = mapping;
if (params && params.vid) {
const hotel = mapping.find((f) => f.vid == params.vid);
if (hotel) {
selected.value = hotel.value;
}
} else {
const pre = mapping.length > 0 ? mapping[0].value : undefined;
selected.value = pre;
}
setTimeout(() => {
hideClass.value = "hide";
}, 100);
})
.catch((err) => {
console.log(err);
error.value = err;
});
return { data, error, selected, hideClass };
};
const searchBar = createApp({
setup() {
const { data, selected, hideClass } = getData();
const date = ref();
const format = (date1) => {
const day = date1[0].getDate();
const month = date1[0].getMonth() + 1;
const year = date1[0].getFullYear();
const day2 = date1[1].getDate();
const month2 = date1[1].getMonth() + 1;
const year2 = date1[1].getFullYear();
return `${day}/${month}/${year} - ${day2}/${month2}/${year2}`;
};
const objectToQueryString = (obj) => {
let str = [];
for (let p in obj)
if (obj.hasOwnProperty(p)) {
str.push(
encodeURIComponent(p) + "=" + encodeURIComponent(obj[p])
);
}
return str.join("&");
};
const redirectTo = () => {
if (!selected.value) {
console.log("hotel empty", "previus", document.referrer);
return;
}
const paramsUrl = getParams();
const previousURL = document.referrer;
console.log("previousURL", previousURL);
console.log("hostname", window.location.hostname);
const referrer = previousURL ? new URL(previousURL) : "";
// const isPreviousURLExternal =
// referrer.origin == new URL(window.location.hostname).origin;
const id = selected.value;
const hotel = data.value.find((f) => f.value == id);
let domain = referrer.origin + hotel.url.split("?")[0];
let search = hotel.url.split("?")[1];
let params = JSON.parse(
'{"' + search.replace(/&/g, '","').replace(/=/g, '":"') + '"}',
function (key, value) {
return key === "" ? value : decodeURIComponent(value);
}
);
let location = params?.Location || params?.location;
location = location?.replaceAll("+", " ");
const dateSelected = date.value;
const year = String(dateSelected[0].getFullYear()).substring(2);
const year2 = String(dateSelected[1].getFullYear()).substring(2);
let options = {
weekday: "short",
// year: "numeric",
month: "short",
day: "numeric",
};
const checkin = dateSelected[0].toLocaleDateString("en-US", options);
const checkout = dateSelected[1].toLocaleDateString("en-US", options);
const dateRange = `${checkin} ${year} - ${checkout} ${year2}`;
params = { ...params, Location: location, dateRange };
if (paramsUrl.paxConfig) {
params = { ...params, paxConfig: paramsUrl.paxConfig };
}
let queryString = objectToQueryString(params);
const fullUrl = `${domain}?${queryString}&searchall=true`;
console.log("fullUrl", fullUrl);
window.location.href = fullUrl;
};
// For demo purposes assign range from the current date
onMounted(() => {
const params = getParams();
if (params && params.checkoutDate && params.checkinDate) {
date.value = [params.checkinDate, params.checkoutDate];
} else {
const startDate = new Date();
const endDate = new Date(
new Date().setDate(startDate.getDate() + 7)
);
date.value = [startDate, endDate];
}
});
return {
data,
date,
selected,
format,
redirectTo,
hideClass,
};
},
components: { Datepicker: VueDatePicker },
});
// searchBar.use(window.vuedatepickerui)
const app = searchBar.mount("#app");
};
loadDatePickerScript(
"https://unpkg.com/vue@3.2.41/dist/vue.global.js",
"vue-script"
);
const loaded = loadDatePickerScript(
"https://unpkg.com/@vuepic/vue-datepicker@3.5.2/dist/vue-datepicker.iife.js",
"date-vue-script"
);
if (loaded) {
setTimeout(() => {
main();
}, 1000);
}
</script>
<style scoped>
.hide {
visibility: visible !important;
}
.main-div {
margin: 1rem;
height: 3rem;
text-align: center;
padding: 0 0.5rem;
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
.col-3 {
-webkit-box-flex: 0;
-ms-flex: 0 0 25%;
flex: 0 0 25%;
max-width: 25%;
}
.col-4 {
-webkit-box-flex: 0;
-ms-flex: 0 0 33.333333%;
flex: 0 0 33.333333%;
max-width: 33.333333%;
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 41.666667%;
flex: 0 0 41.666667%;
max-width: 41.666667%;
}
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 50%;
flex: 0 0 50%;
max-width: 50%;
}
.col-7 {
-webkit-box-flex: 0;
-ms-flex: 0 0 58.333333%;
flex: 0 0 58.333333%;
max-width: 58.333333%;
}
.col-8 {
-webkit-box-flex: 0;
-ms-flex: 0 0 66.666667%;
flex: 0 0 66.666667%;
max-width: 66.666667%;
}
.col-9 {
-webkit-box-flex: 0;
-ms-flex: 0 0 75%;
flex: 0 0 75%;
max-width: 75%;
}
.col-10 {
-webkit-box-flex: 0;
-ms-flex: 0 0 83.333333%;
flex: 0 0 83.333333%;
max-width: 83.333333%;
}
.col-11 {
-webkit-box-flex: 0;
-ms-flex: 0 0 91.666667%;
flex: 0 0 91.666667%;
max-width: 91.666667%;
}
.col-12 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
}
.col {
-ms-flex-preferred-size: 0;
flex-basis: 0;
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1;
max-width: 100%;
}
.row {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.select-hotels {
height: 3rem;
border: 1px solid #ccc;
border-radius: 2rem;
background-color: rgb(245, 245, 245);
padding-left: 0.5rem;
color: #455461;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
width: 95%;
}
.select-hotels:hover {
border: 0px solid rgb(174, 177, 214);
box-shadow: rgb(66 69 119) 0px 0px 4px 0px;
}
.select-hotels:focus {
outline: rgb(174, 177, 214);
}
.btn-search {
width: 55%;
transition-duration: 0.4s;
background-image: url(https://hotelsv2.inspiratest.com/images/search/search_new.svg);
background-repeat: no-repeat;
background-position: center center;
background-size: 20px;
background-color: #0b1050;
border-color: #0b1050;
border-radius: 5px;
cursor: pointer;
height: 3rem;
}
.dp__selection_preview {
display: none;
}
.dp__button {
display: none;
}
.dp__action_buttons {
width: 100%;
}
.dp__select {
font-weight: 600;
color: rgb(69, 67, 124);
text-transform: capitalize;
font-family: Overpass, sans-serif;
}
.dp__range_start {
background-color: rgb(64, 67, 119);
border-radius: 50%;
color: rgb(255, 255, 255);
}
.dp__range_end {
border-radius: 50%;
background-color: rgb(255, 255, 255);
color: rgb(64, 67, 120);
border-color: rgb(64, 67, 120);
}
.dp__input_wrap > input {
background-color: rgb(245, 245, 245);
color: #455461;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
border-radius: 2rem;
height: 3rem;
}
@media screen and (max-width: 992px) {
.col-6 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.col-5 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.col-2 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.col-1 {
-webkit-box-flex: 0;
-ms-flex: 0 0 100%;
flex: 0 0 100%;
max-width: 100%;
text-align: center;
}
.calendar-div {
/* width: 45%; */
/* display: flex; */
/* padding: 0 0.5rem; */
height: 3rem;
text-align: center;
}
.btn-search {
width: 95%;
border-radius: 3rem;
margin: 1rem 0rem;
margin-top: 2rem;
}
.calendar-range {
font-size: 0.6rem;
/*
padding: 0rem 3rem; */
width: 95%;
margin: 1rem 0.7rem;
}
}
@media screen and (min-width: 992px) {
.btn-div {
/* width: 10%; */
/* display: flex; */
font-size: 1rem;
height: 3rem;
text-align: left;
}
.btn-search {
width: 75%;
border-radius: 5px;
}
.calendar-range {
font-size: 0.6rem;
/*
padding: 0rem 3rem; */
width: 95%;
}
}
</style>
