From 0599586f47b3dfd3b2a720d73ccc08d9a8b8fca3 Mon Sep 17 00:00:00 2001 From: Ross Date: Tue, 12 Aug 2025 11:20:51 +0100 Subject: [PATCH] Add worker filter input to shift timetable and update rendering logic --- output/timetable.js | 152 ++++++++++++++++++++++++-------------------- 1 file changed, 82 insertions(+), 70 deletions(-) diff --git a/output/timetable.js b/output/timetable.js index 305a16f..e3e5bb1 100644 --- a/output/timetable.js +++ b/output/timetable.js @@ -494,75 +494,90 @@ function rgb2hex(rgb) { return "#ffe066"; } -// Wrap timetable rendering in a function so we can call it for both views +// Add a worker filter input to the shift timetable section +$("#shift-timetable-options").prepend(` +
+ + +
+`); + +// Store the current filter value +let workerFilterValue = ""; + +// Update the filter value on input +$("#worker-filter-input").on("input", function() { + workerFilterValue = $(this).val().toLowerCase(); + renderShiftTimetable(); +}); + +// Patch renderShiftTimetable to filter workers in both linear and grid views function renderShiftTimetable() { $("#shift-timetable-div").empty(); if (selectedShifts.size === 0) return; - if (!gridViewEnabled) { - - // Original (list) view - let table = $(""); - // Add a header row with "Date", "Week", "Day", "Worker" - let headerRow = $(""); - headerRow.append(""); - table.append(headerRow); - - $("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 = $(""); - row.append(``); - row.append(``); - row.append(``); - - // 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(``); - }); - - // If no workers, add an empty cell - if (workerCells.length === 0) { - row.append(""); - } else { - // If multiple workers, join their names with commas - row.append(workerCells.join("")); - } - - table.append(row); - }); - $("#shift-timetable-div").append(table); - return; + // Helper: returns true if worker name matches filter + function workerMatchesFilter(workerName) { + if (!workerFilterValue) return true; + return workerName.toLowerCase().includes(workerFilterValue); } - //// Get all weeks and days + if (!gridViewEnabled) { + // Linear view + let table = $("
DateWeekDayWorker(s)
${date}${week}${day}${workerName}
"); + let headerRow = $(""); + headerRow.append(""); + table.append(headerRow); + + $("table#main-table th.date").each((n, th) => { + let date = th.dataset.date; + 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 = $(""); + row.append(``); + row.append(``); + row.append(``); + + 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()); + 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(); + if (!workerMatchesFilter(workerName)) return; + 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) { + color = `linear-gradient(90deg, ${shiftColors[matchedShifts[0]]} 0 50%, ${shiftColors[matchedShifts[1]]} 50% 100%)`; + } + workerCells.push(``); + }); + + if (workerCells.length === 0) { + row.append(""); + } else { + row.append(workerCells.join("")); + } + + table.append(row); + }); + $("#shift-timetable-div").append(table); + return; + } + + // Grid view let weeks = []; let daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]; $("table#main-table td[data-week]").each(function () { @@ -571,20 +586,19 @@ function renderShiftTimetable() { }); weeks = weeks.sort((a, b) => parseInt(a) - parseInt(b)); - - // Get all workers who have at least one selected shift let workerIds = []; let workerIdToName = {}; $("table#main-table td.worker").each(function () { let workerId = $(this).attr("data-worker-id"); if (workerId && !workerIds.includes(workerId)) { - workerIds.push(workerId); let workerName = $(this).find("span.name").text().trim(); - workerIdToName[workerId] = workerName; + if (workerMatchesFilter(workerName)) { + workerIds.push(workerId); + workerIdToName[workerId] = workerName; + } } }); - // workerId -> week -> day -> {shifts: [...], name: ...} let cellMap = {}; $("table#main-table td.worker").each(function () { let workerId = $(this).attr("data-worker-id"); @@ -634,8 +648,6 @@ function renderShiftTimetable() { gridTable.append(row); }); $("#shift-timetable-div").append(gridTable); - - } // Patch the timetable button logic to use renderShiftTimetable
DateWeekDayWorker(s)
${date}${week}${day}${workerName}