Add times to the log

web/static/css/style.css

@@ -740,6 +740,22 @@ div.reminderError .errorHead .reminderName {
     flex-direction: column;
     justify-content: center;
     color: rgb(54, 54, 54);
+    flex-grow: 1;
+}
+
+div.reminderError .errorHead .reminderTime {
+    font-size: 1rem;
+    display: flex;
+    flex-direction: column;
+    flex-shrink: 1;
+    justify-content: center;
+    color: rgb(54, 54, 54);
+    background-color: #ffffff;
+    padding: 8px;
+    border-radius: 4px;
+    border-color: #e5e5e5;
+    border-width: 1px;
+    border-style: solid;
 }
 
 /* other stuff */

web/static/js/reminder_errors.js

@@ -14,16 +14,26 @@ document.addEventListener("paneLoad", (ev) => {
     const template = document.getElementById("reminderError");
     const container = document.getElementById("reminderLog");
 
-    loadErrors().then((res) => {
+    loadErrors()
+        .then((res) => {
             for (const reminder of res) {
                 const newRow = template.content.cloneNode(true);
 
-            newRow.querySelector(".reminderName").textContent = reminder.name;
                 newRow.querySelector(".reminderError").dataset["case"] = reminder.status;
 
+                const statusTime = new luxon.DateTime.fromISO(
+                    reminder.status_change_time,
+                    { zone: "UTC" }
+                );
+                newRow.querySelector(".reminderName").textContent = reminder.name;
+                newRow.querySelector(".reminderTime").textContent = statusTime
+                    .toLocal()
+                    .toLocaleString(luxon.DateTime.DATETIME_MED);
+
                 container.appendChild(newRow);
             }
-    });
-
+        })
+        .finally(() => {
             $loader.classList.add("is-hidden");
+        });
 });