Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<template>
<datepicker
:startDate="startDate"
@check-in-changed="setCheckInDate"
@check-out-changed="setCheckOutDate"
:maxNights="21"
:minNights="minNights"
:checkIn="checkIn"
:checkOut="checkOut"
:disabledDates="bookedDates"
:firstDayOfWeek="1"
:i18n="lang"
:showYear="true"
>
</datepicker>
</template>
<script>
import datepicker from 'vue-hotel-datepicker';
import swal from 'sweetalert';
import Routing from '../../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js';
const routes = require('../fos_js_routes.json');
Routing.setRoutingData(routes);
export default {
components: {
datepicker
},
data() {
return {
bookedDates: [],
startDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() + 14),
maxDate: 0,
checkIn: '',
checkOut: '',
minNights: 6, //0 indexed
lang: {
night: 'Night',
nights: 'Nights',
'day-names': ['Mon', 'Tue', 'Wed', 'Thur', 'Fri', 'Sat', 'Sun'],
'check-in': 'Check in',
'check-out': 'Check Out',
'month-names': ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
}
}
},
methods: {
setCheckInDate(newCheckIn) {
this.checkIn = newCheckIn;
if (this.checkOut instanceof Date && this.checkIn instanceof Date) {
this.fetchPriceTable();
}
},
setCheckOutDate(newCheckOut) {
this.checkOut = newCheckOut;
if (this.checkOut instanceof Date && this.checkIn instanceof Date) {
this.fetchPriceTable();
}
},
fetchBookedDates() {
window.fetch(Routing.generate('bookings'))
.then(checkStatus)
.then(response => response.json())
.then(data => {
this.bookedDates = data['period'];
this.maxDate = new Date(data['maxDate']);
})
.catch((error) => console.log(error));
},
fetchPriceTable() {
window.fetch(Routing.generate('booking_data'), { //'window' is needed for the polyfill
method: 'post',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
checkin: this.checkIn,
checkout: this.checkOut
})
})
.then(checkStatus)
.then(response => response.json())
.then(data => {
if (data['error']) {
swal('Those dates are already booked', '', 'error');
} else {
document.querySelector('.price-table').innerHTML = data['html'];
}
})
.catch(error => console.log(error));
}
},
created() {
this.fetchBookedDates();
}
}
function checkStatus(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response);
}
else {
return Promise.reject(new Error(response.statusText));
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.