From ee680e56efbbcadc01d33efbed68726321ba9fce Mon Sep 17 00:00:00 2001 From: "Sean R. Abraham" Date: Thu, 2 Jan 2025 09:28:05 -0500 Subject: [PATCH] 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) https://github.com/burningmantech/ranger-ims-server/issues/1481 https://github.com/burningmantech/ranger-ims-server/issues/1482 --- src/ims/element/static/field_report.js | 10 +++--- src/ims/element/static/field_reports.js | 46 +++++++++++++++++++------ src/ims/element/static/incident.js | 23 +++++++++---- src/ims/element/static/incidents.js | 46 ++++++++++++++++++++----- 4 files changed, 93 insertions(+), 32 deletions(-) diff --git a/src/ims/element/static/field_report.js b/src/ims/element/static/field_report.js index e0197e36e..d0e0d6b69 100644 --- 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 index b80d97f00..7e2a2a051 100644 --- 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 index b875fa19f..b64a61c31 100644 --- 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 index 314cc83e5..d0fc034e9 100644 --- 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); + } + ); }