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

feat: harmonize labels

Browse Source
This commit is contained in:
0x1d
2025-10-23 13:41:14 +02:00
parent 61f8c8aa2a
commit ad268a7c13
2 changed files with 82 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
public/scripts/components/FirmwareFormComponent.js
View File

@@ -83,13 +83,15 @@ class FirmwareFormComponent extends Component {
const labels = this.firmwareData?.labels || {};
const labelsHTML = Object.entries(labels).map(([key, value]) =>
`<div class="label-item">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-value">${this.escapeHtml(value)}</span>
`<div class="label-item" data-key="${this.escapeHtml(key)}">
<div class="label-content">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-separator">=</span>
<span class="label-value">${this.escapeHtml(value)}</span>
</div>
<button type="button" class="remove-label-btn" data-label-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>`
@@ -202,7 +204,7 @@ class FirmwareFormComponent extends Component {
}
// Check if key already exists
const existingLabel = labelsContainer.querySelector(`[data-label-key="${this.escapeHtml(key)}"]`);
const existingLabel = labelsContainer.querySelector(`[data-key="${this.escapeHtml(key)}"]`);
if (existingLabel) {
this.showError('A label with this key already exists');
return;
@@ -210,13 +212,15 @@ class FirmwareFormComponent extends Component {
// Add the label
const labelHTML = `
<div class="label-item">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-value">${this.escapeHtml(value)}</span>
<div class="label-item" data-key="${this.escapeHtml(key)}">
<div class="label-content">
<span class="label-key">${this.escapeHtml(key)}</span>
<span class="label-separator">=</span>
<span class="label-value">${this.escapeHtml(value)}</span>
</div>
<button type="button" class="remove-label-btn" data-label-key="${this.escapeHtml(key)}" title="Remove label">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16">
<path d="M18 6L6 18M6 6l12 12"/>
</svg>
</button>
</div>