Refactor renderShiftTimetable to enhance list view with date, week, and day headers, and improve worker assignment display with color coding for selected shifts.

output/timetable.css

@@ -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;
 }
 
@@ -363,3 +361,7 @@ button.selected {
     background-color: #ffe066 !important;
     border: 2px solid #ff8800 !important;
 }
+
+#linear-shift-timetable td, #linear-shift-timetable th {
+    max-width: unset;
+}

output/timetable.js

@@ -502,11 +502,31 @@ function renderShiftTimetable() {
     if (!gridViewEnabled) {
 
     // Original (list) view
-        let table = $("<table>");
+    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#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>${th.dataset.date}</td>`);
-            $(`table#main-table td[data-date='${th.dataset.date}']`).filter(function () {
+        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());
@@ -525,13 +545,20 @@ function renderShiftTimetable() {
                 // 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>`);
+            workerCells.push(`<td style="background:${color}">${workerName}</td>`);
         });
 
+        // 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);
-        // Click all shift buttons to select all shifts
     return;
     }