From 90adcd1809547a07ba0ca9e97bc10995f3e98046 Mon Sep 17 00:00:00 2001 From: labmecanicatec <58854556+labmecanicatec@users.noreply.github.com> Date: Sun, 22 Feb 2026 15:52:02 -0800 Subject: [PATCH] refactor(manage-schedules): replace native date inputs with flatpickr - Migrate from type=date inputs + hidden fields to text inputs with flatpickr DatePickerSetupControl - Remove AltId usage and associated logic - Convert jQuery event handlers to addEventListener - Toggle flatpickr altInput.disabled based on availability state - Implement bootstrap.Modal for dialog show/hide operations - Use shown.bs.modal event to populate dates when modal opens - Update refreshAvailability and interactions to use querySelector/getElementById - Replace jQuery modal calls with bootstrap.Modal.getInstance - Modernize codebase while maintaining identical visible behavior --- Web/scripts/admin/schedule.js | 85 +++++++++++++++--------- tpl/Admin/Schedules/manage_schedules.tpl | 16 ++--- 2 files changed, 62 insertions(+), 39 deletions(-) diff --git a/Web/scripts/admin/schedule.js b/Web/scripts/admin/schedule.js index 54f54944e..60784bc00 100644 --- a/Web/scripts/admin/schedule.js +++ b/Web/scripts/admin/schedule.js @@ -42,12 +42,10 @@ function ScheduleManagement(opts) { deletePeakTimesButton: $('#deletePeakBtn'), deletePeakTimes: $('#deletePeakTimes'), - availabilityDialog: $('#availabilityDialog'), - availableStartDateTextbox: $('#availabilityStartDate'), - availableStartDate: $('#formattedBeginDate'), - availableEndDateTextbox: $('#availabilityEndDate'), - availableEndDate: $('#formattedEndDate'), - availableAllYear: $('#availableAllYear'), + availabilityDialog: document.getElementById('availabilityDialog'), + availableStartDate: document.getElementById('availabilityStartDate'), + availableEndDate: document.getElementById('availabilityEndDate'), + availableAllYear: document.getElementById('availableAllYear'), availabilityForm: $('#availabilityForm'), concurrentForm: $('#concurrentForm'), @@ -200,14 +198,24 @@ function ScheduleManagement(opts) { elements.deletePeakTimes.val('1'); }); - elements.availableAllYear.on('click', function (e) { - if ($(e.target).is(':checked')) { - elements.availableStartDateTextbox.prop('disabled', true); - elements.availableEndDateTextbox.prop('disabled', true); - } - else { - elements.availableStartDateTextbox.prop('disabled', false); - elements.availableEndDateTextbox.prop('disabled', false); + elements.availableAllYear.addEventListener('change', function (e) { + var fpStart = elements.availableStartDate?._flatpickr; + var fpEnd = elements.availableEndDate?._flatpickr; + + if (e.target.checked) { + if (fpStart) { + fpStart.altInput.disabled = true; + } + if (fpEnd) { + fpEnd.altInput.disabled = true; + } + } else { + if (fpStart) { + fpStart.altInput.disabled = false; + } + if (fpEnd) { + fpEnd.altInput.disabled = false; + } } }); @@ -571,26 +579,43 @@ function ScheduleManagement(opts) { }; var showAvailabilityDialog = function (scheduleId) { - var placeholder = $('[data-schedule-id=' + scheduleId + ']').find('.availabilityPlaceHolder'); - var dates = placeholder.find('.availableDates'); - var startDate = dates.attr('data-start-date'); - var endDate = dates.attr('data-end-date'); - var hasAvailability = dates.data('has-availability') == '1'; - - //elements.availableAllYear.prop('checked', !hasAvailability); - elements.availableStartDateTextbox.val(startDate).trigger('change'); - elements.availableEndDateTextbox.val(endDate).trigger('change'); - - if (!hasAvailability) { - elements.availableAllYear.trigger('click'); - } - elements.availabilityDialog.modal('show'); + var placeholder = document.querySelector('[data-schedule-id="' + scheduleId + '"] .availabilityPlaceHolder'); + var dates = placeholder.querySelector('.availableDates'); + var startDate = dates.getAttribute('data-start-date'); + var endDate = dates.getAttribute('data-end-date'); + var hasAvailability = dates.getAttribute('data-has-availability') == '1'; + + elements.availableAllYear.checked = !hasAvailability; + + elements.availabilityDialog.addEventListener('shown.bs.modal', function () { + + var fpStart = elements.availableStartDate?._flatpickr; + var fpEnd = elements.availableEndDate?._flatpickr; + + if (fpStart) fpStart.setDate(startDate || null, false); + else elements.availableStartDate.value = startDate || ''; + + if (fpEnd) fpEnd.setDate(endDate || null, false); + else elements.availableEndDate.value = endDate || ''; + + elements.availableAllYear.dispatchEvent( + new Event('change', { bubbles: true }) + ); + + }, { once: true }); + + var modal = bootstrap.Modal.getOrCreateInstance(elements.availabilityDialog); + modal.show(); }; var refreshAvailability = function (resultHtml) { - $('[data-schedule-id=' + getActiveScheduleId() + ']').find('.availabilityContent').html(resultHtml); - elements.availabilityDialog.modal('hide'); + var scheduleEl = document.querySelector('[data-schedule-id="' + getActiveScheduleId() + '"]'); + scheduleEl.querySelector('.availabilityContent').innerHTML = resultHtml; + var modalInstance = bootstrap.Modal.getInstance(elements.availabilityDialog); + if (modalInstance) { + modalInstance.hide(); + } }; var toggleConcurrentReservations = function (scheduleId, toggle, container) { diff --git a/tpl/Admin/Schedules/manage_schedules.tpl b/tpl/Admin/Schedules/manage_schedules.tpl index 100e43c60..22e554873 100644 --- a/tpl/Admin/Schedules/manage_schedules.tpl +++ b/tpl/Admin/Schedules/manage_schedules.tpl @@ -685,13 +685,11 @@
- - - - - - + +
-
+
@@ -841,8 +839,8 @@ - {control type="DatePickerSetupControl" ControlId="availabilityStartDate" AltId="formattedBeginDate" DefaultDate=$StartDate} - {control type="DatePickerSetupControl" ControlId="availabilityEndDate" AltId="formattedEndDate" DefaultDate=$EndDate} + {control type="DatePickerSetupControl" ControlId="availabilityStartDate" DefaultDate=$StartDate} + {control type="DatePickerSetupControl" ControlId="availabilityEndDate" DefaultDate=$EndDate} {csrf_token} {include file="javascript-includes.tpl" InlineEdit=true Fullcalendar=true DataTable=true}