added color highlight for failed and pending jobs

plazi · Feb 29, 2024 · 55bb8cf · 55bb8cf
1 parent e28e44e
commit 55bb8cf
Showing 1 changed file with 23 additions and 9 deletions.
diff --git a/web/index.html b/web/index.html
@@ -1,22 +1,34 @@
 <!DOCTYPE html>
 <html>
+
 <head>
     <meta charset='utf-8'>
     <meta http-equiv='X-UA-Compatible' content='IE=edge'>
     <title>GG2RDF</title>
     <meta name='viewport' content='width=device-width, initial-scale=1'>
-    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
-    <script src='main.js'></script>
     <style>
         table {
-            border: 2px solid black
+            border: 2px solid black;
+            border-collapse: collapse;
         }
-        th, td {
-        border-bottom: 1px solid;
-        border-right: 1px dashed;
+
+        th,
+        td {
+            border-bottom: 1px solid;
+            border-right: 1px dashed;
+            padding: 2px 4px;
+        }
+
+        .failed {
+            background: #fcc;
+        }
+
+        .pending {
+            background: #cef;
         }
     </style>
 </head>
+
 <body>
     <h1>GG2RDF</h1>
     <p>The Plazi service to transform GoldenGate XML into Turtle RDF.</p>
@@ -28,13 +40,15 @@ <h1>GG2RDF</h1>
         </tr>
     </table>
     <script type="module">
-        const response = await fetch("jobs.json")
-        const jobs = await response.json()
+        const response = await fetch("jobs.json");
+        const jobs = await response.json();
         for (const jobStatus of jobs) {
             const row = document.createElement("tr");
             jobsTable.appendChild(row);
-            row.innerHTML = `<td>${jobStatus.job.id}</td><td>${jobStatus.status}</td><td><a href="${jobStatus.dir}/log.txt">${jobStatus.dir}/log.txt</a></td>`
+            row.classList.add(jobStatus.status);
+            row.innerHTML = `<td>${jobStatus.job.id}</td><td>${jobStatus.status}</td><td><a href="${jobStatus.dir}/log.txt">${jobStatus.dir}/log.txt</a></td>`;
         }
     </script>
 </body>
+
 </html>