This branch's code predates development's xo 2 -> 3 upgrade and hadn't been checked against its stricter ruleset. Fix the new violations: drop unnecessary globalThis prefixes on location/matchMedia, prefer location.assign() over href assignment, use early returns instead of wrapping onDropdownClose bodies in an if, fix a parameter shadow in getGroups, and use {capture: true} instead of a bare boolean for addEventListener.
Signed-off-by: Adam Warner <github@promofaux.dev>
- DataTables: replace the combined BS3 download-builder bundles with
the official core + Bootstrap 5 styling-adapter package pairs
(datatables.net(-buttons/-select) + datatables.net-bs5/-buttons-bs5/
-select-bs5), loaded core-then-adapter.
- bootstrap-select -> Tom Select: bootstrap-select has no Bootstrap 5
build. Add utils.createGroupSelect(), a small wrapper around Tom
Select that recreates bootstrap-select's actionsBox (Select all/
Select none) via a couple of buttons injected into the dropdown, and
use it for all four "assign to group(s)" multi-selects (groups,
groups/clients, groups/domains, groups/lists). Two behavioral fixes
were needed to match the old widget: `hideSelected: false` (Tom
Select refuses to open its dropdown once every option is already
selected, which made the actions box unreachable) and
`dropdownParent: "body"` (otherwise the dropdown is clipped by the
surrounding .table-responsive/.card ancestors' overflow, same reason
bootstrap-select was configured with container: "body").
- bootstrap-toggle -> bootstrap5-toggle: drop-in replacement, same
$.fn.bootstrapToggle() API and onstyle/offstyle option names (all
call sites already used Bootstrap 5-valid color names).
- select2: bump to 4.1.0 and add the select2-bootstrap-5-theme package
for correct Bootstrap 5 styling; wire theme: "bootstrap-5" into both
call sites.
- Remove now-dead bootstrap-select cleanup code (the
"$('body > .bootstrap-select.dropdown').remove()" DataTables
drawCallback lines across 8 files) and dead icheck/bootstrap-select
CSS in pi-hole.css.
Also fixed a Phase 1 regression surfaced by this pass: utils.js's
loadingOverlay() still targeted the old ".wrapper" class instead of
".app-wrapper", throwing whenever a settings page triggered the
Save & Apply overlay.
Verified against a live container: groups/clients' per-row Tom Select
multiselect (open dropdown, Select all/none, Apply, restore-on-cancel),
bootstrap5-toggle switches on groups, select2 filters on the query log,
and DataTables' select/export button row on groups/lists all work with
zero console errors. Settings pages' Save & Apply overlay confirmed
fixed and no longer throwing.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Convert the remaining 20 .lp templates from AdminLTE 2's .box/.panel
component family to Bootstrap 5 .card markup, matching the pattern
established in index.lp/queries.lp during the layout migration:
box/box-header/box-title/box-body/box-footer -> card equivalents,
box-info/-danger/-warning etc. -> card-info/-danger/-warning +
card-outline for the non-solid variant, collapsed-box + data-widget
-> collapsed-card + data-lte-toggle="card-collapse" with the dual
expand/collapse icon AdminLTE 4 expects. Also renames the accompanying
Bootstrap-3-isms throughout (col-xs-*, pull-left/right, input-group-addon,
data-toggle/-dismiss/-backdrop/-keyboard, label -> badge, btn-default,
BS3 modal close-button markup).
Fix the JS-side selectors that referenced the old markup and would have
silently broken once the classes changed: charts.js's tooltip anchor
lookup, footer.js's "no visible cards" redirect check, login.js's
2FA/forgot-password card color swap (plus made both boxes consistently
non-solid so the swap doesn't need to touch card-outline), and
settings-advanced.js's dynamically generated settings cards and its
manual Bootstrap 3 "in"/"active" tab-pane class toggling (Bootstrap 5
renamed .in to .show). Rewrite settings-dhcp.js's jQuery-plugin tooltip
delegation (`$("body").tooltip(...)`, `.tooltip("hide")`) as a small
lazily-instantiating delegated listener plus direct bootstrap.Tooltip
calls, since Bootstrap 5 dropped jQuery integration entirely and the
DHCP lease action buttons are added to the DOM dynamically. Restore
Bootstrap 3's .has-error/.has-warning/.has-success form-validation
color feedback in pi-hole.css, since Bootstrap 5 dropped those classes
in favor of .is-invalid/.is-valid and a couple of pages still toggle
the old class names for simple color-coded feedback.
Refresh package-lock.json for the admin-lte/bootstrap version bump from
the previous commit.
Verified against a live container: dashboard, query log (incl. the
collapsible advanced-filter card and populated DataTable), groups/lists,
groups/domains, and settings/dns all render correctly with zero console
errors; card-collapse toggling confirmed working on the query log's
filter card. Plugin-styled elements (select2/bootstrap-select dropdowns,
DataTables chrome, icheck checkboxes, bootstrap-toggle switches, nav-tabs)
still look wrong until the JS-plugin-swap phase lands, as expected.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Signed-off-by: Adam Warner <me@adamwarner.co.uk>
Now we allow invalid values on the table and highlight them.
This will allow users to find errors in data already saved on pihole.toml.
New parsing rules added - The line is also considered as "advanced" if:
- the line contains an asterisk;
- more than one IP is found;
- more than one Mac Address is found;
- more than one hostname is found.
The table also highlights invalid data onload, before a row is clicked.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Also fix 2 issues on validation functions:
- better regex for validateMAC()
- make sure validateIPv6Brackets() correctly trims the value before
validation
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
This function tries to use a simplified version of the dnsmasq code used
to parse dhcp-host options.
Also, use the parse function when we cancel edit operation on a line
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Only accept valid hostnames:
Previously, invalid hostnames were trigerring the cell highlighting,
but invalid entries were still accepted when using the green "save"
button. Now, hostnames are saved only if they pass the validation,
like other values.
Only allow IPv6 enclosed in square brackets:
The previous validation function used to validate IPv6 didn't accept
brackets, resulting in errors when an IPv6 was typed directly on the
table cell. A new function was created to validate IPv6 enclosed in
brackets.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Dinamically created buttons were not showing bootstrap tooltips because
the event listener was created too early, before the buttons were
created (only previuosly existing buttons would show a tooltip).
Now, tooptip() function is called once, on the body element.
This attaches an event listener to the body. Every dynamically created
button will display the tooltip, without the need to call tooltip()
function. We need to manually call .tooltip("hide"), to remove tooltips
when buttons are clicked.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Remove the javascript code used to add and remove "hints" and replace it
with a single CSS pseudo-element after the table, instead of one message
per line. Also, adjust LCARS message position.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
If enabled, the textarea can be edited, which triggers a table rewrite,
resulting in the loss of all unsaved changes made to the table rows.
This commit keeps the textarea disabled until all edited rows are saved.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- replace DOMContentLoaded listener with a function and call it when needed
- use javascript to update the CSS variable `--num-lines`
- use CSS to calculate the elements height
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
- only show save button when needed
- use fixed size and right aligned text for button column
- highlight cells only on error and remove the highlight when is fixed
- replace a few inline CSS styles with proper HTML tags
- adjust CSS on specific themes
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Fix regex adding `v` flag and fix line breaks to respect maximum lenght
Note: these issues were not previously reported because there was a
previous merge conflict. The prettier test was executed only after the
merge conflict was resolved.
Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
Resolve merge conflict in style/pi-hole.css (keep both StaticDHCPTable
styles and DNSSEC query log styles).
Address outstanding reviewer feedback:
- Change save button icon from floppy-disk to checkmark to clarify it
confirms the row edit, not a final save
- Update hint text to mention "Save & Apply" is still needed
- Add hostname validation on the hostname cell (rejects spaces, commas,
and other characters invalid in DNS names)
Signed-off-by: Dominik <dl6er@dl6er.de>
yubiuser
RD WebDesignandGitHub
Adam Warner
DL6ER
XhmikosR