ifl/iflrandevu
1
1
Fork 0
forked from mirrors/easyappointments
Code Issues 6 Pull requests Releases 3 Activity

Corrected event sourcing for new fullcalendar version.

Browse source
This commit is contained in:
alext 2017-10-31 10:37:00 +01:00
parent 5fb9b9466e
commit 6ba3d7ce70
3 changed files with 428 additions and 378 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/application/views/backend/calendar.php
View file

@ -1,6 +1,7 @@
<link rel="stylesheet" type="text/css" href="<?= base_url('/assets/ext/jquery-fullcalendar/jquery.fullcalendar.css') ?>">
<link rel="stylesheet" type="text/css" href="<?= base_url('/assets/ext/jquery-fullcalendar/fullcalendar.css') ?>">
<script src="<?= base_url('assets/ext/jquery-fullcalendar/jquery.fullcalendar.min.js') ?>"></script>
<script src="<?= base_url('assets/ext/moment/moment.min.js') ?>"></script>
<script src="<?= base_url('assets/ext/jquery-fullcalendar/fullcalendar.js') ?>"></script>
<script src="<?= base_url('assets/ext/jquery-sticky-table-headers/jquery.stickytableheaders.min.js') ?>"></script>
<script src="<?= base_url('assets/ext/jquery-ui/jquery-ui-timepicker-addon.js') ?>"></script>
<script src="<?= base_url('assets/js/backend_calendar.js') ?>"></script>
@ -211,7 +212,7 @@
</button>
<input id="filter-existing-customers"
placeholder="<?= lang('type_to_filter_customers') ?>"
style="display: none;" class="input-sm">
style="display: none;" class="input-sm form-control">
<div id="existing-customers-list" style="display: none;"></div>
</legend>

12
src/assets/css/backend.css
View file

@ -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;

489
src/assets/js/backend_calendar_default_view.js
View file

