From 14f2c8c8f9343949c195e0904ee888f8a63a20bf Mon Sep 17 00:00:00 2001
From: "Sean R. Abraham" <seanabraham@gmail.com>
Date: Thu, 14 Nov 2024 10:57:14 -0500
Subject: [PATCH] remove time zone ambiguity, drop momentJS dependency

This makes it clear in the UI that times are all in the user's
time zone, not Pacific. It does this using modern JavaScript time
capabilities, so we can drop use of the long-deprecated momentJS
dependency.

I'd kind of like to extend this to always show times in LA time,
but it'd be kind of ugly to hardcode America/Los_Angeles in the
frontend code. This is a good stepping stone, anyway.

https://github.com/burningmantech/ranger-ims-server/issues/1407
---
 CHANGELOG.md                               |  5 +++
 src/ims/application/_external.py           | 20 -----------
 src/ims/config/_urls.py                    |  2 --
 src/ims/element/page/_page.py              |  1 -
 src/ims/element/static/ims.js              | 39 +++++++++++++++++++---
 src/ims/element/static/incident_reports.js | 17 ++++++----
 src/ims/element/static/incidents.js        | 16 +++++----
 7 files changed, 60 insertions(+), 40 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8dcd46132..9bdd0c984 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,11 @@ Each month below should look like the following, using the same ordering for the
 - Added full Unicode support to IMS. All text fields now accept previously unsupported characters, like those from Cyrillic, Chinese, emoji, and much more ([#1353](https://github.com/burningmantech/ranger-ims-server/issues/1353))
 - Started doing client-side retries on any EventSource connection failures. This should mean that an IMS web session will be better kept in sync with incident updates, in particular in the off-season, when IMS is running on AWS ([#1389](https://github.com/burningmantech/ranger-ims-server/pull/1389))
 - Added a warning banner to non-production instances of the web UI, to make sure people don't accidentally put prod data into non-production IMS instances. [(#1366](https://github.com/burningmantech/ranger-ims-server/issues/1366))
+- Started showing full datetimes, including time zone, when a user hovers over a time on the incidents page. All times have always been in the user's locale, but this wasn't indicated anywhere ([#1412](https://github.com/burningmantech/ranger-ims-server/pull/1412)
+
+### Removed
+
+- Got rid of Moment.js dependency, as it's deprecated and we're able to use the newer Intl JavaScript browser construct instead ([#1412](https://github.com/burningmantech/ranger-ims-server/pull/1412)
 
 ### Fixed
 
diff --git a/src/ims/application/_external.py b/src/ims/application/_external.py
index 6368fc014..fd59f242c 100644
--- a/src/ims/application/_external.py
+++ b/src/ims/application/_external.py
@@ -683,13 +683,11 @@ class ExternalApplication:
     bootstrapVersionNumber = "3.3.7"
     jqueryVersionNumber = "3.1.0"
     dataTablesVersionNumber = "1.10.12"
-    momentVersionNumber = "2.22.2"
     lscacheVersionNumber = "1.0.5"
 
     bootstrapVersion = f"bootstrap-{bootstrapVersionNumber}-dist"
     jqueryVersion = f"jquery-{jqueryVersionNumber}"
     dataTablesVersion = f"DataTables-{dataTablesVersionNumber}"
-    momentVersion = f"moment-{momentVersionNumber}"
     lscacheVersion = f"lscache-{lscacheVersionNumber}"
 
     bootstrapSourceURL = URL.fromText(
@@ -712,11 +710,6 @@ class ExternalApplication:
         f"DataTables-{dataTablesVersionNumber}.zip"
     )
 
-    momentJSSourceURL = URL.fromText(
-        f"https://cdnjs.cloudflare.com/ajax/libs/moment.js/"
-        f"{momentVersionNumber}/moment.min.js"
-    )
-
     lscacheJSSourceURL = URL.fromText(
         f"https://raw.githubusercontent.com/pamelafox/lscache/"
         f"{lscacheVersionNumber}/lscache.min.js"
@@ -802,19 +795,6 @@ async def dataTablesResource(self, request: IRequest) -> KleinRenderable:
             *names,
         )
 
-    @router.route(_unprefix(URLs.momentJS), methods=("HEAD", "GET"))
-    @static
-    async def momentJSResource(self, request: IRequest) -> KleinRenderable:
-        """
-        Endpoint for moment.js.
-        """
-        request.setHeader(
-            HeaderName.contentType.value, ContentType.javascript.value
-        )
-        return await self.cachedResource(
-            request, self.momentJSSourceURL, f"{self.momentVersion}.min.js"
-        )
-
     @router.route(_unprefix(URLs.lscacheJS), methods=("HEAD", "GET"))
     @static
     async def lscacheJSResource(self, request: IRequest) -> KleinRenderable:
diff --git a/src/ims/config/_urls.py b/src/ims/config/_urls.py
index 0f6a243ef..5d95f03bb 100644
--- a/src/ims/config/_urls.py
+++ b/src/ims/config/_urls.py
@@ -97,8 +97,6 @@ class URLs:
         "media", "js", "dataTables.bootstrap.min.js"
     )
 
-    momentJS: ClassVar[URL] = external.child("moment.min.js")
-
     lscacheJS: ClassVar[URL] = external.child("lscache.min.js")
 
     # Web application
diff --git a/src/ims/element/page/_page.py b/src/ims/element/page/_page.py
index 169214785..f41b1f311 100644
--- a/src/ims/element/page/_page.py
+++ b/src/ims/element/page/_page.py
@@ -66,7 +66,6 @@ def add(name: str) -> None:
 
             if name == "ims":
                 add("jquery")
-                add("moment")
 
             try:
                 result[name] = getattr(urls, f"{name}JS")
diff --git a/src/ims/element/static/ims.js b/src/ims/element/static/ims.js
index b4f9b8ea6..6c69ef567 100644
--- a/src/ims/element/static/ims.js
+++ b/src/ims/element/static/ims.js
@@ -188,11 +188,10 @@ function parseInt(stringInt) {
 
 // Create a <time> element from a date.
 function timeElement(date) {
-    date = moment(date);
     var timeStampContainer = jQuery(
         "<time />", {"datetime": date.toISOString()}
     );
-    timeStampContainer.text(date.format("MMMM Do YYYY HH:mm:ss"));
+    timeStampContainer.text(fullDateTime.format(date));
     return timeStampContainer;
 }
 
@@ -603,15 +602,45 @@ function renderPriority(priorityNumber, type, incident) {
     return undefined;
 }
 
+// e.g. "Wed, 8/28"
+const shortDate = new Intl.DateTimeFormat(undefined, {
+    weekday: "short",
+    month: "numeric",
+    day: "2-digit",
+    // timeZone not specified; will use user's timezone
+});
+
+// e.g. "19:21"
+const shortTime = new Intl.DateTimeFormat(undefined, {
+    hour: "numeric",
+    hour12: false,
+    minute: "numeric",
+    // timeZone not specified; will use user's timezone
+});
+
+// e.g. "Oct 8, 2023, 19:11:04 EDT"
+const fullDateTime = new Intl.DateTimeFormat(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "numeric",
+    hour12: false,
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short",
+    // timeZone not specified; will use user's timezone
+});
+
 function renderDate(date, type, incident) {
+    const d = Date.parse(date);
     switch (type) {
         case "display":
-            return moment(date).format("dd M/D[<wbr />]@HH:mm");
+            return shortDate.format(d) + "<wbr />@" + shortTime.format(d);
         case "filter":
-            return moment(date).format("dd M/D HH:mm");
+            return shortDate.format(d) + " " + shortTime.format(d);
         case "type":
         case "sort":
-            return moment(date);
+            return d;
     }
     return undefined;
 }
diff --git a/src/ims/element/static/incident_reports.js b/src/ims/element/static/incident_reports.js
index f9b753104..40d3ca682 100644
--- a/src/ims/element/static/incident_reports.js
+++ b/src/ims/element/static/incident_reports.js
@@ -178,6 +178,8 @@ function initDataTables() {
                 // Open new context with link
                 window.open(url, "Incident_Report:" + incidentReport.number);
             });
+            $(row).find(".incident_report_created")
+                .attr("title", fullDateTime.format(Date.parse(incidentReport.created)));
         },
     });
 }
@@ -229,12 +231,13 @@ function initSearchField() {
 
 function initSearch() {
     function modifiedAfter(incidentReport, timestamp) {
-        if (timestamp.isBefore(incidentReport.created)) {
+        if (timestamp < Date.parse(incidentReport.created)) {
             return true;
         }
 
+        // needs to use native comparison
       for (var i in incidentReport.report_entries) {
-          if (timestamp.isBefore(incidentReport.report_entries[i].created)) {
+          if (timestamp < Date.parse(incidentReport.report_entries[i].created)) {
               return true;
           }
       }
@@ -280,10 +283,12 @@ function showDays(daysBackToShow) {
     if (daysBackToShow == null) {
         _showModifiedAfter = null;
     } else {
-        _showModifiedAfter = moment()
-            .startOf("day")
-            .subtract(daysBackToShow, "days")
-            ;
+        const after = new Date();
+        after.setHours(0);
+        after.setMinutes(0);
+        after.setSeconds(0);
+        after.setDate(after.getDate()-daysBackToShow);
+        _showModifiedAfter = after;
     }
 
     incidentReportsTable.draw();
diff --git a/src/ims/element/static/incidents.js b/src/ims/element/static/incidents.js
index 91efb7047..17614fc88 100644
--- a/src/ims/element/static/incidents.js
+++ b/src/ims/element/static/incidents.js
@@ -250,6 +250,8 @@ function initDataTables() {
                     url, "Incident:" + eventID + "#" + incident.number
                 );
             });
+            $(row).find(".incident_created")
+                .attr("title", fullDateTime.format(Date.parse(incident.created)));
         },
     });
 }
@@ -315,12 +317,12 @@ function initSearchField() {
 
 function initSearch() {
     function modifiedAfter(incident, timestamp) {
-        if (timestamp.isBefore(incident.created)) {
+        if (timestamp < Date.parse(incident.created)) {
             return true;
         }
 
         for (var i in incident.report_entries) {
-            if (timestamp.isBefore(incident.report_entries[i].created)) {
+            if (timestamp < Date.parse(incident.report_entries[i].created)) {
                 return true;
             }
         }
@@ -420,10 +422,12 @@ function showDays(daysBackToShow) {
     if (daysBackToShow == null) {
         _showModifiedAfter = null;
     } else {
-        _showModifiedAfter = moment()
-            .startOf("day")
-            .subtract(daysBackToShow, "days")
-            ;
+        const after = new Date();
+        after.setHours(0);
+        after.setMinutes(0);
+        after.setSeconds(0);
+        after.setDate(after.getDate()-daysBackToShow);
+        _showModifiedAfter = after;
     }
 
     incidentsTable.draw();