maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Group commonly used UI components to a single utility module

Browse source
This commit is contained in:
Alex Tselegidis 2022-05-26 15:17:33 +02:00
parent d30e83fb56
commit 72e84bd4f3
9 changed files with 263 additions and 375 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
application/views/pages/calendar.php
View file

@ -126,6 +126,7 @@
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/calendar_default_view.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/calendar_default_view.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/calendar_table_view.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/calendar_table_view.js') ?>"></script>

1
application/views/pages/legal_settings.php
View file

@ -80,6 +80,7 @@
<?php section('scripts') ?> <?php section('scripts') ?>
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
<script src="<?= asset_url('assets/js/http/legal_settings_http_client.js') ?>"></script> <script src="<?= asset_url('assets/js/http/legal_settings_http_client.js') ?>"></script>
<script src="<?= asset_url('assets/js/pages/legal_settings.js') ?>"></script> <script src="<?= asset_url('assets/js/pages/legal_settings.js') ?>"></script>

1
application/views/pages/providers.php
View file

@ -341,6 +341,7 @@
<script src="<?= asset_url('assets/js/utils/date.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/date.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/message.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/message.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/string.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/string.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/ui.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/url.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/url.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/validation.js') ?>"></script>
<script src="<?= asset_url('assets/js/utils/working_plan.js') ?>"></script> <script src="<?= asset_url('assets/js/utils/working_plan.js') ?>"></script>

137
assets/js/components/appointments_modal.js
View file

