feat(dashboard): pages about one row update in place instead of reloading

Nav.refresh() fetches the current page and compares the server's HTML
now with the HTML the page started from; only what differs is patched
into the live page (text, attributes, class changes, rows added or
taken away). Typed input stays (the browser keeps what the user
changed while the default value follows the server), and parts built
by the page's scripts are left alone. Where a patch would lose
script-built or script-bound parts, or the page's layout changed, the
page is swapped in again with its scripts, keeping the scroll
position, open tabs, open folding parts and typed input; while the
user is typing it offers a refresh instead.

Live.refreshPage (account, character, bug report and play key pages)
uses it instead of reloading the page, and the "This changed while you
were editing" banner's Refresh does too.

Check: open a play key; in another tab change its uses or active
switch: the first tab's values and badge change without a reload,
and notes typed there stay. Same on a bug report page with a half
typed resolution when it's resolved elsewhere. On a character page,
an in-game save updates it without losing the open tab or scroll.
Test: NavRulesJs.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Aaron Kimbrell
2026-09-29 01:57:17 -05:00
parent f58255ab8a
commit b66bae6a9c
5 changed files with 215 additions and 16 deletions

View File

@@ -94,7 +94,7 @@ if(NODE_EXECUTABLE)
# The sidebar's saved group state (the script at the end of templates/header.jinja2)
add_test(NAME SidebarStateJs COMMAND ${NODE_EXECUTABLE} "${CMAKE_CURRENT_SOURCE_DIR}/sidebar-state.test.mjs"
"${PROJECT_SOURCE_DIR}/dDashboardServer/templates/header.jinja2")
# Which links the dashboard follows without a reload (static/js/nav.js)
# Which links the dashboard follows without a reload, and its in-place update rules (static/js/nav.js)
add_test(NAME NavRulesJs COMMAND ${NODE_EXECUTABLE} "${CMAKE_CURRENT_SOURCE_DIR}/nav.test.mjs"
"${PROJECT_SOURCE_DIR}/dDashboardServer/static/js/nav.js")
endif()

View File

@@ -1,4 +1,4 @@
// Which links the dashboard follows without a reload (static/js/nav.js).
// Which links the dashboard follows without a reload, and the rules its in-place updates use (static/js/nav.js).
// Run by ctest: node nav.test.mjs <nav.js>
import { readFileSync } from 'node:fs';
import vm from 'node:vm';
@@ -58,6 +58,11 @@ same(R.sameKeys(['DIV#a', 'P'], ['DIV#a', '#3', 'P']), false, 'one more');
same(R.sameKeys(['DIV#a'], ['DIV#b']), false, 'other id');
same(R.sameKeys([], []), true, 'empty');
// A server class change touches only the classes the server changed, not those scripts added
same(R.classChanges('badge text-bg-warning', 'badge text-bg-success'), { remove: ['text-bg-warning'], add: ['text-bg-success'] }, 'badge colour');
same(R.classChanges('', 'a b'), { remove: [], add: ['a', 'b'] }, 'from nothing');
same(R.classChanges(null, null), { remove: [], add: [] }, 'nothing');
if (failures) {
console.error(`${failures} failure(s)`);
process.exit(1);