Toggle local/UTC time display

fixes #26

Author: mausch

QuartzNetWebConsole.Views/Helpers.vb

@@ -6,7 +6,12 @@
         </form>
     End Function
 
-    Public ReadOnly Stylesheet As XElement = <link rel="stylesheet" type="text/css" href="static.ashx?r=styles.css&amp;t=text%2Fcss"/>
+    Public ReadOnly Stylesheet As XElement() = _
+        <x>
+            <link rel="stylesheet" type="text/css" href="static.ashx?r=styles.css&amp;t=text%2Fcss"/>
+            <button id="time-toggle" style="position: fixed; top: 10px; right: 10px;">Toogle local/UTC time</button>
+            <script src="static.ashx?r=time-toggle.js&amp;t=application%2Fjavascript"></script>
+        </x>.Elements.ToArray()
 
     Public Function YesNo(b As Boolean) As String
         Return If(b, "Yes", "No")

QuartzNetWebConsole.Views/Views.vb

@@ -43,7 +43,7 @@ Public Module Views
                         <%= From e In logs
                             Select
                             <tr>
-                                <td><%= e.Timestamp %></td>
+                                <td class="datetime"><%= e.Timestamp %></td>
                                 <td><%= X.Raw(e.Description) %></td>
                             </tr>
                         %>
@@ -82,7 +82,7 @@ Public Module Views
 				    Job store: <%= metadata.JobStoreType %><br/>
 				    Supports persistence: <%= YesNo(metadata.JobStoreSupportsPersistence) %><br/>
 				    Number of jobs executed: <%= metadata.NumberOfJobsExecuted %><br/>
-				    Running since: <%= metadata.RunningSince %><br/>
+				    Running since: <span class="datetime"><%= metadata.RunningSince %></span><br/>
 				    Status: <%= If(inStandby, "stand-by", "running") %>
                     <br/>
                     <a href="log.ashx">View log</a>
@@ -301,7 +301,7 @@ Public Module Views
                                 <td><%= YesNo(j.Job.PersistJobDataAfterExecution) %></td>
                                 <td><%= YesNo(j.Job.ConcurrentExecutionDisallowed) %></td>
                                 <td><%= YesNo(j.Job.RequestsRecovery) %></td>
-                                <td><%= If(j.JobContext IsNot Nothing, j.JobContext.FireTimeUtc, Nothing) %></td>
+                                <td class="datetime"><%= If(j.JobContext IsNot Nothing, j.JobContext.FireTimeUtc, Nothing) %></td>
                                 <td>
                                     <a href=<%= "triggersByJob.ashx?group=" + j.Job.Key.Group + "&job=" + j.Job.Key.Name %>>Triggers</a>
                                     <%= SimpleForm(op("DeleteJob"), "Delete") %>
@@ -382,10 +382,10 @@ Public Module Views
                                 <%= trigger.JobKey.Group %>
                             </a>
                         </td>
-                        <td><%= trigger.StartTimeUtc %></td>
-                        <td><%= trigger.EndTimeUtc %></td>
-                        <td><%= trigger.FinalFireTimeUtc %></td>
-                        <td><%= trigger.GetNextFireTimeUtc() %></td>
+                        <td class="datetime"><%= trigger.StartTimeUtc %></td>
+                        <td class="datetime"><%= trigger.EndTimeUtc %></td>
+                        <td class="datetime"><%= trigger.FinalFireTimeUtc %></td>
+                        <td class="datetime"><%= trigger.GetNextFireTimeUtc() %></td>
                         <td><%= If(simpleTrigger IsNot Nothing, simpleTrigger.RepeatCount.ToString, "") %></td>
                         <td><%= If(simpleTrigger IsNot Nothing, simpleTrigger.RepeatInterval.ToString, "") %></td>
                         <td><%= If(simpleTrigger IsNot Nothing, simpleTrigger.TimesTriggered.ToString, "") %></td>

QuartzNetWebConsole/QuartzNetWebConsole.csproj

@@ -32,5 +32,6 @@
 
   <ItemGroup>
     <EmbeddedResource Include="Resources\styles.css" />
+    <EmbeddedResource Include="Resources\time-toggle.js" />
   </ItemGroup>
 </Project>

QuartzNetWebConsole/Resources/time-toggle.js

@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const timeToggle = document.getElementById('time-toggle');
+  let isUTC = true;
+  const originalTimes = new Map();
+
+  function convertTime(timeElement) {
+    const originalTime = originalTimes.get(timeElement);
+    if (!originalTime) {
+      return;
+    }
+
+    const date = new Date(Date.parse(originalTime));
+    if (isNaN(date.getTime())) {
+      return;
+    }
+    timeElement.textContent = (function() {
+      if (isUTC) {
+        return date.toISOString();
+      } else {
+        return date.toLocaleString();
+      }
+    })();
+  }
+
+  function toggleTime() {
+    isUTC = !isUTC;
+    const timeElements = document.querySelectorAll('.datetime');
+
+    for (const timeElement of timeElements) {
+      if (!originalTimes.has(timeElement)) {
+        originalTimes.set(timeElement, timeElement.textContent);
+      }
+      convertTime(timeElement);
+    }
+  }
+
+  timeToggle.addEventListener('click', toggleTime);
+});