From 6ba3d7ce70732c6b3cc64c238219dcdfb8d5801c Mon Sep 17 00:00:00 2001 From: alext Date: Tue, 31 Oct 2017 10:37:00 +0100 Subject: [PATCH] Corrected event sourcing for new fullcalendar version. --- src/application/views/backend/calendar.php | 7 +- src/assets/css/backend.css | 12 + .../js/backend_calendar_default_view.js | 787 +++++++++--------- 3 files changed, 428 insertions(+), 378 deletions(-) diff --git a/src/application/views/backend/calendar.php b/src/application/views/backend/calendar.php index 97451637..053c86fb 100644 --- a/src/application/views/backend/calendar.php +++ b/src/application/views/backend/calendar.php @@ -1,6 +1,7 @@ - + - + + @@ -211,7 +212,7 @@ + style="display: none;" class="input-sm form-control"> diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css index a153be8b..fa794c07 100644 --- a/src/assets/css/backend.css +++ b/src/assets/css/backend.css @@ -315,6 +315,10 @@ body legend { margin-bottom: 15px; } +#calendar-page #calendar .fc-toolbar.fc-header-toolbar h2 { + font-size: 22px; +} + #calendar-page #calendar .fc-unavailable { background-image: url('../img/unavailable.jpg'); font-size: 17px; @@ -330,6 +334,10 @@ body legend { font-size: 12px; } +#calendar-page #calendar .fc-time { + font-size: 10px; +} + #calendar-page #calendar .fc-break { background-image: url('../img/break.jpg'); } @@ -342,6 +350,10 @@ body legend { margin-bottom: 10px; } +#calendar .fc-time-grid-event.fc-short .fc-title { + font-size: .7em; +} + #calendar .fc-header-title h2 { font-size: 16px; margin: 0px; diff --git a/src/assets/js/backend_calendar_default_view.js b/src/assets/js/backend_calendar_default_view.js index 999a3ff3..2da741e0 100644 --- a/src/assets/js/backend_calendar_default_view.js +++ b/src/assets/js/backend_calendar_default_view.js @@ -18,29 +18,28 @@ */ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; -(function(exports) { - +(function (exports) { 'use strict'; // Constants - var FILTER_TYPE_PROVIDER = 'provider'; + var FILTER_TYPE_PROVIDER = 'provider'; var FILTER_TYPE_SERVICE = 'service'; // Variables var lastFocusedEventData; // Contains event data for later use. /** - * Bind event handlers for the calendar view. + * Bind event handlers for the calendar view. */ function _bindEventHandlers() { - var $calendarPage = $('#calendar-page'); + var $calendarPage = $('#calendar-page'); /** * Event: Reload Button "Click" * * When the user clicks the reload button an the calendar items need to be refreshed. */ - $('#reload-appointments').click(function() { + $('#reload-appointments').click(function () { $('#select-filter-item').trigger('change'); }); @@ -49,7 +48,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; * * Hides the open popover element. */ - $calendarPage.on('click', '.close-popover', function() { + $calendarPage.on('click', '.close-popover', function () { $(this).parents().eq(2).remove(); }); @@ -58,7 +57,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; * * Enables the edit dialog of the selected calendar event. */ - $calendarPage.on('click', '.edit-popover', function() { + $calendarPage.on('click', '.edit-popover', function () { $(this).parents().eq(2).remove(); // Hide the popover var $dialog; @@ -71,36 +70,34 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // 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'); - $dialog.find('#select-provider').val(appointment['id_users_provider']); + $dialog.find('#appointment-id').val(appointment.id); + $dialog.find('#select-service').val(appointment.id_services).trigger('change'); + $dialog.find('#select-provider').val(appointment.id_users_provider); // Set the start and end datetime of the appointment. - var startDatetime = Date.parseExact(appointment['start_datetime'], - 'yyyy-MM-dd HH:mm:ss'); + var startDatetime = Date.parseExact(appointment.start_datetime, 'yyyy-MM-dd HH:mm:ss'); $dialog.find('#start-datetime').datetimepicker('setDate', startDatetime); - var endDatetime = Date.parseExact(appointment['end_datetime'], - 'yyyy-MM-dd HH:mm:ss'); + var endDatetime = Date.parseExact(appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss'); $dialog.find('#end-datetime').datetimepicker('setDate', endDatetime); - var customer = appointment['customer']; - $dialog.find('#customer-id').val(appointment['id_users_customer']); - $dialog.find('#first-name').val(customer['first_name']); - $dialog.find('#last-name').val(customer['last_name']); - $dialog.find('#email').val(customer['email']); - $dialog.find('#phone-number').val(customer['phone_number']); - $dialog.find('#address').val(customer['address']); - $dialog.find('#city').val(customer['city']); - $dialog.find('#zip-code').val(customer['zip_code']); - $dialog.find('#appointment-notes').val(appointment['notes']); - $dialog.find('#customer-notes').val(customer['notes']); + var customer = appointment.customer; + $dialog.find('#customer-id').val(appointment.id_users_customer); + $dialog.find('#first-name').val(customer.first_name); + $dialog.find('#last-name').val(customer.last_name); + $dialog.find('#email').val(customer.email); + $dialog.find('#phone-number').val(customer.phone_number); + $dialog.find('#address').val(customer.address); + $dialog.find('#city').val(customer.city); + $dialog.find('#zip-code').val(customer.zip_code); + $dialog.find('#appointment-notes').val(appointment.notes); + $dialog.find('#customer-notes').val(customer.notes); } else { var unavailable = lastFocusedEventData.data; // Replace string date values with actual date objects. - unavailable.start_datetime = GeneralFunctions.clone(lastFocusedEventData.start); - unavailable.end_datetime = GeneralFunctions.clone(lastFocusedEventData.end); + unavailable.start_datetime = lastFocusedEventData.start.clone(); + unavailable.end_datetime = lastFocusedEventData.end.clone(); $dialog = $('#manage-unavailable'); BackendCalendarUnavailabilitiesModal.resetUnavailableDialog(); @@ -122,62 +119,69 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; * Event: Popover Delete Button "Click" * * Displays a prompt on whether the user wants the appointment to be deleted. If he confirms the - * deletion then an ajax call is made to the server and deletes the appointment from the database. + * deletion then an AJAX call is made to the server and deletes the appointment from the database. */ - $calendarPage.on('click', '.delete-popover', function() { - $(this).parents().eq(2).remove(); // Hide the popover + $calendarPage.on('click', '.delete-popover', function () { + $(this).parents().eq(2).remove(); // Hide the popover. if (lastFocusedEventData.data.is_unavailable == false) { - var messageButtons = {}; - messageButtons['OK'] = function() { - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_appointment'; - var postData = { - csrfToken: GlobalVariables.csrfToken, - appointment_id : lastFocusedEventData.data['id'], - delete_reason: $('#delete-reason').val() - }; + var buttons = [ + { + text: 'OK', + click: function () { + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_appointment'; + var data = { + csrfToken: GlobalVariables.csrfToken, + appointment_id: lastFocusedEventData.data.id, + delete_reason: $('#delete-reason').val() + }; - $.post(postUrl, postData, function(response) { - $('#message_box').dialog('close'); + $.post(url, data, function (response) { + $('#message_box').dialog('close'); - if (response.exceptions) { - response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); - GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, - GeneralFunctions.EXCEPTIONS_MESSAGE); - $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.exceptions)); - return; + if (response.exceptions) { + response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); + 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); + $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings)); + } + + // Refresh calendar event items. + $('#select-filter-item').trigger('change'); + }, 'json').fail(GeneralFunctions.ajaxFailureHandler); } - - if (response.warnings) { - response.warnings = GeneralFunctions.parseExceptions(response.warnings); - GeneralFunctions.displayMessageBox(GeneralFunctions.WARNINGS_TITLE, - GeneralFunctions.WARNINGS_MESSAGE); - $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings)); + }, + { + text: EALang.cancel, + click: function () { + $('#message_box').dialog('close'); } + } + ]; - // Refresh calendar event items. - $('#select-filter-item').trigger('change'); - }, 'json').fail(GeneralFunctions.ajaxFailureHandler); - }; - - messageButtons[EALang.cancel] = function() { - $('#message_box').dialog('close'); - }; GeneralFunctions.displayMessageBox(EALang.delete_appointment_title, - EALang.write_appointment_removal_reason, messageButtons); + EALang.write_appointment_removal_reason, buttons); $('#message_box').append(''); $('#delete-reason').css('width', '100%'); } else { // Do not display confirmation prompt. - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable'; - var postData = { + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_delete_unavailable'; + var data = { csrfToken: GlobalVariables.csrfToken, - unavailable_id : lastFocusedEventData.data.id + unavailable_id: lastFocusedEventData.data.id }; - $.post(postUrl, postData, function(response) { + $.post(url, data, function (response) { $('#message_box').dialog('close'); if (response.exceptions) { @@ -204,13 +208,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; * * Load the appointments that correspond to the select filter item and display them on the calendar. */ - $('#select-filter-item').change(function() { + $('#select-filter-item').change(function () { _refreshCalendarAppointments( - $('#calendar'), - $('#select-filter-item').val(), - $('#select-filter-item option:selected').attr('type'), - $('#calendar').fullCalendar('getView').visStart, - $('#calendar').fullCalendar('getView').visEnd); + $('#calendar'), + $('#select-filter-item').val(), + $('#select-filter-item option:selected').attr('type'), + $('#calendar').fullCalendar('getView').start, + $('#calendar').fullCalendar('getView').end); // If current value is service, then the sync buttons must be disabled. if ($('#select-filter-item option:selected').attr('type') === FILTER_TYPE_SERVICE) { @@ -242,7 +246,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; */ function _getCalendarHeight() { var result = window.innerHeight - $('#footer').outerHeight() - $('#header').outerHeight() - - $('#calendar-toolbar').outerHeight() - 60; // 60 for fine tuning + - $('#calendar-toolbar').outerHeight() - 60; // 60 for fine tuning return (result > 500) ? result : 500; // Minimum height is 500px } @@ -266,11 +270,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; if ($parent.hasClass('fc-unavailable') || $altParent.hasClass('fc-unavailable')) { displayEdit = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom')) - && GlobalVariables.user.privileges.appointments.edit == true) - ? '' : 'hide'; + && GlobalVariables.user.privileges.appointments.edit == true) + ? '' : 'hide'; displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom')) - && GlobalVariables.user.privileges.appointments.delete == true) - ? '' : 'hide'; // Same value at the time. + && GlobalVariables.user.privileges.appointments.delete == true) + ? '' : 'hide'; // Same value at the time. var notes = ''; if (event.data) { // Only custom unavailable periods have notes. @@ -278,56 +282,56 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } html = - '' + - '' + EALang.start + ' ' - + GeneralFunctions.formatDate(event.start, GlobalVariables.dateFormat, true) - + '
' + - '' + EALang.end + ' ' - + GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true) - + '
' - + notes - + '
' + - '
' + - '' + - '' + - '' + - '
'; + '' + + '' + EALang.start + ' ' + + GeneralFunctions.formatDate(event.start, GlobalVariables.dateFormat, true) + + '
' + + '' + EALang.end + ' ' + + GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true) + + '
' + + notes + + '
' + + '
' + + '' + + '' + + '' + + '
'; } else { displayEdit = (GlobalVariables.user.privileges.appointments.edit == true) - ? '' : 'hide'; + ? '' : 'hide'; displayDelete = (GlobalVariables.user.privileges.appointments.delete == true) - ? '' : 'hide'; + ? '' : 'hide'; html = - '' + - '' + EALang.start + ' ' - + GeneralFunctions.formatDate(event.start, GlobalVariables.dateFormat, true) - + '
' + - '' + EALang.end + ' ' - + GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true) - + '
' + - '' + EALang.service + ' ' - + event.data['service']['name'] - + '
' + - '' + EALang.provider + ' ' - + event.data['provider']['first_name'] + ' ' - + event.data['provider']['last_name'] - + '
' + - '' + EALang.customer + ' ' - + event.data['customer']['first_name'] + ' ' - + event.data['customer']['last_name'] - + '
' + - '
' + - '' + - '' + - '' + - '
'; + '' + + '' + EALang.start + ' ' + + GeneralFunctions.formatDate(event.start, GlobalVariables.dateFormat, true) + + '
' + + '' + EALang.end + ' ' + + GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true) + + '
' + + '' + EALang.service + ' ' + + event.data.service.name + + '
' + + '' + EALang.provider + ' ' + + event.data.provider.first_name + ' ' + + event.data.provider.last_name + + '
' + + '' + EALang.customer + ' ' + + event.data.customer.first_name + ' ' + + event.data.customer.last_name + + '
' + + '
' + + '' + + '' + + '' + + '
'; } $(jsEvent.target).popover({ @@ -340,11 +344,12 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; }); lastFocusedEventData = event; + $(jsEvent.target).popover('toggle'); - // Fix popover position - if ($('.popover').length > 0) { - if ($('.popover').position().top < 200) $('.popover').css('top', '200px'); + // Fix popover position. + if ($('.popover').length > 0 && $('.popover').position().top < 200) { + $('.popover').css('top', '200px'); } } @@ -371,18 +376,18 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // Prepare appointment data. var appointment = GeneralFunctions.clone(event.data); - // Must delete the following because only appointment data should be provided to the ajax call. - delete appointment['customer']; - delete appointment['provider']; - delete appointment['service']; + // Must delete the following because only appointment data should be provided to the AJAX call. + delete appointment.customer; + delete appointment.provider; + delete appointment.service; - appointment['end_datetime'] = Date.parseExact( - appointment['end_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ minutes: minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + appointment.end_datetime = Date.parseExact( + appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({minutes: minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); // Success callback - var successCallback = function(response) { + var successCallback = function (response) { if (response.exceptions) { response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE); @@ -398,19 +403,20 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } // Display success notification to user. - var undoFunction = function() { - appointment['end_datetime'] = Date.parseExact( - appointment['end_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ minutes: -minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + var undoFunction = function () { + appointment.end_datetime = Date.parseExact( + appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({minutes: -minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment'; - var postData = { + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment'; + + var data = { csrfToken: GlobalVariables.csrfToken, appointment_data: JSON.stringify(appointment) }; - $.post(postUrl, postData, function(response) { + $.post(url, data, function (response) { $('#notification').hide('blind'); revertFunc(); }, 'json').fail(GeneralFunctions.ajaxFailureHandler); @@ -426,7 +432,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; }; // Update appointment data. - BackendCalendarApi.saveAppointment(appointment, undefined, successCallback, undefined); + BackendCalendarApi.saveAppointment(appointment, undefined, successCallback); } else { // Update unavailable time period. var unavailable = { @@ -437,7 +443,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; }; // Define success callback function. - var successCallback = function(response) { + var successCallback = function (response) { if (response.exceptions) { response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE); @@ -453,11 +459,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } // Display success notification to user. - var undoFunction = function() { - unavailable['end_datetime'] = Date.parseExact( - unavailable['end_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ minutes: -minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + var undoFunction = function () { + unavailable.end_datetime = Date.parseExact( + unavailable.end_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({minutes: -minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable'; var data = { @@ -465,7 +471,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; unavailable: JSON.stringify(unavailable) }; - $.post(url, data, function(response) { + $.post(url, data, function (response) { $('#notification').hide('blind'); revertFunc(); }, 'json').fail(GeneralFunctions.ajaxFailureHandler); @@ -477,10 +483,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; 'function': undoFunction } ]); + $('#footer').css('position', 'static'); // Footer position fix. }; - BackendCalendarApi.saveUnavailable(unavailable, successCallback, undefined); + BackendCalendarApi.saveUnavailable(unavailable, successCallback); } } @@ -531,25 +538,25 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; var appointment = GeneralFunctions.clone(event.data); // Must delete the following because only appointment data should be provided to the ajax call. - delete appointment['customer']; - delete appointment['provider']; - delete appointment['service']; + delete appointment.customer; + delete appointment.provider; + delete appointment.service; - appointment['start_datetime'] = Date.parseExact( - appointment['start_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ days: dayDelta, minutes: minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + appointment.start_datetime = Date.parseExact( + appointment.start_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({days: dayDelta, minutes: minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - appointment['end_datetime'] = Date.parseExact( - appointment['end_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ days: dayDelta, minutes: minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + appointment.end_datetime = Date.parseExact( + appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({days: dayDelta, minutes: minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - event.data['start_datetime'] = appointment['start_datetime']; - event.data['end_datetime'] = appointment['end_datetime']; + event.data.start_datetime = appointment.start_datetime; + event.data.end_datetime = appointment.end_datetime; // Define success callback function. - var successCallback = function(response) { + var successCallback = function (response) { if (response.exceptions) { response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE); @@ -565,27 +572,27 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } // Define the undo function, if the user needs to reset the last change. - var undoFunction = function() { - appointment['start_datetime'] = Date.parseExact( - appointment['start_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ days: -dayDelta, minutes: -minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + var undoFunction = function () { + appointment.start_datetime = Date.parseExact( + appointment.start_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({days: -dayDelta, minutes: -minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - appointment['end_datetime'] = Date.parseExact( - appointment['end_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ days: -dayDelta, minutes: -minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + appointment.end_datetime = Date.parseExact( + appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({days: -dayDelta, minutes: -minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - event.data['start_datetime'] = appointment['start_datetime']; - event.data['end_datetime'] = appointment['end_datetime']; + event.data.start_datetime = appointment.start_datetime; + event.data.end_datetime = appointment.end_datetime; - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment'; - var postData = { + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_appointment'; + var data = { csrfToken: GlobalVariables.csrfToken, appointment_data: JSON.stringify(appointment) }; - $.post(postUrl, postData, function(response) { + $.post(url, data, function (response) { $('#notification').hide('blind'); revertFunc(); }, 'json').fail(GeneralFunctions.ajaxFailureHandler); @@ -602,7 +609,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; }; // Update appointment data. - BackendCalendarApi.saveAppointment(appointment, undefined, successCallback, undefined); + BackendCalendarApi.saveAppointment(appointment, undefined, successCallback); } else { // Update unavailable time period. var unavailable = { @@ -612,7 +619,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; id_users_provider: event.data.id_users_provider }; - var successCallback = function(response) { + var successCallback = function (response) { if (response.exceptions) { response.exceptions = GeneralFunctions.parseExceptions(response.exceptions); GeneralFunctions.displayMessageBox(GeneralFunctions.EXCEPTIONS_TITLE, GeneralFunctions.EXCEPTIONS_MESSAGE); @@ -626,27 +633,27 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; $('#message_box').append(GeneralFunctions.exceptionsToHtml(response.warnings)); } - var undoFunction = function() { - unavailable['start_datetime'] = Date.parseExact( - unavailable['start_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ days: -dayDelta, minutes: -minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + var undoFunction = function () { + unavailable.start_datetime = Date.parseExact( + unavailable.start_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({days: -dayDelta, minutes: -minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - unavailable['end_datetime'] = Date.parseExact( - unavailable['end_datetime'], 'yyyy-MM-dd HH:mm:ss') - .add({ days: -dayDelta, minutes: -minuteDelta }) - .toString('yyyy-MM-dd HH:mm:ss'); + unavailable.end_datetime = Date.parseExact( + unavailable.end_datetime, 'yyyy-MM-dd HH:mm:ss') + .add({days: -dayDelta, minutes: -minuteDelta}) + .toString('yyyy-MM-dd HH:mm:ss'); - event.data['start_datetime'] = unavailable['start_datetime']; - event.data['end_datetime'] = unavailable['end_datetime']; + event.data.start_datetime = unavailable.start_datetime; + event.data.end_datetime = unavailable.end_datetime; - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable'; - var postData = { + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_save_unavailable'; + var data = { csrfToken: GlobalVariables.csrfToken, unavailable: JSON.stringify(unavailable) }; - $.post(postUrl, postData, function(response) { + $.post(url, data, function (response) { $('#notification').hide('blind'); revertFunc(); }, 'json').fail(GeneralFunctions.ajaxFailureHandler); @@ -662,37 +669,37 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; $('#footer').css('position', 'static'); // Footer position fix. }; - BackendCalendarApi.saveUnavailable(unavailable, successCallback, undefined); + BackendCalendarApi.saveUnavailable(unavailable, successCallback); } } /** - * Calendar "View Display" Callback + * Calendar "View Render" Callback * * Whenever the calendar changes or refreshes its view certain actions need to be made, in order to * display proper information to the user. */ - function _calendarViewDisplay() { + function _calendarViewRender() { if ($('#select-filter-item').val() === null) { - return; + return; } _refreshCalendarAppointments( - $('#calendar'), - $('#select-filter-item').val(), - $('#select-filter-item option:selected').attr('type'), - $('#calendar').fullCalendar('getView').visStart, - $('#calendar').fullCalendar('getView').visEnd); + $('#calendar'), + $('#select-filter-item').val(), + $('#select-filter-item option:selected').attr('type'), + $('#calendar').fullCalendar('getView').start, + $('#calendar').fullCalendar('getView').end); $(window).trigger('resize'); // Places the footer on the bottom. // Remove all open popovers. - $('.close-popover').each(function() { + $('.close-popover').each(function () { $(this).parents().eq(2).remove(); }); // Add new pop overs. - $('.fv-events').each(function(index, eventHandle) { + $('.fv-events').each(function (index, eventHandle) { $(eventHandle).popover(); }); } @@ -701,13 +708,13 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; * Convert titles to HTML * * On some calendar events the titles contain html markup that is not displayed properly due to the - * fullcalendar plugin. This plugin sets the .fc-event-title value by using the $.text() method and + * FullCalendar plugin. This plugin sets the .fc-event-title value by using the $.text() method and * not the $.html() method. So in order for the title to display the html properly we convert all the * .fc-event-titles where needed into html. */ function _convertTitlesToHtml() { // Convert the titles to html code. - $('.fc-custom').each(function() { + $('.fc-custom').each(function () { var title = $(this).find('.fc-event-title').text(); $(this).find('.fc-event-title').html(title); var time = $(this).find('.fc-event-time').text(); @@ -727,16 +734,16 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; * @param {Date} endDate Visible end date of the calendar. */ function _refreshCalendarAppointments($calendar, recordId, filterType, startDate, endDate) { - var postUrl = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_calendar_appointments'; - var postData = { + var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_calendar_appointments'; + var data = { csrfToken: GlobalVariables.csrfToken, record_id: recordId, - start_date: startDate.toString('yyyy-MM-dd'), - end_date: endDate.toString('yyyy-MM-dd'), + start_date: startDate.format('YYYY-MM-DD'), + end_date: endDate.format('YYYY-MM-DD'), filter_type: filterType }; - $.post(postUrl, postData, function(response) { + $.post(url, data, function (response) { if (!GeneralFunctions.handleAjaxExceptions(response)) { return; } @@ -745,14 +752,14 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; var calendarEvents = []; var $calendar = $('#calendar'); - $.each(response.appointments, function(index, appointment) { + $.each(response.appointments, function (index, appointment) { var event = { - id: appointment['id'], - title: appointment['service']['name'] + ' - ' - + appointment['customer']['first_name'] + ' ' - + appointment['customer']['last_name'], - start: appointment['start_datetime'], - end: appointment['end_datetime'], + id: appointment.id, + title: appointment.service.name + ' - ' + + appointment.customer.first_name + ' ' + + appointment.customer.last_name, + start: appointment.start_datetime, + end: appointment.end_datetime, allDay: false, data: appointment // Store appointment data for later use. }; @@ -767,57 +774,63 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; var calendarView = $calendar.fullCalendar('getView').name; if (filterType === FILTER_TYPE_PROVIDER && calendarView !== 'month') { - $.each(GlobalVariables.availableProviders, function(index, provider) { - if (provider['id'] == recordId) { + $.each(GlobalVariables.availableProviders, function (index, provider) { + if (provider.id == recordId) { var workingPlan = jQuery.parseJSON(provider.settings.working_plan); var unavailablePeriod; - switch(calendarView) { + switch (calendarView) { case 'agendaDay': - var selDayName = $calendar.fullCalendar('getView') - .start.toString('dddd').toLowerCase(); + var selectedDayName = $calendar.fullCalendar('getView').start.format('dddd').toLowerCase(); // Add custom unavailable periods. - $.each(response.unavailables, function(index, unavailable) { + $.each(response.unavailables, function (index, unavailable) { + var notes = unavailable.notes ? ' - ' + unavailable.notes : ''; + + if (unavailable.notes.length > 30) { + notes = unavailable.notes.substring(0, 30) + '...' + } + var unavailablePeriod = { - title: EALang.unavailable + '
' + ((unavailable.notes.length > 30) - ? unavailable.notes.substring(0, 30) + '...' - : unavailable.notes) + '', - start: Date.parse(unavailable.start_datetime), - end: Date.parse(unavailable.end_datetime), + title: EALang.unavailable + notes, + start: moment(unavailable.start_datetime), + end: moment(unavailable.end_datetime), allDay: false, color: '#879DB4', editable: true, className: 'fc-unavailable fc-custom', data: unavailable }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, false); }); - // Non-working day - if (workingPlan[selDayName] == null) { + // Non-working day. + if (workingPlan[selectedDayName] == null) { unavailablePeriod = { - title: EALang.not_working, - start: GeneralFunctions.clone($calendar.fullCalendar('getView').start), - end: GeneralFunctions.clone($calendar.fullCalendar('getView').end), - allDay: false, - color: '#BEBEBE', - editable: false, - className: 'fc-unavailable' - }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, true); - return; // Go to next loop + title: EALang.not_working, + start: $calendar.fullCalendar('getView').intervalStart.clone(), + end: $calendar.fullCalendar('getView').intervalEnd.clone(), + allDay: false, + color: '#BEBEBE', + editable: false, + className: 'fc-unavailable' + }; + + $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + + return; // Go to next loop. } // Add unavailable period before work starts. - var calendarDateStart = $calendar.fullCalendar('getView').start, - workDateStart = Date.parseExact( - calendarDateStart.toString('dd/MM/yyyy') + ' ' - + workingPlan[selDayName].start, - 'dd/MM/yyyy HH:mm'); + var calendarDateStart = moment($calendar.fullCalendar('getView').start.format('YYYY-MM-DD') + ' 00:00:00'); + var startHour = workingPlan[selectedDayName].start.split(':'); + var workDateStart = calendarDateStart.clone(); + workDateStart.hour(parseInt(startHour[0])); + workDateStart.minute(parseInt(startHour[1])); if (calendarDateStart < workDateStart) { - unavailablePeriod = { + var unavailablePeriodBeforeWorkStarts = { title: EALang.not_working, start: calendarDateStart, end: workDateStart, @@ -826,17 +839,19 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; editable: false, className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + $calendar.fullCalendar('renderEvent', unavailablePeriodBeforeWorkStarts, false); } // Add unavailable period after work ends. - var calendarDateEnd = $calendar.fullCalendar('getView').end; - var workDateEnd = Date.parseExact( - calendarDateStart.toString('dd/MM/yyyy') + ' ' - + workingPlan[selDayName].end, - 'dd/MM/yyyy HH:mm'); // Use calendarDateStart *** + var calendarDateEnd = moment($calendar.fullCalendar('getView').end.format('YYYY-MM-DD') + ' 00:00:00'); + var endHour = workingPlan[selectedDayName].end.split(':'); + var workDateEnd = calendarDateStart.clone(); + + workDateEnd.hour(parseInt(endHour[0])); + workDateEnd.minute(parseInt(endHour[1])); + if (calendarDateEnd > workDateEnd) { - var unavailablePeriod = { + var unavailablePeriodAfterWorkEnds = { title: EALang.not_working, start: workDateEnd, end: calendarDateEnd, @@ -845,17 +860,25 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; editable: false, className: 'fc-unavailable' }; - $calendar.fullCalendar('renderEvent', unavailablePeriod, false); + + $calendar.fullCalendar('renderEvent', unavailablePeriodAfterWorkEnds, false); } // Add unavailable periods for breaks. var breakStart; var breakEnd; - $.each(workingPlan[selDayName].breaks, function(index, currBreak) { - breakStart = Date.parseExact(calendarDateStart.toString('dd/MM/yyyy') - + ' ' + currBreak.start, 'dd/MM/yyyy HH:mm'); - breakEnd = Date.parseExact(calendarDateStart.toString('dd/MM/yyyy') - + ' ' + currBreak.end, 'dd/MM/yyyy HH:mm'); + + $.each(workingPlan[selectedDayName].breaks, function (index, currentBreak) { + var breakStartString = currentBreak.start.split(':'); + breakStart = calendarDateStart.clone(); + breakStart.hour(parseInt(breakStartString[0])); + breakStart.minute(parseInt(breakStartString[1])); + + var breakEndString = currentBreak.end.split(':'); + breakEnd = calendarDateStart.clone(); + breakEnd.hour(parseInt(breakEndString[0])); + breakEnd.minute(parseInt(breakEndString[1])); + var unavailablePeriod = { title: EALang.break, start: breakStart, @@ -865,49 +888,56 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; editable: false, className: 'fc-unavailable fc-break' }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, false); }); break; case 'agendaWeek': - var currDateStart = GeneralFunctions.clone($calendar.fullCalendar('getView').start); - var currDateEnd = GeneralFunctions.clone(currDateStart).addDays(1); + var currentDateStart = $calendar.fullCalendar('getView').start.clone(); + var currentDateEnd = currentDateStart.clone().add(1, 'days'); // Add custom unavailable periods (they are always displayed on the calendar, even if // the provider won't work on that day). - $.each(response.unavailables, function(index, unavailable) { + $.each(response.unavailables, function (index, unavailable) { + var notes = unavailable.notes ? ' - ' + unavailable.notes : ''; + + if (unavailable.notes.length > 30) { + notes = unavailable.notes.substring(0, 30) + '...' + } + unavailablePeriod = { - title: EALang.unavailable + '
' + ((unavailable.notes.length > 30) - ? unavailable.notes.substring(0, 30) + '...' - : unavailable.notes) + '', - start: Date.parse(unavailable.start_datetime), - end: Date.parse(unavailable.end_datetime), + title: EALang.unavailable + notes, + start: moment(unavailable.start_datetime), + end: moment(unavailable.end_datetime), allDay: false, color: '#879DB4', editable: true, className: 'fc-unavailable fc-custom', data: unavailable }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, false); }); - $.each(workingPlan, function(index, workingDay) { - + $.each(workingPlan, function (index, workingDay) { if (workingDay == null) { // Add a full day unavailable event. unavailablePeriod = { title: EALang.not_working, - start: GeneralFunctions.clone(currDateStart), - end: GeneralFunctions.clone(currDateEnd), + start: moment(currentDateStart.format('YYYY-MM-DD')), + end: moment(currentDateEnd.format('YYYY-MM-DD')), allDay: false, color: '#BEBEBE', editable: false, className: 'fc-unavailable' }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, true); - currDateStart.addDays(1); - currDateEnd.addDays(1); + currentDateStart.add(1, 'days'); + currentDateEnd.add(1, 'days'); + return; // Go to the next loop. } @@ -915,60 +945,77 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; var end; // Add unavailable period before work starts. - start = Date.parseExact(currDateStart.toString('dd/MM/yyyy') - + ' ' + workingDay.start, 'dd/MM/yyyy HH:mm'); - if (currDateStart < start) { + var workingDayStartString = workingDay.start.split(':'); + start = currentDateStart.clone(); + start.hour(parseInt(workingDayStartString[0])); + start.minute(parseInt(workingDayStartString[1])); + + if (currentDateStart < start) { unavailablePeriod = { title: EALang.not_working, - start: GeneralFunctions.clone(currDateStart), - end: GeneralFunctions.clone(start), + start: moment(currentDateStart.format('YYYY-MM-DD') + ' 00:00:00'), + end: moment(currentDateStart.format('YYYY-MM-DD') + ' ' + workingDay.start + ':00'), allDay: false, color: '#BEBEBE', editable: false, className: 'fc-unavailable' }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, true); } // Add unavailable period after work ends. - end = Date.parseExact(currDateStart.toString('dd/MM/yyyy') - + ' ' + workingDay.end, 'dd/MM/yyyy HH:mm'); - if (currDateEnd > end) { + var workingDayEndString = workingDay.end.split(':'); + end = currentDateStart.clone(); + end.hour(parseInt(workingDayEndString[0])); + end.minute(parseInt(workingDayEndString[1])); + + if (currentDateEnd > end) { unavailablePeriod = { title: EALang.not_working, - start: GeneralFunctions.clone(end), - end: GeneralFunctions.clone(currDateEnd), + start: moment(currentDateStart.format('YYYY-MM-DD') + ' ' + workingDay.end + ':00'), + end: moment(currentDateEnd.format('YYYY-MM-DD') + ' 00:00:00'), allDay: false, color: '#BEBEBE', editable: false, className: 'fc-unavailable fc-brake' }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, false); } // Add unavailable periods during day breaks. var breakStart; var breakEnd; - $.each(workingDay.breaks, function(index, currBreak) { - breakStart = Date.parseExact(currDateStart.toString('dd/MM/yyyy') - + ' ' + currBreak.start, 'dd/MM/yyyy HH:mm'); - breakEnd = Date.parseExact(currDateStart.toString('dd/MM/yyyy') - + ' ' + currBreak.end, 'dd/MM/yyyy HH:mm'); + + $.each(workingDay.breaks, function (index, currentBreak) { + var breakStartString = currentBreak.start.split(':'); + breakStart = currentDateStart.clone(); + breakStart.hour(parseInt(breakStartString[0])); + breakStart.minute(parseInt(breakStartString[1])); + + var breakEndString = currentBreak.end.split(':'); + breakEnd = currentDateStart.clone(); + breakEnd.hour(parseInt(breakEndString[0])); + breakEnd.minute(parseInt(breakEndString[1])); + var unavailablePeriod = { title: EALang.break, - start: breakStart, - end: breakEnd, + start: moment(currentDateStart.format('YYYY-MM-DD') + ' ' + currentBreak.start), + end: moment(currentDateStart.format('YYYY-MM-DD') + ' ' + currentBreak.end), allDay: false, color: '#BEBEBE', editable: false, className: 'fc-unavailable fc-break' }; + $calendar.fullCalendar('renderEvent', unavailablePeriod, false); }); - currDateStart.addDays(1); - currDateEnd.addDays(1); + currentDateStart.add(1, 'days'); + currentDateEnd.add(1, 'days'); }); + break; } } @@ -978,52 +1025,37 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; } - exports.initialize = function() { - // Dynamic Date Formats + exports.initialize = function () { + // Dynamic date formats. var columnFormat = {}; - switch(GlobalVariables.dateFormat) { + switch (GlobalVariables.dateFormat) { case 'DMY': - columnFormat = { - month: 'ddd', - week: 'ddd dd/MM', - day: 'dddd dd/MM' - }; - + columnFormat = 'ddd D/M'; break; + case 'MDY': case 'YMD': - columnFormat = { - month: 'ddd', - week: 'ddd MM/dd', - day: 'dddd MM/dd' - }; + columnFormat = 'ddd M/D'; break; + default: throw new Error('Invalid date format setting provided!', GlobalVariables.dateFormat); } - var defaultView = window.innerWidth < 468 ? 'agendaDay' : 'agendaWeek'; - // Initialize page calendar $('#calendar').fullCalendar({ defaultView: defaultView, height: _getCalendarHeight(), editable: true, firstDay: 1, // Monday - slotMinutes: 30, - snapMinutes: 15, - axisFormat: 'HH:mm', - timeFormat: 'HH:mm{ - HH:mm}', + snapDuration: '00:15:00', + timeFormat: 'HH:mm', allDayText: EALang.all_day, columnFormat: columnFormat, - titleFormat: { - month: 'MMMM yyyy', - week: "MMMM d[ yyyy]{ '—'[ MMM] d, yyyy}", - day: 'dddd, MMMM d, yyyy' - }, + titleFormat: 'MMMM YYYY', header: { left: 'prev,next today', center: 'title', @@ -1032,25 +1064,25 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // Translations monthNames: [EALang.january, EALang.february, EALang.march, EALang.april, - EALang.may, EALang.june, EALang.july, EALang.august, - EALang.september,EALang.october, EALang.november, - EALang.december], - monthNamesShort: [EALang.january.substr(0,3), EALang.february.substr(0,3), - EALang.march.substr(0,3), EALang.april.substr(0,3), - EALang.may.substr(0,3), EALang.june.substr(0,3), - EALang.july.substr(0,3), EALang.august.substr(0,3), - EALang.september.substr(0,3),EALang.october.substr(0,3), - EALang.november.substr(0,3), EALang.december.substr(0,3)], + EALang.may, EALang.june, EALang.july, EALang.august, + EALang.september, EALang.october, EALang.november, + EALang.december], + monthNamesShort: [EALang.january.substr(0, 3), EALang.february.substr(0, 3), + EALang.march.substr(0, 3), EALang.april.substr(0, 3), + EALang.may.substr(0, 3), EALang.june.substr(0, 3), + EALang.july.substr(0, 3), EALang.august.substr(0, 3), + EALang.september.substr(0, 3), EALang.october.substr(0, 3), + EALang.november.substr(0, 3), EALang.december.substr(0, 3)], dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday, - EALang.thursday, EALang.friday, EALang.saturday], - dayNamesShort: [EALang.sunday.substr(0,3), EALang.monday.substr(0,3), - EALang.tuesday.substr(0,3), EALang.wednesday.substr(0,3), - EALang.thursday.substr(0,3), EALang.friday.substr(0,3), - EALang.saturday.substr(0,3)], - dayNamesMin: [EALang.sunday.substr(0,2), EALang.monday.substr(0,2), - EALang.tuesday.substr(0,2), EALang.wednesday.substr(0,2), - EALang.thursday.substr(0,2), EALang.friday.substr(0,2), - EALang.saturday.substr(0,2)], + EALang.thursday, EALang.friday, EALang.saturday], + dayNamesShort: [EALang.sunday.substr(0, 3), EALang.monday.substr(0, 3), + EALang.tuesday.substr(0, 3), EALang.wednesday.substr(0, 3), + EALang.thursday.substr(0, 3), EALang.friday.substr(0, 3), + EALang.saturday.substr(0, 3)], + dayNamesMin: [EALang.sunday.substr(0, 2), EALang.monday.substr(0, 2), + EALang.tuesday.substr(0, 2), EALang.wednesday.substr(0, 2), + EALang.thursday.substr(0, 2), EALang.friday.substr(0, 2), + EALang.saturday.substr(0, 2)], buttonText: { today: EALang.today, day: EALang.day, @@ -1060,7 +1092,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // Calendar events need to be declared on initialization. windowResize: _calendarWindowResize, - viewDisplay: _calendarViewDisplay, + viewRender: _calendarViewRender, dayClick: _calendarDayClick, eventClick: _calendarEventClick, eventResize: _calendarEventResize, @@ -1071,38 +1103,43 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // Trigger once to set the proper footer position after calendar initialization. _calendarWindowResize(); - // Fill the select listboxes of the page. + // Fill the select list boxes of the page. if (GlobalVariables.availableProviders.length > 0) { var optgroupHtml = ''; - $.each(GlobalVariables.availableProviders, function(index, provider) { - var hasGoogleSync = (provider['settings']['google_sync'] === '1') - ? 'true' : 'false'; - optgroupHtml += ''; + $.each(GlobalVariables.availableProviders, function (index, provider) { + var hasGoogleSync = provider.settings.google_sync === '1' ? 'true' : 'false'; + + optgroupHtml += + ''; }); + optgroupHtml += ''; + $('#select-filter-item').append(optgroupHtml); } if (GlobalVariables.availableServices.length > 0) { optgroupHtml = ''; - $.each(GlobalVariables.availableServices, function(index, service) { - optgroupHtml += ''; + + $.each(GlobalVariables.availableServices, function (index, service) { + optgroupHtml += ''; }); + optgroupHtml += ''; + $('#select-filter-item').append(optgroupHtml); } - // Privileges Checks + // Check permissions. if (GlobalVariables.user.role_slug == Backend.DB_SLUG_PROVIDER) { $('#select-filter-item optgroup:eq(0)') - .find('option[value="' + GlobalVariables.user.id + '"]').prop('selected', true); + .find('option[value="' + GlobalVariables.user.id + '"]') + .prop('selected', true); $('#select-filter-item').prop('disabled', true); } @@ -1112,9 +1149,10 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; if (GlobalVariables.user.role_slug == Backend.DB_SLUG_SECRETARY) { // Remove the providers that are not connected to the secretary. - $('#select-filter-item option[type="provider"]').each(function(index, option) { + $('#select-filter-item option[type="provider"]').each(function (index, option) { var found = false; - $.each(GlobalVariables.secretaryProviders, function(index, id) { + + $.each(GlobalVariables.secretaryProviders, function (index, id) { if ($(option).val() == id) { found = true; return false; @@ -1133,6 +1171,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // Bind the default event handlers. _bindEventHandlers(); + $('#select-filter-item').trigger('change'); // Display the edit dialog if an appointment hash is provided. @@ -1142,30 +1181,28 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; BackendCalendarAppointmentsModal.resetAppointmentDialog(); $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']).change(); - $dialog.find('#select-provider').val(appointment['id_users_provider']); + $dialog.find('#appointment-id').val(appointment.id); + $dialog.find('#select-service').val(appointment.id_services).change(); + $dialog.find('#select-provider').val(appointment.id_users_provider); // Set the start and end datetime of the appointment. - var startDatetime = Date.parseExact(appointment['start_datetime'], - 'yyyy-MM-dd HH:mm:ss'); + var startDatetime = Date.parseExact(appointment.start_datetime, 'yyyy-MM-dd HH:mm:ss'); $dialog.find('#start-datetime').val(GeneralFunctions.formatDate(startDatetime, GlobalVariables.dateFormat, true)); - var endDatetime = Date.parseExact(appointment['end_datetime'], - 'yyyy-MM-dd HH:mm:ss'); + var endDatetime = Date.parseExact(appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss'); $dialog.find('#end-datetime').val(GeneralFunctions.formatDate(endDatetime, GlobalVariables.dateFormat, true)); - var customer = appointment['customer']; - $dialog.find('#customer-id').val(appointment['id_users_customer']); - $dialog.find('#first-name').val(customer['first_name']); - $dialog.find('#last-name').val(customer['last_name']); - $dialog.find('#email').val(customer['email']); - $dialog.find('#phone-number').val(customer['phone_number']); - $dialog.find('#address').val(customer['address']); - $dialog.find('#city').val(customer['city']); - $dialog.find('#zip-code').val(customer['zip_code']); - $dialog.find('#appointment-notes').val(appointment['notes']); - $dialog.find('#customer-notes').val(customer['notes']); + var customer = appointment.customer; + $dialog.find('#customer-id').val(appointment.id_users_customer); + $dialog.find('#first-name').val(customer.first_name); + $dialog.find('#last-name').val(customer.last_name); + $dialog.find('#email').val(customer.email); + $dialog.find('#phone-number').val(customer.phone_number); + $dialog.find('#address').val(customer.address); + $dialog.find('#city').val(customer.city); + $dialog.find('#zip-code').val(customer.zip_code); + $dialog.find('#appointment-notes').val(appointment.notes); + $dialog.find('#customer-notes').val(customer.notes); $dialog.modal('show'); } @@ -1198,7 +1235,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {}; // Fine tune the footer's position only for this page. if (window.innerHeight < 700) { $('#footer').css('position', 'static'); - } + } }; })(window.BackendCalendarDefaultView);