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

output/timetable.js

@@ -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>`);