From 6432998dad43cb57f8bf43a04a52b61b5d9929a2 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Sun, 15 May 2016 13:05:28 +0200 Subject: [PATCH] Enhancements in the backend_calendar.js comments and code. --- src/assets/js/backend_calendar.js | 791 +++++++++++++++--------------- 1 file changed, 394 insertions(+), 397 deletions(-) diff --git a/src/assets/js/backend_calendar.js b/src/assets/js/backend_calendar.js index 9522770e..16ac1909 100644 --- a/src/assets/js/backend_calendar.js +++ b/src/assets/js/backend_calendar.js @@ -30,16 +30,16 @@ window.BackendCalendar = window.BackendCalendar || {}; var lastFocusedEventData; // Contains event data for later use. /** - * This method binds the default event handlers for the backend calendar - * page. If you do not need the default handlers then initialize the page - * by setting the "defaultEventHandlers" argument to "false". + * Bind Event Handlers + * + * This method binds the default event handlers for the backend calendar page. If you do not need the + * default handlers then initialize the page by setting the "defaultEventHandlers" argument to "false". */ function _bindEventHandlers() { /** * Event: Calendar Filter Item "Change" * - * Load the appointments that correspond to the select filter item and - * display them on the calendar. + * Load the appointments that correspond to the select filter item and display them on the calendar. */ $('#select-filter-item').change(function() { _refreshCalendarAppointments( @@ -50,14 +50,11 @@ window.BackendCalendar = window.BackendCalendar || {}; $('#calendar').fullCalendar('getView').visEnd); // If current value is service, then the sync buttons must be disabled. - if ($('#select-filter-item option:selected').attr('type') - === FILTER_TYPE_SERVICE) { - $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable') - .prop('disabled', true); + if ($('#select-filter-item option:selected').attr('type') === FILTER_TYPE_SERVICE) { + $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable').prop('disabled', true); } else { + $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable').prop('disabled', false); - $('#google-sync, #enable-sync, #insert-appointment, #insert-unavailable') - .prop('disabled', false); // If the user has already the sync enabled then apply the proper style changes. if ($('#select-filter-item option:selected').attr('google-sync') === 'true') { $('#enable-sync').addClass('btn-danger enabled'); @@ -78,6 +75,7 @@ window.BackendCalendar = window.BackendCalendar || {}; */ $('#google-sync').click(function() { var url = GlobalVariables.baseUrl + '/index.php/google/sync/' + $('#select-filter-item').val(); + $.ajax({ url: url, type: 'GET', @@ -110,8 +108,7 @@ window.BackendCalendar = window.BackendCalendar || {}; /** * Event: Reload Button "Click" * - * When the user clicks the reload button an the calendar items need to - * be refreshed. + * When the user clicks the reload button an the calendar items need to be refreshed. */ $('#reload-appointments').click(function() { $('#select-filter-item').trigger('change'); @@ -142,7 +139,7 @@ window.BackendCalendar = window.BackendCalendar || {}; _resetAppointmentDialog(); - // :: APPLY APPOINTMENT DATA AND SHOW TO MODAL DIALOG + // Apply appointment data and show modal dialog. $dialog.find('.modal-header h3').text(EALang['edit_appointment_title']); $dialog.find('#appointment-id').val(appointment['id']); $dialog.find('#select-service').val(appointment['id_services']).trigger('change'); @@ -151,12 +148,10 @@ window.BackendCalendar = window.BackendCalendar || {}; // Set the start and end datetime of the appointment. var startDatetime = Date.parseExact(appointment['start_datetime'], 'yyyy-MM-dd HH:mm:ss'); - // $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(startDatetime, GlobalVariables.dateFormat, true)); $dialog.find('#start-datetime').datetimepicker('setDate', startDatetime); var endDatetime = Date.parseExact(appointment['end_datetime'], 'yyyy-MM-dd HH:mm:ss'); - // $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true)); $dialog.find('#end-datetime').datetimepicker('setDate', endDatetime); var customer = appointment['customer']; @@ -180,7 +175,7 @@ window.BackendCalendar = window.BackendCalendar || {}; $dialog = $('#manage-unavailable'); _resetUnavailableDialog(); - // :: APPLY UNAVAILABLE DATA TO DIALOG + // Apply unvailable data to dialog. $dialog.find('.modal-header h3').text('Edit Unavailable Period'); $dialog.find('#unavailable-start').datetimepicker('setDate', unavailable.start_datetime); $dialog.find('#unavailable-id').val(unavailable.id); @@ -195,9 +190,8 @@ window.BackendCalendar = window.BackendCalendar || {}; /** * Event: Popover Delete Button "Click" * - * Displays a prompt on whether the user wants the appoinmtent to be - * deleted. If he confirms the deletion then an ajax call is made to - * the server and deletes the appointment from the database. + * Displays a prompt on whether the user wants the appoinmtent to be deleted. If he confirms the + * deletion then an ajax call is made to the server and deletes the appointment from the database. */ $(document).on('click', '.delete-popover', function() { $(this).parents().eq(2).remove(); // Hide the popover @@ -218,14 +212,16 @@ window.BackendCalendar = window.BackendCalendar || {}; if (response.exceptions) { response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); - GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE); + GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, + GeneralFunctions.EXCEPTIONS_MESSAGE); $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions)); return; } if (response.warnings) { response.warnings = GeneralFunctions.parseExceptions(response.warnings); - GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, GeneralFunctions.WARNINGS_MESSAGE); + GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, + GeneralFunctions.WARNINGS_MESSAGE); $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings)); } @@ -240,16 +236,16 @@ window.BackendCalendar = window.BackendCalendar || {}; GeneralFunctions.displayMessageBox(EALang['delete_appointment_title'], EALang['write_appointment_removal_reason'], messageButtons); + $('#message_box').append(''); $('#delete-reason').css('width', '100%'); } else { // Do not display confirmation promt. - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable'; - - var postData = { - 'csrfToken': GlobalVariables.csrfToken, - 'unavailable_id' : lastFocusedEventData.data.id - }; + var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable', + postData = { + csrfToken: GlobalVariables.csrfToken, + unavailable_id : lastFocusedEventData.data.id + }; $.post(postUrl, postData, function(response) { $('#message_box').dialog('close'); @@ -285,33 +281,32 @@ window.BackendCalendar = window.BackendCalendar || {}; /** * Event: Manage Appointments Dialog Save Button "Click" * - * Stores the appointment changes or inserts a new appointment depending the dialog - * mode. + * Stores the appointment changes or inserts a new appointment depending the dialog mode. */ $('#manage-appointment #save-appointment').click(function() { // Before doing anything the appointment data need to be validated. if (!_validateAppointmentForm()) { - return; // validation failed + return; } - // :: PREPARE APPOINTMENT DATA FOR AJAX CALL + // Prepare appointment data for AJAX request. var $dialog = $('#manage-appointment'); - // Id must exist on the object in order for the model to update - // the record and not to perform an insert operation. + // ID must exist on the object in order for the model to update the record and not to perform + // an insert operation. var startDatetime = $dialog.find('#start-datetime') - .datepicker('getDate').toString('yyyy-MM-dd HH:mm:ss'); - var endDatetime = $dialog.find('#end-datetime') + .datepicker('getDate').toString('yyyy-MM-dd HH:mm:ss'), + endDatetime = $dialog.find('#end-datetime') .datepicker('getDate').toString('yyyy-MM-dd HH:mm:ss'); var appointment = { - 'id_services': $dialog.find('#select-service').val(), - 'id_users_provider': $dialog.find('#select-provider').val(), - 'start_datetime': startDatetime, - 'end_datetime': endDatetime, - 'notes': $dialog.find('#appointment-notes').val(), - 'is_unavailable': false + id_services: $dialog.find('#select-service').val(), + id_users_provider: $dialog.find('#select-provider').val(), + start_datetime: startDatetime, + end_datetime: endDatetime, + notes: $dialog.find('#appointment-notes').val(), + is_unavailable: false }; if ($dialog.find('#appointment-id').val() !== '') { @@ -320,14 +315,14 @@ window.BackendCalendar = window.BackendCalendar || {}; } var customer = { - 'first_name': $dialog.find('#first-name').val(), - 'last_name': $dialog.find('#last-name').val(), - 'email': $dialog.find('#email').val(), - 'phone_number': $dialog.find('#phone-number').val(), - 'address': $dialog.find('#address').val(), - 'city': $dialog.find('#city').val(), - 'zip_code': $dialog.find('#zip-code').val(), - 'notes': $dialog.find('#customer-notes').val() + first_name: $dialog.find('#first-name').val(), + last_name: $dialog.find('#last-name').val(), + email: $dialog.find('#email').val(), + phone_number: $dialog.find('#phone-number').val(), + address: $dialog.find('#address').val(), + city: $dialog.find('#city').val(), + zip_code: $dialog.find('#zip-code').val(), + notes: $dialog.find('#customer-notes').val() }; if ($dialog.find('#customer-id').val() !== '') { @@ -336,7 +331,7 @@ window.BackendCalendar = window.BackendCalendar || {}; appointment['id_users_customer'] = customer['id']; } - // :: DEFINE SUCCESS EVENT CALLBACK + // Define success callback. var successCallback = function(response) { if (!GeneralFunctions.handleAjaxExceptions(response)) { $dialog.find('.modal-message').text(EALang['unexpected_issues_occurred']); @@ -349,8 +344,7 @@ window.BackendCalendar = window.BackendCalendar || {}; $dialog.find('.modal-message').addClass('alert-success').removeClass('alert-danger hidden'); $dialog.find('.modal-body').scrollTop(0); - // Close the modal dialog and refresh the calendar appointments - // after one second. + // Close the modal dialog and refresh the calendar appointments after one second. setTimeout(function() { $dialog.find('.alert').addClass('hidden'); $dialog.modal('hide'); @@ -358,14 +352,14 @@ window.BackendCalendar = window.BackendCalendar || {}; }, 2000); }; - // :: DEFINE AJAX ERROR EVENT CALLBACK + // Define error callback. var errorCallback = function() { $dialog.find('.modal-message').text(EALang['server_communication_error']); $dialog.find('.modal-message').addClass('alert-danger').removeClass('hidden'); $dialog.find('.modal-body').scrollTop(0); }; - // :: CALL THE UPDATE APPOINTMENT METHOD + // Save appointment data. _saveAppointment(appointment, customer, successCallback, errorCallback); }); @@ -390,10 +384,10 @@ window.BackendCalendar = window.BackendCalendar || {}; // Unavailable period records go to the appointments table. var unavailable = { - 'start_datetime': start.toString('yyyy-MM-dd HH:mm'), - 'end_datetime': end.toString('yyyy-MM-dd HH:mm'), - 'notes': $dialog.find('#unavailable-notes').val(), - 'id_users_provider': $('#select-filter-item').val() // curr provider + start_datetime: start.toString('yyyy-MM-dd HH:mm'), + end_datetime: end.toString('yyyy-MM-dd HH:mm'), + notes: $dialog.find('#unavailable-notes').val(), + id_users_provider: $('#select-filter-item').val() // curr provider }; if ($dialog.find('#unavailable-id').val() !== '') { @@ -404,7 +398,8 @@ window.BackendCalendar = window.BackendCalendar || {}; var successCallback = function(response) { if (response.exceptions) { response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); - GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE); + GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, + GeneralFunctions.EXCEPTIONS_MESSAGE); $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions)); $dialog.find('.modal-message') @@ -417,7 +412,8 @@ window.BackendCalendar = window.BackendCalendar || {}; if (response.warnings) { response.warnings = GeneralFunctions.parseExceptions(response.warnings); - GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, GeneralFunctions.WARNINGS_MESSAGE); + GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, + GeneralFunctions.WARNINGS_MESSAGE); $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings)); } @@ -427,9 +423,7 @@ window.BackendCalendar = window.BackendCalendar || {}; .addClass('alert-success') .removeClass('alert-danger hidden'); - - // Close the modal dialog and refresh the calendar appointments - // after one second. + // Close the modal dialog and refresh the calendar appointments after one second. setTimeout(function() { $dialog.find('.alert').addClass('hidden'); $dialog.modal('hide'); @@ -465,7 +459,7 @@ window.BackendCalendar = window.BackendCalendar || {}; */ $('#enable-sync').click(function() { if ($('#enable-sync').hasClass('enabled') === false) { - // :: ENABLE SYNCHRONIZATION FOR SELECTED PROVIDER + // Enable synchronization for selected provider. var authUrl = GlobalVariables.baseUrl + '/index.php/google/oauth/' + $('#select-filter-item').val(); @@ -475,10 +469,9 @@ window.BackendCalendar = window.BackendCalendar || {}; 'width=800, height=600'); var authInterval = window.setInterval(function() { - // When the browser redirects to the google user consent page the - // "window.document" variable becomes "undefined" and when it comes - // back to the redirect url it changes back. So check whether the - // variable is undefined to avoid javascript errors. + // When the browser redirects to the google user consent page the "window.document" variable + // becomes "undefined" and when it comes back to the redirect URL it changes back. So check + // whether the variable is undefined to avoid javascript errors. if (windowHandle.document !== undefined) { if (windowHandle.document.URL.indexOf(redirectUrl) !== -1) { // The user has granted access to his data. @@ -489,16 +482,19 @@ window.BackendCalendar = window.BackendCalendar || {}; $('#google-sync').prop('disabled', false); $('#select-filter-item option:selected').attr('google-sync', 'true'); - // Display the calendar selection dialog. First we will get a list - // of the available user's calendars and then we will display a selection - // modal so the user can select the sync calendar. - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_google_calendars'; - var postData = { - 'csrfToken': GlobalVariables.csrfToken, - 'provider_id': $('#select-filter-item').val() - }; + // Display the calendar selection dialog. First we will get a list of the available + // user's calendars and then we will display a selection modal so the user can select + // the sync calendar. + var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_google_calendars', + postData = { + csrfToken: GlobalVariables.csrfToken, + provider_id: $('#select-filter-item').val() + }; + $.post(postUrl, postData, function(response) { - if (!GeneralFunctions.handleAjaxExceptions(response)) return; + if (!GeneralFunctions.handleAjaxExceptions(response)) { + return; + } $('#google-calendar').empty(); $.each(response, function() { @@ -507,16 +503,15 @@ window.BackendCalendar = window.BackendCalendar || {}; }); $('#select-google-calendar').modal('show'); - }, 'json').fail(GeneralFunctions.ajaxFailureHandler); } } }, 100); } else { - // :: DISABLE SYNCHRONIZATION FOR SELECTED PROVIDER - // Update page elements and make an ajax call to remove the google - // sync setting of the selected provider. + // Disable synchronization for selected provider. + // Update page elements and make an AJAX call to remove the google sync setting of the + // selected provider. $.each(GlobalVariables.availableProviders, function(index, provider) { if (provider['id'] == $('#select-filter-item').val()) { provider['settings']['google_sync'] = '0'; @@ -538,19 +533,18 @@ window.BackendCalendar = window.BackendCalendar || {}; /** * Event: Insert Appointment Button "Click" * - * When the user presses this button, the manage appointment dialog opens and lets - * the user to create a new appointment. + * When the user presses this button, the manage appointment dialog opens and lets the user to + * create a new appointment. */ $('#insert-appointment').click(function() { _resetAppointmentDialog(); var $dialog = $('#manage-appointment'); - // Set the selected filter item and find the next appointment time - // as the default modal values. + // Set the selected filter item and find the next appointment time as the default modal values. if ($('#select-filter-item option:selected').attr('type') == 'provider') { var $providerOption = $dialog.find('#select-provider option[value="' + $('#select-filter-item').val() + '"]'); - if ($providerOption.length == 0) { // Change the services until you find the correct. + if ($providerOption.length === 0) { // Change the services until you find the correct. $.each($dialog.find('#select-service option'), function() { $(this).prop('selected', true).parent().change(); if ($providerOption.length > 0) @@ -571,17 +565,18 @@ window.BackendCalendar = window.BackendCalendar || {}; } }); - var start = new Date(); - var currentMin = parseInt(start.toString('mm')); + var start = new Date(), + currentMin = parseInt(start.toString('mm')); - if (currentMin > 0 && currentMin < 15) + if (currentMin > 0 && currentMin < 15) { start.set({ 'minute': 15 }); - else if (currentMin > 15 && currentMin < 30) + } else if (currentMin > 15 && currentMin < 30) { start.set({ 'minute': 30 }); - else if (currentMin > 30 && currentMin < 45) + } else if (currentMin > 30 && currentMin < 45) { start.set({ 'minute': 45 }); - else + } else { start.addHours(1).set({ 'minute': 0 }); + } $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(start, GlobalVariables.dateFormat, true)); $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(start.addMinutes(serviceDuration), @@ -595,25 +590,26 @@ window.BackendCalendar = window.BackendCalendar || {}; /** * Event : Insert Unavailable Time Period Button "Click" * - * When the user clicks this button a popup dialog appears and the use can set - * a time period where he cannot accept any appointments. + * When the user clicks this button a popup dialog appears and the use can set a time period where + * he cannot accept any appointments. */ $('#insert-unavailable').click(function() { _resetUnavailableDialog(); var $dialog = $('#manage-unavailable'); // Set the default datetime values. - var start = new Date(); - var currentMin = parseInt(start.toString('mm')); + var start = new Date(), + currentMin = parseInt(start.toString('mm')); - if (currentMin > 0 && currentMin < 15) + if (currentMin > 0 && currentMin < 15) { start.set({ 'minute': 15 }); - else if (currentMin > 15 && currentMin < 30) + } else if (currentMin > 15 && currentMin < 30) { start.set({ 'minute': 30 }); - else if (currentMin > 30 && currentMin < 45) + } else if (currentMin > 30 && currentMin < 45) { start.set({ 'minute': 45 }); - else + } else { start.addHours(1).set({ 'minute': 0 }); + } $dialog.find('#unavailable-start').val(GeneralFunctions.formatDate(start, GlobalVariables.dateFormat, true)); $dialog.find('#unavailable-end').val(GeneralFunctions.formatDate(start.addHours(1), GlobalVariables.dateFormat, true)); @@ -727,9 +723,8 @@ window.BackendCalendar = window.BackendCalendar || {}; /** * Event: Selected Service "Change" * - * When the user clicks on a service, its available providers should - * become visible. Also we need to update the start and end time of the - * appointment. + * When the user clicks on a service, its available providers should become visible. Also we need to + * update the start and end time of the appointment. */ $('#select-service').change(function() { var sid = $('#select-service').val(); @@ -747,8 +742,7 @@ window.BackendCalendar = window.BackendCalendar || {}; // Update the providers select box. $.each(GlobalVariables.availableProviders, function(indexProvider, provider) { $.each(provider.services, function(indexService, serviceId) { - // If the current provider is able to provide the selected service, - // add him to the listbox. + // If the current provider is able to provide the selected service, add him to the listbox. if (serviceId == sid) { var optionHtml = '