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;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div th {
|
#main-table th {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transform: rotate(90deg) translateX(-100px);
|
transform: rotate(90deg) translateX(-100px);
|
||||||
@@ -47,12 +47,12 @@ table {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div th p {
|
#main-table th p {
|
||||||
margin: 0 -100%;
|
margin: 0 -100%;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div th p:before {
|
#main-table th p:before {
|
||||||
content: '';
|
content: '';
|
||||||
width: 0;
|
width: 0;
|
||||||
padding-top: 110%;
|
padding-top: 110%;
|
||||||
@@ -61,21 +61,21 @@ table {
|
|||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div td,
|
#main-table td,
|
||||||
th {
|
th {
|
||||||
max-width: 10px;
|
max-width: 10px;
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div tr {
|
#main-table tr {
|
||||||
padding: 0px;
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div tr:hover {
|
#main-table tr:hover {
|
||||||
background-color: lightblue;
|
background-color: lightblue;
|
||||||
}
|
}
|
||||||
|
|
||||||
.table-div tr:hover .unavailable {
|
#main-table tr:hover .unavailable {
|
||||||
|
|
||||||
background-color: lightgray;
|
background-color: lightgray;
|
||||||
}
|
}
|
||||||
@@ -96,7 +96,7 @@ th {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
th.bank-holiday {
|
#main-table th.bank-holiday {
|
||||||
color: darkblue;
|
color: darkblue;
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -187,10 +187,8 @@ th.bank-holiday {
|
|||||||
color: lightcoral;
|
color: lightcoral;
|
||||||
}
|
}
|
||||||
|
|
||||||
.th {}
|
#main-table th.worker,
|
||||||
|
#main-table td.worker {
|
||||||
.table-div th.worker,
|
|
||||||
.table-div td.worker {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 200px;
|
width: 200px;
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
@@ -210,7 +208,7 @@ th.bank-holiday {
|
|||||||
max-width: auto;
|
max-width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header th {
|
#main-table.header th {
|
||||||
max-width: 200px;
|
max-width: 200px;
|
||||||
|
|
||||||
}
|
}
|
||||||
@@ -219,7 +217,7 @@ th.bank-holiday {
|
|||||||
border: 1px dotted orange;
|
border: 1px dotted orange;
|
||||||
} */
|
} */
|
||||||
|
|
||||||
th.site-title {
|
#main-table th.site-title {
|
||||||
transform: unset;
|
transform: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -362,4 +360,8 @@ button.selected {
|
|||||||
#main-table td.force-assigned.force-assigned-highlight {
|
#main-table td.force-assigned.force-assigned-highlight {
|
||||||
background-color: #ffe066 !important;
|
background-color: #ffe066 !important;
|
||||||
border: 2px solid #ff8800 !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) {
|
if (!gridViewEnabled) {
|
||||||
|
|
||||||
// Original (list) view
|
// Original (list) view
|
||||||
let table = $("<table>");
|
let table = $("<table id='linear-shift-timetable'>");
|
||||||
$("table#main-table th.date").each((n, th) => {
|
// Add a header row with "Date", "Week", "Day", "Worker"
|
||||||
let row = $("<tr>");
|
let headerRow = $("<tr>");
|
||||||
row.append(`<td>${th.dataset.date}</td>`);
|
headerRow.append("<th>Date</th><th>Week</th><th>Day</th><th>Worker(s)</th>");
|
||||||
$(`table#main-table td[data-date='${th.dataset.date}']`).filter(function () {
|
table.append(headerRow);
|
||||||
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>`);
|
|
||||||
});
|
|
||||||
|
|
||||||
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
|
// If no workers, add an empty cell
|
||||||
return;
|
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
|
//// Get all weeks and days
|
||||||
|
|||||||
Reference in New Issue
Block a user