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

feat: boolean param in dynamic form

Browse Source
This commit is contained in:
0x1d
2025-09-28 13:41:44 +02:00
parent 85505586ac
commit 602a3d6215
3 changed files with 92 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
public/scripts/components/MonitoringViewComponent.js
View File

@@ -375,12 +375,14 @@ class MonitoringViewComponent extends Component {
return `
<div class="node-card error" data-node-ip="${ip}">
<div class="node-header">
<div class="node-title">${hostname || ip}</div>
<div class="status-hostname-group">
<div class="node-status-indicator status-offline">
🔴
</div>
<div class="node-title">${hostname || ip}</div>
</div>
<div class="node-ip">${ip}</div>
</div>
<div class="node-status">
<span class="status-badge error">❌ No Resources</span>
</div>
${labels && Object.keys(labels).length > 0 ? `
<div class="node-labels">
@@ -453,18 +455,23 @@ class MonitoringViewComponent extends Component {
storageUtilization = storageTotal > 0 ? Math.round((storageUsed / storageTotal) * 100) : 0;
}
const resourceSourceText = resourceSource === 'monitoring' ? '📊 Full Monitoring' :
resourceSource === 'basic' ? '📋 Basic Data' : '❓ Unknown';
// Determine status indicator based on resource source
const statusIcon = resourceSource === 'monitoring' ? '🟢' :
resourceSource === 'basic' ? '🟡' : '🔴';
const statusClass = resourceSource === 'monitoring' ? 'status-online' :
resourceSource === 'basic' ? 'status-warning' : 'status-offline';
return `
<div class="node-card" data-node-ip="${ip}">
<div class="node-header">
<div class="node-title">${hostname || ip}</div>
<div class="status-hostname-group">
<div class="node-status-indicator ${statusClass}">
${statusIcon}
</div>
<div class="node-title">${hostname || ip}</div>
</div>
<div class="node-ip">${ip}</div>
</div>
<div class="node-status">
<span class="status-badge ${resourceSource === 'monitoring' ? 'success' : 'warning'}">${resourceSourceText}</span>
</div>
${labels && Object.keys(labels).length > 0 ? `
<div class="node-labels">

26
public/scripts/components/NodeDetailsComponent.js
View File

@@ -99,12 +99,29 @@ class NodeDetailsComponent extends Component {
value="${defaultValue}">`;
}
renderBooleanComponent(p, formId, pidx) {
const defaultValue = p.default !== undefined ? p.default : false;
const checked = defaultValue ? 'checked' : '';
return `<div class="boolean-input-container">
<input id="${formId}-field-${pidx}"
data-param-name="${p.name}"
data-param-location="${p.location || 'body'}"
data-param-type="${p.type || 'boolean'}"
data-param-required="${p.required ? '1' : '0'}"
class="param-input boolean-checkbox"
type="checkbox"
${checked}>
<label for="${formId}-field-${pidx}" class="boolean-label">${p.name}</label>
</div>`;
}
// Component map for parameter types
getParameterComponentMap() {
const components = {
select: this.renderSelectComponent,
color: this.renderColorComponent,
numberRange: this.renderNumberRangeComponent,
boolean: this.renderBooleanComponent,
text: this.renderTextComponent
};
@@ -119,7 +136,8 @@ class NodeDetailsComponent extends Component {
const typeRules = [
{ condition: () => Array.isArray(p.values) && p.values.length > 1, type: 'select' },
{ condition: () => p.type === 'color', type: 'color' },
{ condition: () => p.type === 'numberRange', type: 'numberRange' }
{ condition: () => p.type === 'numberRange', type: 'numberRange' },
{ condition: () => p.type === 'boolean', type: 'boolean' }
];
const matchedRule = typeRules.find(rule => rule.condition());
@@ -616,6 +634,10 @@ class NodeDetailsComponent extends Component {
const rgbDisplay = input.parentElement.querySelector('.color-rgb-display');
value = rgbDisplay ? rgbDisplay.value : this.hexToRgbInt(input.value);
}
// For boolean type, convert checkbox checked state to boolean
else if (input.dataset.paramType === 'boolean' && input.type === 'checkbox') {
value = input.checked;
}
return {
name: input.dataset.paramName,
location: input.dataset.paramLocation || 'body',
@@ -626,7 +648,7 @@ class NodeDetailsComponent extends Component {
});
// Required validation
const missing = params.filter(p => p.required && (!p.value || String(p.value).trim() === ''));
const missing = params.filter(p => p.required && (p.type === 'boolean' ? false : (!p.value || String(p.value).trim() === '')));
if (missing.length > 0) {
resultEl.style.display = 'block';
resultEl.innerHTML = `