+
+`);
+$("#shift-timetable-options").append(shiftColourControls);
+
+// Add colour pickers for each shift
+oshifts.forEach(shift => {
+ // Colour picker for the shift
+ let colorInput = $(``);
+ // Label for the shift
+ let label = $(``);
+ // On change, update the shiftColors map, button color, and re-render the timetable
+ colorInput.on("input", function () {
+ shiftColors[shift] = $(this).val();
+ // Update the corresponding shift button color
+ $(`#shift-timetable-options button[data-shift='${shift}']`).css("background", selectedShifts.has(shift) ? shiftColors[shift] : "");
+ renderShiftTimetable();
});
+ $("#shift-colour-buttons").append(label.append(colorInput));
+});
- 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]);
+// Utility to convert hsl to hex for initial value
+function rgb2hex(rgb) {
+ // Accepts hsl() or rgb() or hex
+ if (rgb.startsWith("#")) return rgb;
+ if (rgb.startsWith("hsl")) {
+ // Convert hsl to rgb
+ let hsl = rgb.match(/hsl\(([\d.]+),\s*([\d.]+)%,\s*([\d.]+)%\)/);
+ if (!hsl) return "#ffe066";
+ let h = Number(hsl[1]), s = Number(hsl[2]) / 100, l = Number(hsl[3]) / 100;
+ let a = s * Math.min(l, 1 - l);
+ function f(n) {
+ let k = (n + h / 30) % 12;
+ let color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
+ return Math.round(255 * color);
}
+ return "#" + [f(0), f(8), f(4)].map(x => x.toString(16).padStart(2, "0")).join("");
+ }
+ if (rgb.startsWith("rgb")) {
+ let rgbArr = rgb.match(/\d+/g).map(Number);
+ return "#" + rgbArr.map(x => x.toString(16).padStart(2, "0")).join("");
+ }
+ return "#ffe066";
+}
- // Update timetable
- $("#shift-timetable-div").empty();
- if (selectedShifts.size === 0) return;
+// Wrap timetable rendering in a function so we can call it for both views
+function renderShiftTimetable() {
+ $("#shift-timetable-div").empty();
+ if (selectedShifts.size === 0) return;
+ if (!gridViewEnabled) {
+
+ // Original (list) view
let table = $("
");
$("table#main-table th.date").each((n, th) => {
let row = $("
");
@@ -430,11 +477,111 @@ oshifts.forEach((shift) => {
table.append(row);
});
$("#shift-timetable-div").append(table);
+ return;
+ }
+
+ //// Get all weeks and days
+ let weeks = [];
+ let daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
+ $("table#main-table td[data-week]").each(function () {
+ let week = $(this).attr("data-week");
+ if (week && !weeks.includes(week)) weeks.push(week);
+ });
+ 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;
+ }
+ });
+
+ // workerId -> week -> day -> {shifts: [...], name: ...}
+ let cellMap = {};
+ $("table#main-table td.worker").each(function () {
+ let workerId = $(this).attr("data-worker-id");
+ let workerName = $(this).find("span.name").text().trim();
+ if (!cellMap[workerId]) cellMap[workerId] = { name: workerName, cells: {} };
+ });
+ $("table#main-table td[data-week][data-day]").each(function () {
+ let td = $(this);
+ let tr = td.closest("tr");
+ let workerTd = tr.find("td.worker");
+ let workerId = workerTd.attr("data-worker-id");
+ let week = td.attr("data-week");
+ let day = td.attr("data-day");
+ let shifts = (td.attr("data-shift") || "").split(",").map(s => s.trim()).filter(Boolean);
+ if (workerId && week && day) {
+ if (!cellMap[workerId].cells[week]) cellMap[workerId].cells[week] = {};
+ cellMap[workerId].cells[week][day] = shifts;
+ }
+ });
+
+ let gridTable = $(`