diff --git a/src/assets/js/backend_calendar_appointments_modal.js b/src/assets/js/backend_calendar_appointments_modal.js
index 456f1449..927ac4d1 100644
--- a/src/assets/js/backend_calendar_appointments_modal.js
+++ b/src/assets/js/backend_calendar_appointments_modal.js
@@ -86,13 +86,13 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
// Define success callback.
var successCallback = function(response) {
if (!GeneralFunctions.handleAjaxExceptions(response)) {
- $dialog.find('.modal-message').text(EALang['unexpected_issues_occurred']);
+ $dialog.find('.modal-message').text(EALang.unexpected_issues_occurred);
$dialog.find('.modal-message').addClass('alert-danger').removeClass('hidden');
return false;
}
// Display success message to the user.
- $dialog.find('.modal-message').text(EALang['appointment_saved']);
+ $dialog.find('.modal-message').text(EALang.appointment_saved);
$dialog.find('.modal-message').addClass('alert-success').removeClass('alert-danger hidden');
$dialog.find('.modal-body').scrollTop(0);
@@ -106,7 +106,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
// Define error callback.
var errorCallback = function() {
- $dialog.find('.modal-message').text(EALang['server_communication_error']);
+ $dialog.find('.modal-message').text(EALang.server_communication_error);
$dialog.find('.modal-message').addClass('alert-danger').removeClass('hidden');
$dialog.find('.modal-body').scrollTop(0);
};
@@ -168,7 +168,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
GlobalVariables.dateFormat, true));
// Display modal form.
- $dialog.find('.modal-header h3').text(EALang['new_appointment_title']);
+ $dialog.find('.modal-header h3').text(EALang.new_appointment_title);
$dialog.modal('show');
});
@@ -179,7 +179,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
var $list = $('#existing-customers-list');
if (!$list.is(':visible')) {
- $(this).text(EALang['hide']);
+ $(this).text(EALang.hide);
$list.empty();
$list.slideDown('slow');
$('#filter-existing-customers').fadeIn('slow');
@@ -191,7 +191,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
} else {
$list.slideUp('slow');
$('#filter-existing-customers').fadeOut('slow');
- $(this).text(EALang['select']);
+ $(this).text(EALang.select);
}
});
@@ -357,7 +357,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
// Close existing customers-filter frame.
$('#existing-customers-list').slideUp('slow');
$('#filter-existing-customers').fadeOut('slow');
- $('#select-customer').text(EALang['select']);
+ $('#select-customer').text(EALang.select);
// Setup start and datetimepickers.
// Get the selected service duration. It will be needed in order to calculate the appointment end datetime.
@@ -391,27 +391,27 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
dateFormat: dateFormat,
// Translation
- dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
- EALang['thursday'], EALang['friday'], EALang['saturday']],
- dayNamesShort: [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3),
- EALang['tuesday'].substr(0,3), EALang['wednesday'].substr(0,3),
- EALang['thursday'].substr(0,3), EALang['friday'].substr(0,3),
- EALang['saturday'].substr(0,3)],
- dayNamesMin: [EALang['sunday'].substr(0,2), EALang['monday'].substr(0,2),
- EALang['tuesday'].substr(0,2), EALang['wednesday'].substr(0,2),
- EALang['thursday'].substr(0,2), EALang['friday'].substr(0,2),
- EALang['saturday'].substr(0,2)],
- monthNames: [EALang['january'], EALang['february'], EALang['march'], EALang['april'],
- EALang['may'], EALang['june'], EALang['july'], EALang['august'], EALang['september'],
- EALang['october'], EALang['november'], EALang['december']],
- prevText: EALang['previous'],
- nextText: EALang['next'],
- currentText: EALang['now'],
- closeText: EALang['close'],
- timeOnlyTitle: EALang['select_time'],
- timeText: EALang['time'],
- hourText: EALang['hour'],
- minuteText: EALang['minutes'],
+ dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,
+ EALang.thursday, EALang.friday, EALang.saturday],
+ dayNamesShort: [EALang.sunday.substr(0,3), EALang.monday.substr(0,3),
+ EALang.tuesday.substr(0,3), EALang.wednesday.substr(0,3),
+ EALang.thursday.substr(0,3), EALang.friday.substr(0,3),
+ EALang.saturday.substr(0,3)],
+ dayNamesMin: [EALang.sunday.substr(0,2), EALang.monday.substr(0,2),
+ EALang.tuesday.substr(0,2), EALang.wednesday.substr(0,2),
+ EALang.thursday.substr(0,2), EALang.friday.substr(0,2),
+ EALang.saturday.substr(0,2)],
+ monthNames: [EALang.january, EALang.february, EALang.march, EALang.april,
+ EALang.may, EALang.june, EALang.july, EALang.august, EALang.september,
+ EALang.october, EALang.november, EALang.december],
+ prevText: EALang.previous,
+ nextText: EALang.next,
+ currentText: EALang.now,
+ closeText: EALang.close,
+ timeOnlyTitle: EALang.select_time,
+ timeText: EALang.time,
+ hourText: EALang.hour,
+ minuteText: EALang.minutes,
firstDay: 1
});
$dialog.find('#start-datetime').datetimepicker('setDate', startDatetime);
@@ -420,27 +420,27 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
dateFormat: dateFormat,
// Translation
- dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
- EALang['thursday'], EALang['friday'], EALang['saturday']],
- dayNamesShort: [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3),
- EALang['tuesday'].substr(0,3), EALang['wednesday'].substr(0,3),
- EALang['thursday'].substr(0,3), EALang['friday'].substr(0,3),
- EALang['saturday'].substr(0,3)],
- dayNamesMin: [EALang['sunday'].substr(0,2), EALang['monday'].substr(0,2),
- EALang['tuesday'].substr(0,2), EALang['wednesday'].substr(0,2),
- EALang['thursday'].substr(0,2), EALang['friday'].substr(0,2),
- EALang['saturday'].substr(0,2)],
- monthNames: [EALang['january'], EALang['february'], EALang['march'], EALang['april'],
- EALang['may'], EALang['june'], EALang['july'], EALang['august'], EALang['september'],
- EALang['october'], EALang['november'], EALang['december']],
- prevText: EALang['previous'],
- nextText: EALang['next'],
- currentText: EALang['now'],
- closeText: EALang['close'],
- timeOnlyTitle: EALang['select_time'],
- timeText: EALang['time'],
- hourText: EALang['hour'],
- minuteText: EALang['minutes'],
+ dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,
+ EALang.thursday, EALang.friday, EALang.saturday],
+ dayNamesShort: [EALang.sunday.substr(0,3), EALang.monday.substr(0,3),
+ EALang.tuesday.substr(0,3), EALang.wednesday.substr(0,3),
+ EALang.thursday.substr(0,3), EALang.friday.substr(0,3),
+ EALang.saturday.substr(0,3)],
+ dayNamesMin: [EALang.sunday.substr(0,2), EALang.monday.substr(0,2),
+ EALang.tuesday.substr(0,2), EALang.wednesday.substr(0,2),
+ EALang.thursday.substr(0,2), EALang.friday.substr(0,2),
+ EALang.saturday.substr(0,2)],
+ monthNames: [EALang.january, EALang.february, EALang.march, EALang.april,
+ EALang.may, EALang.june, EALang.july, EALang.august, EALang.september,
+ EALang.october, EALang.november, EALang.december],
+ prevText: EALang.previous,
+ nextText: EALang.next,
+ currentText: EALang.now,
+ closeText: EALang.close,
+ timeOnlyTitle: EALang.select_time,
+ timeText: EALang.time,
+ hourText: EALang.hour,
+ minuteText: EALang.minutes,
firstDay: 1
});
$dialog.find('#end-datetime').datetimepicker('setDate', endDatetime);
@@ -471,13 +471,13 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
});
if (missingRequiredField) {
- throw EALang['fields_are_required'];
+ throw EALang.fields_are_required;
}
// Check email address.
if (!GeneralFunctions.validateEmail($dialog.find('#email').val())) {
$dialog.find('#email').parents('.form-group').eq(1).addClass('has-error');
- throw EALang['invalid_email'];
+ throw EALang.invalid_email;
}
// Check appointment start and end time.
@@ -486,7 +486,7 @@ window.BackendCalendarAppointmentsModal = window.BackendCalendarAppointmentsModa
if (start > end) {
$dialog.find('#start-datetime').parents('.form-group').addClass('has-error');
$dialog.find('#end-datetime').parents('.form-group').addClass('has-error');
- throw EALang['start_date_before_end_error'];
+ throw EALang.start_date_before_end_error;
}
return true;
diff --git a/src/assets/js/backend_calendar_default_view.js b/src/assets/js/backend_calendar_default_view.js
index 3a3d6014..77985f13 100644
--- a/src/assets/js/backend_calendar_default_view.js
+++ b/src/assets/js/backend_calendar_default_view.js
@@ -70,7 +70,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
BackendCalendarAppointmentsModal.resetAppointmentDialog();
// Apply appointment data and show modal dialog.
- $dialog.find('.modal-header h3').text(EALang['edit_appointment_title']);
+ $dialog.find('.modal-header h3').text(EALang.edit_appointment_title);
$dialog.find('#appointment-id').val(appointment['id']);
$dialog.find('#select-service').val(appointment['id_services']).trigger('change');
$dialog.find('#select-provider').val(appointment['id_users_provider']);
@@ -160,12 +160,12 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
}, 'json').fail(GeneralFunctions.ajaxFailureHandler);
};
- messageButtons[EALang['cancel']] = function() {
+ messageButtons[EALang.cancel] = function() {
$('#message_box').dialog('close');
};
- GeneralFunctions.displayMessageBox(EALang['delete_appointment_title'],
- EALang['write_appointment_removal_reason'], messageButtons);
+ GeneralFunctions.displayMessageBox(EALang.delete_appointment_title,
+ EALang.write_appointment_removal_reason, messageButtons);
$('#message_box').append('');
$('#delete-reason').css('width', '100%');
@@ -221,11 +221,11 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// If the user has already the sync enabled then apply the proper style changes.
if ($('#select-filter-item option:selected').attr('google-sync') === 'true') {
$('#enable-sync').addClass('btn-danger enabled');
- $('#enable-sync span:eq(1)').text(EALang['disable_sync']);
+ $('#enable-sync span:eq(1)').text(EALang.disable_sync);
$('#google-sync').prop('disabled', false);
} else {
$('#enable-sync').removeClass('btn-danger enabled');
- $('#enable-sync span:eq(1)').text(EALang['enable_sync']);
+ $('#enable-sync span:eq(1)').text(EALang.enable_sync);
$('#google-sync').prop('disabled', true);
}
}
@@ -282,18 +282,18 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
+ '.popover-content button {margin-right: 10px;}'
+ '' +
- '' + EALang['start'] + ' '
+ '' + EALang.start + ' '
+ GeneralFunctions.formatDate(event.start, GlobalVariables.dateFormat, true)
+ '
' +
- '' + EALang['end'] + ' '
+ '' + EALang.end + ' '
+ GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true)
+ '
'
+ notes
+ '
' +
'' +
- '' +
- '' +
- '' +
+ '' +
+ '' +
+ '' +
'';
} else {
displayEdit = (GlobalVariables.user.privileges.appointments.edit == true)
@@ -306,27 +306,27 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
+ '.popover-content strong {min-width: 80px; display:inline-block;}'
+ '.popover-content button {margin-right: 10px;}'
+ '' +
- '' + EALang['start'] + ' '
+ '' + EALang.start + ' '
+ GeneralFunctions.formatDate(event.start, GlobalVariables.dateFormat, true)
+ '
' +
- '' + EALang['end'] + ' '
+ '' + EALang.end + ' '
+ GeneralFunctions.formatDate(event.end, GlobalVariables.dateFormat, true)
+ '
' +
- '' + EALang['service'] + ' '
+ '' + EALang.service + ' '
+ event.data['service']['name']
+ '
' +
- '' + EALang['provider'] + ' '
+ '' + EALang.provider + ' '
+ event.data['provider']['first_name'] + ' '
+ event.data['provider']['last_name']
+ '
' +
- '' + EALang['customer'] + ' '
+ '' + EALang.customer + ' '
+ event.data['customer']['first_name'] + ' '
+ event.data['customer']['last_name']
+ '
' +
'' +
- '' +
- '' +
- '' +
+ '' +
+ '' +
+ '' +
'';
}
@@ -359,7 +359,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
function _calendarEventResize(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
if (GlobalVariables.user.privileges.appointments.edit == false) {
revertFunc();
- Backend.displayNotification(EALang['no_privileges_edit_appointments']);
+ Backend.displayNotification(EALang.no_privileges_edit_appointments);
return;
}
@@ -416,7 +416,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
}, 'json').fail(GeneralFunctions.ajaxFailureHandler);
};
- Backend.displayNotification(EALang['appointment_updated'], [
+ Backend.displayNotification(EALang.appointment_updated, [
{
'label': 'Undo',
'function': undoFunction
@@ -471,7 +471,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
}, 'json').fail(GeneralFunctions.ajaxFailureHandler);
};
- Backend.displayNotification(EALang['unavailable_updated'], [
+ Backend.displayNotification(EALang.unavailable_updated, [
{
'label': 'Undo',
'function': undoFunction
@@ -518,7 +518,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
function _calendarEventDrop(event, dayDelta, minuteDelta, allDay, revertFunc, jsEvent, ui, view) {
if (GlobalVariables.user.privileges.appointments.edit == false) {
revertFunc();
- Backend.displayNotification(EALang['no_privileges_edit_appointments']);
+ Backend.displayNotification(EALang.no_privileges_edit_appointments);
return;
}
@@ -591,7 +591,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
}, 'json').fail(GeneralFunctions.ajaxFailureHandler);
};
- Backend.displayNotification(EALang['appointment_updated'], [
+ Backend.displayNotification(EALang.appointment_updated, [
{
'label': 'Undo',
'function': undoFunction
@@ -652,7 +652,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
}, 'json').fail(GeneralFunctions.ajaxFailureHandler);
};
- Backend.displayNotification(EALang['unavailable_updated'], [
+ Backend.displayNotification(EALang.unavailable_updated, [
{
label: 'Undo',
function: undoFunction
@@ -780,7 +780,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// Add custom unavailable periods.
$.each(response.unavailables, function(index, unavailable) {
var unavailablePeriod = {
- title: EALang['unavailable'] + '
' + ((unavailable.notes.length > 30)
+ title: EALang.unavailable + '
' + ((unavailable.notes.length > 30)
? unavailable.notes.substring(0, 30) + '...'
: unavailable.notes) + '',
start: Date.parse(unavailable.start_datetime),
@@ -797,7 +797,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// Non-working day
if (workingPlan[selDayName] == null) {
unavailablePeriod = {
- title: EALang['not_working'],
+ title: EALang.not_working,
start: GeneralFunctions.clone($calendar.fullCalendar('getView').start),
end: GeneralFunctions.clone($calendar.fullCalendar('getView').end),
allDay: false,
@@ -818,7 +818,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
if (calendarDateStart < workDateStart) {
unavailablePeriod = {
- title: EALang['not_working'],
+ title: EALang.not_working,
start: calendarDateStart,
end: workDateStart,
allDay: false,
@@ -837,7 +837,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
'dd/MM/yyyy HH:mm'); // Use calendarDateStart ***
if (calendarDateEnd > workDateEnd) {
var unavailablePeriod = {
- title: EALang['not_working'],
+ title: EALang.not_working,
start: workDateEnd,
end: calendarDateEnd,
allDay: false,
@@ -857,7 +857,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
breakEnd = Date.parseExact(calendarDateStart.toString('dd/MM/yyyy')
+ ' ' + currBreak.end, 'dd/MM/yyyy HH:mm');
var unavailablePeriod = {
- title: EALang['break'],
+ title: EALang.break,
start: breakStart,
end: breakEnd,
allDay: false,
@@ -878,7 +878,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// the provider won't work on that day).
$.each(response.unavailables, function(index, unavailable) {
unavailablePeriod = {
- title: EALang['unavailable'] + '
' + ((unavailable.notes.length > 30)
+ title: EALang.unavailable + '
' + ((unavailable.notes.length > 30)
? unavailable.notes.substring(0, 30) + '...'
: unavailable.notes) + '',
start: Date.parse(unavailable.start_datetime),
@@ -897,7 +897,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
if (workingDay == null) {
// Add a full day unavailable event.
unavailablePeriod = {
- title: EALang['not_working'],
+ title: EALang.not_working,
start: GeneralFunctions.clone(currDateStart),
end: GeneralFunctions.clone(currDateEnd),
allDay: false,
@@ -919,7 +919,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
+ ' ' + workingDay.start, 'dd/MM/yyyy HH:mm');
if (currDateStart < start) {
unavailablePeriod = {
- title: EALang['not_working'],
+ title: EALang.not_working,
start: GeneralFunctions.clone(currDateStart),
end: GeneralFunctions.clone(start),
allDay: false,
@@ -935,7 +935,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
+ ' ' + workingDay.end, 'dd/MM/yyyy HH:mm');
if (currDateEnd > end) {
unavailablePeriod = {
- title: EALang['not_working'],
+ title: EALang.not_working,
start: GeneralFunctions.clone(end),
end: GeneralFunctions.clone(currDateEnd),
allDay: false,
@@ -955,7 +955,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
breakEnd = Date.parseExact(currDateStart.toString('dd/MM/yyyy')
+ ' ' + currBreak.end, 'dd/MM/yyyy HH:mm');
var unavailablePeriod = {
- title: EALang['break'],
+ title: EALang.break,
start: breakStart,
end: breakEnd,
allDay: false,
@@ -1017,7 +1017,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
snapMinutes: 15,
axisFormat: 'HH:mm',
timeFormat: 'HH:mm{ - HH:mm}',
- allDayText: EALang['all_day'],
+ allDayText: EALang.all_day,
columnFormat: columnFormat,
titleFormat: {
month: 'MMMM yyyy',
@@ -1031,31 +1031,31 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
},
// Translations
- monthNames: [EALang['january'], EALang['february'], EALang['march'], EALang['april'],
- EALang['may'], EALang['june'], EALang['july'], EALang['august'],
- EALang['september'],EALang['october'], EALang['november'],
- EALang['december']],
- monthNamesShort: [EALang['january'].substr(0,3), EALang['february'].substr(0,3),
- EALang['march'].substr(0,3), EALang['april'].substr(0,3),
- EALang['may'].substr(0,3), EALang['june'].substr(0,3),
- EALang['july'].substr(0,3), EALang['august'].substr(0,3),
- EALang['september'].substr(0,3),EALang['october'].substr(0,3),
- EALang['november'].substr(0,3), EALang['december'].substr(0,3)],
- dayNames: [EALang['sunday'], EALang['monday'], EALang['tuesday'], EALang['wednesday'],
- EALang['thursday'], EALang['friday'], EALang['saturday']],
- dayNamesShort: [EALang['sunday'].substr(0,3), EALang['monday'].substr(0,3),
- EALang['tuesday'].substr(0,3), EALang['wednesday'].substr(0,3),
- EALang['thursday'].substr(0,3), EALang['friday'].substr(0,3),
- EALang['saturday'].substr(0,3)],
- dayNamesMin: [EALang['sunday'].substr(0,2), EALang['monday'].substr(0,2),
- EALang['tuesday'].substr(0,2), EALang['wednesday'].substr(0,2),
- EALang['thursday'].substr(0,2), EALang['friday'].substr(0,2),
- EALang['saturday'].substr(0,2)],
+ monthNames: [EALang.january, EALang.february, EALang.march, EALang.april,
+ EALang.may, EALang.june, EALang.july, EALang.august,
+ EALang.september,EALang.october, EALang.november,
+ EALang.december],
+ monthNamesShort: [EALang.january.substr(0,3), EALang.february.substr(0,3),
+ EALang.march.substr(0,3), EALang.april.substr(0,3),
+ EALang.may.substr(0,3), EALang.june.substr(0,3),
+ EALang.july.substr(0,3), EALang.august.substr(0,3),
+ EALang.september.substr(0,3),EALang.october.substr(0,3),
+ EALang.november.substr(0,3), EALang.december.substr(0,3)],
+ dayNames: [EALang.sunday, EALang.monday, EALang.tuesday, EALang.wednesday,
+ EALang.thursday, EALang.friday, EALang.saturday],
+ dayNamesShort: [EALang.sunday.substr(0,3), EALang.monday.substr(0,3),
+ EALang.tuesday.substr(0,3), EALang.wednesday.substr(0,3),
+ EALang.thursday.substr(0,3), EALang.friday.substr(0,3),
+ EALang.saturday.substr(0,3)],
+ dayNamesMin: [EALang.sunday.substr(0,2), EALang.monday.substr(0,2),
+ EALang.tuesday.substr(0,2), EALang.wednesday.substr(0,2),
+ EALang.thursday.substr(0,2), EALang.friday.substr(0,2),
+ EALang.saturday.substr(0,2)],
buttonText: {
- today: EALang['today'],
- day: EALang['day'],
- week: EALang['week'],
- month: EALang['month']
+ today: EALang.today,
+ day: EALang.day,
+ week: EALang.week,
+ month: EALang.month
},
// Calendar events need to be declared on initialization.
@@ -1073,7 +1073,7 @@ window.BackendCalendarDefaultView = window.BackendCalendarDefaultView || {};
// Fill the select listboxes of the page.
if (GlobalVariables.availableProviders.length > 0) {
- var optgroupHtml = '