Converted hard coded HTML to jQuery generated markup.

This commit is contained in:
Alex Tselegidis 2020-05-07 18:47:14 +02:00
parent f8164a8287
commit 74c10d3b7b
16 changed files with 1279 additions and 567 deletions

View file

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

View file

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

View file

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

View file

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

View file

@ -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/>'),
]
});
};
/**

View file

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

View file

@ -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/>')
]
});
};
/**

View file

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

View file

@ -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/>'),
]
});
};
/**

View file

@ -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/>'),
]
});
};
/**

View file

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

View file

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

View file

@ -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) {

View file

@ -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
}),
]
})
);
}
}
});

View file

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

View file

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