forked from mirrors/easyappointments
Refactor the calendar related JS files so that they become standalone modules.
This commit is contained in:
parent
ddd252303e
commit
745f70848a
9 changed files with 921 additions and 870 deletions
|
@ -27,6 +27,7 @@ class Calendar extends EA_Controller {
|
|||
parent::__construct();
|
||||
|
||||
$this->load->model('appointments_model');
|
||||
$this->load->model('unavailabilities_model');
|
||||
$this->load->model('customers_model');
|
||||
$this->load->model('services_model');
|
||||
$this->load->model('providers_model');
|
||||
|
@ -86,15 +87,35 @@ class Calendar extends EA_Controller {
|
|||
}
|
||||
}
|
||||
|
||||
$privileges = $this->roles_model->get_permissions_by_slug($role_slug);
|
||||
|
||||
$available_providers = $this->providers_model->get_available_providers();
|
||||
|
||||
$available_services = $this->services_model->get_available_services();
|
||||
|
||||
script_vars([
|
||||
'user_id' => $user_id,
|
||||
'role_slug' => $role_slug,
|
||||
'date_format' => setting('date_format'),
|
||||
'time_format' => setting('time_format'),
|
||||
'first_weekday' => setting('first_weekday'),
|
||||
'timezones' => $this->timezones->to_array(),
|
||||
'privileges' => $privileges,
|
||||
'available_providers' => $available_providers,
|
||||
'available_services' => $available_services,
|
||||
'customers' => [], // TODO: Remove the use of the pre-rendered customer set and only work with asynchronously fetched customer records.
|
||||
]);
|
||||
|
||||
html_vars([
|
||||
'page_title' => lang('calendar'),
|
||||
'active_menu' => PRIV_APPOINTMENTS,
|
||||
'user_display_name' => $this->accounts->get_user_display_name($user_id),
|
||||
'timezone' => session('timezone'),
|
||||
'timezones' => $this->timezones->to_array(),
|
||||
'privileges' => $this->roles_model->get_permissions_by_slug($role_slug),
|
||||
'privileges' => $privileges,
|
||||
'calendar_view' => request('view', $user['settings']['calendar_view']),
|
||||
'available_providers' => $this->providers_model->get_available_providers(),
|
||||
'available_services' => $this->services_model->get_available_services(),
|
||||
'available_providers' => $available_providers,
|
||||
'available_services' => $available_services,
|
||||
'secretary_providers' => $secretary_providers,
|
||||
'edit_appointment' => $edit_appointment,
|
||||
'require_first_name' => setting('require_first_name'),
|
||||
|
@ -134,7 +155,7 @@ class Calendar extends EA_Controller {
|
|||
|
||||
if ($customer_data)
|
||||
{
|
||||
$customer = json_decode($customer_data, TRUE);
|
||||
$customer = $customer_data;
|
||||
|
||||
$required_permissions = ! empty($customer['id'])
|
||||
? can('add', PRIV_CUSTOMERS)
|
||||
|
@ -155,7 +176,7 @@ class Calendar extends EA_Controller {
|
|||
|
||||
if ($appointment_data)
|
||||
{
|
||||
$appointment = json_decode($appointment_data, TRUE);
|
||||
$appointment = $appointment_data;
|
||||
|
||||
$required_permissions = ! empty($appointment['id'])
|
||||
? can('add', PRIV_APPOINTMENTS)
|
||||
|
@ -270,7 +291,7 @@ class Calendar extends EA_Controller {
|
|||
try
|
||||
{
|
||||
// Check privileges
|
||||
$unavailable = json_decode(request('unavailable'), TRUE);
|
||||
$unavailable = request('unavailable');
|
||||
|
||||
$required_permissions = ( ! isset($unavailable['id']))
|
||||
? can('add', PRIV_APPOINTMENTS)
|
||||
|
@ -597,7 +618,7 @@ class Calendar extends EA_Controller {
|
|||
AND is_unavailable = 1
|
||||
';
|
||||
|
||||
$response['unavailables'] = $this->appointments_model->get($where_clause);
|
||||
$response['unavailables'] = $this->unavailabilities_model->get($where_clause);
|
||||
}
|
||||
|
||||
foreach ($response['unavailables'] as &$unavailable)
|
||||
|
|
|
@ -16,6 +16,15 @@
|
|||
* @var string $timezone
|
||||
* @var string $role_slug
|
||||
* @var array $privileges
|
||||
* @var array $available_services
|
||||
* @var array $timezones
|
||||
* @var array $require_first_name
|
||||
* @var array $require_last_name
|
||||
* @var array $require_email
|
||||
* @var array $require_phone_number
|
||||
* @var array $require_address
|
||||
* @var array $require_city
|
||||
* @var array $require_zip_code
|
||||
*/
|
||||
?>
|
||||
|
||||
|
@ -33,39 +42,19 @@
|
|||
<script src="<?= asset_url('assets/vendor/jquery-jeditable/jquery.jeditable.min.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/vendor/jquery-ui-timepicker-addon/jquery-ui-timepicker-addon.min.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/components/working_plan_exceptions_modal.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar_default_view.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar_table_view.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar_google_sync.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar_appointments_modal.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar_unavailability_events_modal.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/backend_calendar_api.js') ?>"></script>
|
||||
<script>
|
||||
var GlobalVariables = {
|
||||
csrfToken: <?= json_encode($this->security->get_csrf_hash()) ?>,
|
||||
baseUrl: <?= json_encode(config('base_url')) ?>,
|
||||
dateFormat: <?= json_encode(setting('date_format')) ?>,
|
||||
timeFormat: <?= json_encode(setting('time_format')) ?>,
|
||||
firstWeekday: <?= json_encode(setting('first_weekday')) ?>,
|
||||
timezones: <?= json_encode($timezones) ?>,
|
||||
availableProviders: <?= json_encode($available_providers) ?>,
|
||||
availableServices: <?= json_encode($available_services) ?>,
|
||||
secretaryProviders: <?= json_encode($secretary_providers) ?>,
|
||||
calendarView: <?= json_encode($calendar_view) ?>,
|
||||
editAppointment: <?= json_encode($edit_appointment) ?>,
|
||||
user: {
|
||||
id: <?= session('user_id') ?>,
|
||||
email: <?= json_encode(session('user_email')) ?>,
|
||||
timezone: <?= json_encode(session('timezone')) ?>,
|
||||
role_slug: <?= json_encode(session('role_slug')) ?>,
|
||||
privileges: <?= json_encode($privileges) ?>
|
||||
}
|
||||
};
|
||||
|
||||
$(function () {
|
||||
BackendCalendar.initialize(GlobalVariables.calendarView);
|
||||
});
|
||||
</script>
|
||||
<script src="<?= asset_url('assets/js/components/manage_appointments_modal.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/components/manage_unavailabilities_modal.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/calendar_default_view.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/calendar_table_view.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/calendar_google_sync.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/utils/calendar_event_popover.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/http/calendar_http_client.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/http/customers_http_client.js') ?>"></script>
|
||||
<script src="<?= asset_url('assets/js/pages/calendar.js') ?>"></script>
|
||||
|
||||
<?php section('scripts') ?>
|
||||
|
||||
|
@ -151,11 +140,34 @@
|
|||
|
||||
<!-- Page Components -->
|
||||
|
||||
<?php component('manage_appointment_modal', '', ['timezones' => $timezones]) ?>
|
||||
<?php
|
||||
component(
|
||||
'manage_appointment_modal',
|
||||
'',
|
||||
[
|
||||
'available_services' => $available_services,
|
||||
'timezones' => $timezones,
|
||||
'require_first_name' => $require_first_name,
|
||||
'require_last_name' => $require_last_name,
|
||||
'require_email' => $require_email,
|
||||
'require_phone_number' => $require_phone_number,
|
||||
'require_address' => $require_address,
|
||||
'require_city' => $require_city,
|
||||
'require_zip_code' => $require_zip_code
|
||||
]
|
||||
)
|
||||
?>
|
||||
|
||||
<?php component('manage_appointment_modal') ?>
|
||||
|
||||
<?php component('manage_unavailable_modal') ?>
|
||||
<?php
|
||||
component(
|
||||
'manage_unavailable_modal',
|
||||
'',
|
||||
[
|
||||
'timezones' => $timezones,
|
||||
'timezone' => $timezone
|
||||
]
|
||||
)
|
||||
?>
|
||||
|
||||
<?php component('select_google_calendar_modal') ?>
|
||||
|
||||
|
|
|
@ -14,22 +14,18 @@
|
|||
*
|
||||
* This module implements the appointments modal functionality.
|
||||
*
|
||||
* @module BackendCalendarAppointmentsModal
|
||||
* Old Module Name: BackendCalendarAppointmentsModal
|
||||
*/
|
||||
window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModal || {};
|
||||
|
||||
(function (exports) {
|
||||
'use strict';
|
||||
|
||||
App.Components.ManageAppointmentsModal = (function () {
|
||||
function updateTimezone() {
|
||||
var providerId = $('#select-provider').val();
|
||||
const providerId = $('#select-provider').val();
|
||||
|
||||
var provider = GlobalVariables.availableProviders.find(function (availableProvider) {
|
||||
const provider = App.Vars.available_providers.find(function (availableProvider) {
|
||||
return Number(availableProvider.id) === Number(providerId);
|
||||
});
|
||||
|
||||
if (provider && provider.timezone) {
|
||||
$('.provider-timezone').text(GlobalVariables.timezones[provider.timezone]);
|
||||
$('.provider-timezone').text(App.Vars.timezones[provider.timezone]);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -37,35 +33,35 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
/**
|
||||
* 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 on the dialog mode.
|
||||
*/
|
||||
$('#manage-appointment #save-appointment').on('click', function () {
|
||||
$('#manage-appointment #save-appointment').on('click', () => {
|
||||
// Before doing anything the appointment data need to be validated.
|
||||
if (!validateAppointmentForm()) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare appointment data for AJAX request.
|
||||
var $dialog = $('#manage-appointment');
|
||||
const $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.
|
||||
|
||||
var startDatetime = moment($dialog.find('#start-datetime').datetimepicker('getDate')).format(
|
||||
const startDatetime = moment($dialog.find('#start-datetime').datetimepicker('getDate')).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
);
|
||||
var endDatetime = moment($dialog.find('#end-datetime').datetimepicker('getDate')).format(
|
||||
const endDatetime = moment($dialog.find('#end-datetime').datetimepicker('getDate')).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
);
|
||||
|
||||
var appointment = {
|
||||
const appointment = {
|
||||
id_services: $dialog.find('#select-service').val(),
|
||||
id_users_provider: $dialog.find('#select-provider').val(),
|
||||
start_datetime: startDatetime,
|
||||
end_datetime: endDatetime,
|
||||
location: $dialog.find('#appointment-location').val(),
|
||||
notes: $dialog.find('#appointment-notes').val(),
|
||||
is_unavailable: false
|
||||
is_unavailable: Number(false)
|
||||
};
|
||||
|
||||
if ($dialog.find('#appointment-id').val() !== '') {
|
||||
|
@ -73,7 +69,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
appointment.id = $dialog.find('#appointment-id').val();
|
||||
}
|
||||
|
||||
var customer = {
|
||||
const customer = {
|
||||
first_name: $dialog.find('#first-name').val(),
|
||||
last_name: $dialog.find('#last-name').val(),
|
||||
email: $dialog.find('#email').val(),
|
||||
|
@ -91,7 +87,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
}
|
||||
|
||||
// Define success callback.
|
||||
var successCallback = function (response) {
|
||||
const successCallback = function (response) {
|
||||
// Display success message to the user.
|
||||
Backend.displayNotification(App.Lang.appointment_saved);
|
||||
|
||||
|
@ -102,35 +98,36 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
};
|
||||
|
||||
// Define error callback.
|
||||
var errorCallback = function () {
|
||||
const errorCallback = function () {
|
||||
$dialog.find('.modal-message').text(App.Lang.service_communication_error);
|
||||
$dialog.find('.modal-message').addClass('alert-danger').removeClass('d-none');
|
||||
$dialog.find('.modal-body').scrollTop(0);
|
||||
};
|
||||
|
||||
// Save appointment data.
|
||||
BackendCalendarApi.saveAppointment(appointment, customer, successCallback, errorCallback);
|
||||
App.Http.Calendar.saveAppointment(appointment, customer, successCallback, errorCallback);
|
||||
});
|
||||
|
||||
/**
|
||||
* 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 create a new
|
||||
* appointment.
|
||||
*/
|
||||
$('#insert-appointment').on('click', function () {
|
||||
$('#insert-appointment').on('click', () => {
|
||||
$('.popover').remove();
|
||||
|
||||
BackendCalendarAppointmentsModal.resetAppointmentDialog();
|
||||
var $dialog = $('#manage-appointment');
|
||||
resetAppointmentDialog();
|
||||
|
||||
const $dialog = $('#manage-appointment');
|
||||
|
||||
// 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 providerId = $('#select-filter-item').val();
|
||||
const providerId = $('#select-filter-item').val();
|
||||
|
||||
var providers = GlobalVariables.availableProviders.filter(function (provider) {
|
||||
return Number(provider.id) === Number(providerId);
|
||||
});
|
||||
const providers = App.Vars.available_providers.filter(
|
||||
(provider) => Number(provider.id) === Number(providerId)
|
||||
);
|
||||
|
||||
if (providers.length) {
|
||||
$dialog.find('#select-service').val(providers[0].services[0]).trigger('change');
|
||||
|
@ -144,17 +141,17 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
$dialog.find('#select-service option:first').prop('selected', true).trigger('change');
|
||||
}
|
||||
|
||||
var serviceId = $dialog.find('#select-service').val();
|
||||
const serviceId = $dialog.find('#select-service').val();
|
||||
|
||||
var service = GlobalVariables.availableServices.find(function (availableService) {
|
||||
return Number(availableService.id) === Number(serviceId);
|
||||
});
|
||||
const service = App.Vars.available_services.find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId)
|
||||
);
|
||||
|
||||
var duration = service ? service.duration : 60;
|
||||
const duration = service ? service.duration : 60;
|
||||
|
||||
var startMoment = moment();
|
||||
const startMoment = moment();
|
||||
|
||||
var currentMin = parseInt(startMoment.format('mm'));
|
||||
const currentMin = parseInt(startMoment.format('mm'));
|
||||
|
||||
if (currentMin > 0 && currentMin < 15) {
|
||||
startMoment.set({minutes: 15});
|
||||
|
@ -168,14 +165,15 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|
||||
$dialog
|
||||
.find('#start-datetime')
|
||||
.val(GeneralFunctions.formatDate(startMoment.toDate(), GlobalVariables.dateFormat, true));
|
||||
.val(App.Utils.Date.format(startMoment.toDate(), App.Vars.date_format, App.Vars.time_format, true));
|
||||
|
||||
$dialog
|
||||
.find('#end-datetime')
|
||||
.val(
|
||||
GeneralFunctions.formatDate(
|
||||
App.Utils.Date.format(
|
||||
startMoment.add(duration, 'minutes').toDate(),
|
||||
GlobalVariables.dateFormat,
|
||||
App.Vars.date_format,
|
||||
App.Vars.time_format,
|
||||
true
|
||||
)
|
||||
);
|
||||
|
@ -188,9 +186,11 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|
||||
/**
|
||||
* Event: Pick Existing Customer Button "Click"
|
||||
*
|
||||
* @param {jQuery.Event}
|
||||
*/
|
||||
$('#select-customer').on('click', function () {
|
||||
var $list = $('#existing-customers-list');
|
||||
$('#select-customer').on('click', (event) => {
|
||||
const $list = $('#existing-customers-list');
|
||||
|
||||
if (!$list.is(':visible')) {
|
||||
$(this).find('span').text(App.Lang.hide);
|
||||
|
@ -198,7 +198,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
$list.slideDown('slow');
|
||||
$('#filter-existing-customers').fadeIn('slow');
|
||||
$('#filter-existing-customers').val('');
|
||||
GlobalVariables.customers.forEach(function (customer) {
|
||||
App.Vars.customers.forEach(function (customer) {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text': customer.first_name + ' ' + customer.last_name
|
||||
|
@ -207,17 +207,17 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
} else {
|
||||
$list.slideUp('slow');
|
||||
$('#filter-existing-customers').fadeOut('slow');
|
||||
$(this).find('span').text(App.Lang.select);
|
||||
$(event.target).find('span').text(App.Lang.select);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Select Existing Customer From List "Click"
|
||||
*/
|
||||
$('#manage-appointment').on('click', '#existing-customers-list div', function () {
|
||||
var customerId = $(this).attr('data-id');
|
||||
$('#manage-appointment').on('click', '#existing-customers-list div', (event) => {
|
||||
const customerId = $(event.target).attr('data-id');
|
||||
|
||||
var customer = GlobalVariables.customers.find(function (customer) {
|
||||
const customer = App.Vars.customers.find(function (customer) {
|
||||
return Number(customer.id) === Number(customerId);
|
||||
});
|
||||
|
||||
|
@ -236,66 +236,58 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
$('#select-customer').trigger('click'); // Hide the list.
|
||||
});
|
||||
|
||||
var filterExistingCustomersTimeout = null;
|
||||
let filterExistingCustomersTimeout = null;
|
||||
|
||||
/**
|
||||
* Event: Filter Existing Customers "Change"
|
||||
*/
|
||||
$('#filter-existing-customers').on('keyup', function () {
|
||||
$('#filter-existing-customers').on('keyup', (event) => {
|
||||
if (filterExistingCustomersTimeout) {
|
||||
clearTimeout(filterExistingCustomersTimeout);
|
||||
}
|
||||
|
||||
var key = $(this).val().toLowerCase();
|
||||
const keyword = $(event.target).val().toLowerCase();
|
||||
|
||||
filterExistingCustomersTimeout = setTimeout(function () {
|
||||
var $list = $('#existing-customers-list');
|
||||
|
||||
var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_filter_customers';
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
key: key
|
||||
};
|
||||
const $list = $('#existing-customers-list');
|
||||
|
||||
$('#loading').css('visibility', 'hidden');
|
||||
|
||||
// Try to get the updated customer list.
|
||||
$.post(url, data)
|
||||
.done(function (response) {
|
||||
App.Http.Customers.search(keyword, 50)
|
||||
.done((response) => {
|
||||
$list.empty();
|
||||
|
||||
response.forEach(function (customer) {
|
||||
response.forEach((customer) => {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text': customer.first_name + ' ' + customer.last_name
|
||||
}).appendTo($list);
|
||||
|
||||
// Verify if this customer is on the old customer list.
|
||||
var result = GlobalVariables.customers.filter(function (globalVariablesCustomer) {
|
||||
return Number(globalVariablesCustomer.id) === Number(customer.id);
|
||||
const result = App.Vars.customers.filter((existingCustomer) => {
|
||||
return Number(existingCustomer.id) === Number(customer.id);
|
||||
});
|
||||
|
||||
// Add it to the customer list.
|
||||
if (!result.length) {
|
||||
GlobalVariables.customers.push(customer);
|
||||
App.Vars.customers.push(customer);
|
||||
}
|
||||
});
|
||||
})
|
||||
.fail(function (jqXHR, textStatus, errorThrown) {
|
||||
.fail(() => {
|
||||
// If there is any error on the request, search by the local client database.
|
||||
$list.empty();
|
||||
|
||||
GlobalVariables.customers.forEach(function (customer, index) {
|
||||
App.Vars.customers.forEach(function (customer, index) {
|
||||
if (
|
||||
customer.first_name.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.last_name.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.email.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.phone_number.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.address.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.city.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.zip_code.toLowerCase().indexOf(key) !== -1 ||
|
||||
customer.notes.toLowerCase().indexOf(key) !== -1
|
||||
customer.first_name.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.last_name.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.email.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.phone_number.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.address.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.city.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.zip_code.toLowerCase().indexOf(keyword) !== -1 ||
|
||||
customer.notes.toLowerCase().indexOf(keyword) !== -1
|
||||
) {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
|
@ -316,35 +308,32 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
* 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').on('change', function () {
|
||||
var serviceId = $('#select-service').val();
|
||||
$('#select-service').on('change', () => {
|
||||
const serviceId = $('#select-service').val();
|
||||
|
||||
$('#select-provider').empty();
|
||||
|
||||
// Automatically update the service duration.
|
||||
var service = GlobalVariables.availableServices.find(function (availableService) {
|
||||
const service = App.Vars.available_services.find((availableService) => {
|
||||
return Number(availableService.id) === Number(serviceId);
|
||||
});
|
||||
|
||||
var duration = service ? service.duration : 60;
|
||||
const duration = service ? service.duration : 60;
|
||||
|
||||
var start = $('#start-datetime').datetimepicker('getDate');
|
||||
const start = $('#start-datetime').datetimepicker('getDate');
|
||||
$('#end-datetime').datetimepicker('setDate', new Date(start.getTime() + duration * 60000));
|
||||
|
||||
// Update the providers select box.
|
||||
|
||||
GlobalVariables.availableProviders.forEach(function (provider) {
|
||||
provider.services.forEach(function (providerServiceId) {
|
||||
if (
|
||||
GlobalVariables.user.role_slug === Backend.DB_SLUG_PROVIDER &&
|
||||
Number(provider.id) !== GlobalVariables.user.id
|
||||
) {
|
||||
App.Vars.available_providers.forEach((provider) => {
|
||||
provider.services.forEach((providerServiceId) => {
|
||||
if (App.Vars.role_slug === Backend.DB_SLUG_PROVIDER && Number(provider.id) !== App.Vars.user.id) {
|
||||
return; // continue
|
||||
}
|
||||
|
||||
if (
|
||||
GlobalVariables.user.role_slug === Backend.DB_SLUG_SECRETARY &&
|
||||
GlobalVariables.secretaryProviders.indexOf(provider.id) === -1
|
||||
App.Vars.role_slug === Backend.DB_SLUG_SECRETARY &&
|
||||
App.Vars.secretaryProviders.indexOf(provider.id) === -1
|
||||
) {
|
||||
return; // continue
|
||||
}
|
||||
|
@ -362,14 +351,14 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
/**
|
||||
* Event: Provider "Change"
|
||||
*/
|
||||
$('#select-provider').on('change', function () {
|
||||
$('#select-provider').on('change', () => {
|
||||
updateTimezone();
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Enter New Customer Button "Click"
|
||||
*/
|
||||
$('#new-customer').on('click', function () {
|
||||
$('#new-customer').on('click', () => {
|
||||
$('#manage-appointment')
|
||||
.find(
|
||||
'#customer-id, #first-name, #last-name, #email, ' +
|
||||
|
@ -385,8 +374,8 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
* This method resets the manage appointment dialog modal to its initial state. After that you can make
|
||||
* any modification might be necessary in order to bring the dialog to the desired state.
|
||||
*/
|
||||
exports.resetAppointmentDialog = function () {
|
||||
var $dialog = $('#manage-appointment');
|
||||
function resetAppointmentDialog() {
|
||||
const $dialog = $('#manage-appointment');
|
||||
|
||||
// Empty form fields.
|
||||
$dialog.find('input, textarea').val('');
|
||||
|
@ -395,21 +384,19 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
// Prepare service and provider select boxes.
|
||||
$dialog.find('#select-service').val($dialog.find('#select-service').eq(0).attr('value'));
|
||||
|
||||
// Fill the providers listbox with providers that can serve the appointment's
|
||||
// service and then select the user's provider.
|
||||
// Fill the providers list box with providers that can serve the appointment's service and then select the
|
||||
// user's provider.
|
||||
$dialog.find('#select-provider').empty();
|
||||
GlobalVariables.availableProviders.forEach(function (provider, index) {
|
||||
var canProvideService = false;
|
||||
App.Vars.available_providers.forEach((provider) => {
|
||||
const serviceId = $dialog.find('#select-service').val();
|
||||
|
||||
var serviceId = $dialog.find('#select-service').val();
|
||||
|
||||
var canProvideService =
|
||||
provider.services.filter(function (providerServiceId) {
|
||||
const canProvideService =
|
||||
provider.services.filter((providerServiceId) => {
|
||||
return Number(providerServiceId) === Number(serviceId);
|
||||
}).length > 0;
|
||||
|
||||
if (canProvideService) {
|
||||
// Add the provider to the listbox.
|
||||
// Add the provider to the list box.
|
||||
$dialog
|
||||
.find('#select-provider')
|
||||
.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
|
@ -423,19 +410,17 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|
||||
// Setup start and datetimepickers.
|
||||
// Get the selected service duration. It will be needed in order to calculate the appointment end datetime.
|
||||
var serviceId = $dialog.find('#select-service').val();
|
||||
const serviceId = $dialog.find('#select-service').val();
|
||||
|
||||
var service = GlobalVariables.availableServices.forEach(function (service) {
|
||||
return Number(service.id) === Number(serviceId);
|
||||
});
|
||||
const service = App.Vars.available_services.forEach((service) => Number(service.id) === Number(serviceId));
|
||||
|
||||
var duration = service ? service.duration : 0;
|
||||
const duration = service ? service.duration : 0;
|
||||
|
||||
var startDatetime = new Date();
|
||||
var endDatetime = moment().add(duration, 'minutes').toDate();
|
||||
var dateFormat;
|
||||
const startDatetime = new Date();
|
||||
const endDatetime = moment().add(duration, 'minutes').toDate();
|
||||
let dateFormat;
|
||||
|
||||
switch (GlobalVariables.dateFormat) {
|
||||
switch (App.Vars.date_format) {
|
||||
case 'DMY':
|
||||
dateFormat = 'dd/mm/yy';
|
||||
break;
|
||||
|
@ -446,15 +431,16 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
dateFormat = 'yy/mm/dd';
|
||||
break;
|
||||
default:
|
||||
throw new Error('Invalid GlobalVariables.dateFormat value.');
|
||||
throw new Error('Invalid App.Vars.date_format value.');
|
||||
}
|
||||
|
||||
var firstWeekDay = GlobalVariables.firstWeekday;
|
||||
var firstWeekDayNumber = GeneralFunctions.getWeekDayId(firstWeekDay);
|
||||
const firstWeekDay = App.Vars.first_weekday;
|
||||
|
||||
const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay);
|
||||
|
||||
$dialog.find('#start-datetime').datetimepicker({
|
||||
dateFormat: dateFormat,
|
||||
timeFormat: GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
|
||||
// Translation
|
||||
dayNames: [
|
||||
|
@ -508,14 +494,14 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
minuteText: App.Lang.minutes,
|
||||
firstDay: firstWeekDayNumber,
|
||||
onClose: function () {
|
||||
var serviceId = $('#select-service').val();
|
||||
const serviceId = $('#select-service').val();
|
||||
|
||||
// Automatically update the #end-datetime DateTimePicker based on service duration.
|
||||
var service = GlobalVariables.availableServices.find(function (availableService) {
|
||||
return Number(availableService.id) === Number(serviceId);
|
||||
});
|
||||
const service = App.Vars.available_services.find(
|
||||
(availableService) => Number(availableService.id) === Number(serviceId)
|
||||
);
|
||||
|
||||
var start = $('#start-datetime').datetimepicker('getDate');
|
||||
const start = $('#start-datetime').datetimepicker('getDate');
|
||||
$('#end-datetime').datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000));
|
||||
}
|
||||
});
|
||||
|
@ -523,7 +509,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|
||||
$dialog.find('#end-datetime').datetimepicker({
|
||||
dateFormat: dateFormat,
|
||||
timeFormat: GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
|
||||
// Translation
|
||||
dayNames: [
|
||||
|
@ -578,16 +564,17 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
firstDay: firstWeekDayNumber
|
||||
});
|
||||
$dialog.find('#end-datetime').datetimepicker('setDate', endDatetime);
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate the manage appointment dialog data. Validation checks need to
|
||||
* run every time the data are going to be saved.
|
||||
* Validate the manage appointment dialog data.
|
||||
*
|
||||
* Validation checks need to run every time the data are going to be saved.
|
||||
*
|
||||
* @return {Boolean} Returns the validation result.
|
||||
*/
|
||||
function validateAppointmentForm() {
|
||||
var $dialog = $('#manage-appointment');
|
||||
const $dialog = $('#manage-appointment');
|
||||
|
||||
// Reset previous validation css formatting.
|
||||
$dialog.find('.is-invalid').removeClass('is-invalid');
|
||||
|
@ -595,9 +582,9 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|
||||
try {
|
||||
// Check required fields.
|
||||
var missingRequiredField = false;
|
||||
let missingRequiredField = false;
|
||||
|
||||
$dialog.find('.required').each(function (index, requiredField) {
|
||||
$dialog.find('.required').each((index, requiredField) => {
|
||||
if ($(requiredField).val() === '' || $(requiredField).val() === null) {
|
||||
$(requiredField).addClass('is-invalid');
|
||||
missingRequiredField = true;
|
||||
|
@ -609,14 +596,14 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
}
|
||||
|
||||
// Check email address.
|
||||
if (!GeneralFunctions.validateEmail($dialog.find('#email').val())) {
|
||||
if (!App.Utils.Validation.email($dialog.find('#email').val())) {
|
||||
$dialog.find('#email').addClass('is-invalid');
|
||||
throw new Error(App.Lang.invalid_email);
|
||||
}
|
||||
|
||||
// Check appointment start and end time.
|
||||
var start = $('#start-datetime').datetimepicker('getDate');
|
||||
var end = $('#end-datetime').datetimepicker('getDate');
|
||||
const start = $('#start-datetime').datetimepicker('getDate');
|
||||
const end = $('#end-datetime').datetimepicker('getDate');
|
||||
if (start > end) {
|
||||
$dialog.find('#start-datetime, #end-datetime').addClass('is-invalid');
|
||||
throw new Error(App.Lang.start_date_before_end_error);
|
||||
|
@ -629,7 +616,13 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
}
|
||||
}
|
||||
|
||||
exports.initialize = function () {
|
||||
function initialize() {
|
||||
bindEventHandlers();
|
||||
}
|
||||
|
||||
return {
|
||||
resetAppointmentDialog,
|
||||
bindEventHandlers,
|
||||
initialize
|
||||
};
|
||||
})(window.BackendCalendarAppointmentsModal);
|
||||
})();
|
|
@ -14,25 +14,21 @@
|
|||
*
|
||||
* This module implements the unavailability events modal functionality.
|
||||
*
|
||||
* @module BackendCalendarUnavailabilityEventsModal
|
||||
* Old Module Name: BackendCalendarUnavailabilityEventsModal
|
||||
*/
|
||||
window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavailabilityEventsModal || {};
|
||||
|
||||
(function (exports) {
|
||||
'use strict';
|
||||
|
||||
App.Components.ManageUnavailabilitiesModal = (function () {
|
||||
function bindEventHandlers() {
|
||||
/**
|
||||
* Event: Manage Unavailable Dialog Save Button "Click"
|
||||
*
|
||||
* Stores the unavailable period changes or inserts a new record.
|
||||
*/
|
||||
$('#manage-unavailable #save-unavailable').on('click', function () {
|
||||
var $dialog = $('#manage-unavailable');
|
||||
$('#manage-unavailable #save-unavailable').on('click', () => {
|
||||
const $dialog = $('#manage-unavailable');
|
||||
$dialog.find('.modal-message').addClass('d-none');
|
||||
$dialog.find('.is-invalid').removeClass('is-invalid');
|
||||
|
||||
var startMoment = moment($dialog.find('#unavailable-start').datetimepicker('getDate'));
|
||||
const startMoment = moment($dialog.find('#unavailable-start').datetimepicker('getDate'));
|
||||
|
||||
if (!startMoment.isValid()) {
|
||||
$dialog.find('#unavailable-start').addClass('is-invalid');
|
||||
|
@ -40,7 +36,7 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
return;
|
||||
}
|
||||
|
||||
var endMoment = moment($dialog.find('#unavailable-end').datetimepicker('getDate'));
|
||||
const endMoment = moment($dialog.find('#unavailable-end').datetimepicker('getDate'));
|
||||
|
||||
if (!endMoment.isValid()) {
|
||||
$dialog.find('#unavailable-end').addClass('is-invalid');
|
||||
|
@ -62,7 +58,7 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
}
|
||||
|
||||
// Unavailable period records go to the appointments table.
|
||||
var unavailable = {
|
||||
const unavailable = {
|
||||
start_datetime: startMoment.format('YYYY-MM-DD HH:mm:ss'),
|
||||
end_datetime: endMoment.format('YYYY-MM-DD HH:mm:ss'),
|
||||
notes: $dialog.find('#unavailable-notes').val(),
|
||||
|
@ -74,7 +70,7 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
unavailable.id = $dialog.find('#unavailable-id').val();
|
||||
}
|
||||
|
||||
var successCallback = function () {
|
||||
const successCallback = () => {
|
||||
// Display success message to the user.
|
||||
Backend.displayNotification(App.Lang.unavailable_saved);
|
||||
|
||||
|
@ -86,7 +82,7 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
$('#select-filter-item').trigger('change');
|
||||
};
|
||||
|
||||
BackendCalendarApi.saveUnavailable(unavailable, successCallback, null);
|
||||
App.Http.Calendar.saveUnavailable(unavailable, successCallback, null);
|
||||
});
|
||||
|
||||
/**
|
||||
|
@ -95,14 +91,15 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
* 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').on('click', function () {
|
||||
BackendCalendarUnavailabilityEventsModal.resetUnavailableDialog();
|
||||
var $dialog = $('#manage-unavailable');
|
||||
$('#insert-unavailable').on('click', () => {
|
||||
resetUnavailableDialog();
|
||||
|
||||
const $dialog = $('#manage-unavailable');
|
||||
|
||||
// Set the default datetime values.
|
||||
var startMoment = moment();
|
||||
const startMoment = moment();
|
||||
|
||||
var currentMin = parseInt(startMoment.format('mm'));
|
||||
const currentMin = parseInt(startMoment.format('mm'));
|
||||
|
||||
if (currentMin > 0 && currentMin < 15) {
|
||||
startMoment.set({minutes: 15});
|
||||
|
@ -120,11 +117,16 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
|
||||
$dialog
|
||||
.find('#unavailable-start')
|
||||
.val(GeneralFunctions.formatDate(startMoment.toDate(), GlobalVariables.dateFormat, true));
|
||||
.val(App.Utils.Date.format(startMoment.toDate(), App.Vars.date_format, App.Vars.time_format, true));
|
||||
$dialog
|
||||
.find('#unavailable-end')
|
||||
.val(
|
||||
GeneralFunctions.formatDate(startMoment.add(1, 'hour').toDate(), GlobalVariables.dateFormat, true)
|
||||
App.Utils.Date.format(
|
||||
startMoment.add(1, 'hour').toDate(),
|
||||
App.Vars.date_format,
|
||||
App.Vars.time_format,
|
||||
true
|
||||
)
|
||||
);
|
||||
$dialog.find('.modal-header h3').text(App.Lang.new_unavailable_title);
|
||||
$dialog.modal('show');
|
||||
|
@ -137,19 +139,24 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
* Reset the "#manage-unavailable" dialog. Use this method to bring the dialog to the initial state
|
||||
* before it becomes visible to the user.
|
||||
*/
|
||||
exports.resetUnavailableDialog = function () {
|
||||
var $dialog = $('#manage-unavailable');
|
||||
function resetUnavailableDialog() {
|
||||
const $dialog = $('#manage-unavailable');
|
||||
|
||||
$dialog.find('#unavailable-id').val('');
|
||||
|
||||
// Set default time values
|
||||
var start = GeneralFunctions.formatDate(moment().toDate(), GlobalVariables.dateFormat, true);
|
||||
const start = App.Utils.Date.format(moment().toDate(), App.Vars.date_format, App.Vars.time_format, true);
|
||||
|
||||
var end = GeneralFunctions.formatDate(moment().add(1, 'hour').toDate(), GlobalVariables.dateFormat, true);
|
||||
const end = App.Utils.Date.format(
|
||||
moment().add(1, 'hour').toDate(),
|
||||
App.Vars.date_format,
|
||||
App.Vars.time_format,
|
||||
true
|
||||
);
|
||||
|
||||
var dateFormat;
|
||||
let dateFormat;
|
||||
|
||||
switch (GlobalVariables.dateFormat) {
|
||||
switch (App.Vars.date_format) {
|
||||
case 'DMY':
|
||||
dateFormat = 'dd/mm/yy';
|
||||
break;
|
||||
|
@ -161,12 +168,13 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
break;
|
||||
}
|
||||
|
||||
var fDay = GlobalVariables.firstWeekday;
|
||||
var fDaynum = GeneralFunctions.getWeekDayId(fDay);
|
||||
const firstWeekday = App.Vars.first_weekday;
|
||||
|
||||
const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday);
|
||||
|
||||
$dialog.find('#unavailable-start').datetimepicker({
|
||||
dateFormat: dateFormat,
|
||||
timeFormat: GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
|
||||
// Translation
|
||||
dayNames: [
|
||||
|
@ -218,13 +226,13 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
timeText: App.Lang.time,
|
||||
hourText: App.Lang.hour,
|
||||
minuteText: App.Lang.minutes,
|
||||
firstDay: fDaynum
|
||||
firstDay: firstWeekdayId
|
||||
});
|
||||
$dialog.find('#unavailable-start').val(start);
|
||||
|
||||
$dialog.find('#unavailable-end').datetimepicker({
|
||||
dateFormat: dateFormat,
|
||||
timeFormat: GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
timeFormat: App.Vars.time_format === 'regular' ? 'h:mm tt' : 'HH:mm',
|
||||
|
||||
// Translation
|
||||
dayNames: [
|
||||
|
@ -276,23 +284,28 @@ window.BackendCalendarUnavailabilityEventsModal = window.BackendCalendarUnavaila
|
|||
timeText: App.Lang.time,
|
||||
hourText: App.Lang.hour,
|
||||
minuteText: App.Lang.minutes,
|
||||
firstDay: fDaynum
|
||||
firstDay: firstWeekdayId
|
||||
});
|
||||
$dialog.find('#unavailable-end').val(end);
|
||||
|
||||
// Clear the unavailable notes field.
|
||||
$dialog.find('#unavailable-notes').val('');
|
||||
};
|
||||
}
|
||||
|
||||
exports.initialize = function () {
|
||||
var $unavailabilityProvider = $('#unavailable-provider');
|
||||
function initialize() {
|
||||
const $unavailabilityProvider = $('#unavailable-provider');
|
||||
|
||||
for (var index in GlobalVariables.availableProviders) {
|
||||
var provider = GlobalVariables.availableProviders[index];
|
||||
for (const index in App.Vars.available_providers) {
|
||||
const provider = App.Vars.available_providers[index];
|
||||
|
||||
$unavailabilityProvider.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
}
|
||||
|
||||
bindEventHandlers();
|
||||
}
|
||||
|
||||
return {
|
||||
resetUnavailableDialog,
|
||||
initialize
|
||||
};
|
||||
})(window.BackendCalendarUnavailabilityEventsModal);
|
||||
})();
|
|
@ -10,52 +10,46 @@
|
|||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Backend Calendar API
|
||||
* Calendar HTTP Client
|
||||
*
|
||||
* This module implements the AJAX requests for the calendar page.
|
||||
*
|
||||
* @module BackendCalendarApi
|
||||
* Old Module Name: BackendCalendarApi
|
||||
*/
|
||||
window.BackendCalendarApi = window.BackendCalendarApi || {};
|
||||
|
||||
(function (exports) {
|
||||
'use strict';
|
||||
|
||||
App.Http.Calendar = (function () {
|
||||
/**
|
||||
* Save Appointment
|
||||
*
|
||||
* This method stores the changes of an already registered appointment into the database, via an ajax call.
|
||||
*
|
||||
* @param {Object} appointment Contain the new appointment data. The ID of the appointment MUST be already included.
|
||||
* @param {Object} appointment Contain the new appointment data. The ID of the appointment must be already included.
|
||||
* The rest values must follow the database structure.
|
||||
* @param {Object} [customer] Optional, contains the customer data.
|
||||
* @param {Function} [successCallback] Optional, if defined, this function is going to be executed on post success.
|
||||
* @param {Function} [errorCallback] Optional, if defined, this function is going to be executed on post failure.
|
||||
*/
|
||||
exports.saveAppointment = function (appointment, customer, successCallback, errorCallback) {
|
||||
var url = GlobalVariables.baseUrl + '/index.php/calendar/ajax_save_appointment';
|
||||
function saveAppointment(appointment, customer, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/ajax_save_appointment');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
appointment_data: JSON.stringify(appointment)
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
appointment_data: appointment
|
||||
};
|
||||
|
||||
if (customer) {
|
||||
data.customer_data = JSON.stringify(customer);
|
||||
data.customer_data = customer;
|
||||
}
|
||||
|
||||
$.post(url, data)
|
||||
.done(function (response) {
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(function (jqXHR, textStatus, errorThrown) {
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Save unavailable period to database.
|
||||
|
@ -64,26 +58,26 @@ window.BackendCalendarApi = window.BackendCalendarApi || {};
|
|||
* @param {Function} successCallback The ajax success callback function.
|
||||
* @param {Function} errorCallback The ajax failure callback function.
|
||||
*/
|
||||
exports.saveUnavailable = function (unavailable, successCallback, errorCallback) {
|
||||
var url = GlobalVariables.baseUrl + '/index.php/calendar/ajax_save_unavailable';
|
||||
function saveUnavailable(unavailable, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/ajax_save_unavailable');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
unavailable: JSON.stringify(unavailable)
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
unavailable: unavailable
|
||||
};
|
||||
|
||||
$.post(url, data)
|
||||
.done(function (response) {
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(function (jqXHR, textStatus, errorThrown) {
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Save working plan exception of work to database.
|
||||
|
@ -94,54 +88,55 @@ window.BackendCalendarApi = window.BackendCalendarApi || {};
|
|||
* @param {Function} successCallback The ajax success callback function.
|
||||
* @param {Function} errorCallback The ajax failure callback function.
|
||||
*/
|
||||
exports.saveWorkingPlanException = function (
|
||||
date,
|
||||
workingPlanException,
|
||||
providerId,
|
||||
successCallback,
|
||||
errorCallback
|
||||
) {
|
||||
var url = GlobalVariables.baseUrl + '/index.php/calendar/ajax_save_working_plan_exception';
|
||||
function saveWorkingPlanException(date, workingPlanException, providerId, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/ajax_save_working_plan_exception');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
date: date,
|
||||
working_plan_exception: workingPlanException,
|
||||
provider_id: providerId
|
||||
};
|
||||
|
||||
$.post(url, data)
|
||||
.done(function (response) {
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(function (jqXHR, textStatus, errorThrown) {
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
exports.deleteWorkingPlanException = function (date, providerId, successCallback, errorCallback) {
|
||||
var url = GlobalVariables.baseUrl + '/index.php/calendar/ajax_delete_working_plan_exception';
|
||||
function deleteWorkingPlanException(date, providerId, successCallback, errorCallback) {
|
||||
const url = App.Utils.Url.siteUrl('calendar/ajax_delete_working_plan_exception');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
date: date,
|
||||
provider_id: providerId
|
||||
};
|
||||
|
||||
$.post(url, data)
|
||||
.done(function (response) {
|
||||
return $.post(url, data)
|
||||
.done((response) => {
|
||||
if (successCallback) {
|
||||
successCallback(response);
|
||||
}
|
||||
})
|
||||
.fail(function (jqXHR, textStatus, errorThrown) {
|
||||
.fail(() => {
|
||||
if (errorCallback) {
|
||||
errorCallback();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
saveAppointment,
|
||||
saveUnavailable,
|
||||
saveWorkingPlanException,
|
||||
deleteWorkingPlanException
|
||||
};
|
||||
})(window.BackendCalendarApi);
|
||||
})();
|
|
@ -10,27 +10,21 @@
|
|||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
/**
|
||||
* Backend Calendar
|
||||
* Calendar Page
|
||||
*
|
||||
* This module contains functions that are used by the backend calendar page.
|
||||
*
|
||||
* @module BackendCalendar
|
||||
*/
|
||||
window.BackendCalendar = window.BackendCalendar || {};
|
||||
|
||||
(function (exports) {
|
||||
'use strict';
|
||||
|
||||
App.Pages.Calendar = (function () {
|
||||
/**
|
||||
* Bind common event handlers.
|
||||
*/
|
||||
function bindEventHandlers() {
|
||||
var $calendarPage = $('#calendar-page');
|
||||
const $calendarPage = $('#calendar-page');
|
||||
|
||||
$calendarPage.on('click', '#toggle-fullscreen', function () {
|
||||
var $toggleFullscreen = $(this);
|
||||
var element = document.documentElement;
|
||||
var isFullScreen = document.fullScreenElement || document.mozFullScreen || document.webkitIsFullScreen;
|
||||
$calendarPage.on('click', '#toggle-fullscreen', (event) => {
|
||||
const $toggleFullscreen = $(event.target);
|
||||
const element = document.documentElement;
|
||||
const isFullScreen = document.fullScreenElement || document.mozFullScreen || document.webkitIsFullScreen;
|
||||
|
||||
if (isFullScreen) {
|
||||
// Exit fullscreen mode.
|
||||
|
@ -60,10 +54,10 @@ window.BackendCalendar = window.BackendCalendar || {};
|
|||
}
|
||||
});
|
||||
|
||||
$('#insert-working-plan-exception').on('click', function () {
|
||||
var providerId = $('#select-filter-item').val();
|
||||
$('#insert-working-plan-exception').on('click', () => {
|
||||
const providerId = $('#select-filter-item').val();
|
||||
|
||||
var provider = GlobalVariables.availableProviders.find(function (availableProvider) {
|
||||
const provider = App.Vars.available_providers.find((availableProvider) => {
|
||||
return Number(availableProvider.id) === Number(providerId);
|
||||
});
|
||||
|
||||
|
@ -71,19 +65,19 @@ window.BackendCalendar = window.BackendCalendar || {};
|
|||
throw new Error('Provider could not be found: ' + providerId);
|
||||
}
|
||||
|
||||
App.Components.WorkingPlanExceptionsModal.add().done(function (date, workingPlanException) {
|
||||
var successCallback = function () {
|
||||
App.Components.WorkingPlanExceptionsModal.add().done((date, workingPlanException) => {
|
||||
const successCallback = () => {
|
||||
Backend.displayNotification(App.Lang.working_plan_exception_saved);
|
||||
|
||||
var workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions) || {};
|
||||
const workingPlanExceptions = JSON.parse(provider.settings.working_plan_exceptions) || {};
|
||||
|
||||
workingPlanExceptions[date] = workingPlanException;
|
||||
|
||||
for (var index in GlobalVariables.availableProviders) {
|
||||
var availableProvider = GlobalVariables.availableProviders[index];
|
||||
for (let index in App.Vars.available_providers) {
|
||||
const availableProvider = App.Vars.available_providers[index];
|
||||
|
||||
if (Number(availableProvider.id) === Number(providerId)) {
|
||||
GlobalVariables.availableProviders[index].settings.working_plan_exceptions =
|
||||
App.Vars.available_providers[index].settings.working_plan_exceptions =
|
||||
JSON.stringify(workingPlanExceptions);
|
||||
break;
|
||||
}
|
||||
|
@ -92,7 +86,7 @@ window.BackendCalendar = window.BackendCalendar || {};
|
|||
$('#select-filter-item').trigger('change'); // Update the calendar.
|
||||
};
|
||||
|
||||
BackendCalendarApi.saveWorkingPlanException(
|
||||
App.Http.Calendar.saveWorkingPlanException(
|
||||
date,
|
||||
workingPlanException,
|
||||
providerId,
|
||||
|
@ -111,18 +105,26 @@ window.BackendCalendar = window.BackendCalendar || {};
|
|||
*
|
||||
* @param {String} view Optional (default), the calendar view to be loaded.
|
||||
*/
|
||||
exports.initialize = function (view) {
|
||||
BackendCalendarGoogleSync.initialize();
|
||||
BackendCalendarAppointmentsModal.initialize();
|
||||
BackendCalendarUnavailabilityEventsModal.initialize();
|
||||
function initialize(view) {
|
||||
App.Utils.CalendarGoogleSync.initialize();
|
||||
|
||||
App.Components.ManageAppointmentsModal.initialize();
|
||||
|
||||
App.Components.ManageUnavailabilitiesModal.initialize();
|
||||
|
||||
// Load and initialize the calendar view.
|
||||
if (view === 'table') {
|
||||
BackendCalendarTableView.initialize();
|
||||
App.Utils.CalendarTableView.initialize();
|
||||
} else {
|
||||
BackendCalendarDefaultView.initialize();
|
||||
App.Utils.CalendarDefaultView.initialize();
|
||||
}
|
||||
|
||||
bindEventHandlers();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', initialize);
|
||||
|
||||
return {
|
||||
initialize
|
||||
};
|
||||
})(window.BackendCalendar);
|
||||
})();
|
File diff suppressed because it is too large
Load diff
|
@ -14,13 +14,9 @@
|
|||
*
|
||||
* This module implements the Google Calendar sync operations.
|
||||
*
|
||||
* @module BackendCalendarGoogleSync
|
||||
* Old Name: BackendCalendarGoogleSync
|
||||
*/
|
||||
window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
||||
|
||||
(function (exports) {
|
||||
'use strict';
|
||||
|
||||
App.Utils.CalendarGoogleSync = (function () {
|
||||
/**
|
||||
* Bind event handlers.
|
||||
*/
|
||||
|
@ -31,19 +27,19 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
|||
* When the user clicks on the "Enable Sync" button, a popup should appear
|
||||
* that is going to follow the web server authorization flow of OAuth.
|
||||
*/
|
||||
$('#enable-sync').on('click', function () {
|
||||
$('#enable-sync').on('click', () => {
|
||||
if ($('#enable-sync').hasClass('enabled') === false) {
|
||||
// Enable synchronization for selected provider.
|
||||
var authUrl = GlobalVariables.baseUrl + '/index.php/google/oauth/' + $('#select-filter-item').val();
|
||||
const authUrl = App.Utils.Url.siteUrl('google/oauth/' + $('#select-filter-item').val());
|
||||
|
||||
var redirectUrl = GlobalVariables.baseUrl + '/index.php/google/oauth_callback';
|
||||
const redirectUrl = App.Utils.Url.siteUrl('google/oauth_callback');
|
||||
|
||||
var windowHandle = window.open(authUrl, 'Authorize Easy!Appointments', 'width=800, height=600');
|
||||
const windowHandle = window.open(authUrl, 'Authorize Easy!Appointments', 'width=800, height=600');
|
||||
|
||||
var authInterval = window.setInterval(function () {
|
||||
// When the browser redirects to the google user consent page the "window.document" variable
|
||||
const authInterval = window.setInterval(() => {
|
||||
// When the browser redirects to the google user consent page the "window.document" constiable
|
||||
// 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.
|
||||
// whether the constiable is undefined to avoid javascript errors.
|
||||
try {
|
||||
if (windowHandle.document) {
|
||||
if (windowHandle.document.URL.indexOf(redirectUrl) !== -1) {
|
||||
|
@ -58,17 +54,17 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
|||
// 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 url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_get_google_calendars';
|
||||
const url = App.Utils.Url.siteUrl('backend_api/ajax_get_google_calendars');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
provider_id: $('#select-filter-item').val()
|
||||
};
|
||||
|
||||
$.post(url, data).done(function (response) {
|
||||
$.post(url, data).done((response) => {
|
||||
$('#google-calendar').empty();
|
||||
|
||||
response.forEach(function (calendar) {
|
||||
response.forEach((calendar) => {
|
||||
$('#google-calendar').append(new Option(calendar.summary, calendar.id));
|
||||
});
|
||||
|
||||
|
@ -83,22 +79,22 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
|||
}
|
||||
}, 100);
|
||||
} else {
|
||||
var buttons = [
|
||||
const buttons = [
|
||||
{
|
||||
text: App.Lang.cancel,
|
||||
click: function () {
|
||||
click: () => {
|
||||
$('#message-box').dialog('close');
|
||||
}
|
||||
},
|
||||
{
|
||||
text: 'OK',
|
||||
click: function () {
|
||||
click: () => {
|
||||
// Disable synchronization for selected provider.
|
||||
var providerId = $('#select-filter-item').val();
|
||||
const providerId = $('#select-filter-item').val();
|
||||
|
||||
var provider = GlobalVariables.availableProviders.find(function (availableProvider) {
|
||||
return Number(availableProvider.id) === Number(providerId);
|
||||
});
|
||||
const provider = App.Vars.available_providers.find(
|
||||
(availableProvider) => Number(availableProvider.id) === Number(providerId)
|
||||
);
|
||||
|
||||
if (!provider) {
|
||||
throw new Error('Provider not found: ' + providerId);
|
||||
|
@ -119,22 +115,22 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
|||
}
|
||||
];
|
||||
|
||||
GeneralFunctions.displayMessageBox(App.Lang.disable_sync, App.Lang.disable_sync_prompt, buttons);
|
||||
App.Utils.Message.show(App.Lang.disable_sync, App.Lang.disable_sync_prompt, buttons);
|
||||
}
|
||||
});
|
||||
|
||||
/**
|
||||
* Event: Select Google Calendar "Click"
|
||||
*/
|
||||
$('#select-calendar').on('click', function () {
|
||||
var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_select_google_calendar';
|
||||
$('#select-calendar').on('click', () => {
|
||||
const url = App.Utils.Url.siteUrl('backend_api/ajax_select_google_calendar');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
provider_id: $('#select-filter-item').val(),
|
||||
calendar_id: $('#google-calendar').val()
|
||||
};
|
||||
$.post(url, data).done(function () {
|
||||
$.post(url, data).done(() => {
|
||||
Backend.displayNotification(App.Lang.google_calendar_selected);
|
||||
$('#select-google-calendar').modal('hide');
|
||||
});
|
||||
|
@ -145,19 +141,19 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
|||
*
|
||||
* Trigger the synchronization algorithm.
|
||||
*/
|
||||
$('#google-sync').on('click', function () {
|
||||
var url = GlobalVariables.baseUrl + '/index.php/google/sync/' + $('#select-filter-item').val();
|
||||
$('#google-sync').on('click', () => {
|
||||
const url = App.Utils.Url.siteUrl('google/sync/' + $('#select-filter-item').val());
|
||||
|
||||
$.ajax({
|
||||
url: url,
|
||||
type: 'GET',
|
||||
dataType: 'json'
|
||||
})
|
||||
.done(function (response) {
|
||||
.done(() => {
|
||||
Backend.displayNotification(App.Lang.google_sync_completed);
|
||||
$('#reload-appointments').trigger('click');
|
||||
})
|
||||
.fail(function (jqXHR, textStatus, errorThrown) {
|
||||
.fail(() => {
|
||||
Backend.displayNotification(App.Lang.google_sync_failed);
|
||||
});
|
||||
});
|
||||
|
@ -166,23 +162,27 @@ window.BackendCalendarGoogleSync = window.BackendCalendarGoogleSync || {};
|
|||
/**
|
||||
* Disable Provider Sync
|
||||
*
|
||||
* This method disables the google synchronization for a specific provider.
|
||||
* This method disables the Google synchronization for a specific provider.
|
||||
*
|
||||
* @param {Number} providerId The selected provider record ID.
|
||||
*/
|
||||
function disableProviderSync(providerId) {
|
||||
// Make an ajax call to the server in order to disable the setting from the database.
|
||||
var url = GlobalVariables.baseUrl + '/index.php/backend_api/ajax_disable_provider_sync';
|
||||
const url = App.Utils.Url.siteUrl('backend_api/ajax_disable_provider_sync');
|
||||
|
||||
var data = {
|
||||
csrf_token: GlobalVariables.csrfToken,
|
||||
const data = {
|
||||
csrf_token: App.Vars.csrf_token,
|
||||
provider_id: providerId
|
||||
};
|
||||
|
||||
$.post(url, data);
|
||||
}
|
||||
|
||||
exports.initialize = function () {
|
||||
function initialize() {
|
||||
bindEventHandlers();
|
||||
}
|
||||
|
||||
return {
|
||||
initialize
|
||||
};
|
||||
})(window.BackendCalendarGoogleSync);
|
||||
})();
|
File diff suppressed because it is too large
Load diff
Loading…
Reference in a new issue