From 8ca4bfccc12d50bf492a4dd067e1887c61beaf5d Mon Sep 17 00:00:00 2001
From: Helen Lin <helen.lin@alleninstitute.org>
Date: Mon, 5 Feb 2024 10:29:00 -0800
Subject: [PATCH] add table headings and styling

---
 .../templates/index.html                      | 63 ++++++++++---------
 1 file changed, 35 insertions(+), 28 deletions(-)

diff --git a/src/aind_data_transfer_service/templates/index.html b/src/aind_data_transfer_service/templates/index.html
index b2cce63..99b90ef 100644
--- a/src/aind_data_transfer_service/templates/index.html
+++ b/src/aind_data_transfer_service/templates/index.html
@@ -21,6 +21,10 @@
       text-align: left;
       padding: 8px;
     }
+    th, tr:hover {
+        background-color: #E8EAF6;
+        color: #3F51B5;
+    }
     #preview, #submit { 
         border: none;
         border-radius: 6px;
@@ -101,6 +105,18 @@ <h2>Submit Jobs</h2>
                 $("#message").addClass("error");
             }
         };
+        addTableRow = function(data, table, tr, td, isHeader) {
+            tr = document.createElement('tr');
+            for (var d of data) {
+                td = document.createElement(isHeader ? 'th' : 'td');
+                td.innerHTML = d.value ?? d;
+                if (d.rowspan) {
+                    td.setAttribute("rowspan", d.rowspan);
+                }
+                tr.append(td);
+            }
+            table.appendChild(tr);
+        };
         $(function() {
             $("#preview_form").on("submit", function(e) {
                 e.preventDefault();
@@ -129,39 +145,30 @@ <h2>Submit Jobs</h2>
                         jobs = data["data"]["jobs"];
                         parsing_errors = []
                         let jobsLength = jobs.length;
-                        var table = document.createElement('table'), tr, td, row, cell;
+                        var table = document.createElement('table'), tr, td, row;
+                        addTableRow(
+                            [ "s3_bucket", "platform", "subject_id", "acq_datetime", "modality", "modality.source" ],
+                            table, tr, td, true
+                        );
                         for (row = 0; row < jobsLength; row++) {
                             let job = JSON.parse(jobs[row]);
-                            tr = document.createElement('tr');
-                            td = document.createElement('td');
-                            tr.appendChild(td);
-                            td.innerHTML = job.s3_bucket;
-                            td = document.createElement('td');
-                            tr.appendChild(td);
-                            td.innerHTML = job.platform.abbreviation;
-                            td = document.createElement('td');
-                            tr.appendChild(td);
-                            td.innerHTML = job.subject_id;
-                            td = document.createElement('td');
-                            tr.appendChild(td);
-                            td.innerHTML = job.acq_datetime;
-                            td = document.createElement('td');
-                            table.appendChild(tr);
                             let modalities = job.modalities;
                             let modalitiesLength = modalities.length;
-                            for (mRow = 0; mRow < modalitiesLength; mRow++){
+                            addTableRow(
+                                [   { value: job.s3_bucket,             rowspan: modalitiesLength },
+                                    { value: job.platform.abbreviation, rowspan: modalitiesLength },
+                                    { value: job.subject_id,            rowspan: modalitiesLength },
+                                    { value: job.acq_datetime,          rowspan: modalitiesLength },
+                                    modalities ? modalities[0].modality.abbreviation : "",
+                                    modalities ? modalities[0].source : ""
+                                ], table, tr, td, false
+                            );
+                            for (mRow = 1; mRow < modalitiesLength; mRow++) {
                                 let modality = modalities[mRow]
-                                tr = document.createElement('tr');
-                                td = document.createElement('td');
-                                tr.appendChild(td);
-                                td = document.createElement('td');
-                                tr.appendChild(td);
-                                td.innerHTML = modality.modality.abbreviation;
-                                td = document.createElement('td');
-                                tr.appendChild(td);
-                                td.innerHTML = modality.source;
-                                td.setAttribute("colspan", "4");
-                                table.appendChild(tr);
+                                addTableRow(
+                                    [ modality.modality.abbreviation, modality.source ],
+                                    table, tr, td, false
+                                );
                             }
                         }
                         $("#response").html(table);