ross/proc-rota
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add toggle for showing shift names and button to remove shift colours in timetable

Browse Source
This commit is contained in:
Ross
2025-08-12 11:53:11 +01:00
parent d55b1d38ea
commit 7cd2cec65c
1 changed files with 42 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
output/timetable.js
+42 -3
View File
@@ -530,6 +530,8 @@ function renderWorkerCheckboxes() {
// Store the current filter value (set of workerIds)
let workerFilterSet = new Set();
// Store the current setting
let showShiftNames = false;
// Call this after the DOM is ready and after timetable is rendered
renderWorkerCheckboxes();
@@ -548,7 +550,38 @@ $(document).on("change", "input[name='worker-filter-checkbox']", function() {
renderShiftTimetable();
});
// Patch renderShiftTimetable to filter workers in both linear and grid views
// Add a checkbox to show/hide shift names in the shift timetable section
$("#shift-timetable-options").prepend(`
<div id="shift-timetable-show-shift-names" style="margin-bottom:8px;">
<label>
<input type="checkbox" id="show-shift-names-checkbox">
Show shift names in timetable
</label>
</div>
`);
// Add a button to remove all shift timetable colours (set to white)
$("#shift-colour-controls").append(
`<button id="remove-shift-colours" style="margin-left:10px;">Remove Shift Colours</button>`
);
$("#remove-shift-colours").on("click", function () {
// Set all shift colours to white
oshifts.forEach(shift => {
shiftColors[shift] = "#ffffff";
// Update the colour picker if present
$(`.shift-colour-picker[data-shift='${shift}']`).val("#ffffff");
// Update the corresponding shift button color if selected
$(`#shift-timetable-options button[data-shift='${shift}']`).css("background", selectedShifts.has(shift) ? "#ffffff" : "");
});
renderShiftTimetable();
});
$("#show-shift-names-checkbox").on("change", function() {
showShiftNames = $(this).is(":checked");
renderShiftTimetable();
});
// Patch renderShiftTimetable to show shift names if enabled
function renderShiftTimetable() {
console.log("Render shift timetable");
console.log(workerFilterSet)
@@ -598,12 +631,15 @@ function renderShiftTimetable() {
let cell_shifts = $(td).attr("data-shift").split(",").map(s => s.trim());
let matchedShifts = Array.from(selectedShifts).filter(s => cell_shifts.includes(s));
let color = "#fff";
let shiftLabel = "";
if (matchedShifts.length === 1) {
color = shiftColors[matchedShifts[0]];
if (showShiftNames) shiftLabel = `<span style="font-size:0.9em; color:#333;"> (${matchedShifts[0]})</span>`;
} else if (matchedShifts.length > 1) {
color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`;
if (showShiftNames) shiftLabel = `<span style="font-size:0.9em; color:#333;"> (${matchedShifts.join(", ")})</span>`;
}
workerCells.push(`<td style="background:${color}">${workerName}</td>`);
workerCells.push(`<td style="background:${color}">${workerName}${shiftLabel}</td>`);
});
if (workerCells.length === 0) {
@@ -676,12 +712,15 @@ function renderShiftTimetable() {
let matchedShifts = Array.from(selectedShifts).filter(s => shifts.includes(s));
if (matchedShifts.length > 0) {
let color = "#fff";
let shiftLabel = "";
if (matchedShifts.length === 1) {
color = shiftColors[matchedShifts[0]];
if (showShiftNames) shiftLabel = `<span style="font-size:0.9em; color:#333;"> (${matchedShifts[0]})</span>`;
} else if (matchedShifts.length > 1) {
color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`;
if (showShiftNames) shiftLabel = `<span style="font-size:0.9em; color:#333;"> (${matchedShifts.join(", ")})</span>`;
}
cellContent += `<div style="background:${color};margin:1px 0;padding:0 2px;border-radius:3px;display:inline-block;">${worker.name}</div> `;
cellContent += `<div style="background:${color};margin:1px 0;padding:0 2px;border-radius:3px;display:inline-block;">${worker.name}${shiftLabel}</div> `;
}
}
row.append(`<td style="border:1px solid #888; min-width:40px; text-align:center;">${cellContent}</td>`);