Add color coding for selected shifts in timetable and update button styles

output/timetable.css

@@ -331,3 +331,8 @@ table.transposed th.bank-holiday {
     background-color: #ffe066 !important;
     border: 2px solid #ff8800 !important;
 }
+
+button.selected {
+    background: #0074d9;
+    color: #fff;
+}

output/timetable.js

@@ -364,31 +364,75 @@ oshifts.forEach((shift) => {
 
 });
 
-oshifts.forEach((shift) => {
+let selectedShifts = new Set();
-    button = $(`<button data-shift='${shift}'>${shift}</button>`)
 
-    button.on("click", (evt) => {
+let shiftColors = {};
-        console.log(evt.target.dataset.shift)
+
+oshifts.forEach((shift, i) => {
+    // Assign a unique color for each shift using HSL
+    shiftColors[shift] = `hsl(${(i * 360 / oshifts.length)}, 70%, 80%)`;
+});
+
+oshifts.forEach((shift) => {
+    let button = $(`<button data-shift='${shift}'>${shift}</button>`);
+    // Set the button background to default (no color) initially
+    button.css({
+        background: "",
+        border: "1px solid #888",
+        margin: "2px",
+        color: "#222"
+    });
+
+    button.on("click", function (evt) {
+        let s = evt.target.dataset.shift;
+        if (selectedShifts.has(s)) {
+            selectedShifts.delete(s);
+            $(this).removeClass("selected");
+            // Remove color when not selected
+            $(this).css("background", "");
+        } else {
+            selectedShifts.add(s);
+            $(this).addClass("selected");
+            // Set color when selected
+            $(this).css("background", shiftColors[shift]);
+        }
+
+        // Update timetable
         $("#shift-timetable-div").empty();
-        table = $("<table>");
+        if (selectedShifts.size === 0) return;
+
+        let table = $("<table>");
         $("table#main-table th.date").each((n, th) => {
-            row = $("<tr>")
+            let row = $("<tr>");
             row.append(`<td>${th.dataset.date}</td>`);
-            $(`table#main-table td[data-date='${th.dataset.date}']`).filter(function() {
+            $(`table#main-table td[data-date='${th.dataset.date}']`).filter(function () {
                 let shifts = $(this).attr("data-shift");
                 if (!shifts) return false;
-                return shifts.split(",").map(s => s.trim()).includes(evt.target.dataset.shift);
+                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) => {
-                row.append($(td).closest("tr").children("td:first").clone());
+                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>`);
             });
 
-            table.append(row)
+            table.append(row);
         });
         $("#shift-timetable-div").append(table);
+    });
 
-    })
+    $("#shift-timetable-options").append(button);
-
-    $("#shift-timetable-options").append(button)
 });
 
 //$("table.summary")