mteehan/vacuum-wall
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update status checks and add optgroup support to form modals

Browse Source 
- modal.js: add optgroup support for select options in formModal
- dhcp.js: use zone-based interface selector for DHCP ranges
- dashboard.js, wireguard.js: use status.up for state checks
- proxy.js: use inner.querySelector for modal field lookup
This commit is contained in:
Mike Teehan
2026-06-28 12:47:59 +00:00
parent d8d8425340
commit 391466664e
5 changed files with 72 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/static/hoover/components/modal.js
+24 -5
View File
@@ -95,6 +95,8 @@ export function refreshModals() {
*
* Field shape:
* { label, id, [tag: 'input'|'select'|'textarea'], [type], [value], [placeholder], [options] }
* - options can be string[], [value, selected][] tuples, or objects with { group, options }
* for <optgroup> grouping. Nested options follow the same string/tuple format.
*
* Action shape:
* { label, cls, action, handler }
@@ -105,11 +107,28 @@ export function formModal(inner, title, fields, actions) {
if (f.tag === 'select')
return '<div class="form-group"><label>' + esc(f.label) + '</label><select id="' + att_esc(f.id) + '"'
+ (f.multiple ? ' multiple' : '') + '>'
+ (f.options || []).map(o =>
typeof o === 'string'
? '<option value="' + att_esc(o) + '">' + esc(o) + '</option>'
: '<option value="' + att_esc(o[0]) + '"' + (o[1] ? ' selected' : '') + '>' + esc(o[1]) + '</option>',
).join('') + '</select></div>';
+ (f.options || []).map(function(o) {
if (o === null || o === undefined) return '';
if (typeof o === 'string')
return '<option value="' + att_esc(o) + '">' + esc(o) + '</option>';
if (Array.isArray(o)) {
// Support [value, label] and [value, selectedBoolean]
if (o.length < 2)
return '<option value="' + att_esc(o[0]) + '">' + att_esc(o[0]) + '</option>';
if (typeof o[1] === 'boolean')
return '<option value="' + att_esc(o[0]) + '"' + (o[1] ? ' selected' : '') + '>' + att_esc(o[0]) + '</option>';
return '<option value="' + att_esc(o[0]) + '">' + esc(o[1]) + '</option>';
}
if ('group' in o) {
return '<optgroup label="' + att_esc(o.group) + '">'
+ o.options.map(function(item) {
return typeof item === 'string'
? '<option value="' + att_esc(item) + '">' + esc(item) + '</option>'
: '<option value="' + att_esc(item[0]) + '">' + esc(item[1]) + '</option>';
}).join('') + '</optgroup>';
}
return '';
}).join('') + '</select></div>';
const tag = f.tag || 'input';
return '<div class="form-group"><label>' + esc(f.label) + '</label><' + tag + ' id="' + att_esc(f.id) + '"'