Add shift selection toggle and help text to timetable options

output/timetable.js

@@ -373,6 +373,7 @@ let selectedShifts = new Set();
 let shiftColors = {};
 
 oshifts.forEach((shift, i) => {
+    selectedShifts.add(shift);
     // Assign a unique color for each shift using HSL
     shiftColors[shift] = `hsl(${(i * 360 / oshifts.length)}, 70%, 80%)`;
 });
@@ -381,6 +382,17 @@ oshifts.forEach((shift, i) => {
 $("#shift-timetable-options").append(
     `<button id="toggle-grid-view" style="margin-left:10px;">Toggle Linear/Grid View</button><br/>`
 );
+// Add help text to the shift timetable section
+$("#shift-timetable-options").prepend(`
+    <details id="shift-timetable-help" style="margin-bottom:8px; font-size: 0.95em; color: #444;">
+        <summary><b>Shift Timetables Help:</b></summary>
+        <ul style="margin: 4px 0 0 18px; padding: 0;">
+            <li>Select one or more shifts below to view which workers are assigned on each day.</li>
+            <li>Use the colour pickers to customise shift colours in the timetable and main table.</li>
+            <li>Toggle between linear and grid view using the "Toggle Linear/Grid View" button.</li>
+        </ul>
+    </details>
+`);
 
 let gridViewEnabled = false;
 
@@ -415,7 +427,49 @@ oshifts.forEach(shift => {
     });
     $("#shift-colour-buttons").append(label.append(colorInput));
 });
+// Add the toggle button if not already present
+if ($("#show-all-shifts").length === 0) {
+    $("#shift-timetable-options").append(
+        `<button id="show-all-shifts" style="margin-left:10px;">Show All Shifts</button>`
+    );
+}
 
+let allShiftsShown = false; // Start with all shifts shown by default
+
+function updateShowAllShiftsButton() {
+    if (allShiftsShown) {
+        $("#show-all-shifts").addClass("active").text("Hide All Shifts");
+    } else {
+        $("#show-all-shifts").removeClass("active").text("Show All Shifts");
+    }
+}
+
+// Toggle logic
+$("#show-all-shifts").off("click").on("click", function () {
+    allShiftsShown = !allShiftsShown;
+    if (allShiftsShown) {
+        // Select all shifts
+        oshifts.forEach((shift) => {
+            selectedShifts.add(shift);
+            $(`#shift-timetable-options button[data-shift='${shift}']`)
+                .addClass("selected")
+                .css("background", shiftColors[shift]);
+        });
+    } else {
+        // Deselect all shifts
+        oshifts.forEach((shift) => {
+            selectedShifts.delete(shift);
+            $(`#shift-timetable-options button[data-shift='${shift}']`)
+                .removeClass("selected")
+                .css("background", "");
+        });
+    }
+    updateShowAllShiftsButton();
+    renderShiftTimetable();
+});
+
+// Ensure the button state is correct on page load and after timetable render
+updateShowAllShiftsButton();
 // Utility to convert hsl to hex for initial value
 function rgb2hex(rgb) {
     // Accepts hsl() or rgb() or hex
@@ -477,6 +531,7 @@ function renderShiftTimetable() {
             table.append(row);
         });
         $("#shift-timetable-div").append(table);
+        // Click all shift buttons to select all shifts
         return;
     }
 
@@ -973,4 +1028,5 @@ daysOfWeek.forEach(day => {
 // --- Initial highlight on page load ---
 $(function() {
     updateAllHighlights();
+
 });