diff --git a/docker/routlin-dash/GUIDE.md b/docker/routlin-dash/GUIDE.md index bd24868..426c780 100644 --- a/docker/routlin-dash/GUIDE.md +++ b/docker/routlin-dash/GUIDE.md @@ -19,13 +19,14 @@ app/ Python source (baked into image) / content.json Declarative page layout action.py Flask Blueprint for POST actions on this page + page.js? Optional page-specific client-side JS (auto-included if present) sanitize.py Input sanitization (strips dangerous characters) config_utils.py Config I/O, snapshot system, command queue authorized_accounts.json Web UI user accounts (separate from Routlin users) data/ Live-mounted at runtime (./data:/data) styles.css Application stylesheet - common.js Client-side interaction logic + common.js Shared client-side interaction logic (all pages) validation.js Client-side field validation # host directory mounted into container: $HOME/routlin -> /routlin_location @@ -198,6 +199,10 @@ bp = Blueprint(_PAGE, __name__) In `app/main.py` (or wherever blueprints are registered), add the new action blueprint alongside the existing ones. +### 5. Add page.js (optional) + +If the page needs client-side behavior not shared with other pages, create `app/pages//page.js`. It is automatically included - no registration needed. See the "Page-Specific JavaScript" section for guidance on what belongs here vs `common.js`. + --- ## Token System @@ -375,6 +380,27 @@ For data that must be passed to a JS validator (such as existing VLAN IDs for un --- +## Page-Specific JavaScript + +If a page needs client-side behavior that is not shared with any other page, put it in `app/pages//page.js`. `view_page.py` automatically appends this file to the inline script bundle when it exists. + +``` +app/pages/ddns/page.js -- credential provider toggle +app/pages/physicalinterfaces/page.js -- interface config card wiring +app/pages/actions/page.js -- history revert button state +app/pages/networklayout/page.js -- is_vpn -> mdns_reflection sync +``` + +`page.js` runs after `common.js` and `validation.js`, so all shared utilities (`htmlEsc`, `showCard`, `tablePickerCloseAll`, etc.) are available. + +Rules for what belongs in `page.js` vs `common.js`: + +- **`page.js`**: behavior that only activates on one page (specific field names, CSS classes, or form actions that appear nowhere else). +- **`common.js`**: shared infrastructure used by multiple pages, or global event handlers (click-to-close, UUID hover highlight, stat card edit mode). +- **Inline `