udemy-go-web-1/templates/generals.page.tmpl

83 lines
3.4 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>
`;
Prompt().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,
});
},
didOpen: () => {
return [
document.getElementById('start').removeAttribute("disabled"),
document.getElementById('end').removeAttribute("disabled"),
]
},
callback: (result) => {
console.log(result);
const formElem = document.getElementById("check-availability-form");
let formData = new FormData(formElem);
formData.append("csrf_token", "{{.CSRFToken}}");
fetch('/availability-json', {
method: "post",
body: formData,
})
.then(response => response.json())
.then(data => {
console.log(data);
})
},
});
});
</script>
{{end}}