pipleline-visualiser: change displayed times to users's locale if JS is available

A progressive enhancement. Otherwise the user will see the times as server
times (Europe/London).

Author: AP-Hunt

support/pipeline-visualiser/views/group.erb

@@ -34,7 +34,7 @@
           <% if pipeline.is_running? %>
             <%= pipeline.running_duration.human_str %> ago
           <% else %>
-            <%= pipeline.last_started_at.strftime("%H:%M, %A %d %b %Y ") %>
+            <%= erb :'partials/time', :locals => {time: pipeline.last_started_at } %>
           <% end %>
         </time>
       </td>

support/pipeline-visualiser/views/layout.erb

@@ -18,12 +18,6 @@
         background-color: #F2F3F3;
         padding: 2px 5px;
     }
-
-    time {
-        text-decoration: underline;
-        text-decoration-style: dashed;
-        text-underline-offset: 8px;
-    }
   </style>
 </head>
 
@@ -121,6 +115,16 @@
     } from '/javascript/govuk-frontend-5.8.0.min.js'
     initAll()
   </script>
+
+  <script type="module">
+      document.querySelectorAll("time").forEach((time) => {
+        if(time.dateTime != null) {
+            let globalTime = new Date(time.dateTime);
+            let localTime = globalTime.toLocaleString();
+            time.innerText = localTime;
+        }
+    });
+  </script>
 </body>
 
 </html>

support/pipeline-visualiser/views/partials/time.erb

@@ -0,0 +1 @@
+<time datetime="<%= time.strftime('%Y-%m-%dT%H:%M:%S.%L%z')%>"><%= time.strftime("%H:%M, %A %d %b %Y ") %></time>

support/pipeline-visualiser/views/pipeline.erb

@@ -11,7 +11,7 @@
 </h1>
 
 <p class="govuk-body">
-    <strong>Last execution time</strong> <%= pipeline.last_started_at.strftime("%H:%M, %A %d %b %Y ") %>
+    <strong>Last execution time</strong> <%= erb :'partials/time', :locals => {time: pipeline.last_started_at } %>
 </p>
 <p class="govuk-body">
   <strong>Execution id</strong> <%= pipeline.execution_id %>