@ -19,7 +19,6 @@
window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
(function (exports) {
'use strict';
// Constants
@ -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,22 +119,24 @@ 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
$(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 = {
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'],
appointment_id: lastFocusedEventData.data.id,
delete_reason: $('#delete-reason').val()
};
$.post(postUrl, postData, function(response) {
$.post(url, data, function (response) {
$('#message_box').dialog('close');
if (response.exceptions) {
@ -158,26 +157,31 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// Refresh calendar event items.
$('#select-filter-item').trigger('change');
}, 'json').fail(GeneralFunctions.ajaxFailureHandler);
};
messageButtons[EALang.cancel] = function() {
}
},
{
text: EALang.cancel,
click: 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('<textarea id="delete-reason" rows="3"></textarea>');
$('#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
};
$.post(postUrl, postData, function(response) {
$.post(url, data, function (response) {
$('#message_box').dialog('close');
if (response.exceptions) {
@ -209,8 +213,8 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('#calendar'),
$('#select-filter-item').val(),
$('#select-filter-item option:selected').attr('type'),
$('#calendar').fullCalendar('getView').visStart,
$('#calendar').fullCalendar('getView').visEnd);
$('#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) {
@ -313,21 +317,21 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
+ GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true)
+ '<br>' +
'<strong>' + EALang.service + '</strong> '
+ event.data['service']['name']
+ event.data.service.name
+ '<br>' +
'<strong>' + EALang.provider + '</strong> '
+ event.data['provider']['first_name'] + ' '
+ event.data['provider']['last_name']
+ event.data.provider.first_name + ' '
+ event.data.provider.last_name
+ '<br>' +
'<strong>' + EALang.customer + '</strong> '
+ event.data['customer']['first_name'] + ' '
+ event.data['customer']['last_name']
+ event.data.customer.first_name + ' '
+ event.data.customer.last_name
+ '<hr>' +
'<center>' +
'<div class="text-center">' +
'<button class="edit-popover btn btn-primary ' + displayEdit + '">' + EALang.edit + '</button>' +
'<button class="delete-popover btn btn-danger ' + displayDelete + '">' + EALang.delete + '</button>' +
'<button class="close-popover btn btn-default" data-po=' + jsEvent.target + '>' + EALang.close + '</button>' +
'</center>';
'</div>';
}
$(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,13 +376,13 @@ 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')
appointment.end_datetime = Date.parseExact(
appointment.end_datetime, 'yyyy-MM-dd HH:mm:ss')
.add({minutes: minuteDelta})
.toString('yyyy-MM-dd HH:mm:ss');
@ -399,18 +404,19 @@ 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')
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 = {
@ -454,8 +460,8 @@ 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')
unavailable.end_datetime = Date.parseExact(
unavailable.end_datetime, 'yyyy-MM-dd HH:mm:ss')
.add({minutes: -minuteDelta})
.toString('yyyy-MM-dd HH:mm:ss');
@ -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,22 +538,22 @@ 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')
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')
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) {
@ -566,26 +573,26 @@ 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')
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')
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 = {
@ -627,26 +634,26 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
}
var undoFunction = function () {
unavailable['start_datetime'] = Date.parseExact(
unavailable['start_datetime'], 'yyyy-MM-dd HH:mm:ss')
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')
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,17 +669,17 @@ 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;
}
@ -681,8 +688,8 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$('#calendar'),
$('#select-filter-item').val(),
$('#select-filter-item option:selected').attr('type'),
$('#calendar').fullCalendar('getView').visStart,
$('#calendar').fullCalendar('getView').visEnd);
$('#calendar').fullCalendar('getView').start,
$('#calendar').fullCalendar('getView').end);
$(window).trigger('resize'); // Places the footer on the bottom.
@ -701,7 +708,7 @@ 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.
*/
@ -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;
}
@ -747,12 +754,12 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
$.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.
};
@ -768,56 +775,62 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
if (filterType === FILTER_TYPE_PROVIDER && calendarView !== 'month') {
$.each(GlobalVariables.availableProviders, function (index, provider) {
if (provider['id'] == recordId) {
if (provider.id == recordId) {
var workingPlan = jQuery.parseJSON(provider.settings.working_plan);
var unavailablePeriod;
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) {
var notes = unavailable.notes ? ' - ' + unavailable.notes : '';
if (unavailable.notes.length > 30) {
notes = unavailable.notes.substring(0, 30) + '...'
}
var unavailablePeriod = {
title: EALang.unavailable + ' <br><small>' + ((unavailable.notes.length > 30)
? unavailable.notes.substring(0, 30) + '...'
: unavailable.notes) + '</small>',
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),
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, true);
return; // Go to next loop
$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) {
var notes = unavailable.notes ? ' - ' + unavailable.notes : '';
if (unavailable.notes.length > 30) {
notes = unavailable.notes.substring(0, 30) + '...'
}
unavailablePeriod = {
title: EALang.unavailable + ' <br><small>' + ((unavailable.notes.length > 30)
? unavailable.notes.substring(0, 30) + '...'
: unavailable.notes) + '</small>',
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) {
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;
}
}
@ -979,51 +1026,36 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
exports.initialize = function () {
// Dynamic Date Formats
// Dynamic date formats.
var columnFormat = {};
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]{ '&#8212;'[ MMM] d, yyyy}",
day: 'dddd, MMMM d, yyyy'
},
titleFormat: 'MMMM YYYY',
header: {
left: 'prev,next today',
center: 'title',
@ -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,
@ -1074,35 +1106,40 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// Fill the select list boxes of the page.
if (GlobalVariables.availableProviders.length > 0) {
var optgroupHtml = '<optgroup label="' + EALang.providers + '" type="providers-group">';
$.each(GlobalVariables.availableProviders, function(index, provider) {
var hasGoogleSync = (provider['settings']['google_sync'] === '1')
? 'true' : 'false';
optgroupHtml += '<option value="' + provider['id'] + '" '
+ 'type="' + FILTER_TYPE_PROVIDER + '" '
$.each(GlobalVariables.availableProviders, function (index, provider) {
var hasGoogleSync = provider.settings.google_sync === '1' ? 'true' : 'false';
optgroupHtml +=
'<option value="' + provider.id + '" type="' + FILTER_TYPE_PROVIDER + '" '
+ 'google-sync="' + hasGoogleSync + '">'
+ provider['first_name'] + ' ' + provider['last_name']
+ provider.first_name + ' ' + provider.last_name
+ '</option>';
});
optgroupHtml += '</optgroup>';
$('#select-filter-item').append(optgroupHtml);
}
if (GlobalVariables.availableServices.length > 0) {
optgroupHtml = '<optgroup label="' + EALang.services + '" type="services-group">';
$.each(GlobalVariables.availableServices, function (index, service) {
optgroupHtml += '<option value="' + service['id'] + '" ' +
'type="' + FILTER_TYPE_SERVICE + '">' +
service['name'] + '</option>';
optgroupHtml += '<option value="' + service.id + '" type="' + FILTER_TYPE_SERVICE + '">' +
service.name + '</option>';
});
optgroupHtml += '</optgroup>';
$('#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);
}
@ -1114,6 +1151,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// Remove the providers that are not connected to the secretary.
$('#select-filter-item option[type="provider"]').each(function (index, option) {
var found = false;
$.each(GlobalVariables.secretaryProviders, function (index, id) {
if ($(option).val() == id) {
found = true;
@ -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');
}