Extrating js module

2024-07-11 23:30:17 +02:00
parent 9775b67a2d
commit e2e03307b7
4 changed files with 201 additions and 284 deletions
--- a/static/js/app.js
+++ b/static/js/app.js
@ -0,0 +1,197 @@
+// 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"
+                            });
+                        }
+                    })
+            },
+        });
+    });
+
+}