udemy-go-web-1/static/js/app.js

// notie
function notify(msg, msgType) {
    notie.alert({
        type: msgType,
        text: msg,
    });
}

// sweetalert2
function notifyModal(title, text, icon, confirmButtonText) {
    Swal.fire({
        title: title,
        text: text,
        icon: icon,
        confirmButtonText: confirmButtonText
    })
}

// Prompt is out Javascript module for all alerts, notifications, and custom popup dialogs
function Prompt() {
    let toast = function (c) {
        const {
            msg = "",
            icon = "success",
            position = "top-end",
        } = c

        const Toast = Swal.mixin({
            toast: true,
            title: msg,
            position: position,
            icon: icon,
            showConfirmButton: false,
            timer: 3000,
            timerProgressBar: true,
            didOpen: (toast) => {
                toast.addEventListener('mouseenter', Swal.stopTimer)
                toast.addEventListener('mouseleave', Swal.resumeTimer)
            }
        })
        Toast.fire({})
    }

    let success = function (c) {
        const {
            msg = "",
            title = "",
            footer = "",
        } = c

        Swal.fire({
            icon: 'success',
            title: title,
            text: msg,
            footer: footer,
        })
    }

    let error = function (c) {
        const {
            msg = "",
            title = "",
            footer = "",
        } = c

        Swal.fire({
            icon: 'error',
            title: title,
            text: msg,
            footer: footer,
        })
    }

    async function custom(c) {
        const {
            icon = "",
            msg = "",
            title = "",
            showConfirmButton = true,
        } = c;

        const {value: result} = await Swal.fire({
            icon: icon,
            title: title,
            html: msg,
            backdrop: false,
            focusConfirm: false,
            showCancelButton: true,
            showConfirmButton: showConfirmButton,
            willOpen: () => {
                if (c.willOpen !== undefined) {
                    c.willOpen();
                }
            },
            didOpen: () => {
                if (c.didOpen !== undefined) {
                    c.didOpen();
                }
            },
            preConfirm: () => {
                return [
                    document.getElementById('start').value,
                    document.getElementById('end').value,
                ]
            },
        })

        if (c.callback !== undefined) {
            if (result &&
                result.dismiss !== Swal.DismissReason.cancel &&
                result !== "") {
                c.callback(result);
            } else {
                c.callback(false);
            }
        }
    }

    return {
        toast: toast,
        success: success,
        error: error,
        custom: custom,
    }
}

function roomReservation(id) {
    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>
            `;
        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", id)

                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"
                            });
                        }
                    })
            },
        });
    });

}