page.html

<!DOCTYPE html>
<html lang="en" class="min-h-full">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
    <style>
        * {
            font-family: 'Roboto', sans-serif;
        }

        .loader {
            border: 16px solid #f3f3f3;
            border-radius: 50%;
            border-top: 16px solid #3498db;
            width: 120px;
            height: 120px;
            -webkit-animation: spin 2s linear infinite;
            /* Safari */
            animation: spin 2s linear infinite;
        }

        /* Safari */
        @-webkit-keyframes spin {
            0% {
                -webkit-transform: rotate(0deg);
            }

            100% {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }
    </style>
</head>

<div id="loading-screen" class="hidden w-full h-full fixed top-0 left-0 bottom-0 right-0  z-50">
    <div class="absolute w-full h-full opacity-50 bg-gray-100">
    </div>
    <div class="flex justify-center h-full items-center text-blue-500">
        <div class="loader"></div>
    </div>
</div>

<div id="successMessageModal" class="hidden fixed z-10 inset-0 overflow-y-auto">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div onclick="toggleSuccessMessageModal()" class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle md:max-w-md w-full sm:p-6"
            role="dialog" aria-modal="true" aria-labelledby="modal-headline">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100">
                    <svg class="h-6 w-6 text-green-600" xmlns="http://www.w3.org/2000/svg" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5">
                    <div class="mt-2">
                        <p id="successMessage" class="text-sm text-gray-500">

                        </p>
                    </div>
                </div>
            </div>
            <div class="mt-5 sm:mt-6">
                <button type="button" onclick="toggleSuccessMessageModal()"
                    class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

<div id="failedMessageModal" class="hidden fixed z-10 inset-0 overflow-y-auto">
    <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
        <div onclick="toggleFailedMessageModal()" class="fixed inset-0 transition-opacity" aria-hidden="true">
            <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
        </div>
        <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
        <div class="inline-block align-bottom bg-white rounded-lg px-4 pt-5 pb-4 text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle w-full md:max-w-md sm:p-6"
            role="dialog" aria-modal="true" aria-labelledby="modal-headline">
            <div>
                <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                    <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                        stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
                    </svg>
                </div>
                <div class="mt-3 text-center sm:mt-5 ">
                    <div class="mt-2">
                        <p id="failedMessage" class="text-sm text-gray-500">

                        </p>
                    </div>
                </div>
            </div>
            <div class="mt-5 sm:mt-6">
                <button type="button" onclick="toggleFailedMessageModal()"
                    class="inline-flex justify-center w-full rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:text-sm">
                    OK
                </button>
            </div>
        </div>
    </div>
</div>

<body class="bg-gray-100 min-h-screen">
    <div class="flex min-h-screen justify-center items-stretch mx-2 md:mx-4">
        <div class="flex-1 max-w-4xl bg-white min-h-full mx-auto p-4 shadow">
            <div class="flex justify-center p-2">
                <img src="https://www.baruzotech.com/icon.svg" alt="logo">
            </div>
            <div class="my-2 md:my-4 p-4 md:p-8">
                <div>
                    <label for="date" class="block text-sm font-medium text-gray-700">
                        Select Date
                    </label>
                    <input type="text" id="date" required
                        class="mt-1 block w-full border bg-gray-200 border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                </div>

                <div class="mt-4 md:mt-8">
                    <div id="selectedDate" class="text-center text-2xl md:text-3xl font-medium">
                    </div>
                </div>

                <div class="space-y-3 mt-4 px-2" id="timeSlotsCon">

                </div>

                <div id="inpCon" class="hidden mt-4 md:mt-6">
                    <div class="my-2 md:my-4">
                        <label for="title" class="block text-sm font-medium text-gray-700">
                            Event Title
                        </label>
                        <input type="text" name="title" id="title" required placeholder="event title"
                            class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
                    </div>
                    <div class="col-span-full flex justify-center">
                        <button id="submitBtn" onclick="bookSlot()"
                            class="bg-indigo-600 border border-transparent rounded-md shadow-sm py-2 px-4 flex justify-center items-center text-md font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                            <span class="hidden">
                                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white"
                                    xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor"
                                        stroke-width="4"></circle>
                                    <path class="opacity-75" fill="currentColor"
                                        d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z">
                                    </path>
                                </svg>
                            </span>
                            Submit
                        </button>
                    </div>
                </div>
            </div>

        </div>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>

        const enabledDays = "<?= enabledDays ?>".split(",");

        const bookSlot = () => {
            const date = getTimestampFromDate($("#date").val());
            if (!date) return toggleFailedMessageModal({ message: 'select the date' });
            const val = $('input[name="slot"]:checked').val();
            const [startTime, endTime] = val.split("/");
            if (!startTime || !endTime) return;
            const title = $("#title").val();
            if (!title) return toggleFailedMessageModal({ message: 'enter event title' });
            const dataToSend = {
                date, startTime, endTime, title
            }
            showButtonLoader('submitBtn');
            google.script.run.withSuccessHandler(slotBooked)
                .bookSlot(dataToSend);
        }

        const slotBooked = (result) => {
            const { error, retry, success, message } = JSON.parse(result);
            hideButtonLoader('submitBtn');
            if (error) {
                if (retry) getTimeSlots();
                return toggleFailedMessageModal({ message });
            }
            toggleSuccessMessageModal({ message });
            resetForm();
        }

        const resetForm = () => {
            $("#date").val('');
            $("#selectedDate").html('');
            $("#timeSlotsCon").html('');
            $("#inpCon").hide(200);
        }

        const getTimeSlots = () => {
            const date = getTimestampFromDate($("#date").val());
            google.script.run.withSuccessHandler(gotSlots)
                .getAvailableTimeslots({ date });
            showLoaderScreen();
            const dt = new Date(date);
            const dtArr = dt.toString().split(" ");
            const dateStr = `${dtArr[0]} ${dtArr[1]} ${dtArr[2]} ${dtArr[3]}`
            $("#selectedDate").text(dateStr);
        }

        function gotSlots(result) {
            const { slots } = JSON.parse(result);
            setSlots(slots);
            hideLoaderScreen();
        }

        function setSlots(slots) {
            const $timeSlotsCon = $("#timeSlotsCon");
            if (!slots.length) {
                $timeSlotsCon.html('<div class="text-center text-lg md:text-xl font-medium">No Slots Available<div>');
                $("#inpCon").hide(200);
                return
            }
            $timeSlotsCon.html('')
            for (let i = 0; i < slots.length; i++) {
                $timeSlotsCon.append(getSlot(slots[i]));
            }
            $("#inpCon").show(200);
        }

        let id = 0;
        const getSlot = ({ startTime, endTime }) => {
            return `<label
                        class="relative rounded-lg border border-gray-300 bg-white shadow-sm md:px-6 md:py-4 px-4 py-3 cursor-pointer hover:border-gray-400 flex justify-between items-center">
                        <input onclick="selectSlot('${++id}')" type="radio" name="slot" value="${startTime}/${endTime}" class="sr-only">
                        <div class="flex items-center">
                            <div class="text-sm">
                                <div class="font-medium text-gray-700">
                                    <p class="sm:inline">${getFormatedTime(startTime)} <span class="text-gray-500">to</span> ${getFormatedTime(endTime)}</p>
                                </div>
                            </div>
                        </div>
                        <div class="flex text-sm sm:mt-0 sm:block sm:ml-4 sm:text-right">
                            <div class="font-medium text-gray-600">${getTimeDifference(startTime, endTime)}</div>
                        </div>
                        <div id="${id}" class="slots border-transparent absolute -inset-px rounded-lg border-2 pointer-events-none"
                            aria-hidden="true"></div>
                    </label>`
        }

        const selectSlot = (id) => {
            $(".slots").removeClass("border-indigo-500");
            $(`#${id}`).addClass("border-indigo-500");
        }

        $('#date').flatpickr({
            minDate: "today",
            dateFormat: "m/d/Y", disableMobile: "true",
            "disable": [
                function (date) {
                    return checkIfDayIsEnabled(date.getDay());
                }
            ],
            onChange: () => getTimeSlots()
        });

        function checkIfDayIsEnabled(day) {
            return (enabledDays.indexOf(day + '') == -1)
        }

        function getTimestampFromDate(date) {
            try {
                if (!date) return "";
                const dateArr = date.split("/");
                const now = new Date(dateArr[2], parseInt(dateArr[0]) - 1, dateArr[1]);
                return now.getTime();
            } catch (error) {
                console.log(error);
                return "";
            }
        }

        const hideLoaderScreen = () => {
            $('#loading-screen').hide();
        }
        const showLoaderScreen = () => {
            $('#loading-screen').show();
        }

        const hideButtonLoader = (id) => {
            $(`#${id}`).attr("disabled", false);
            $(`#${id} span`).addClass("hidden");
        }

        const showButtonLoader = (id) => {
            $(`#${id}`).attr("disabled", true);
            $(`#${id} span`).removeClass("hidden");
        }

        const toggleSuccessMessageModal = ({ message } = {}) => {
            if (message) $("#successMessage").text(message);
            const modalElem = $("#successMessageModal");
            if (modalElem.hasClass("hidden"))
                modalElem.removeClass('hidden')
            else modalElem.addClass('hidden')
        }
        const toggleFailedMessageModal = ({ message } = {}) => {
            if (message) $("#failedMessage").text(message);
            const modalElem = $("#failedMessageModal");
            if (modalElem.hasClass("hidden"))
                modalElem.removeClass('hidden')
            else modalElem.addClass('hidden')
        }

        const getFormatedTime = (dt) => {
            if (!isNaN(Number(dt)))
                dt = Number(dt);
            const date = new Date(dt);
            let hours = date.getHours();
            let minutes = date.getMinutes();
            let ampm = hours >= 12 ? 'PM' : 'AM';
            hours = hours % 12;
            hours = hours ? hours : 12;
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            return `${hours}:${minutes} ${ampm}`;
        }

        function getTimeDifference(start, end) {
            const previous = new Date(start);
            const current = new Date(end);
            const msPerMinute = 60 * 1000;
            const msPerHour = msPerMinute * 60;
            const msPerDay = msPerHour * 24;
            const msPerMonth = msPerDay * 30;
            const msPerYear = msPerDay * 365;
            const elapsed = current - previous;
            if (elapsed < msPerMinute)
                return Math.round(elapsed / 1000) + 's';
            else if (elapsed < msPerHour)
                return Math.round(elapsed / msPerMinute) + 'm';
            else if (elapsed < msPerDay)
                return (elapsed / msPerHour).toFixed(2).replace(/0/, '') + 'h';
            else if (elapsed < msPerMonth)
                return Math.round(elapsed / msPerDay).toFixed(2) + 'd';
            else if (elapsed < msPerYear)
                return Math.round(elapsed / msPerMonth) + 'm';
            else
                return Math.round(elapsed / msPerYear) + 'y';
        }

    </script>
</body>

</html>