gitea
/
Koha-clms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Bug 34440: Add handling for lead/trail display 

This patch adds code to insert classes into the flatpickr for lead and
trail time on bookings and includes some scss additions to highlight
said periods in display.

Sponsored-by: Cuyahoga County Public Library <https://cuyahogalibrary.org/>
Signed-off-by: Kristi Krueger <KKRUEGER@cuyahogalibrary.org>
Signed-off-by: Paul Derscheid <paul.derscheid@lmscloud.de>
Signed-off-by: Katrin Fischer <katrin.fischer@bsz-bw.de>
This commit is contained in:
Martin Renvoize 2024-03-25 22:28:20 +00:00 committed by Katrin Fischer
parent 3475ef06d4
commit bb00bed180
No known key found for this signature in database
GPG Key ID: 0EF6E2C03357A834
2 changed files with 141 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
koha-tmpl/intranet-tmpl/prog/css/src/staff-global.scss
View File

@ -846,6 +846,42 @@ input {
}
}
$dayLeadBackground: #fad2cf !default;
$dayTrailBackground: #fcdcb3 !default;
.flatpickr-day {
&.leadRangeStart {
border-radius: 50px 0 0 50px;
}
&.leadRange {
box-shadow: -2.5 * $dayMargin 0 0 $dayLeadBackground, 2.5 * $dayMargin 0 0 $dayLeadBackground;
background: $dayLeadBackground;
}
&.selected {
&.leadRangeEnd {
border-radius: 0;
}
}
&:hover,
&.selected {
&.trailRangeStart {
border-radius: 0;
}
}
&.trailRange {
box-shadow: -2.5 * $dayMargin 0 0 $dayTrailBackground, 2.5 * $dayMargin 0 0 $dayTrailBackground;
background: $dayTrailBackground;
}
&.trailRangeEnd {
border-radius: 0 50px 50px 0;
}
}
.input-warning {
background-color: #FF9;
border-color: #900;

105
koha-tmpl/intranet-tmpl/prog/js/modals/place_booking.js
View File

@ -759,6 +759,111 @@ $("#placeBookingModal").on("show.bs.modal", function (e) {
});
}
// Add hints for days before the start range and after the end range
let leadDays = 2;
let trailDays = 3;
periodPicker.calendarContainer.addEventListener(
"mouseover",
function (e) {
const target = e.target;
const startDate = periodPicker.selectedDates[0]
? dayjs(periodPicker.selectedDates[0]).startOf(
"day"
)
: null;
if (target.classList.contains("flatpickr-day")) {
const hoverDate = dayjs(target.dateObj).startOf(
"day"
);
let leadStart;
let leadEnd;
const trailStart = hoverDate
.add(0, "day")
.startOf("day");
const trailEnd = hoverDate
.add(trailDays, "day")
.startOf("day");
if (!startDate) {
leadStart = hoverDate
.subtract(leadDays, "day")
.startOf("day");
leadEnd = hoverDate
.subtract(0, "day")
.startOf("day");
} else {
leadStart = startDate
.subtract(leadDays, "day")
.startOf("day");
leadEnd = startDate
.subtract(0, "day")
.startOf("day");
}
periodPicker.calendarContainer
.querySelectorAll(".flatpickr-day")
.forEach(function (dayElem) {
const elemDate = dayjs(
dayElem.dateObj
).startOf("day");
if (elemDate.isSame(leadStart)) {
dayElem.classList.add("leadRangeStart");
} else {
dayElem.classList.remove(
"leadRangeStart"
);
}
if (
elemDate >= leadStart &&
elemDate < leadEnd
) {
dayElem.classList.add("leadRange");
} else {
dayElem.classList.remove("leadRange");
}
if (elemDate.isSame(leadEnd)) {
dayElem.classList.add("leadRangeEnd");
} else {
dayElem.classList.remove(
"leadRangeEnd"
);
}
if (elemDate.isSame(trailStart)) {
dayElem.classList.add(
"trailRangeStart"
);
} else {
dayElem.classList.remove(
"trailRangeStart"
);
}
if (
elemDate > trailStart &&
elemDate <= trailEnd
) {
dayElem.classList.add("trailRange");
} else {
dayElem.classList.remove("trailRange");
}
if (elemDate.isSame(trailEnd)) {
dayElem.classList.add("trailRangeEnd");
} else {
dayElem.classList.remove(
"trailRangeEnd"
);
}
});
}
}
);
// Enable flatpickr now we have date function populated
periodPicker.redraw();
$("#period_fields :input").prop("disabled", false);