first commit

assets/js/pages/calendar.js

@@ -0,0 +1,164 @@
+/* ----------------------------------------------------------------------------
+ * Easy!Appointments - Online Appointment Scheduler
+ *
+ * @package     EasyAppointments
+ * @author      A.Tselegidis <alextselegidis@gmail.com>
+ * @copyright   Copyright (c) Alex Tselegidis
+ * @license     https://opensource.org/licenses/GPL-3.0 - GPLv3
+ * @link        https://easyappointments.org
+ * @since       v1.5.0
+ * ---------------------------------------------------------------------------- */
+
+/**
+ * Calendar page.
+ *
+ * This module implements the functionality of the backend calendar page.
+ */
+App.Pages.Calendar = (function () {
+    const $insertWorkingPlanException = $('#insert-working-plan-exception');
+
+    const moment = window.moment;
+
+    /**
+     * Add the page event listeners.
+     */
+    function addEventListeners() {
+        const $calendarPage = $('#calendar-page');
+
+        $calendarPage.on('click', '#toggle-fullscreen', (event) => {
+            const $toggleFullscreen = $(event.target);
+            const element = document.documentElement;
+            const isFullScreen =
+                document.fullScreenElement || document.mozFullScreen || document.webkitIsFullScreen || false;
+
+            if (isFullScreen) {
+                // Exit fullscreen mode.
+                if (document.exitFullscreen) {
+                    document.exitFullscreen();
+                } else if (document.msExitFullscreen) {
+                    document.msExitFullscreen();
+                } else if (document.mozCancelFullScreen) {
+                    document.mozCancelFullScreen();
+                } else if (document.webkitExitFullscreen) {
+                    document.webkitExitFullscreen();
+                }
+
+                $toggleFullscreen.removeClass('btn-success').addClass('btn-light');
+            } else {
+                // Switch to fullscreen mode.
+                if (element.requestFullscreen) {
+                    element.requestFullscreen();
+                } else if (element.msRequestFullscreen) {
+                    element.msRequestFullscreen();
+                } else if (element.mozRequestFullScreen) {
+                    element.mozRequestFullScreen();
+                } else if (element.webkitRequestFullscreen) {
+                    element.webkitRequestFullscreen();
+                }
+                $toggleFullscreen.removeClass('btn-light').addClass('btn-success');
+            }
+        });
+
+        $insertWorkingPlanException.on('click', () => {
+            const providerId = $('#select-filter-item').val();
+
+            if (providerId === App.Utils.CalendarDefaultView.FILTER_TYPE_ALL) {
+                return;
+            }
+
+            const provider = vars('available_providers').find((availableProvider) => {
+                return Number(availableProvider.id) === Number(providerId);
+            });
+
+            if (!provider) {
+                throw new Error('Provider could not be found: ' + providerId);
+            }
+
+            App.Components.WorkingPlanExceptionsModal.add().done((date, workingPlanException) => {
+                const successCallback = () => {
+                    App.Layouts.Backend.displayNotification(lang('working_plan_exception_saved'));
+
+                    const workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions) || {};
+
+                    workingPlanExceptions[date] = workingPlanException;
+
+                    for (let index in vars('available_providers')) {
+                        const availableProvider = vars('available_providers')[index];
+
+                        if (Number(availableProvider.id) === Number(providerId)) {
+                            vars('available_providers')[index].settings.working_plan_exceptions =
+                                JSON.stringify(workingPlanExceptions);
+                            break;
+                        }
+                    }
+
+                    $('#select-filter-item').trigger('change'); // Update the calendar.
+                };
+
+                App.Http.Calendar.saveWorkingPlanException(
+                    date,
+                    workingPlanException,
+                    providerId,
+                    successCallback,
+                    null,
+                );
+            });
+        });
+    }
+
+    /**
+     * Get calendar selection end date.
+     *
+     * On calendar slot selection, calculate the end date based on the provided start date.
+     *
+     * @param {Object} info Holding the "start" and "end" props, as provided by FullCalendar.
+     *
+     * @return {Date}
+     */
+    function getSelectionEndDate(info) {
+        const startMoment = moment(info.start);
+        const endMoment = moment(info.end);
+        const startTillEndDiff = endMoment.diff(startMoment);
+        const startTillEndDuration = moment.duration(startTillEndDiff);
+        const durationInMinutes = startTillEndDuration.asMinutes();
+        const minDurationInMinutes = 15;
+
+        if (durationInMinutes <= minDurationInMinutes) {
+            const serviceId = $('#select-service').val();
+            const service = vars('available_services').find(
+                (availableService) => Number(availableService.id) === Number(serviceId),
+            );
+
+            if (service) {
+                endMoment.add(service.duration - durationInMinutes, 'minutes');
+            }
+        }
+
+        return endMoment.toDate();
+    }
+
+    /**
+     * Initialize the module.
+     *
+     * This function makes the necessary initialization for the default backend calendar page.
+     *
+     * If this module is used in another page then this function might not be needed.
+     */
+    function initialize() {
+        // Load and initialize the calendar view.
+        if (vars('calendar_view') === 'table') {
+            App.Utils.CalendarTableView.initialize();
+        } else {
+            App.Utils.CalendarDefaultView.initialize();
+        }
+
+        App.Pages.Calendar.addEventListeners();
+    }
+
+    document.addEventListener('DOMContentLoaded', initialize);
+
+    return {
+        addEventListeners,
+        getSelectionEndDate,
+    };
+})();