@ -167,7 +167,7 @@ App.Components.AppointmentsModal = (function () {
} else { } else {
$selectService.find('option:first').prop('selected', true).trigger('change'); $selectService.find('option:first').prop('selected', true).trigger('change');
} }
$selectProvider.trigger('change'); $selectProvider.trigger('change');
const serviceId = $selectService.val(); const serviceId = $selectService.val();
@ -410,7 +410,7 @@ App.Components.AppointmentsModal = (function () {
// Empty form fields. // Empty form fields.
$appointmentsModal.find('input, textarea').val(''); $appointmentsModal.find('input, textarea').val('');
$appointmentsModal.find('.modal-message').fadeOut(); $appointmentsModal.find('.modal-message').fadeOut();
$language.val('english'); $language.val('english');
$timezone.val('UTC'); $timezone.val('UTC');
@ -452,81 +452,8 @@ App.Components.AppointmentsModal = (function () {
const startDatetime = new Date(); const startDatetime = new Date();
const endDatetime = moment().add(duration, 'minutes').toDate(); const endDatetime = moment().add(duration, 'minutes').toDate();
let dateFormat;
switch (vars('date_format')) { App.Utils.UI.initializeDatetimepicker($startDatetime, {
case 'DMY':
dateFormat = 'dd/mm/yy';
break;
case 'MDY':
dateFormat = 'mm/dd/yy';
break;
case 'YMD':
dateFormat = 'yy/mm/dd';
break;
default:
throw new Error('Invalid date format value.');
}
const firstWeekDay = vars('first_weekday');
const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay);
$startDatetime.datetimepicker({
dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
// Translation
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substr(0, 3),
lang('monday').substr(0, 3),
lang('tuesday').substr(0, 3),
lang('wednesday').substr(0, 3),
lang('thursday').substr(0, 3),
lang('friday').substr(0, 3),
lang('saturday').substr(0, 3)
],
dayNamesMin: [
lang('sunday').substr(0, 2),
lang('monday').substr(0, 2),
lang('tuesday').substr(0, 2),
lang('wednesday').substr(0, 2),
lang('thursday').substr(0, 2),
lang('friday').substr(0, 2),
lang('saturday').substr(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes'),
firstDay: firstWeekDayNumber,
onClose: () => { onClose: () => {
const serviceId = $selectService.val(); const serviceId = $selectService.val();
@ -539,64 +466,10 @@ App.Components.AppointmentsModal = (function () {
$endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000)); $endDatetime.datetimepicker('setDate', new Date(start.getTime() + service.duration * 60000));
} }
}); });
$startDatetime.datetimepicker('setDate', startDatetime); $startDatetime.datetimepicker('setDate', startDatetime);
$endDatetime.datetimepicker({ App.Utils.UI.initializeDatetimepicker($endDatetime);
dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
// Translation
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substr(0, 3),
lang('monday').substr(0, 3),
lang('tuesday').substr(0, 3),
lang('wednesday').substr(0, 3),
lang('thursday').substr(0, 3),
lang('friday').substr(0, 3),
lang('saturday').substr(0, 3)
],
dayNamesMin: [
lang('sunday').substr(0, 2),
lang('monday').substr(0, 2),
lang('tuesday').substr(0, 2),
lang('wednesday').substr(0, 2),
lang('thursday').substr(0, 2),
lang('friday').substr(0, 2),
lang('saturday').substr(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes'),
firstDay: firstWeekDayNumber
});
$endDatetime.datetimepicker('setDate', endDatetime); $endDatetime.datetimepicker('setDate', endDatetime);
} }

132
assets/js/components/unavailabilities_modal.js
View file

@ -188,138 +188,12 @@ App.Components.UnavailabilitiesModal = (function () {
true true
); );
let dateFormat; App.Utils.UI.initializeDatetimepicker($startDatetime);
switch (vars('date_format')) {
case 'DMY':
dateFormat = 'dd/mm/yy';
break;
case 'MDY':
dateFormat = 'mm/dd/yy';
break;
case 'YMD':
dateFormat = 'yy/mm/dd';
break;
}
const firstWeekday = vars('first_weekday');
const firstWeekdayId = App.Utils.Date.getWeekdayId(firstWeekday);
$startDatetime.datetimepicker({
dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
// Translation
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substr(0, 3),
lang('monday').substr(0, 3),
lang('tuesday').substr(0, 3),
lang('wednesday').substr(0, 3),
lang('thursday').substr(0, 3),
lang('friday').substr(0, 3),
lang('saturday').substr(0, 3)
],
dayNamesMin: [
lang('sunday').substr(0, 2),
lang('monday').substr(0, 2),
lang('tuesday').substr(0, 2),
lang('wednesday').substr(0, 2),
lang('thursday').substr(0, 2),
lang('friday').substr(0, 2),
lang('saturday').substr(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes'),
firstDay: firstWeekdayId
});
$startDatetime.val(start); $startDatetime.val(start);
$endDatetime.datetimepicker({ App.Utils.UI.initializeDatetimepicker($endDatetime);
dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
// Translation
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substr(0, 3),
lang('monday').substr(0, 3),
lang('tuesday').substr(0, 3),
lang('wednesday').substr(0, 3),
lang('thursday').substr(0, 3),
lang('friday').substr(0, 3),
lang('saturday').substr(0, 3)
],
dayNamesMin: [
lang('sunday').substr(0, 2),
lang('monday').substr(0, 2),
lang('tuesday').substr(0, 2),
lang('wednesday').substr(0, 2),
lang('thursday').substr(0, 2),
lang('friday').substr(0, 2),
lang('saturday').substr(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes'),
firstDay: firstWeekdayId
});
$endDatetime.val(end); $endDatetime.val(end);
// Clear the unavailability notes field. // Clear the unavailability notes field.

101
assets/js/components/working_plan_exceptions_modal.js
View file

@ -386,108 +386,13 @@ App.Components.WorkingPlanExceptionsModal = (function () {
$('.working-plan-exceptions-add-break').prop('disabled', false); $('.working-plan-exceptions-add-break').prop('disabled', false);
} }
/**
* Initialize a datepicker instance on the provided target selector.
*
* @param {jQuery} $target
*/
function initializeDatepicker($target) {
let dateFormat;
switch (vars('date_format')) {
case 'DMY':
dateFormat = 'dd/mm/yy';
break;
case 'MDY':
dateFormat = 'mm/dd/yy';
break;
case 'YMD':
dateFormat = 'yy/mm/dd';
break;
default:
throw new Error('Invalid date format setting provided: ' + vars('date_format'));
}
$target.datepicker({
dateFormat: dateFormat,
firstDay: App.Utils.Date.getWeekdayId(vars('first_weekday')),
minDate: 0,
defaultDate: moment().toDate(),
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substr(0, 3),
lang('monday').substr(0, 3),
lang('tuesday').substr(0, 3),
lang('wednesday').substr(0, 3),
lang('thursday').substr(0, 3),
lang('friday').substr(0, 3),
lang('saturday').substr(0, 3)
],
dayNamesMin: [
lang('sunday').substr(0, 2),
lang('monday').substr(0, 2),
lang('tuesday').substr(0, 2),
lang('wednesday').substr(0, 2),
lang('thursday').substr(0, 2),
lang('friday').substr(0, 2),
lang('saturday').substr(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close')
});
}
/**
* Initialize a timepicker on the provided target selector.
*
* @param {jQuery} $target
*/
function initializeTimepicker($target) {
$target.timepicker({
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes')
});
}
/** /**
* Initialize the module. * Initialize the module.
*/ */
function initialize() { function initialize() {
initializeDatepicker($date); App.Utils.UI.initializeDatepicker($date);
initializeTimepicker($start); App.Utils.UI.initializeTimepicker($start);
initializeTimepicker($end); App.Utils.UI.initializeTimepicker($end);
$modal $modal
.on('hidden.bs.modal', onModalHidden) .on('hidden.bs.modal', onModalHidden)

6
assets/js/pages/legal_settings.js
View file

@ -141,9 +141,9 @@ App.Pages.LegalSettings = (function () {
* Initialize the module. * Initialize the module.
*/ */
function initialize() { function initialize() {
$cookieNoticeContent.trumbowyg(); App.Utils.UI.initializeTextEditor($cookieNoticeContent);
$termsAndConditionsContent.trumbowyg(); App.Utils.UI.initializeTextEditor($termsAndConditionsContent);
$privacyPolicyContent.trumbowyg(); App.Utils.UI.initializeTextEditor($privacyPolicyContent);
const legalSettings = vars('legal_settings'); const legalSettings = vars('legal_settings');

26
assets/js/utils/calendar_table_view.js
View file

@ -471,7 +471,7 @@ App.Utils.CalendarTableView = (function () {
}); });
} }
$filterProvider.select2(); App.Utils.UI.initializeDropdown($filterProvider);
const services = vars('available_services').filter((service) => { const services = vars('available_services').filter((service) => {
const provider = providers.find((provider) => provider.services.indexOf(service.id) !== -1); const provider = providers.find((provider) => provider.services.indexOf(service.id) !== -1);
@ -500,7 +500,7 @@ App.Utils.CalendarTableView = (function () {
$filterService.append(new Option(service.name, service.id)); $filterService.append(new Option(service.name, service.id));
}); });
$filterService.select2(); App.Utils.UI.initializeDropdown($filterService);
} }
/** /**
@ -1054,11 +1054,11 @@ App.Utils.CalendarTableView = (function () {
$event.html( $event.html(
lang('break') + lang('break') +
' <span class="hour">' + ' <span class="hour">' +
moment(eventDate).format('HH:mm') + moment(eventDate).format('HH:mm') +
'</span> (' + '</span> (' +
eventDuration + eventDuration +
"')" "')"
); );
$event.data(entry); $event.data(entry);
@ -1226,8 +1226,8 @@ App.Utils.CalendarTableView = (function () {
$('<span/>', { $('<span/>', {
'text': info.event.extendedProps.data 'text': info.event.extendedProps.data
? info.event.extendedProps.data.provider.first_name + ? info.event.extendedProps.data.provider.first_name +
' ' + ' ' +
info.event.extendedProps.data.provider.last_name info.event.extendedProps.data.provider.last_name
: '-' : '-'
}), }),
$('<br/>'), $('<br/>'),
@ -1238,8 +1238,8 @@ App.Utils.CalendarTableView = (function () {
$('<span/>', { $('<span/>', {
'text': App.Utils.Date.format( 'text': App.Utils.Date.format(
info.event.extendedProps.data.date + info.event.extendedProps.data.date +
' ' + ' ' +
info.event.extendedProps.data.workingPlanException.start, info.event.extendedProps.data.workingPlanException.start,
vars('date_format'), vars('date_format'),
vars('time_format'), vars('time_format'),
true true
@ -1253,8 +1253,8 @@ App.Utils.CalendarTableView = (function () {
$('<span/>', { $('<span/>', {
'text': App.Utils.Date.format( 'text': App.Utils.Date.format(
info.event.extendedProps.data.date + info.event.extendedProps.data.date +
' ' + ' ' +
info.event.extendedProps.data.workingPlanException.end, info.event.extendedProps.data.workingPlanException.end,
vars('date_format'), vars('date_format'),
vars('time_format'), vars('time_format'),
true true

233
assets/js/utils/ui.js Normal file
View file

@ -0,0 +1,233 @@
/* ----------------------------------------------------------------------------
* Easy!Appointments - Online Appointment Scheduler
*
* @package EasyAppointments
* @author A.Tselegidis <alextselegidis@gmail.com>
* @copyright Copyright (c) Alex Tselegidis
* @license https://opensource.org/licenses/GPL-3.0 - GPLv3
* @link https://easyappointments.org
* @since v1.5.0
* ---------------------------------------------------------------------------- */
/**
* UI utility.
*
* This module provides commonly used UI functionality.
*/
window.App.Utils.UI = (function () {
/**
* Get the jQuery UI compatible date format.
*
* @return {String}
*/
function getDateFormat() {
switch (vars('date_format')) {
case 'DMY':
return 'dd/mm/yy';
case 'MDY':
return 'mm/dd/yy';
case 'YMD':
return 'yy/mm/dd';
default:
throw new Error('Invalid date format value.');
}
}
/**
* Initialize the date time picker component.
*
* This method is based on jQuery UI.
*
* @param {jQuery} $target
* @param {Object} [params]
*/
function initializeDatetimepicker($target, params = {}) {
const dateFormat = getDateFormat();
const firstWeekDay = vars('first_weekday');
const firstWeekDayNumber = App.Utils.Date.getWeekdayId(firstWeekDay);
const options = {
dateFormat: dateFormat,
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
// Translation
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substring(0, 3),
lang('monday').substring(0, 3),
lang('tuesday').substring(0, 3),
lang('wednesday').substring(0, 3),
lang('thursday').substring(0, 3),
lang('friday').substring(0, 3),
lang('saturday').substring(0, 3)
],
dayNamesMin: [
lang('sunday').substring(0, 2),
lang('monday').substring(0, 2),
lang('tuesday').substring(0, 2),
lang('wednesday').substring(0, 2),
lang('thursday').substring(0, 2),
lang('friday').substring(0, 2),
lang('saturday').substring(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes'),
firstDay: firstWeekDayNumber,
...params
}
$target.datetimepicker(options);
}
/**
* Initialize the date picker component.
*
* This method is based on jQuery UI.
*
* @param {jQuery} $target
* @param {Object} [params]
*/
function initializeDatepicker($target, params = {}) {
const dateFormat = getDateFormat();
$target.datepicker({
dateFormat: dateFormat,
firstDay: App.Utils.Date.getWeekdayId(vars('first_weekday')),
minDate: 0,
defaultDate: moment().toDate(),
dayNames: [
lang('sunday'),
lang('monday'),
lang('tuesday'),
lang('wednesday'),
lang('thursday'),
lang('friday'),
lang('saturday')
],
dayNamesShort: [
lang('sunday').substring(0, 3),
lang('monday').substring(0, 3),
lang('tuesday').substring(0, 3),
lang('wednesday').substring(0, 3),
lang('thursday').substring(0, 3),
lang('friday').substring(0, 3),
lang('saturday').substring(0, 3)
],
dayNamesMin: [
lang('sunday').substring(0, 2),
lang('monday').substring(0, 2),
lang('tuesday').substring(0, 2),
lang('wednesday').substring(0, 2),
lang('thursday').substring(0, 2),
lang('friday').substring(0, 2),
lang('saturday').substring(0, 2)
],
monthNames: [
lang('january'),
lang('february'),
lang('march'),
lang('april'),
lang('may'),
lang('june'),
lang('july'),
lang('august'),
lang('september'),
lang('october'),
lang('november'),
lang('december')
],
prevText: lang('previous'),
nextText: lang('next'),
currentText: lang('now'),
closeText: lang('close'),
...params
});
}
/**
* Initialize the time picker component.
*
* This method is based on jQuery UI.
*
* @param {jQuery} $target
* @param {Object} [params]
*/
function initializeTimepicker($target, params = {}) {
$target.timepicker({
timeFormat: vars('time_format') === 'regular' ? 'h:mm tt' : 'HH:mm',
currentText: lang('now'),
closeText: lang('close'),
timeOnlyTitle: lang('select_time'),
timeText: lang('time'),
hourText: lang('hour'),
minuteText: lang('minutes'),
...params
});
}
/**
* Initialize the select dropdown component.
*
* This method is based on Select2.
*
* @param {jQuery} $target
* @param {Object} [params]
*/
function initializeDropdown($target, params = {}) {
$target.select2(params);
}
/**
* Initialize the text editor component.
*
* This method is based on Trumbowyg.
*
* @param {jQuery} $target
* @param {Object} [params]
*/
function initializeTextEditor($target, params = {}) {
$target.trumbowyg(params);
}
return {
initializeDatetimepicker,
initializeDatepicker,
initializeTimepicker,
initializeDropdown,
initializeTextEditor,
};
})();