mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-12-22 14:42:23 +03:00
Converted hard coded HTML to jQuery generated markup.
This commit is contained in:
Alex Tselegidis
parent
f8164a8287
commit
74c10d3b7b
16 changed files with 1279 additions and 567 deletions
|
|
@ -395,3 +395,11 @@ li.language:hover {
|
|||
#message_box pre {
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
body .popover-content strong {
|
||||
min-width: 80px; display:inline-block;
|
||||
}
|
||||
|
||||
body .popover-content button {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -187,9 +187,12 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
$list.slideDown('slow');
|
||||
$('#filter-existing-customers').fadeIn('slow');
|
||||
$('#filter-existing-customers').val('');
|
||||
$.each(GlobalVariables.customers, function (index, c) {
|
||||
$list.append('<div data-id="' + c.id + '">'
|
||||
+ c.first_name + ' ' + c.last_name + '</div>');
|
||||
GlobalVariables.customers.forEach(function (customer) {
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text': customer.first_name + ' ' + customer.last_name
|
||||
})
|
||||
.appendTo($list);
|
||||
});
|
||||
} else {
|
||||
$list.slideUp('slow');
|
||||
|
|
@ -241,9 +244,12 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
.done(function (response) {
|
||||
$list.empty();
|
||||
|
||||
response.forEach(function (customer, index) {
|
||||
$list.append('<div data-id="' + customer.id + '">'
|
||||
+ customer.first_name + ' ' + customer.last_name + '</div>');
|
||||
response.forEach(function (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) {
|
||||
|
|
@ -269,8 +275,11 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|| customer.city.toLowerCase().indexOf(key) !== -1
|
||||
|| customer.zip_code.toLowerCase().indexOf(key) !== -1
|
||||
|| customer.notes.toLowerCase().indexOf(key) !== -1) {
|
||||
$list.append('<div data-id="' + customer.id + '">'
|
||||
+ customer.first_name + ' ' + customer.last_name + '</div>');
|
||||
$('<div/>', {
|
||||
'data-id': customer.id,
|
||||
'text': customer.first_name + ' ' + customer.last_name
|
||||
})
|
||||
.appendTo($list);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -308,10 +317,8 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
|
|||
|
||||
// If the current provider is able to provide the selected service, add him to the listbox.
|
||||
if (Number(providerServiceId) === Number(serviceId)) {
|
||||
var optionHtml = '<option value="' + provider.id + '">'
|
||||
+ provider.first_name + ' ' + provider.last_name
|
||||
+ '</option>';
|
||||
$('#select-provider').append(optionHtml);
|
||||
$('#select-provider')
|
||||
.append(new Option(provider.first_name + ' ' + provider.last_name, provider.id));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -279,7 +279,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
|
|||
function calendarEventClick(event, jsEvent, view) {
|
||||
$('.popover').remove(); // Close all open popovers.
|
||||
|
||||
var html;
|
||||
var $html;
|
||||
var displayEdit;
|
||||
var displayDelete;
|
||||
|
||||
|
|
@ -301,109 +301,217 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
|
|||
notes = '<strong>Notes</strong> ' + event.data.notes;
|
||||
}
|
||||
|
||||
html =
|
||||
'<style type="text/css">'
|
||||
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||||
+ '.popover-content button {margin-right: 10px;}'
|
||||
+ '</style>' +
|
||||
'<strong>' + EALang.start + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.end + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>'
|
||||
+ notes
|
||||
+ '<hr>' +
|
||||
'<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>';
|
||||
$html = $('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': EALang.start
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.end
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<span/>', {
|
||||
'text': notes
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<hr/>'),
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'text-center',
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'class': 'edit-popover btn btn-primary ' + displayEdit,
|
||||
'text': EALang.edit
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'delete-popover btn btn-danger ' + displayDelete,
|
||||
'text': EALang.delete
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'close-popover btn btn-default',
|
||||
'text': EALang.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
} else if ($(this).hasClass('fc-extra') || $parent.hasClass('fc-extra') || $altParent.hasClass('fc-extra')) {
|
||||
displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
|
||||
&& GlobalVariables.user.privileges.appointments.delete === true)
|
||||
? '' : 'hide'; // Same value at the time.
|
||||
|
||||
var provider = '';
|
||||
|
||||
if (event.data) { // Only custom unavailable periods have notes.
|
||||
provider = '<strong>' + EALang.provider + '</strong> ' + event.data.first_name + ' ' + event.data.last_name;
|
||||
}
|
||||
|
||||
var extraPeriod = jQuery.parseJSON(event.data.settings.extra_working_plan)[event.start.format()];
|
||||
|
||||
html =
|
||||
'<style type="text/css">'
|
||||
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||||
+ '.popover-content button {margin-right: 10px;}'
|
||||
+ '</style>' +
|
||||
'<strong>' + EALang.start + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.start, GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.end + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.end, GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.timezone + '</strong> '
|
||||
+ GlobalVariables.timezones[event.data.provider.timezone]
|
||||
+ '<br>' +
|
||||
+ provider
|
||||
+ '<hr>' +
|
||||
'<center>' +
|
||||
'<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>';
|
||||
$html = $('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': EALang.provider
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': event.data ? event.data.first_name + ' ' + event.data.last_name : '-'
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.start
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.end
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.timezone
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GlobalVariables.timezones[event.data.provider.timezone]
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<hr/>'),
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'text-center',
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'class': 'delete-popover btn btn-danger ' + displayDelete,
|
||||
'text': EALang.delete
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'close-popover btn btn-default',
|
||||
'text': EALang.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
} else {
|
||||
displayEdit = (GlobalVariables.user.privileges.appointments.edit === true)
|
||||
? '' : 'hide';
|
||||
displayDelete = (GlobalVariables.user.privileges.appointments.delete === true)
|
||||
? '' : 'hide';
|
||||
|
||||
html =
|
||||
'<style type="text/css">'
|
||||
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||||
+ '.popover-content button {margin-right: 10px;}'
|
||||
+ '</style>' +
|
||||
'<strong>' + EALang.start + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.end + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.timezone + '</strong> '
|
||||
+ GlobalVariables.timezones[event.data.provider.timezone]
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.service + '</strong> '
|
||||
+ event.data.service.name
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.provider + '</strong> '
|
||||
+ GeneralFunctions.renderMapIcon(event.data.customer) + ' '
|
||||
+ event.data.provider.first_name + ' '
|
||||
+ event.data.provider.last_name
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.customer + '</strong> '
|
||||
+ GeneralFunctions.renderMapIcon(event.data.customer) + ' '
|
||||
+ event.data.customer.first_name + ' '
|
||||
+ event.data.customer.last_name
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.email + '</strong> '
|
||||
+ GeneralFunctions.renderMailIcon(event.data.customer.email) + ' '
|
||||
+ event.data.customer.email
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.phone_number + '</strong> '
|
||||
+ GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number) + ' '
|
||||
+ event.data.customer.phone_number
|
||||
+ '<hr>' +
|
||||
'<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>' +
|
||||
'</div>';
|
||||
$html = $('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': EALang.start
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.end
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.timezone
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GlobalVariables.timezones[event.data.provider.timezone]
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.service
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': event.data.service.name
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.provider
|
||||
}),
|
||||
GeneralFunctions.renderMapIcon(event.data.provider),
|
||||
$('<span/>', {
|
||||
'text': event.data.provider.first_name + ' ' + event.data.provider.last_name
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.customer
|
||||
}),
|
||||
GeneralFunctions.renderMapIcon(event.data.customer),
|
||||
$('<span/>', {
|
||||
'text': event.data.customer.first_name + ' ' + event.data.customer.last_name
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.email
|
||||
}),
|
||||
GeneralFunctions.renderMailIcon(event.data.customer.email),
|
||||
$('<span/>', {
|
||||
'text': event.data.customer.email
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.phone_number
|
||||
}),
|
||||
GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number),
|
||||
$('<span/>', {
|
||||
'text': event.data.customer.phone_number
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<hr/>'),
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'text-center',
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'class': 'edit-popover btn btn-primary ' + displayEdit,
|
||||
'text': EALang.edit
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'delete-popover btn btn-danger ' + displayDelete,
|
||||
'text': EALang.delete
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'close-popover btn btn-default',
|
||||
'text': EALang.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
$(jsEvent.target).popover({
|
||||
placement: 'top',
|
||||
title: event.title,
|
||||
content: html,
|
||||
content: $html,
|
||||
html: true,
|
||||
container: '#calendar',
|
||||
trigger: 'manual'
|
||||
|
|
@ -1262,34 +1370,36 @@ 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">';
|
||||
$('<optgroup/>', {
|
||||
'label': EALang.providers,
|
||||
'type': 'providers-group',
|
||||
'html': GlobalVariables.availableProviders.map(function (availableProvider) {
|
||||
var hasGoogleSync = availableProvider.settings.google_sync === '1' ? 'true' : 'false';
|
||||
|
||||
$.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
|
||||
+ '</option>';
|
||||
});
|
||||
|
||||
optgroupHtml += '</optgroup>';
|
||||
|
||||
$('#select-filter-item').append(optgroupHtml);
|
||||
return $('<option/>', {
|
||||
'value': availableProvider.id,
|
||||
'type': FILTER_TYPE_PROVIDER,
|
||||
'google-sync': hasGoogleSync,
|
||||
'text': availableProvider.first_name + ' ' + availableProvider.last_name
|
||||
})
|
||||
})
|
||||
})
|
||||
.appendTo('#select-filter-item');
|
||||
}
|
||||
|
||||
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 += '</optgroup>';
|
||||
|
||||
$('#select-filter-item').append(optgroupHtml);
|
||||
$('<optgroup/>', {
|
||||
'label': EALang.services,
|
||||
'type': 'services-group',
|
||||
'html': GlobalVariables.availableServices.map(function (availableService) {
|
||||
return $('<option/>', {
|
||||
'value': availableService.id,
|
||||
'type': FILTER_TYPE_SERVICE,
|
||||
'text': availableService.name
|
||||
})
|
||||
})
|
||||
})
|
||||
.appendTo('#select-filter-item');
|
||||
}
|
||||
|
||||
// Check permissions.
|
||||
|
|
|
|||
|
|
@ -308,18 +308,37 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
|
|||
.append(new Option('1 ' + EALang.day, 1))
|
||||
.append(new Option('3 ' + EALang.days, 3));
|
||||
|
||||
var $calendarHeader = $('<div class="calendar-header" />').appendTo('#calendar');
|
||||
var $calendarHeader = $('<div/>', {
|
||||
'class': 'calendar-header'
|
||||
})
|
||||
.appendTo('#calendar');
|
||||
|
||||
$calendarHeader
|
||||
.html(
|
||||
'<button class="btn btn-xs btn-default previous">' +
|
||||
'<span class="glyphicon glyphicon-chevron-left"></span>' +
|
||||
'</button>' +
|
||||
'<input type="text" class="select-date" value="' + GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat) + '" />' +
|
||||
'<button class="btn btn-xs btn-default next">' +
|
||||
'<span class="glyphicon glyphicon-chevron-right"></span>' +
|
||||
'</button>'
|
||||
);
|
||||
$('<button/>', {
|
||||
'class': 'btn btn-xs btn-default previous',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-chevron-left'
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo($calendarHeader);
|
||||
|
||||
$('<input/>', {
|
||||
'type': 'text',
|
||||
'class': 'select-date',
|
||||
'value': GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat)
|
||||
})
|
||||
.appendTo($calendarHeader);
|
||||
|
||||
$('<button/>', {
|
||||
'class': 'btn btn-xs btn-default next',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-chevron-right'
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo($calendarHeader);
|
||||
|
||||
var dateFormat;
|
||||
|
||||
|
|
@ -943,7 +962,9 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
|
|||
var endHour = entry.end.split(':');
|
||||
var endDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), endHour[0], endHour[1]);
|
||||
var eventDuration = Math.round((endDate - eventDate) / 60000);
|
||||
var $event = $('<div class="event unavailability break" />');
|
||||
var $event = $('<div/>', {
|
||||
'class': 'event unavailability break'
|
||||
});
|
||||
|
||||
$event.html(
|
||||
EALang.break +
|
||||
|
|
@ -983,7 +1004,7 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
|
|||
function onEventClick(event, jsEvent) {
|
||||
$('.popover').remove(); // Close all open popovers.
|
||||
|
||||
var html;
|
||||
var $html;
|
||||
var displayEdit;
|
||||
var displayDelete;
|
||||
|
||||
|
|
@ -1005,109 +1026,217 @@ window.BackendCalendarTableView = window.BackendCalendarTableView || {};
|
|||
notes = '<strong>Notes</strong> ' + event.data.notes;
|
||||
}
|
||||
|
||||
html =
|
||||
'<style type="text/css">'
|
||||
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||||
+ '.popover-content button {margin-right: 10px;}'
|
||||
+ '</style>' +
|
||||
'<strong>' + EALang.start + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.end + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>'
|
||||
+ notes
|
||||
+ '<hr>' +
|
||||
'<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>';
|
||||
$html = $('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': EALang.start
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.end
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<span/>', {
|
||||
'text': notes
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<hr/>'),
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'text-center',
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'class': 'edit-popover btn btn-primary ' + displayEdit,
|
||||
'text': EALang.edit
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'delete-popover btn btn-danger ' + displayDelete,
|
||||
'text': EALang.delete
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'close-popover btn btn-default',
|
||||
'text': EALang.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
} else if ($(this).hasClass('fc-extra') || $parent.hasClass('fc-extra') || $altParent.hasClass('fc-extra')) {
|
||||
displayDelete = (($parent.hasClass('fc-custom') || $altParent.hasClass('fc-custom'))
|
||||
&& GlobalVariables.user.privileges.appointments.delete === true)
|
||||
? '' : 'hide'; // Same value at the time.
|
||||
|
||||
var provider = '';
|
||||
|
||||
if (event.data) { // Only custom unavailable periods have notes.
|
||||
provider = '<strong>' + EALang.provider + '</strong> ' + event.data.first_name + ' ' + event.data.last_name;
|
||||
}
|
||||
|
||||
var extraPeriod = jQuery.parseJSON(event.data.settings.extra_working_plan)[event.start.format()];
|
||||
|
||||
html =
|
||||
'<style type="text/css">'
|
||||
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||||
+ '.popover-content button {margin-right: 10px;}'
|
||||
+ '</style>' +
|
||||
'<strong>' + EALang.start + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.start, GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.end + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format() + ' ' + extraPeriod.end, GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.timezone + '</strong> '
|
||||
+ GlobalVariables.timezones[event.data.provider.timezone]
|
||||
+ '<br>' +
|
||||
+provider
|
||||
+ '<hr>' +
|
||||
'<center>' +
|
||||
'<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>';
|
||||
$html = $('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': EALang.provider
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': event.data ? event.data.first_name + ' ' + event.data.last_name : '-'
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.start
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.end
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.timezone
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GlobalVariables.timezones[event.data.provider.timezone]
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<hr/>'),
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'text-center',
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'class': 'delete-popover btn btn-danger ' + displayDelete,
|
||||
'text': EALang.delete
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'close-popover btn btn-default',
|
||||
'text': EALang.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
} else {
|
||||
displayEdit = (GlobalVariables.user.privileges.appointments.edit === true)
|
||||
? '' : 'hide';
|
||||
displayDelete = (GlobalVariables.user.privileges.appointments.delete === true)
|
||||
? '' : 'hide';
|
||||
|
||||
html =
|
||||
'<style type="text/css">'
|
||||
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
|
||||
+ '.popover-content button {margin-right: 10px;}'
|
||||
+ '</style>' +
|
||||
'<strong>' + EALang.start + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.end + '</strong> '
|
||||
+ GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.timezone + '</strong> '
|
||||
+ GlobalVariables.timezones[event.data.provider.timezone]
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.service + '</strong> '
|
||||
+ event.data.service.name
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.provider + '</strong> '
|
||||
+ GeneralFunctions.renderMapIcon(event.data.customer) + ' '
|
||||
+ event.data.provider.first_name + ' '
|
||||
+ event.data.provider.last_name
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.customer + '</strong> '
|
||||
+ GeneralFunctions.renderMapIcon(event.data.customer) + ' '
|
||||
+ event.data.customer.first_name + ' '
|
||||
+ event.data.customer.last_name
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.email + '</strong> '
|
||||
+ GeneralFunctions.renderMailIcon(event.data.customer.email) + ' '
|
||||
+ event.data.customer.email
|
||||
+ '<br>' +
|
||||
'<strong>' + EALang.phone_number + '</strong> '
|
||||
+ GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number) + ' '
|
||||
+ event.data.customer.phone_number
|
||||
+ '<hr>' +
|
||||
'<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>' +
|
||||
'</div>';
|
||||
$html = $('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': EALang.start
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.start.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.end
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GeneralFunctions.formatDate(event.end.format('YYYY-MM-DD HH:mm:ss'), GlobalVariables.dateFormat, true)
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.timezone
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': GlobalVariables.timezones[event.data.provider.timezone]
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.service
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': event.data.service.name
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.provider
|
||||
}),
|
||||
GeneralFunctions.renderMapIcon(event.data.provider),
|
||||
$('<span/>', {
|
||||
'text': event.data.provider.first_name + ' ' + event.data.provider.last_name
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.customer
|
||||
}),
|
||||
GeneralFunctions.renderMapIcon(event.data.customer),
|
||||
$('<span/>', {
|
||||
'text': event.data.customer.first_name + ' ' + event.data.customer.last_name
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.email
|
||||
}),
|
||||
GeneralFunctions.renderMailIcon(event.data.customer.email),
|
||||
$('<span/>', {
|
||||
'text': event.data.customer.email
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<strong/>', {
|
||||
'text': EALang.phone_number
|
||||
}),
|
||||
GeneralFunctions.renderPhoneIcon(event.data.customer.phone_number),
|
||||
$('<span/>', {
|
||||
'text': event.data.customer.phone_number
|
||||
}),
|
||||
$('<br/>'),
|
||||
|
||||
$('<hr/>'),
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'text-center',
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'class': 'edit-popover btn btn-primary ' + displayEdit,
|
||||
'text': EALang.edit
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'delete-popover btn btn-danger ' + displayDelete,
|
||||
'text': EALang.delete
|
||||
}),
|
||||
$('<button/>', {
|
||||
'class': 'close-popover btn btn-default',
|
||||
'text': EALang.close
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
});
|
||||
}
|
||||
|
||||
$(jsEvent.target).popover({
|
||||
placement: 'top',
|
||||
title: event.title,
|
||||
content: html,
|
||||
content: $html,
|
||||
html: true,
|
||||
container: '#calendar',
|
||||
trigger: 'manual'
|
||||
|
|
|
|||
|
|
@ -181,14 +181,19 @@
|
|||
.done(function (response) {
|
||||
this.filterResults = response;
|
||||
|
||||
$('#filter-categories .results').html('');
|
||||
$('#filter-categories .results').empty();
|
||||
$.each(response, function (index, category) {
|
||||
var html = this.getFilterHtml(category);
|
||||
$('#filter-categories .results').append(html);
|
||||
$('#filter-categories .results')
|
||||
.append(this.getFilterHtml(category))
|
||||
.append($('<hr/>'));
|
||||
}.bind(this));
|
||||
|
||||
if (response.length === 0) {
|
||||
$('#filter-categories .results').html('<em>' + EALang.no_records_found + '</em>');
|
||||
$('#filter-categories .results').append(
|
||||
$('<em/>', {
|
||||
'text': EALang.no_records_found
|
||||
})
|
||||
);
|
||||
} else if (response.length === this.filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
|
|
@ -319,12 +324,16 @@
|
|||
* @return {String} Returns the record HTML code.
|
||||
*/
|
||||
CategoriesHelper.prototype.getFilterHtml = function (category) {
|
||||
var html =
|
||||
'<div class="category-row entry" data-id="' + category.id + '">' +
|
||||
'<strong>' + category.name + '</strong>' +
|
||||
'</div><hr>';
|
||||
|
||||
return html;
|
||||
return $('<div/>', {
|
||||
'class': 'category-row entry',
|
||||
'data-id': category.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': category.name
|
||||
}),
|
||||
$('<br/>'),
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -330,13 +330,24 @@
|
|||
|
||||
var start = GeneralFunctions.formatDate(Date.parse(appointment.start_datetime), GlobalVariables.dateFormat, true);
|
||||
var end = GeneralFunctions.formatDate(Date.parse(appointment.end_datetime), GlobalVariables.dateFormat, true);
|
||||
var html =
|
||||
'<div class="appointment-row" data-id="' + appointment.id + '">' +
|
||||
start + ' - ' + end + '<br>' +
|
||||
appointment.service.name + ', ' +
|
||||
appointment.provider.first_name + ' ' + appointment.provider.last_name +
|
||||
'</div>';
|
||||
$('#customer-appointments').append(html);
|
||||
|
||||
$('<div/>', {
|
||||
'class': 'appointment-row',
|
||||
'data-id': appointment.id,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'text': start + ' - ' + end
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': appointment.service.name
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('#customer-appointments');
|
||||
});
|
||||
|
||||
$('#appointment-details').empty();
|
||||
|
|
@ -365,14 +376,19 @@
|
|||
.done(function (response) {
|
||||
this.filterResults = response;
|
||||
|
||||
$('#filter-customers .results').html('');
|
||||
$('#filter-customers .results').empty();
|
||||
$.each(response, function (index, customer) {
|
||||
var html = this.getFilterHtml(customer);
|
||||
$('#filter-customers .results').append(html);
|
||||
$('#filter-customers .results')
|
||||
.append(this.getFilterHtml(customer))
|
||||
.append($('<hr/>'));
|
||||
}.bind(this));
|
||||
|
||||
if (!response.length) {
|
||||
$('#filter-customers .results').html('<em>' + EALang.no_records_found + '</em>');
|
||||
$('#filter-customers .results').append(
|
||||
$('<em/>', {
|
||||
'text': EALang.no_records_found
|
||||
})
|
||||
);
|
||||
} else if (response.length === this.filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
|
|
@ -403,18 +419,25 @@
|
|||
*/
|
||||
CustomersHelper.prototype.getFilterHtml = function (customer) {
|
||||
var name = customer.first_name + ' ' + customer.last_name;
|
||||
|
||||
var info = customer.email;
|
||||
|
||||
info = customer.phone_number ? info + ', ' + customer.phone_number : info;
|
||||
|
||||
var html =
|
||||
'<div class="entry" data-id="' + customer.id + '">' +
|
||||
'<strong>' +
|
||||
name +
|
||||
'</strong><br>' +
|
||||
info +
|
||||
'</div><hr>';
|
||||
|
||||
return html;
|
||||
return $('<div/>', {
|
||||
'class': 'customer-row entry',
|
||||
'data-id': customer.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': info
|
||||
}),
|
||||
$('<br/>'),
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -459,15 +482,29 @@
|
|||
var end = GeneralFunctions.formatDate(Date.parse(appointment.end_datetime), GlobalVariables.dateFormat, true);
|
||||
var timezone = GlobalVariables.timezones[GlobalVariables.user.timezone];
|
||||
|
||||
var html =
|
||||
'<div>' +
|
||||
'<strong>' + appointment.service.name + '</strong><br>' +
|
||||
appointment.provider.first_name + ' ' + appointment.provider.last_name + '<br>' +
|
||||
start + ' - ' + end + '<br>' +
|
||||
EALang.timezone + ': ' + timezone + '<br>' +
|
||||
'</div>';
|
||||
$('<div/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': appointment.service.name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': appointment.provider.first_name + ' ' + appointment.provider.last_name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': EALang.timezone + ': ' + timezone
|
||||
}),
|
||||
$('<br/>')
|
||||
]
|
||||
})
|
||||
.appendTo('#appointment-details');
|
||||
|
||||
$('#appointment-details').html(html).removeClass('hidden');
|
||||
$('#appointment-details').removeClass('hidden');
|
||||
};
|
||||
|
||||
window.CustomersHelper = CustomersHelper;
|
||||
|
|
|
|||
|
|
@ -72,12 +72,21 @@
|
|||
|
||||
// Add dedicated provider link.
|
||||
var dedicatedUrl = GlobalVariables.baseUrl + '/index.php?service=' + encodeURIComponent(service.id);
|
||||
var linkHtml = '<a href="' + dedicatedUrl + '"><span class="glyphicon glyphicon-link"></span></a>';
|
||||
|
||||
var $link = $('<a/>', {
|
||||
'href': dedicatedUrl,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-link'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
$('#services .record-details h3')
|
||||
.find('a')
|
||||
.remove()
|
||||
.end()
|
||||
.append(linkHtml);
|
||||
.append($link);
|
||||
|
||||
instance.display(service);
|
||||
$('#filter-services .selected').removeClass('selected');
|
||||
|
|
@ -319,14 +328,19 @@
|
|||
.done(function (response) {
|
||||
this.filterResults = response;
|
||||
|
||||
$('#filter-services .results').html('');
|
||||
$('#filter-services .results').empty();
|
||||
$.each(response, function (index, service) {
|
||||
var html = ServicesHelper.prototype.getFilterHtml(service);
|
||||
$('#filter-services .results').append(html);
|
||||
$('#filter-services .results')
|
||||
.append(ServicesHelper.prototype.getFilterHtml(service))
|
||||
.append( $('<hr/>'))
|
||||
});
|
||||
|
||||
if (response.length === 0) {
|
||||
$('#filter-services .results').html('<em>' + EALang.no_records_found + '</em>');
|
||||
$('#filter-services .results').append(
|
||||
$('<em/>', {
|
||||
'text': EALang.no_records_found
|
||||
})
|
||||
);
|
||||
} else if (response.length === this.filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
|
|
@ -357,14 +371,24 @@
|
|||
* @return {String} The HTML code that represents the record on the filter results list.
|
||||
*/
|
||||
ServicesHelper.prototype.getFilterHtml = function (service) {
|
||||
var html =
|
||||
'<div class="service-row entry" data-id="' + service.id + '">' +
|
||||
'<strong>' + service.name + '</strong><br>' +
|
||||
service.duration + ' min - ' +
|
||||
service.price + ' ' + service.currency + '<br>' +
|
||||
'</div><hr>';
|
||||
var name = service.name;
|
||||
|
||||
return html;
|
||||
var info = service.duration + ' min - ' + service.price + ' ' + service.currency;
|
||||
|
||||
return $('<div/>', {
|
||||
'class': 'service-row entry',
|
||||
'data-id': service.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': info
|
||||
}),
|
||||
$('<br/>')
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -62,33 +62,47 @@ window.BackendUsers = window.BackendUsers || {};
|
|||
helper.bindEventHandlers();
|
||||
|
||||
// Fill the services and providers list boxes.
|
||||
var html = '<div>';
|
||||
$.each(GlobalVariables.services, function (index, service) {
|
||||
html +=
|
||||
'<div class="checkbox">' +
|
||||
'<label class="checkbox">' +
|
||||
'<input type="checkbox" data-id="' + service.id + '" />' +
|
||||
service.name +
|
||||
'</label>' +
|
||||
'</div>';
|
||||
|
||||
GlobalVariables.services.forEach(function(service) {
|
||||
$('<div/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<label/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'type': 'checkbox',
|
||||
'data-id': service.id
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': service.name
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('#provider-services');
|
||||
});
|
||||
html += '</div>';
|
||||
$('#provider-services').html(html);
|
||||
|
||||
html = '<div>';
|
||||
$.each(GlobalVariables.providers, function (index, provider) {
|
||||
html +=
|
||||
'<div class="checkbox">' +
|
||||
'<label class="checkbox">' +
|
||||
'<input type="checkbox" data-id="' + provider.id + '" />' +
|
||||
provider.first_name + ' ' + provider.last_name +
|
||||
'</label>' +
|
||||
'</div>';
|
||||
|
||||
GlobalVariables.providers.forEach(function(provider) {
|
||||
$('<div/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<label/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'type': 'checkbox',
|
||||
'data-id': provider.id
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': provider.first_name + ' ' + provider.last_name
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('#secretary-providers');
|
||||
});
|
||||
html += '</div>';
|
||||
$('#secretary-providers').html(html);
|
||||
|
||||
$('#reset-working-plan').qtip({
|
||||
position: {
|
||||
|
|
@ -136,19 +150,29 @@ window.BackendUsers = window.BackendUsers || {};
|
|||
.done(function (response) {
|
||||
GlobalVariables.providers = response;
|
||||
|
||||
var html = '<div>';
|
||||
$.each(GlobalVariables.providers, function (index, provider) {
|
||||
html +=
|
||||
'<div class="checkbox">' +
|
||||
'<label class="checkbox">' +
|
||||
'<input type="checkbox" data-id="' + provider.id + '" />' +
|
||||
provider.first_name + ' ' + provider.last_name +
|
||||
'</label>' +
|
||||
'</div>';
|
||||
GlobalVariables.providers.forEach(function(provider) {
|
||||
$('<div/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<label/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'type': 'checkbox',
|
||||
'data-id': provider.id,
|
||||
'prop': {
|
||||
'disabled': true
|
||||
}
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': provider.first_name + ' ' + provider.last_name
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('#secretary-providers');
|
||||
});
|
||||
html += '</div>';
|
||||
$('#secretary-providers').html(html);
|
||||
$('#secretary-providers input:checkbox').prop('disabled', true);
|
||||
})
|
||||
.fail(GeneralFunctions.ajaxFailureHandler);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -361,14 +361,19 @@
|
|||
.done(function (response) {
|
||||
this.filterResults = response;
|
||||
|
||||
$('#filter-admins .results').html('');
|
||||
$('#filter-admins .results').empty();
|
||||
$.each(response, function (index, admin) {
|
||||
var html = this.getFilterHtml(admin);
|
||||
$('#filter-admins .results').append(html);
|
||||
$('#filter-admins .results')
|
||||
.append(this.getFilterHtml(admin))
|
||||
.append($('<hr/>'));
|
||||
}.bind(this));
|
||||
|
||||
if (!response.length) {
|
||||
$('#filter-admins .results').html('<em>' + EALang.no_records_found + '</em>')
|
||||
$('#filter-admins .results').append(
|
||||
$('<em/>', {
|
||||
'text': EALang.no_records_found
|
||||
})
|
||||
);
|
||||
} else if (response.length === this.filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
|
|
@ -398,19 +403,27 @@
|
|||
*/
|
||||
AdminsHelper.prototype.getFilterHtml = function (admin) {
|
||||
var name = admin.first_name + ' ' + admin.last_name;
|
||||
|
||||
var info = admin.email;
|
||||
|
||||
info = admin.mobile_number ? info + ', ' + admin.mobile_number : info;
|
||||
|
||||
info = admin.phone_number ? info + ', ' + admin.phone_number : info;
|
||||
|
||||
var html =
|
||||
'<div class="admin-row entry" data-id="' + admin.id + '">' +
|
||||
'<strong>' + name + '</strong><br>' +
|
||||
info + '<br>' +
|
||||
'</div><hr>';
|
||||
|
||||
return html;
|
||||
return $('<div/>', {
|
||||
'class': 'admin-row entry',
|
||||
'data-id': admin.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': info
|
||||
}),
|
||||
$('<br/>'),
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -403,12 +403,21 @@
|
|||
|
||||
// Add dedicated provider link.
|
||||
var dedicatedUrl = GlobalVariables.baseUrl + '/index.php?provider=' + encodeURIComponent(provider.id);
|
||||
var linkHtml = '<a href="' + dedicatedUrl + '"><span class="glyphicon glyphicon-link"></span></a>';
|
||||
|
||||
var $link = $('<a/>', {
|
||||
'href': dedicatedUrl,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-link'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
$('#providers .details-view h3')
|
||||
.find('a')
|
||||
.remove()
|
||||
.end()
|
||||
.append(linkHtml);
|
||||
.append($link);
|
||||
|
||||
$('#provider-services a').remove();
|
||||
$('#provider-services input:checkbox').prop('checked', false);
|
||||
|
|
@ -419,8 +428,17 @@
|
|||
// Add dedicated service-provider link.
|
||||
dedicatedUrl = GlobalVariables.baseUrl + '/index.php?provider=' + encodeURIComponent(provider.id)
|
||||
+ '&service=' + encodeURIComponent(serviceId);
|
||||
linkHtml = '<a href="' + dedicatedUrl + '"><span class="glyphicon glyphicon-link"></span></a>';
|
||||
$(this).parent().append(linkHtml);
|
||||
|
||||
$link = $('<a/>', {
|
||||
'href': dedicatedUrl,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-link'
|
||||
})
|
||||
]
|
||||
});
|
||||
|
||||
$(this).parent().append($link);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
|
@ -457,14 +475,19 @@
|
|||
.done(function (response) {
|
||||
this.filterResults = response;
|
||||
|
||||
$('#filter-providers .results').html('');
|
||||
$('#filter-providers .results').empty();
|
||||
$.each(response, function (index, provider) {
|
||||
var html = this.getFilterHtml(provider);
|
||||
$('#filter-providers .results').append(html);
|
||||
$('#filter-providers .results')
|
||||
.append(this.getFilterHtml(provider))
|
||||
.append($('<hr/>'));
|
||||
}.bind(this));
|
||||
|
||||
if (!response.length) {
|
||||
$('#filter-providers .results').html('<em>' + EALang.no_records_found + '</em>')
|
||||
$('#filter-providers .results').append(
|
||||
$('<em/>', {
|
||||
'text': EALang.no_records_found
|
||||
})
|
||||
);
|
||||
} else if (response.length === this.filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
|
|
@ -493,20 +516,28 @@
|
|||
* @return {String} The html code that represents the record on the filter results list.
|
||||
*/
|
||||
ProvidersHelper.prototype.getFilterHtml = function (provider) {
|
||||
var name = provider.first_name + ' ' + provider.last_name,
|
||||
info = provider.email;
|
||||
var name = provider.first_name + ' ' + provider.last_name;
|
||||
|
||||
var info = provider.email;
|
||||
|
||||
info = provider.mobile_number ? info + ', ' + provider.mobile_number : info;
|
||||
|
||||
info = provider.phone_number ? info + ', ' + provider.phone_number : info;
|
||||
|
||||
var html =
|
||||
'<div class="provider-row entry" data-id="' + provider.id + '">' +
|
||||
'<strong>' + name + '</strong><br>' +
|
||||
info + '<br>' +
|
||||
'</div><hr>';
|
||||
|
||||
return html;
|
||||
return $('<div/>', {
|
||||
'class': 'provider-row entry',
|
||||
'data-id': provider.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': info
|
||||
}),
|
||||
$('<br/>'),
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -203,7 +203,7 @@
|
|||
/**
|
||||
* Save secretary record to database.
|
||||
*
|
||||
* @param {Object} secretary Contains the admin record data. If an 'id' value is provided
|
||||
* @param {Object} secretary Contains the secretary record data. If an 'id' value is provided
|
||||
* then the update operation is going to be executed.
|
||||
*/
|
||||
SecretariesHelper.prototype.save = function (secretary) {
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
};
|
||||
|
||||
/**
|
||||
* Resets the admin tab form back to its initial state.
|
||||
* Resets the secretary tab form back to its initial state.
|
||||
*/
|
||||
SecretariesHelper.prototype.resetForm = function () {
|
||||
$('#secretaries .record-details').find('input, textarea').val('');
|
||||
|
|
@ -326,7 +326,7 @@
|
|||
};
|
||||
|
||||
/**
|
||||
* Display a secretary record into the admin form.
|
||||
* Display a secretary record into the secretary form.
|
||||
*
|
||||
* @param {Object} secretary Contains the secretary record data.
|
||||
*/
|
||||
|
|
@ -385,14 +385,19 @@
|
|||
.done(function (response) {
|
||||
this.filterResults = response;
|
||||
|
||||
$('#filter-secretaries .results').html('');
|
||||
$('#filter-secretaries .results').empty();
|
||||
$.each(response, function (index, secretary) {
|
||||
var html = this.getFilterHtml(secretary);
|
||||
$('#filter-secretaries .results').append(html);
|
||||
$('#filter-secretaries .results')
|
||||
.append(this.getFilterHtml(secretary))
|
||||
.append($('<hr/>'));
|
||||
}.bind(this));
|
||||
|
||||
if (!response.length) {
|
||||
$('#filter-secretaries .results').html('<em>' + EALang.no_records_found + '</em>')
|
||||
$('#filter-secretaries .results').append(
|
||||
$('<em/>', {
|
||||
'text': EALang.no_records_found
|
||||
})
|
||||
);
|
||||
} else if (response.length === this.filterLimit) {
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
|
|
@ -422,19 +427,27 @@
|
|||
*/
|
||||
SecretariesHelper.prototype.getFilterHtml = function (secretary) {
|
||||
var name = secretary.first_name + ' ' + secretary.last_name;
|
||||
|
||||
var info = secretary.email;
|
||||
|
||||
info = secretary.mobile_number ? info + ', ' + secretary.mobile_number : info;
|
||||
|
||||
info = secretary.phone_number ? info + ', ' + secretary.phone_number : info;
|
||||
|
||||
var html =
|
||||
'<div class="secretary-row entry" data-id="' + secretary.id + '">' +
|
||||
'<strong>' + name + '</strong><br>' +
|
||||
info + '<br>' +
|
||||
'</div><hr>';
|
||||
|
||||
return html;
|
||||
return $('<div/>', {
|
||||
'class': 'secretary-row entry',
|
||||
'data-id': secretary.id,
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'text': name
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': info
|
||||
}),
|
||||
$('<br/>'),
|
||||
]
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -457,9 +470,9 @@
|
|||
});
|
||||
|
||||
if (display) {
|
||||
$.each(this.filterResults, function (index, admin) {
|
||||
if (Number(admin.id) === Number(id)) {
|
||||
this.display(admin);
|
||||
$.each(this.filterResults, function (index, secretary) {
|
||||
if (Number(secretary.id) === Number(id)) {
|
||||
this.display(secretary);
|
||||
$('#edit-secretary, #delete-secretary').prop('disabled', false);
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ window.FrontendBook = window.FrontendBook || {};
|
|||
FrontendBookApi.getUnavailableDates($('#select-provider').val(), $(this).val(),
|
||||
$('#select-date').datepicker('getDate').toString('yyyy-MM-dd'));
|
||||
FrontendBook.updateConfirmFrame();
|
||||
updateServiceDescription($('#select-service').val(), $('#service-description'));
|
||||
updateServiceDescription(serviceId);
|
||||
});
|
||||
|
||||
/**
|
||||
|
|
@ -520,25 +520,43 @@ window.FrontendBook = window.FrontendBook || {};
|
|||
var servicePrice = '';
|
||||
var serviceCurrency = '';
|
||||
|
||||
$.each(GlobalVariables.availableServices, function (index, service) {
|
||||
GlobalVariables.availableServices.forEach(function (service, index) {
|
||||
if (Number(service.id) === Number(serviceId) && Number(service.price) > 0) {
|
||||
servicePrice = '<br>' + service.price;
|
||||
servicePrice = service.price;
|
||||
serviceCurrency = service.currency;
|
||||
return false; // break loop
|
||||
}
|
||||
});
|
||||
|
||||
var html =
|
||||
'<h4>' + $('#select-service option:selected').text() + '</h4>' +
|
||||
'<p>'
|
||||
+ '<strong class="text-primary">'
|
||||
+ $('#select-provider option:selected').text() + '<br>'
|
||||
+ selectedDate + ' ' + $('.selected-hour').text() + '<br>' + $('#select-timezone option:selected').text()
|
||||
+ servicePrice + ' ' + serviceCurrency
|
||||
+ '</strong>' +
|
||||
'</p>';
|
||||
|
||||
$('#appointment-details').html(html);
|
||||
$('<div/>', {
|
||||
'html': [
|
||||
$('<h4/>', {
|
||||
'text': $('#select-service option:selected').text()
|
||||
}),
|
||||
$('<p/>', {
|
||||
'html': [
|
||||
$('<strong/>', {
|
||||
'class': 'text-primary',
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'text': $('#select-provider option:selected').text()
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': selectedDate + ' ' + $('.selected-hour').text()
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': $('#select-timezone option:selected').text()
|
||||
+ servicePrice + ' ' + serviceCurrency
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('#appointment-details');
|
||||
|
||||
// Customer Details
|
||||
var firstName = GeneralFunctions.escapeHtml($('#first-name').val());
|
||||
|
|
@ -549,24 +567,41 @@ window.FrontendBook = window.FrontendBook || {};
|
|||
var city = GeneralFunctions.escapeHtml($('#city').val());
|
||||
var zipCode = GeneralFunctions.escapeHtml($('#zip-code').val());
|
||||
|
||||
html =
|
||||
'<h4>' + firstName + ' ' + lastName + '</h4>' +
|
||||
'<p>' +
|
||||
EALang.phone_number + ': ' + phoneNumber +
|
||||
'<br/>' +
|
||||
EALang.email + ': ' + email +
|
||||
'<br/>' +
|
||||
EALang.address + ': ' + address +
|
||||
'<br/>' +
|
||||
EALang.city + ': ' + city +
|
||||
'<br/>' +
|
||||
EALang.zip_code + ': ' + zipCode +
|
||||
'</p>';
|
||||
$('<div/>', {
|
||||
'html': [
|
||||
$('<h4/>)', {
|
||||
'text': firstName + ' ' + lastName
|
||||
}),
|
||||
$('<p/>', {
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'text': EALang.phone_number + ': ' + phoneNumber
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': EALang.email + ': ' + email
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': EALang.address + ': ' + address
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': EALang.city + ': ' + city
|
||||
}),
|
||||
$('<br/>'),
|
||||
$('<span/>', {
|
||||
'text': EALang.zip_code + ': ' + zipCode
|
||||
}),
|
||||
$('<br/>'),
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('#customer-details');
|
||||
|
||||
$('#customer-details').html(html);
|
||||
|
||||
// Update appointment form data for submission to server when the user confirms
|
||||
// the appointment.
|
||||
// Update appointment form data for submission to server when the user confirms the appointment.
|
||||
var data = {};
|
||||
|
||||
data.customer = {
|
||||
|
|
@ -680,41 +715,58 @@ window.FrontendBook = window.FrontendBook || {};
|
|||
* customers upon selecting the correct service.
|
||||
*
|
||||
* @param {Number} serviceId The selected service record id.
|
||||
* @param {Object} $div The destination div jquery object (e.g. provide $('#div-id')
|
||||
* object as value).
|
||||
*/
|
||||
function updateServiceDescription(serviceId, $div) {
|
||||
var html = '';
|
||||
function updateServiceDescription(serviceId) {
|
||||
var $serviceDescription = $('#service-description');
|
||||
|
||||
$.each(GlobalVariables.availableServices, function (index, service) {
|
||||
if (Number(service.id) === Number(serviceId)) {
|
||||
html = '<strong>' + service.name + ' </strong>';
|
||||
$serviceDescription.empty();
|
||||
|
||||
if (service.description) {
|
||||
html += '<br>' + service.description + '<br>';
|
||||
}
|
||||
var service = GlobalVariables.availableServices.filter(function(availableService) {
|
||||
return Number(availableService.id) === Number(serviceId);
|
||||
}).shift();
|
||||
|
||||
if (service.duration) {
|
||||
html += '[' + EALang.duration + ' ' + service.duration + ' ' + EALang.minutes + ']';
|
||||
}
|
||||
if (!service) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (Number(service.price) > 0) {
|
||||
html += '[' + EALang.price + ' ' + service.price + ' ' + service.currency + ']';
|
||||
}
|
||||
$('<strong/>', {
|
||||
'text': service.name
|
||||
})
|
||||
.appendTo($serviceDescription);
|
||||
|
||||
if (service.location) {
|
||||
html += '[' + EALang.location + ' ' + service.location + ']';
|
||||
}
|
||||
if (service.description) {
|
||||
$('<br/>')
|
||||
.appendTo($serviceDescription);
|
||||
|
||||
html += '<br>';
|
||||
$('<span/>', {
|
||||
'text': service.description
|
||||
})
|
||||
.appendTo($serviceDescription);
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
$('<br/>')
|
||||
.appendTo($serviceDescription);
|
||||
}
|
||||
|
||||
$div
|
||||
.html(html)
|
||||
.toggle(html);
|
||||
if (service.duration) {
|
||||
$('<span/>', {
|
||||
'text': '[' + EALang.duration + ' ' + service.duration + ' ' + EALang.minutes + ']'
|
||||
})
|
||||
.appendTo($serviceDescription);
|
||||
}
|
||||
|
||||
if (Number(service.price) > 0) {
|
||||
$('<span/>', {
|
||||
'text': '[' + EALang.price + ' ' + service.price + ' ' + service.currency + ']'
|
||||
})
|
||||
.appendTo($serviceDescription);
|
||||
}
|
||||
|
||||
if (service.location) {
|
||||
$('<span/>', {
|
||||
'text': '[' + EALang.location + ' ' + service.location + ']'
|
||||
})
|
||||
.appendTo($serviceDescription);
|
||||
}
|
||||
}
|
||||
|
||||
})(window.FrontendBook);
|
||||
|
|
|
|||
|
|
@ -90,24 +90,43 @@ window.FrontendBookApi = window.FrontendBookApi || {};
|
|||
|
||||
var selectedTimezone = $('#select-timezone').val();
|
||||
|
||||
var currColumn = 1;
|
||||
var currentColumn = 1;
|
||||
|
||||
$('#available-hours').html('<div style="width:80px; float:left;"></div>');
|
||||
$('#available-hours').html(
|
||||
$('<div/>', {
|
||||
'css': {
|
||||
'width': '80px',
|
||||
'float': 'left'
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm a' : 'HH:mm';
|
||||
|
||||
response.forEach(function (availableHour, index) {
|
||||
if ((currColumn * 10) < (index + 1)) {
|
||||
currColumn++;
|
||||
$('#available-hours').append('<div style="width:80px; float:left;"></div>');
|
||||
if ((currentColumn * 10) < (index + 1)) {
|
||||
currentColumn++;
|
||||
$('#available-hours').append(
|
||||
$('<div/>', {
|
||||
'css': {
|
||||
'width': '80px',
|
||||
'float': 'left'
|
||||
}
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
var availableHourMoment = moment
|
||||
.tz(selDate + ' ' + availableHour + ':00', providerTimezone)
|
||||
.tz(selectedTimezone);
|
||||
|
||||
$('#available-hours div:eq(' + (currColumn - 1) + ')').append(
|
||||
'<span class="available-hour">' + availableHourMoment.format(timeFormat) + '</span><br/>');
|
||||
$('#available-hours div:eq(' + (currentColumn - 1) + ')').append(
|
||||
$('<span/>', {
|
||||
'class': 'available-hour',
|
||||
'text': availableHourMoment.format(timeFormat)
|
||||
}),
|
||||
$('<br/>')
|
||||
);
|
||||
});
|
||||
|
||||
if (FrontendBook.manageMode) {
|
||||
|
|
|
|||
|
|
@ -83,17 +83,22 @@ $(document).ready(function () {
|
|||
}
|
||||
|
||||
$('#success-frame').append(
|
||||
'<br><br>' +
|
||||
'<div class="alert alert-success col-xs-12">' +
|
||||
'<h4>' + EALang.success + '</h4>' +
|
||||
'<p>' +
|
||||
EALang.appointment_added_to_google_calendar +
|
||||
'<br>' +
|
||||
'<a href="' + response.htmlLink + '" target="_blank">' +
|
||||
EALang.view_appointment_in_google_calendar +
|
||||
'</a>' +
|
||||
'</p>' +
|
||||
'</div>'
|
||||
$('<br/>'),
|
||||
$('<div/>', {
|
||||
'class': 'alert alert-success col-xs-12',
|
||||
'html': [
|
||||
$('<h4/>', {
|
||||
'text': EALang.success
|
||||
}),
|
||||
$('<p/>', {
|
||||
'text': EALang.appointment_added_to_google_calendar
|
||||
}),
|
||||
$('<a/>', {
|
||||
'href': response.htmlLink,
|
||||
'text': EALang.view_appointment_in_google_calendar
|
||||
})
|
||||
]
|
||||
})
|
||||
);
|
||||
$('#add-to-google-calendar').hide();
|
||||
});
|
||||
|
|
@ -101,13 +106,22 @@ $(document).ready(function () {
|
|||
} catch (error) {
|
||||
// The user denied access or something else happened, display corresponding message on the screen.
|
||||
$('#success-frame').append(
|
||||
'<div class="alert alert-danger col-xs-12">' +
|
||||
'<h4>' + EALang.oops_something_went_wrong + '</h4>' +
|
||||
'<p>' +
|
||||
EALang.could_not_add_to_google_calendar +
|
||||
'<pre>' + error.message + '</pre>' +
|
||||
'</p>' +
|
||||
'</div>');
|
||||
$('<br/>'),
|
||||
$('<div/>', {
|
||||
'class': 'alert alert-danger col-xs-12',
|
||||
'html': [
|
||||
$('<h4/>', {
|
||||
'text': EALang.oops_something_went_wrong
|
||||
}),
|
||||
$('<p/>', {
|
||||
'text': EALang.could_not_add_to_google_calendar
|
||||
}),
|
||||
$('<pre/>', {
|
||||
'text': error.message
|
||||
}),
|
||||
]
|
||||
})
|
||||
);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -222,41 +222,6 @@ window.GeneralFunctions = window.GeneralFunctions || {};
|
|||
return re.test(email);
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert AJAX exceptions to HTML.
|
||||
*
|
||||
* This method returns the exception HTML display for javascript ajax calls. It uses the Bootstrap collapse
|
||||
* module to show exception messages when the user opens the "Details" collapse component.
|
||||
*
|
||||
* @param {Array} exceptions Contains the exceptions to be displayed.
|
||||
*
|
||||
* @return {String} Returns the html markup for the exceptions.
|
||||
*/
|
||||
exports.exceptionsToHtml = function (exceptions) {
|
||||
var html =
|
||||
'<div class="accordion" id="error-accordion">' +
|
||||
'<div class="accordion-group">' +
|
||||
'<div class="accordion-heading">' +
|
||||
'<button class="accordion-toggle btn btn-default btn-xs" data-toggle="collapse" ' +
|
||||
'data-parent="#error-accordion" href="#error-technical">' +
|
||||
EALang.details +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'<br>';
|
||||
|
||||
$.each(exceptions, function (index, exception) {
|
||||
html +=
|
||||
'<div id="error-technical" class="accordion-body collapse">' +
|
||||
'<div class="accordion-inner">' +
|
||||
'<pre>' + exception.message + '</pre>' +
|
||||
'</div>' +
|
||||
'</div>';
|
||||
});
|
||||
|
||||
html += '</div></div>';
|
||||
|
||||
return html;
|
||||
};
|
||||
|
||||
/**
|
||||
* Makes the first letter of the string upper case.
|
||||
|
|
|
|||
|
|
@ -52,28 +52,59 @@
|
|||
$('.breaks tbody').empty();
|
||||
|
||||
// Build working plan day list starting with the first weekday as set in the General settings
|
||||
$.each(workingPlanSorted, function (index, workingDay) {
|
||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
|
||||
|
||||
$.each(workingPlanSorted, function (index, workingDay) {
|
||||
var day = this.convertValueToDay(index);
|
||||
|
||||
var dayTranslatedName = GeneralFunctions.upperCaseFirstLetter(day)
|
||||
|
||||
var tr =
|
||||
'<tr>' +
|
||||
'<td>' +
|
||||
'<div class="checkbox">' +
|
||||
'<label> <input type="checkbox" id="' + index + '">' + dayTranslatedName + '</label>' +
|
||||
'</div>' +
|
||||
'</td>' +
|
||||
'<td><input id="'+index+'-start" class="work-start form-control input-sm"></td>' +
|
||||
'<td><input id="'+index+'-end" class="work-end form-control input-sm"></td>' +
|
||||
'</tr>';
|
||||
|
||||
$('.working-plan tbody').append(tr);
|
||||
$('<tr/>', {
|
||||
'html': [
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<div/>', {
|
||||
'class': 'checkbox',
|
||||
'html': [
|
||||
$('<label/>', {
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'type': 'checkbox',
|
||||
'id': index,
|
||||
}),
|
||||
$('<span/>', {
|
||||
'text': dayTranslatedName
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'id': index + '-start',
|
||||
'class': 'work-start form-control input-sm'
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<input/>', {
|
||||
'id': index + '-end',
|
||||
'class': 'work-start form-control input-sm'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('.working-plan tbody');
|
||||
|
||||
if (workingDay) {
|
||||
$('#' + index).prop('checked', true);
|
||||
$('#' + index + '-start').val(Date.parse(workingDay.start).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase());
|
||||
$('#' + index + '-end').val(Date.parse(workingDay.end).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase());
|
||||
$('#' + index + '-start').val(Date.parse(workingDay.start).toString(timeFormat).toUpperCase());
|
||||
$('#' + index + '-end').val(Date.parse(workingDay.end).toString(timeFormat).toUpperCase());
|
||||
|
||||
// Sort day's breaks according to the starting hour
|
||||
workingDay.breaks.sort(function (break1, break2) {
|
||||
|
|
@ -82,30 +113,83 @@
|
|||
});
|
||||
|
||||
// Add the day's breaks on the breaks table.
|
||||
$.each(workingDay.breaks, function (i, brk) {
|
||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
|
||||
|
||||
tr =
|
||||
'<tr>' +
|
||||
'<td class="break-day editable">' + dayTranslatedName + '</td>' +
|
||||
'<td class="break-start editable">' + Date.parse(brk.start).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase() + '</td>' +
|
||||
'<td class="break-end editable">' + Date.parse(brk.end).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase() + '</td>' +
|
||||
'<td>' +
|
||||
'<button type="button" class="btn btn-default btn-sm edit-break" title="' + EALang.edit + '">' +
|
||||
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm delete-break" title="' + EALang.delete + '">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm save-break hidden" title="' + EALang.save + '">' +
|
||||
'<span class="glyphicon glyphicon-ok"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm cancel-break hidden" title="' + EALang.cancel + '">' +
|
||||
'<span class="glyphicon glyphicon-ban-circle"></span>' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
$('.breaks tbody').append(tr);
|
||||
}.bind(this));
|
||||
workingDay.breaks.forEach(function(workingDayBreak, index) {
|
||||
$('<tr/>', {
|
||||
'html': [
|
||||
$('<td/>', {
|
||||
'class': 'break-day editable',
|
||||
'text': dayTranslatedName
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'break-start editable',
|
||||
'text': Date.parse(workingDayBreak.start).toString(timeFormat).toUpperCase()
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'break-end editable',
|
||||
'text': Date.parse(workingDayBreak.end).toString(timeFormat).toUpperCase()
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm edit-break',
|
||||
'title': EALang.edit,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-pencil'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm delete-break',
|
||||
'title': EALang.delete,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-trash'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm save-break hidden',
|
||||
'title': EALang.save,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ok'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm cancel-break hidden',
|
||||
'title': EALang.cancel,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ban-circle'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('.breaks tbody');
|
||||
});
|
||||
} else {
|
||||
$('#' + index).prop('checked', false);
|
||||
$('#' + index + '-start').prop('disabled', true);
|
||||
|
|
@ -133,27 +217,81 @@
|
|||
|
||||
var day = GeneralFunctions.formatDate(Date.parse(index), GlobalVariables.dateFormat, false);
|
||||
|
||||
var tr =
|
||||
'<tr>' +
|
||||
'<td class="extra-day editable">' + day + '</td>' +
|
||||
'<td class="extra-start editable">' + Date.parse(extraWorkingDay.start).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase().toUpperCase() + '</td>' +
|
||||
'<td class="extra-end editable">' + Date.parse(extraWorkingDay.end).toString(GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm').toUpperCase().toUpperCase() + '</td>' +
|
||||
'<td>' +
|
||||
'<button type="button" class="btn btn-default btn-sm edit-extra" title="' + EALang.edit + '">' +
|
||||
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm delete-extra" title="' + EALang.delete + '">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm save-extra hidden" title="' + EALang.save + '">' +
|
||||
'<span class="glyphicon glyphicon-ok"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm cancel-extra hidden" title="' + EALang.cancel + '">' +
|
||||
'<span class="glyphicon glyphicon-ban-circle"></span>' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
$('.extra-periods tbody').append(tr);
|
||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
|
||||
|
||||
$('<tr/>', {
|
||||
'html': [
|
||||
$('<td/>', {
|
||||
'class': 'extra-day editable',
|
||||
'text': day
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'extra-start editable',
|
||||
'text': Date.parse(extraWorkingDay.start).toString(timeFormat).toUpperCase()
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'extra-end editable',
|
||||
'text': Date.parse(extraWorkingDay.end).toString(timeFormat).toUpperCase()
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm edit-extra',
|
||||
'title': EALang.edit,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-pencil'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm delete-extra',
|
||||
'title': EALang.delete,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-trash'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm save-extra hidden',
|
||||
'title': EALang.save,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ok'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm cancel-extra hidden',
|
||||
'title': EALang.cancel,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ban-circle'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('.extra-periods tbody');
|
||||
} else {
|
||||
$('#' + index).prop('checked', false);
|
||||
$('#' + index + '-start').prop('disabled', true);
|
||||
|
|
@ -220,8 +358,20 @@
|
|||
}, {
|
||||
event: 'edit',
|
||||
height: '30px',
|
||||
submit: '<button type="button" class="hidden submit-editable">Submit</button>',
|
||||
cancel: '<button type="button" class="hidden cancel-editable">Cancel</button>',
|
||||
submit: $('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'hidden submit-editable',
|
||||
'text': EALang.save
|
||||
})
|
||||
.get(0)
|
||||
.outerHTML,
|
||||
cancel: $('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'hidden cancek-editable',
|
||||
'text': EALang.cancel
|
||||
})
|
||||
.get(0)
|
||||
.outerHTML,
|
||||
onblur: 'ignore',
|
||||
onreset: function (settings, td) {
|
||||
if (!this.enableCancel) {
|
||||
|
|
@ -264,33 +414,86 @@
|
|||
* data. After that he can either press the save or cancel button.
|
||||
*/
|
||||
$('.add-break').click(function () {
|
||||
var tr =
|
||||
'<tr>' +
|
||||
'<td class="break-day editable">' + EALang.sunday + '</td>' +
|
||||
'<td class="break-start editable">9:00 AM</td>' +
|
||||
'<td class="break-end editable">10:00 AM</td>' +
|
||||
'<td>' +
|
||||
'<button type="button" class="btn btn-default btn-sm edit-break" title="' + EALang.edit + '">' +
|
||||
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm delete-break" title="' + EALang.delete + '">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm save-break hidden" title="' + EALang.save + '">' +
|
||||
'<span class="glyphicon glyphicon-ok"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm cancel-break hidden" title="' + EALang.cancel + '">' +
|
||||
'<span class="glyphicon glyphicon-ban-circle"></span>' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
$('.breaks').prepend(tr);
|
||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
|
||||
|
||||
var $newBreak = $('<tr/>', {
|
||||
'html': [
|
||||
$('<td/>', {
|
||||
'class': 'break-day editable',
|
||||
'text': EALang.sunday
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'break-start editable',
|
||||
'text': '9:00 AM'
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'break-end editable',
|
||||
'text': '10:00 AM'
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm edit-break',
|
||||
'title': EALang.edit,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-pencil'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm delete-break',
|
||||
'title': EALang.delete,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-trash'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm save-break hidden',
|
||||
'title': EALang.save,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ok'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm cancel-break hidden',
|
||||
'title': EALang.cancel,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ban-circle'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('.breaks tbody');
|
||||
|
||||
// Bind editable and event handlers.
|
||||
tr = $('.breaks tr')[1];
|
||||
this.editableBreakDay($(tr).find('.break-day'));
|
||||
this.editableBreakTime($(tr).find('.break-start, .break-end'));
|
||||
$(tr).find('.edit-break').trigger('click');
|
||||
this.editableBreakDay($newBreak.find('.break-day'));
|
||||
this.editableBreakTime($newBreak.find('.break-start, .break-end'));
|
||||
$newBreak.find('.edit-break').trigger('click');
|
||||
$('.add-break').prop('disabled', true);
|
||||
}.bind(this));
|
||||
|
||||
|
|
@ -397,33 +600,87 @@
|
|||
*/
|
||||
$('.add-extra-periods').click(function () {
|
||||
var today = GeneralFunctions.formatDate(new Date(), GlobalVariables.dateFormat, false);
|
||||
var tr =
|
||||
'<tr>' +
|
||||
'<td class="extra-day editable">' + today + '</td>' +
|
||||
'<td class="extra-start editable">' + (GlobalVariables.timeFormat === 'regular' ? '9:00 AM' : '09:00').toUpperCase() + '</td>' +
|
||||
'<td class="extra-end editable">' + (GlobalVariables.timeFormat === 'regular' ? '10:00 AM' : '10:00').toUpperCase() + '</td>' +
|
||||
'<td>' +
|
||||
'<button type="button" class="btn btn-default btn-sm edit-extra" title="' + EALang.edit + '">' +
|
||||
'<span class="glyphicon glyphicon-pencil"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm delete-extra" title="' + EALang.delete + '">' +
|
||||
'<span class="glyphicon glyphicon-remove"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm save-extra hidden" title="' + EALang.save + '">' +
|
||||
'<span class="glyphicon glyphicon-ok"></span>' +
|
||||
'</button>' +
|
||||
'<button type="button" class="btn btn-default btn-sm cancel-extra hidden" title="' + EALang.cancel + '">' +
|
||||
'<span class="glyphicon glyphicon-ban-circle"></span>' +
|
||||
'</button>' +
|
||||
'</td>' +
|
||||
'</tr>';
|
||||
$('.extra-periods').prepend(tr);
|
||||
|
||||
var timeFormat = GlobalVariables.timeFormat === 'regular' ? 'h:mm tt' : 'HH:mm';
|
||||
|
||||
var $newExtraPeriod = $('<tr/>', {
|
||||
'html': [
|
||||
$('<td/>', {
|
||||
'class': 'extra-day editable',
|
||||
'text': today
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'extra-start editable',
|
||||
'text': '9:00 AM'
|
||||
}),
|
||||
$('<td/>', {
|
||||
'class': 'extra-end editable',
|
||||
'text': '10:00 AM'
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm edit-extra',
|
||||
'title': EALang.edit,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-pencil'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm delete-extra',
|
||||
'title': EALang.delete,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-trash'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm save-extra hidden',
|
||||
'title': EALang.save,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ok'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
}),
|
||||
$('<td/>', {
|
||||
'html': [
|
||||
$('<button/>', {
|
||||
'type': 'button',
|
||||
'class': 'btn btn-default btn-sm cancel-extra hidden',
|
||||
'title': EALang.cancel,
|
||||
'html': [
|
||||
$('<span/>', {
|
||||
'class': 'glyphicon glyphicon-ban-circle'
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
]
|
||||
})
|
||||
.appendTo('.extra-periods tbody');
|
||||
|
||||
// Bind editable and event handlers.
|
||||
tr = $('.extra-periods tr')[1];
|
||||
this.editableBreakTime($(tr).find('.extra-day'));
|
||||
this.editableBreakTime($(tr).find('.extra-start, .extra-end'));
|
||||
$(tr).find('.edit-extra').trigger('click');
|
||||
this.editableBreakTime($newExtraPeriod.find('.extra-day'));
|
||||
this.editableBreakTime($newExtraPeriod.find('.extra-start, .extra-end'));
|
||||
$newExtraPeriod.find('.edit-extra').trigger('click');
|
||||
$('.add-extra-periods').prop('disabled', true);
|
||||
}.bind(this));
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue