Skip to content

Migrate native date inputs to Flatpickr and modernize JS #1064

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
labmecanicatec wants to merge 1 commit into
base: develop
Choose a base branch
from
Open

Migrate native date inputs to Flatpickr and modernize JS #1064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion Web/scripts/admin/announcement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ function AnnouncementManagement(opts) {
elements.editResourceGroups.trigger('change');
}

new bootstrap.Modal(editDialog).show();
new bootstrap.Modal(elements.editDialog).show();

elements.editDialog.addEventListener('shown.bs.modal', () => {
if (elements.editBegin[0]?._flatpickr && announcement.start) {
Expand Down
6 changes: 3 additions & 3 deletions Web/scripts/admin/blackouts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ function BlackoutManagement(opts) {
var options = opts;

var elements = {
startDate: $("#formattedStartDate"),
endDate: $("#formattedEndDate"),
startDate: $("#startDate"),
endDate: $("#endDate"),
scheduleId: $("#scheduleId"),
resourceId: $("#resourceId"),
blackoutTable: $("#blackoutTable"),
Expand Down Expand Up @@ -270,4 +270,4 @@ function BlackoutManagement(opts) {
ChangeUpdateScope(options.scopeOpts.full);
});
}
}
}
31 changes: 22 additions & 9 deletions Web/scripts/availability-search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,9 @@ function AvailabilitySearch(options) {
availabilityResults: $('#availability-results'),
anyResource: $('#anyResource'),
resourceGroups: $('#resourceGroups'),
// today: $('#today'),
// tomorrow: $('#tomorrow'),
// thisweek: $('#thisweek'),
daterange: $('input[name="AVAILABILITY_RANGE"]'),
beginDate: $('#beginDate'),
endDate: $('#endDate'),
beginDate: $('#BeginDate'),
endDate: $('#EndDate'),
specificTime: $('#specificTime'),
hours: $('#hours'),
minutes: $('#minutes'),
Expand Down Expand Up @@ -42,12 +39,12 @@ function AvailabilitySearch(options) {

elements.daterange.change(function (e) {
if ($(e.target).val() == 'daterange') {
elements.beginDate.removeAttr('disabled');
elements.endDate.removeAttr('disabled');
setFlatpickrDisabled(elements.beginDate, false);
setFlatpickrDisabled(elements.endDate, false);
}
else {
elements.beginDate.val('').attr('disabled', 'disabled');
elements.endDate.val('').attr('disabled', 'disabled');
setFlatpickrDisabled(elements.beginDate, true);
setFlatpickrDisabled(elements.endDate, true);
}
});

Expand All @@ -70,6 +67,22 @@ function AvailabilitySearch(options) {
});
};

function setFlatpickrDisabled(input, disabled) {
var fp = input[0]?._flatpickr;

input.prop('disabled', disabled);

if (fp) {
if (fp.altInput) {
fp.altInput.disabled = disabled;
}

if (disabled) {
fp.close();
}
}
}

var showSearchResults = function (data) {
elements.availabilityResults.empty().html(data);
elements.availabilityResults.find('.resourceName').each(function () {
Expand Down
45 changes: 22 additions & 23 deletions Web/scripts/recurrence.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,15 @@ function Recurrence(recurOptions, recurElements, prefix) {
repeatOptions: $('#' + prefix + 'repeatOptions'),
repeatDiv: $('#' + prefix + 'repeatDiv'),
repeatInterval: $('#' + prefix + 'repeatInterval'),
repeatTermination: $('#' + prefix + 'formattedEndRepeat'),
repeatTerminationTextbox: $('#' + prefix + 'EndRepeat'),
beginDate: $('#' + prefix + 'formattedBeginDate'),
endDate: $('#' + prefix + 'formattedEndDate'),
repeatTermination: $('#' + prefix + 'EndRepeat'),
beginDate: $('#' + prefix + 'BeginDate'),
endDate: $('#' + prefix + 'EndDate'),
beginTime: $('#' + prefix + 'BeginPeriod'),
endTime: $('#' + prefix + 'EndPeriod'),
repeatOnWeeklyDiv: $('#' + prefix + 'repeatOnWeeklyDiv'),
repeatOnMonthlyDiv: $('#' + prefix + 'repeatOnMonthlyDiv'),
addDateBtn: $('#' + prefix + 'AddDate'),
repeatDateFormatted: $('#' + prefix + 'formattedRepeatDate'),
repeatDate: $('#' + prefix + 'RepeatDate'),
repeatDate: document.getElementById(prefix + 'RepeatDate'),
customDatesDiv: $('#' + prefix + 'customDatesDiv')
};

Expand Down Expand Up @@ -113,41 +111,41 @@ function Recurrence(recurOptions, recurElements, prefix) {
};

function InitializeDateElements() {
elements.beginDate.change(function () {
elements.beginDate.on('change', function () {
ToggleRepeatOptions();
});

elements.endDate.change(function () {
elements.endDate.on('change', function () {
ToggleRepeatOptions();
});

elements.beginTime.change(function () {
elements.beginTime.on('change', function () {
ToggleRepeatOptions();
});

elements.endTime.change(function () {
elements.endTime.on('change', function () {
ToggleRepeatOptions();
});
}

function InitializeRepeatElements() {
elements.repeatOptions.change(function () {
elements.repeatOptions.on('change', function () {
ChangeRepeatOptions();
AdjustTerminationDate();
NotifyChange();
});

elements.repeatInterval.change(function () {
elements.repeatInterval.on('change', function () {
AdjustTerminationDate();
NotifyChange();
});

elements.beginDate.change(function () {
elements.beginDate.on('change', function () {
AdjustTerminationDate();
NotifyChange();
});

elements.repeatTermination.change(function () {
elements.repeatTermination.on('change', function () {
terminationDateSetManually = true;
NotifyChange();
});
Expand All @@ -167,11 +165,11 @@ function Recurrence(recurOptions, recurElements, prefix) {
$("#" + prefix + "repeatOnMonthlyDiv :radio[value='" + options.repeatMonthlyType + "']").prop('checked', true);
}

elements.repeatOnWeeklyDiv.find('input[type="checkbox"]').off('change').on('change', function() {
elements.repeatOnWeeklyDiv.find('input[type="checkbox"]').off('change').on('change', function () {
NotifyChange();
});

elements.repeatOnMonthlyDiv.find('input[type="radio"]').off('change').on('change', function() {
elements.repeatOnMonthlyDiv.find('input[type="radio"]').off('change').on('change', function () {
NotifyChange();
});
}
Expand All @@ -181,10 +179,10 @@ function Recurrence(recurOptions, recurElements, prefix) {
elements.repeatOptions.val(value);
elements.repeatOptions.trigger('change');
if (disabled) {
$('select, input', elements.repeatDiv).prop("disabled", 'disabled');
$('select, input', elements.repeatDiv).prop("disabled", true);
}
else {
$('select, input', elements.repeatDiv).removeAttr("disabled");
$('select, input', elements.repeatDiv).prop("disabled", false);
}
};

Expand All @@ -195,15 +193,15 @@ function Recurrence(recurOptions, recurElements, prefix) {
elements.repeatOptions.val('none');
elements.repeatOptions.trigger('change');
}
elements.repeatOptions.find("option[value='daily']").prop("disabled", "disabled");
elements.repeatOptions.find("option[value='daily']").prop("disabled", true);
elements.repeatOnWeeklyDiv.addClass('d-none');
}
else {
if (repeatToggled) {
SetValue(elements.repeatOptions.data["current"], false);
repeatToggled = false;
}
elements.repeatOptions.find("option[value='daily']").removeAttr("disabled");
elements.repeatOptions.find("option[value='daily']").prop("disabled", false);

}
};
Expand All @@ -228,18 +226,19 @@ function Recurrence(recurOptions, recurElements, prefix) {
else if (repeatOption == 'monthly') {
newEndDate.setMonth(newEndDate.getMonth() + interval);
}
else if (repeatOption = 'yearly') {
else if (repeatOption == 'yearly') {
newEndDate.setFullYear(newEndDate.getFullYear() + interval);
}
else {
newEndDate = currentEnd;
}

elements.repeatTerminationTextbox.datepicker("setDate", newEndDate);
elements.repeatTermination[0]._flatpickr.setDate(newEndDate, false);

};

var OnRepeatDateAdded = function () {
AddRepeatDate(elements.repeatDateFormatted.val(), elements.repeatDate.val());
AddRepeatDate(elements.repeatDate.value, elements.repeatDate._flatpickr.altInput.value);
};

var AddRepeatDate = function (systemFormattedDate, userFormattedDate) {
Expand Down
39 changes: 15 additions & 24 deletions Web/scripts/reservation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,8 @@ function Reservation(opts) {
var options = opts;

var elements = {
beginDate: $('#formattedBeginDate'),
endDate: $('#formattedEndDate'),
beginDateTextbox: $('#BeginDate'),
endDateTextbox: $('#EndDate'),
beginDate: $('#BeginDate'),
endDate: $('#EndDate'),

beginTime: $('#BeginPeriod'),
endTime: $('#EndPeriod'),
Expand Down Expand Up @@ -602,8 +600,7 @@ function Reservation(opts) {
var currentEndDate = new Date(elements.endDate.val() + 'T' + elements.endTime.val());
currentEndDate.setDate(currentEndDate.getDate() + diffDays);

elements.endDateTextbox.datepicker("setDate", currentEndDate);
elements.endDate.trigger('change');
elements.endDate[0]._flatpickr.setDate(currentEndDate, true);
};

var SelectRepeatWeekday = function () {
Expand Down Expand Up @@ -755,7 +752,7 @@ function Reservation(opts) {
elements.beginTime.data['beginTimePreviousVal'] = elements.beginTime.val();

function BeginDateChanged() {
PopulatePeriodDropDown(elements.beginDate, elements.beginTime, elements.beginDateTextbox, 'begin');
PopulatePeriodDropDown(elements.beginDate, elements.beginTime, 'begin');
AdjustEndDate();
DisplayDuration();
SelectRepeatWeekday();
Expand All @@ -764,7 +761,7 @@ function Reservation(opts) {
}

function EndDateChanged() {
PopulatePeriodDropDown(elements.endDate, elements.endTime, elements.endDateTextbox, 'end');
PopulatePeriodDropDown(elements.endDate, elements.endTime, 'end');
DisplayDuration();
CalculateCredits();
elements.endDate.data['endPreviousVal'] = elements.endDate.val();
Expand Down Expand Up @@ -795,13 +792,6 @@ function Reservation(opts) {
CalculateCredits();
});

elements.beginDateTextbox.change(function (e) {
BeginDateChanged();
});
elements.endDateTextbox.change(function (e) {
EndDateChanged();
});

var previousDateEndsAtMidnight = function (scheduleId, date) {
var currDate = moment(date, "YYYY-MM-DD");
currDate.subtract(1, 'days');
Expand Down Expand Up @@ -836,11 +826,12 @@ function Reservation(opts) {
return layoutCache[weekday];
};

var PopulatePeriodDropDown = function (dateElement, periodElement, dateTextbox, type) {
var PopulatePeriodDropDown = function (dateElement, periodElement, type) {

var prevDate = new Date(dateElement.data['previousVal']);
var prevDate = new Date(dateElement.data('previousVal'));
var currDate = new Date(dateElement.val());
if (prevDate.getTime() == currDate.getTime()) {

if (prevDate.getTime() === currDate.getTime()) {
return;
}

Expand All @@ -865,23 +856,23 @@ function Reservation(opts) {
periodElement.empty();
$.map(layoutItems, function (item) {
if (item.isReservable) {
if (type == 'begin') {
if (type === 'begin') {
items.push('<option value="' + item.begin + '">' + item.label + '</option>');
} else {
items.push('<option value="' + item.end + '">' + item.labelEnd + '</option>');

}
} else {
if (type == 'end' && item.begin == '00:00:00' && previousDateEndsAtMidnight(scheduleId, dateElement.val())) {
if (type === 'end' && item.begin === '00:00:00' && previousDateEndsAtMidnight(scheduleId, dateElement.val())) {
selectedPeriod = null;
items.push('<option value="' + item.begin + '" selected="selected">' + item.label + '</option>');
}
}
});

if (items.length == 0) {
var nextDate = moment(dateElement.val()).add(1, 'days').toDate();
dateTextbox.datepicker("setDate", nextDate);
if (items.length === 0) {
var nextDate = new Date(dateElement.val());
nextDate.setDate(nextDate.getDate() + 1);
dateElement[0]._flatpickr.setDate(nextDate, true);
dateElement.trigger('change');
} else {
var html = items.join('');
Expand Down
Loading