iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve capability dropdown

Browse Source
This commit is contained in:
0x1d
2025-08-28 21:14:22 +02:00
parent c15654ef5a
commit 4ded40b85c
1 changed files with 38 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
public/components.js
View File

@@ -883,17 +883,41 @@ class NodeDetailsComponent extends Component {
`;
}
const total = capabilities.endpoints.length;
let selectedIndex = Number(this.getUIState('capSelectedIndex'));
// Sort endpoints by URI (name), then by method for stable ordering
const endpoints = [...capabilities.endpoints].sort((a, b) => {
const aUri = String(a.uri || '').toLowerCase();
const bUri = String(b.uri || '').toLowerCase();
if (aUri < bUri) return -1;
if (aUri > bUri) return 1;
const aMethod = String(a.method || '').toLowerCase();
const bMethod = String(b.method || '').toLowerCase();
return aMethod.localeCompare(bMethod);
});
const total = endpoints.length;
// Preserve selection based on a stable key of method+uri if available
const selectedKey = String(this.getUIState('capSelectedKey') || '');
let selectedIndex = endpoints.findIndex(ep => `${ep.method} ${ep.uri}` === selectedKey);
if (selectedIndex === -1) {
selectedIndex = Number(this.getUIState('capSelectedIndex'));
if (Number.isNaN(selectedIndex) || selectedIndex < 0 || selectedIndex >= total) {
selectedIndex = 0;
}
}
const selectorOptions = capabilities.endpoints.map((ep, idx) => {
return `<option value="${idx}" ${idx === selectedIndex ? 'selected' : ''}>${ep.method} ${ep.uri}</option>`;
// Compute padding for aligned display in dropdown
const maxMethodLen = endpoints.reduce((m, ep) => Math.max(m, String(ep.method || '').length), 0);
const selectorOptions = endpoints.map((ep, idx) => {
const method = String(ep.method || '');
const uri = String(ep.uri || '');
const padCount = Math.max(1, (maxMethodLen - method.length) + 2);
const spacer = '&nbsp;'.repeat(padCount);
return `<option value="${idx}" data-method="${method}" data-uri="${uri}" ${idx === selectedIndex ? 'selected' : ''}>${method}${spacer}${uri}</option>`;
}).join('');
const items = capabilities.endpoints.map((ep, idx) => {
const items = endpoints.map((ep, idx) => {
const formId = `cap-form-${idx}`;
const resultId = `cap-result-${idx}`;
const params = Array.isArray(ep.params) && ep.params.length > 0
@@ -928,7 +952,7 @@ class NodeDetailsComponent extends Component {
return `
<div class="capability-selector">
<label class="param-name" for="capability-select">Capability</label>
<select id="capability-select" class="param-input">${selectorOptions}</select>
<select id="capability-select" class="param-input" style="font-family: monospace;">${selectorOptions}</select>
</div>
<div class="capabilities-list">${items}</div>
`;
@@ -944,6 +968,12 @@ class NodeDetailsComponent extends Component {
el.style.display = (idx === selected) ? '' : 'none';
});
this.setUIState('capSelectedIndex', selected);
const opt = e.target.selectedOptions && e.target.selectedOptions[0];
if (opt) {
const method = opt.dataset.method || '';
const uri = opt.dataset.uri || '';
this.setUIState('capSelectedKey', `${method} ${uri}`);
}
});
}