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

{{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}}