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

Refactor renderShiftTimetable to enhance list view with date, week, and day headers, and improve worker assignment display with color coding for selected shifts.

Browse Source
This commit is contained in:
Ross
2025-08-12 11:19:21 +01:00
parent 7b16f8d82a
commit f31a54d512
2 changed files with 73 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
output/timetable.js
+57 -30
View File
@@ -501,38 +501,65 @@ function renderShiftTimetable() {
if (!gridViewEnabled) {
// Original (list) view
let table = $("<table>");
$("table#main-table th.date").each((n, th) => {
let row = $("<tr>");
row.append(`<td>${th.dataset.date}</td>`);
$(`table#main-table td[data-date='${th.dataset.date}']`).filter(function () {
let shifts = $(this).attr("data-shift");
if (!shifts) return false;
let cell_shifts = shifts.split(",").map(s => s.trim());
// Show if any selected shift is present
return Array.from(selectedShifts).some(s => cell_shifts.includes(s));
}).each((n, td) => {
let workerTd = $(td).closest("tr").children("td:first");
let workerName = workerTd.find("span.name").text().trim();
// Find which selected shift(s) are present in this cell
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";
if (matchedShifts.length === 1) {
color = shiftColors[matchedShifts[0]];
} else if (matchedShifts.length > 1) {
// Use a 50/50 split background for two shifts
color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`;
}
row.append(`<td style="background:${color}">${workerName}</td>`);
});
// Original (list) view
let table = $("<table id='linear-shift-timetable'>");
// Add a header row with "Date", "Week", "Day", "Worker"
let headerRow = $("<tr>");
headerRow.append("<th>Date</th><th>Week</th><th>Day</th><th>Worker(s)</th>");
table.append(headerRow);
table.append(row);
$("table#main-table th.date").each((n, th) => {
let date = th.dataset.date;
// Try to get week and day from the first matching td
let week = "";
let day = "";
let firstTd = $(`table#main-table td[data-date='${date}']`).first();
if (firstTd.length) {
week = firstTd.attr("data-week") || "";
day = firstTd.attr("data-day") || "";
}
let row = $("<tr>");
row.append(`<td>${date}</td>`);
row.append(`<td>${week}</td>`);
row.append(`<td>${day}</td>`);
// For each worker assigned to a selected shift on this date, add a cell
let workerCells = [];
$(`table#main-table td[data-date='${date}']`).filter(function () {
let shifts = $(this).attr("data-shift");
if (!shifts) return false;
let cell_shifts = shifts.split(",").map(s => s.trim());
// Show if any selected shift is present
return Array.from(selectedShifts).some(s => cell_shifts.includes(s));
}).each((n, td) => {
let workerTd = $(td).closest("tr").children("td:first");
let workerName = workerTd.find("span.name").text().trim();
// Find which selected shift(s) are present in this cell
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";
if (matchedShifts.length === 1) {
color = shiftColors[matchedShifts[0]];
} else if (matchedShifts.length > 1) {
// Use a 50/50 split background for two shifts
color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`;
}
workerCells.push(`<td style="background:${color}">${workerName}</td>`);
});
$("#shift-timetable-div").append(table);
// Click all shift buttons to select all shifts
return;
// If no workers, add an empty cell
if (workerCells.length === 0) {
row.append("<td></td>");
} else {
// If multiple workers, join their names with commas
row.append(workerCells.join(""));
}
table.append(row);
});
$("#shift-timetable-div").append(table);
return;
}
//// Get all weeks and days