diff --git a/output/timetable.js b/output/timetable.js
index 5045ec0..7122140 100644
--- a/output/timetable.js
+++ b/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(
`
`
);
+// Add help text to the shift timetable section
+$("#shift-timetable-options").prepend(`
+
+ Shift Timetables Help:
+
+ - Select one or more shifts below to view which workers are assigned on each day.
+ - Use the colour pickers to customise shift colours in the timetable and main table.
+ - Toggle between linear and grid view using the "Toggle Linear/Grid View" button.
+
+
+`);
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(
+ ``
+ );
+}
+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();
+
});
\ No newline at end of file