Refactor renderShiftTimetable to enhance list view with date, week, and day headers, and improve worker assignment display with color coding for selected shifts.
This commit is contained in:
Ross
+16
-14
@@ -38,7 +38,7 @@ table {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.table-div th {
|
||||
#main-table th {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transform: rotate(90deg) translateX(-100px);
|
||||
@@ -47,12 +47,12 @@ table {
|
||||
|
||||
}
|
||||
|
||||
.table-div th p {
|
||||
#main-table th p {
|
||||
margin: 0 -100%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.table-div th p:before {
|
||||
#main-table th p:before {
|
||||
content: '';
|
||||
width: 0;
|
||||
padding-top: 110%;
|
||||
@@ -61,21 +61,21 @@ table {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.table-div td,
|
||||
#main-table td,
|
||||
th {
|
||||
max-width: 10px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.table-div tr {
|
||||
#main-table tr {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.table-div tr:hover {
|
||||
#main-table tr:hover {
|
||||
background-color: lightblue;
|
||||
}
|
||||
|
||||
.table-div tr:hover .unavailable {
|
||||
#main-table tr:hover .unavailable {
|
||||
|
||||
background-color: lightgray;
|
||||
}
|
||||
@@ -96,7 +96,7 @@ th {
|
||||
|
||||
}
|
||||
|
||||
th.bank-holiday {
|
||||
#main-table th.bank-holiday {
|
||||
color: darkblue;
|
||||
|
||||
}
|
||||
@@ -187,10 +187,8 @@ th.bank-holiday {
|
||||
color: lightcoral;
|
||||
}
|
||||
|
||||
.th {}
|
||||
|
||||
.table-div th.worker,
|
||||
.table-div td.worker {
|
||||
#main-table th.worker,
|
||||
#main-table td.worker {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
max-width: 200px;
|
||||
@@ -210,7 +208,7 @@ th.bank-holiday {
|
||||
max-width: auto;
|
||||
}
|
||||
|
||||
.header th {
|
||||
#main-table.header th {
|
||||
max-width: 200px;
|
||||
|
||||
}
|
||||
@@ -219,7 +217,7 @@ th.bank-holiday {
|
||||
border: 1px dotted orange;
|
||||
} */
|
||||
|
||||
th.site-title {
|
||||
#main-table th.site-title {
|
||||
transform: unset;
|
||||
}
|
||||
|
||||
@@ -362,4 +360,8 @@ button.selected {
|
||||
#main-table td.force-assigned.force-assigned-highlight {
|
||||
background-color: #ffe066 !important;
|
||||
border: 2px solid #ff8800 !important;
|
||||
}
|
||||
|
||||
#linear-shift-timetable td, #linear-shift-timetable th {
|
||||
max-width: unset;
|
||||
}
|
||||
+57
-30
@@ -501,38 +501,65 @@ function renderShiftTimetable() {
|
||||
|
||||
if (!gridViewEnabled) {
|
||||
|
||||
// Original (list) view
|
||||
let table = $("<table>");
|
||||
$("table#main-table th.date").each((n, th) => {
|
||||
let row = $("<tr>");
|
||||
row.append(`<td>${th.dataset.date}</td>`);
|
||||
$(`table#main-table td[data-date='${th.dataset.date}']`).filter(function () {
|
||||
let shifts = $(this).attr("data-shift");
|
||||
if (!shifts) return false;
|
||||
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) => {
|
||||
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>`);
|
||||
});
|
||||
// Original (list) view
|
||||
let table = $("<table id='linear-shift-timetable'>");
|
||||
// Add a header row with "Date", "Week", "Day", "Worker"
|
||||
let headerRow = $("<tr>");
|
||||
headerRow.append("<th>Date</th><th>Week</th><th>Day</th><th>Worker(s)</th>");
|
||||
table.append(headerRow);
|
||||
|
||||
table.append(row);
|
||||
$("table#main-table th.date").each((n, th) => {
|
||||
let date = th.dataset.date;
|
||||
// Try to get week and day from the first matching td
|
||||
let week = "";
|
||||
let day = "";
|
||||
let firstTd = $(`table#main-table td[data-date='${date}']`).first();
|
||||
if (firstTd.length) {
|
||||
week = firstTd.attr("data-week") || "";
|
||||
day = firstTd.attr("data-day") || "";
|
||||
}
|
||||
|
||||
let row = $("<tr>");
|
||||
row.append(`<td>${date}</td>`);
|
||||
row.append(`<td>${week}</td>`);
|
||||
row.append(`<td>${day}</td>`);
|
||||
|
||||
// For each worker assigned to a selected shift on this date, add a cell
|
||||
let workerCells = [];
|
||||
$(`table#main-table td[data-date='${date}']`).filter(function () {
|
||||
let shifts = $(this).attr("data-shift");
|
||||
if (!shifts) return false;
|
||||
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) => {
|
||||
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%)`;
|
||||
}
|
||||
workerCells.push(`<td style="background:${color}">${workerName}</td>`);
|
||||
});
|
||||
$("#shift-timetable-div").append(table);
|
||||
// Click all shift buttons to select all shifts
|
||||
return;
|
||||
|
||||
// If no workers, add an empty cell
|
||||
if (workerCells.length === 0) {
|
||||
row.append("<td></td>");
|
||||
} else {
|
||||
// If multiple workers, join their names with commas
|
||||
row.append(workerCells.join(""));
|
||||
}
|
||||
|
||||
table.append(row);
|
||||
});
|
||||
$("#shift-timetable-div").append(table);
|
||||
return;
|
||||
}
|
||||
|
||||
//// Get all weeks and days
|
||||
|
||||
Reference in New Issue
Block a user