improve keyboard shortcuts, add search delay

I'm likely to change the keyboard shortcuts further after talking with the Operators Delegation next week. For now, this changes the offerings to: n --> new (incident or field report) h --> toggle showing system history a --> show all (incidents or field reports) #1481 #1482
burningmantech · Jan 2, 2025 · ee680e5 · ee680e5
1 parent 06ce62e
commit ee680e5
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 32 deletions.
diff --git a/src/ims/element/static/field_report.js b/src/ims/element/static/field_report.js
@@ -30,8 +30,8 @@ function initFieldReportPage() {
         }
 
         // Warn the user if they're about to navigate away with unsaved text.
-        window.addEventListener('beforeunload', function (e) {
-            if (document.getElementById("report_entry_add").value !== '') {
+        window.addEventListener("beforeunload", function (e) {
+            if (document.getElementById("report_entry_add").value !== "") {
                 e.preventDefault();
             }
         });
@@ -41,13 +41,11 @@ function initFieldReportPage() {
         disableEditing();
         loadAndDisplayFieldReport(loadedFieldReport);
 
-        function addFieldKeyDown(e) {
+        $("#report_entry_add")[0].addEventListener("keydown", function (e) {
             if (e.ctrlKey && e.key === "Enter") {
                 submitReportEntry();
             }
-        }
-
-        $("#report_entry_add")[0].onkeydown = addFieldKeyDown;
+        });
     }
 
     loadBody(loadedBody);

diff --git a/src/ims/element/static/field_reports.js b/src/ims/element/static/field_reports.js
@@ -22,13 +22,26 @@ function initFieldReportsPage() {
         disableEditing();
         initFieldReportsTable();
 
-        function addFieldKeyDown(e) {
-            if (e.ctrlKey && e.key === "n") {
+        // Keyboard shortcuts
+        document.addEventListener("keydown", function(e) {
+            // don't trigger if the user has an input field selected
+            if (document.activeElement !== document.body) {
+                return;
+            }
+            if (e.altKey || e.ctrlKey || e.metaKey) {
+                return;
+            }
+            // n --> new incident
+            if (e.key.toLowerCase() === "n") {
                 $("#new_field_report").click();
             }
-        }
-
-        document.onkeydown = addFieldKeyDown;
+            // a --> show all for this event
+            if (e.key.toLowerCase() === "a") {
+                showDays(null);
+                showRows(null);
+            }
+            // TODO: should there also be a shortcut to show the default filters?
+        });
     }
 
     loadBody(loadedBody);
@@ -195,6 +208,9 @@ function initTableButtons() {
 // Initialize search field
 //
 
+const _searchDelayMs = 250;
+let _searchDelayTimer = null;
+
 function initSearchField() {
     // Relocate search container
 
@@ -204,11 +220,21 @@ function initSearchField() {
         .replaceWith($("#search_container"));
 
     // Search field handling
-
-    $("#search_input").on("keyup", function () {
-        fieldReportsTable.search(this.value);
-        fieldReportsTable.draw();
-    });
+    document.getElementById("search_input")
+        .addEventListener("keyup",
+            function () {
+                // Delay the search in case the user is still typing.
+                // This reduces perceived lag, since searching can be
+                // very slow, and it's super annoying for a user when
+                // the page fully locks up before they're done typing.
+                clearTimeout(_searchDelayTimer);
+                const val = this.value;
+                _searchDelayTimer = setTimeout(function () {
+                    fieldReportsTable.search(val);
+                    fieldReportsTable.draw();
+                }, _searchDelayMs);
+            }
+        );
 }
 
 

diff --git a/src/ims/element/static/incident.js b/src/ims/element/static/incident.js
@@ -37,8 +37,8 @@ function initIncidentPage() {
         }
 
         // Warn the user if they're about to navigate away with unsaved text.
-        window.addEventListener('beforeunload', function (e) {
-            if (document.getElementById("report_entry_add").value !== '') {
+        window.addEventListener("beforeunload", function (e) {
+            if (document.getElementById("report_entry_add").value !== "") {
                 e.preventDefault();
             }
         });
@@ -63,14 +63,23 @@ function initIncidentPage() {
         }
 
         // Keyboard shortcuts
-
-        function addFieldKeyDown(e) {
+        document.addEventListener("keydown", function(e) {
+            if (document.activeElement !== document.body) {
+                return;
+            }
+            if (e.altKey || e.ctrlKey || e.metaKey) {
+                return;
+            }
+            // h --> toggle showing system entries
+            if (e.key.toLowerCase() === "h") {
+                $("#history_checkbox").click();
+            }
+        });
+        $("#report_entry_add")[0].addEventListener("keydown", function (e) {
             if (e.ctrlKey && e.key === "Enter") {
                 submitReportEntry();
             }
-        }
-
-        $("#report_entry_add")[0].onkeydown = addFieldKeyDown;
+        });
     }
 
     loadBody(loadedBody);

diff --git a/src/ims/element/static/incidents.js b/src/ims/element/static/incidents.js
@@ -22,13 +22,28 @@ function initIncidentsPage() {
         disableEditing();
         loadEventFieldReports(initIncidentsTable);
 
-        function addFieldKeyDown(e) {
-            if (e.ctrlKey && e.key === "n") {
+        // Keyboard shortcuts
+        document.addEventListener("keydown", function(e) {
+            if (document.activeElement !== document.body) {
+                return;
+            }
+            if (e.altKey || e.ctrlKey || e.metaKey) {
+                return;
+            }
+            // n --> new incident
+            if (e.key.toLowerCase() === "n") {
                 $("#new_incident").click();
             }
-        }
+            // a --> show all for this event
+            if (e.key.toLowerCase() === "a") {
+                showState("all");
+                showDays(null);
+                showRows(null);
+                showType("all");
+            }
+            // TODO: should there also be a shortcut to show the default filters?
+        });
 
-        document.onkeydown = addFieldKeyDown;
     }
 
     loadBody(loadedBody);
@@ -275,6 +290,9 @@ function initTableButtons() {
 // Initialize search field
 //
 
+const _searchDelayMs = 250;
+let _searchDelayTimer = null;
+
 function initSearchField() {
     // Relocate search container
 
@@ -284,11 +302,21 @@ function initSearchField() {
         .replaceWith($("#search_container"));
 
     // Search field handling
-
-    $("#search_input").on("keyup", function () {
-        incidentsTable.search(this.value);
-        incidentsTable.draw();
-    });
+    document.getElementById("search_input")
+        .addEventListener("keyup",
+            function () {
+                // Delay the search in case the user is still typing.
+                // This reduces perceived lag, since searching can be
+                // very slow, and it's super annoying for a user when
+                // the page fully locks up before they're done typing.
+                clearTimeout(_searchDelayTimer);
+                const val = this.value;
+                _searchDelayTimer = setTimeout(function () {
+                    incidentsTable.search(val);
+                    incidentsTable.draw();
+                }, _searchDelayMs);
+            }
+        );
 }