105 lines
4.6 KiB
Cheetah
105 lines
4.6 KiB
Cheetah
{{template "base" .}}
|
|
{{define "content"}}
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col">
|
|
<img src="/static/images/generals-quarters.png" class="img-fluid mx-auto d-block img-thumbnail room-image"
|
|
alt="room page">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col">
|
|
<h1 class="text-center mt-3">General's Quarters</h1>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent sed convallis urna, vitae congue
|
|
odio. Sed pulvinar diam a odio tristique, nec porta eros suscipit. Sed lacinia ut nisl ultrices
|
|
condimentum. Vivamus imperdiet sapien sit amet mauris ornare accumsan. Proin varius imperdiet
|
|
gravida. Suspendisse posuere velit leo, sit amet egestas quam porta quis. Duis in nulla eu quam
|
|
iaculis iaculis. Etiam commodo gravida venenatis. Phasellus in vehicula est, aliquam condimentum
|
|
nisi. In id ligula lacinia, varius leo vel, tincidunt libero. Nullam cursus vel lectus at consequat.
|
|
Quisque malesuada efficitur sem et sollicitudin. Donec eget tincidunt arcu. Quisque ut posuere ex.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="d-flex justify-content-center py-3">
|
|
<button id="check-availability" class="btn btn-success">Check Availability</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
{{define "js"}}
|
|
<script>
|
|
document.getElementById("check-availability").addEventListener('click', () => {
|
|
let html = `
|
|
<form id="check-availability-form" action="/availability-json" method="post" novalidate class="needs-validation">
|
|
<div id="reservation-dates-modal" class="row">
|
|
<div class="col mb-3">
|
|
<input disabled required type="text" class="form-control" name="start" id="start" placeholder="Arrival">
|
|
</div>
|
|
<div class="col mb-3">
|
|
<input disabled required type="text" class="form-control" name="end" id="end" placeholder="Departure">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
`;
|
|
let attention = Prompt()
|
|
attention.custom({
|
|
title: "Choose your dates",
|
|
msg: html,
|
|
willOpen: () => {
|
|
const elem = document.getElementById('reservation-dates-modal')
|
|
const rp = new DateRangePicker(elem, {
|
|
"format": "yyyy-mm-dd",
|
|
showOnFocus: true,
|
|
minDate: new Date(),
|
|
});
|
|
},
|
|
didOpen: () => {
|
|
return [
|
|
document.getElementById('start').removeAttribute("disabled"),
|
|
document.getElementById('end').removeAttribute("disabled"),
|
|
]
|
|
},
|
|
callback: (result) => {
|
|
const formElem = document.getElementById("check-availability-form");
|
|
let formData = new FormData(formElem);
|
|
formData.append("csrf_token", "{{.CSRFToken}}");
|
|
formData.append("room_id", "1")
|
|
|
|
fetch('/availability-json', {
|
|
method: "post",
|
|
body: formData,
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.ok) {
|
|
console.log("room is available")
|
|
attention.custom({
|
|
icon: "success",
|
|
// TODO: use the default ok button instead
|
|
msg: '<p>Room is available</p>' +
|
|
'<p><a href="/book-room?id=' +
|
|
data.room_id +
|
|
'&s=' +
|
|
data.start_date +
|
|
'&e=' +
|
|
data.end_date +
|
|
'" class="btn btn-primary">' +
|
|
'Book now!</a></p>',
|
|
showConfirmButton: false,
|
|
});
|
|
} else {
|
|
console.log("room is not available")
|
|
attention.error({
|
|
msg: "No availability"
|
|
});
|
|
}
|
|
})
|
|
},
|
|
});
|
|
});
|
|
|
|
</script>
|
|
{{end}}
|