many improvements

output/timetable.css

@@ -18,6 +18,14 @@ table {
 
 }
 
+.shift-table {
+    padding-top: 10px;
+}
+
+.shift-table thead {
+    font-weight: bold;
+}
+
 .table-div {
     /* overflow-x: auto; */
     width: 80%;
@@ -107,10 +115,15 @@ th.bank-holiday {
     color: #0074D9;
 }
 
-.torquay {
+.torquay, .torbay {
     color: #5FA8E8;
 }
 
+.taunton {
+    color: #e85fdf;
+}
+
+
 .unavailable {
     color: lightgray;
 }
@@ -167,7 +180,7 @@ th.bank-holiday {
 }
 
 .nwd {
-    color: brown;
+    color: lightcoral;
 }
 
 .th {}
@@ -233,5 +246,56 @@ summary h2 {
 .large-shift-diff::before {
     content: "*";
     color: red;
-    
+
+}
+
+/* table.transposed {
+    border-collapse: collapse;
+}
+
+table.transposed tr {
+    display: block;
+    float: left;
+}
+
+table.transposed th,
+table.transposed td {
+    display: block;
+    border: 1px solid black;
+    max-width: 100px;
+} */
+table.transposed {
+}
+
+table.transposed tr {
+}
+
+table.transposed th,
+table.transposed td {
+    width: fit-content;
+    max-width: unset;
+    position: relative;
+    border-top: solid 0.5px black;
+    border-right: solid 0.5px black;
+}
+
+table.transposed .Sat {
+    /* opacity: 30%; */
+    /* background-color: lightsteelblue; */
+    border-top: solid 2px lightsteelblue !important;
+}
+
+table.transposed .Sun {
+    border-bottom: solid 2px lightsteelblue !important;
+
+}
+
+table.transposed .bank-holiday {
+    border-bottom: dotted 2px blue !important;
+
+}
+
+table.transposed th.bank-holiday {
+    color: darkblue;
+
 }

output/timetable.js

@@ -161,7 +161,7 @@ function generateExtra() {
             <span>Total shifts: ${total_shifts}, </span>
             <span>Weekends: ${weekends_worked}, </span>
             <span>Bank holidays: ${bank_holidays_worked}, </span>
-            <span class='shift-diff-span'>Summed shift diff: ${summed_shift_diff}, </span>
+            <span class='shift-diff-span'>Summed shift diff: ${summed_shift_diff.toPrecision(2)}, </span>
             
             </div>`)
 
@@ -377,9 +377,61 @@ function viewWorker(worker) {
     </div>`)
     $("body").append(dlg)
 
+    console.log(ds.shiftCounts)
+    shifts = JSON.parse(ds.shiftCounts)
+    shift_targets = JSON.parse(ds.workerTargets)
+    shift_diffs = JSON.parse(ds.shiftDiff)
+
+    let shift_count_table = document.createElement("table")
+    shift_count_table.classList.add("shift-table")
+    let header_row = shift_count_table.createTHead().insertRow();
+    header_row.insertCell().appendChild(document.createTextNode("Shift"))
+    header_row.insertCell().appendChild(document.createTextNode("Count"))
+    header_row.insertCell().appendChild(document.createTextNode("Target"))
+    header_row.insertCell().appendChild(document.createTextNode("Diffs"))
+
+
+    table_body = shift_count_table.createTBody()
+
+    for (const shift in shifts) {
+        let row = table_body.insertRow();
+        row.insertCell().appendChild(document.createTextNode(shift))
+        row.insertCell().appendChild(document.createTextNode(shifts[shift]))
+        row.insertCell().appendChild(document.createTextNode(shift_targets[shift].toPrecision(2)))
+        row.insertCell().appendChild(document.createTextNode(shift_diffs[shift].toPrecision(2)))
+        //console.log(shift, shifts[shift]);
+    }
+
+    dlg.get(0).appendChild(shift_count_table)
     dlg.dialog()
 
 
     console.log(worker);
 
-}
+}
+
+$("#export-div").append($("#main-table").clone().attr("id", "gen-table").addClass("transposed"))
+
+$("#gen-table").each(function() {
+        var $this = $(this);
+        var newrows = [];
+        //$this.find("th.site-title").parent().remove();
+        $this.find("tr").each(function(rowToColIndex){
+            $(this).find("td, th").each(function(colToRowIndex){
+                if(newrows[colToRowIndex] === undefined) { newrows[colToRowIndex] = $("<tr></tr>"); }
+                while(newrows[colToRowIndex].find("td, th").length < rowToColIndex){
+                    newrows[colToRowIndex].append($("<td></td>"));
+                }
+                newrows[colToRowIndex].append($(this));
+            });
+        });
+        $this.find("tr").remove();
+        $.each(newrows, function(){
+            $this.append(this);
+        });
+
+        $this.find("td.rota-day").each((n, el) => {
+            console.log(el)
+            $(el).text(el.dataset.shift)
+        });
+    });