dhcp: track pending config changes with hash, update UI button

2026-06-28 16:26:32 +00:00
parent baa441fa13
commit 348bbfbca6
3 changed files with 59 additions and 16 deletions
@@ -1,4 +1,4 @@
-import { html, PageHeader, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';
+import { html, h, PageHeader, ConfirmDelete, Tabs, Table, ServiceStatus, renderGuardMulti, esc, enc, $val, apiFetch, toast, definePage, getModel, modelFetch, ActionButton, ActionGroup, QuickModal } from '/static/hoover/index.js?v=7';

 function makeAddRange(activeZones, interfaces) {
    const opts = [
@@ -122,9 +122,11 @@ export default definePage({
        if (guard) return guard;

        const cfg = state.dnsmasq.data?.config || {};
-        const ranges = cfg.ranges || [];
-        const staticLeases = cfg.static_leases || [];
-        const dnsRecords = cfg.dns_records || [];
+        const dhcpCfg = cfg.dhcp || {};
+        const dnsCfg = cfg.dns || {};
+        const ranges = dhcpCfg.ranges || [];
+        const staticLeases = dhcpCfg.static_leases || [];
+        const dnsRecords = dnsCfg.custom_records || [];
        const status = state.dnsmasq.data?.status || {};

        const rangesRows = ranges.map((r) => html`<tr key=${(r.interface || '_g') + '-' + r.start + '-' + r.end}>
@@ -172,12 +174,22 @@ export default definePage({
            html`<button class="btn btn-primary" onClick=${() => makeAddRange(state.firewall.data?.zones?.active, state.firewall.data?.interfaces)(state)}>Add Range</button>`,
            html`<button class="btn btn-outline" onClick=${() => addLease(state)}>Static Lease</button>`,
            html`<button class="btn btn-outline" onClick=${() => addDns(state)}>DNS Record</button>`,
-            ActionButton({
-                url: '/api/dhcp/apply',
-                successMsg: 'dnsmasq applied',
-                label: 'Apply',
-                refresh: 'dnsmasq',
-            }),
+            (() => {
+                const pending = status.pending_changes === true;
+                return h('button', {
+                    class: pending ? 'btn btn-primary btn-apply-pending' : 'btn btn-outline',
+                    disabled: !pending,
+                    'on:click': async () => {
+                        const res = await apiFetch('/api/dhcp/apply', { method: 'POST' });
+                        if (res.ok) {
+                            toast('dnsmasq applied', 'success');
+                            modelFetch('dnsmasq');
+                        } else {
+                            toast(res.error || 'Apply failed', 'error');
+                        }
+                    },
+                }, pending ? 'Apply' : 'Synced');
+            })(),
        );

        const leaseTable = state.activeTab === 'active'