mikael-lovqvists-claude-agent/electronics-inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add tabs, fields section, and contents section to bin editor dialog

Browse Source 
- t-dialog-bin-editor: tabs (Corners|Fields|Contents), field rows, contents list
- t-bin-content-row: row template for bin content items
- t-dialog-bin-content: dialog for adding/editing component or free-text items
- t-dialog-bin-type: append field rows section below existing form fields

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
mikael-lovqvists-claude-agent
2026-04-03 03:34:26 +00:00
parent 2b7d50a53d
commit 33c8ff274e
1 changed files with 107 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
public/templates.html
View File

@@ -671,26 +671,58 @@
<template id="t-dialog-bin-editor">
<dialog id="dialog-bin-editor" class="app-dialog app-dialog-wide">
<h2 class="dialog-title">Edit bin</h2>
<div class="form-row">
<label>Name</label>
<input type="text" id="bin-editor-name" autocomplete="off">
<div class="tab-bar" id="bin-editor-tabs">
<button class="tab-btn active" data-tab="corners">Corners</button>
<button class="tab-btn" data-tab="fields">Fields</button>
<button class="tab-btn" data-tab="contents">Contents</button>
</div>
<div class="form-row">
<label>Type</label>
<select id="bin-editor-type">
<option value="">— Custom —</option>
</select>
<!-- Corners tab -->
<div id="bin-editor-tab-corners">
<div class="form-row">
<label>Name</label>
<input type="text" id="bin-editor-name" autocomplete="off">
</div>
<div class="form-row">
<label>Type</label>
<select id="bin-editor-type">
<option value="">— Custom —</option>
</select>
</div>
<div class="form-row" id="bin-editor-dims-row">
<label>Dimensions (mm)</label>
<div class="bin-editor-dims">
<input type="number" id="bin-editor-width" placeholder="W" min="1" step="1">
<span>×</span>
<input type="number" id="bin-editor-height" placeholder="H" min="1" step="1">
<span class="form-hint">Leave blank to infer from corners</span>
</div>
</div>
<canvas id="bin-editor-canvas" class="bin-editor-canvas"></canvas>
</div>
<div class="form-row" id="bin-editor-dims-row">
<label>Dimensions (mm)</label>
<div class="bin-editor-dims">
<input type="number" id="bin-editor-width" placeholder="W" min="1" step="1">
<span>×</span>
<input type="number" id="bin-editor-height" placeholder="H" min="1" step="1">
<span class="form-hint">Leave blank to infer from corners</span>
<!-- Fields tab -->
<div id="bin-editor-tab-fields" hidden>
<div class="form-section-label">Field values</div>
<div id="bin-field-rows"></div>
<div class="form-row add-field-row">
<div class="input-with-action">
<select id="bin-add-field-select" class="filter-select">
<option value="">— add a field —</option>
</select>
<button type="button" class="btn btn-secondary btn-sm" id="bin-new-field">New…</button>
</div>
</div>
</div>
<canvas id="bin-editor-canvas" class="bin-editor-canvas"></canvas>
<!-- Contents tab -->
<div id="bin-editor-tab-contents" hidden>
<div id="bin-contents-list"></div>
<div class="form-row" style="margin-top:0.5rem">
<button type="button" class="btn btn-secondary btn-sm" id="bin-add-content">+ Add item</button>
</div>
</div>
<div class="dialog-actions">
<button type="button" class="btn btn-secondary" id="bin-editor-cancel">Cancel</button>
<button type="button" class="btn btn-primary" id="bin-editor-save">Save &amp; process</button>
@@ -698,6 +730,55 @@
</dialog>
</template>
<!-- ===== TEMPLATE: BIN CONTENT ROW ===== -->
<template id="t-bin-content-row">
<div class="bin-content-row">
<span class="bin-content-name"></span>
<span class="bin-content-qty"></span>
<span class="bin-content-notes"></span>
<span class="row-actions">
<button class="btn-icon btn-edit" title="Edit">✎</button>
<button class="btn-icon btn-danger btn-delete" title="Remove">✕</button>
</span>
</div>
</template>
<!-- ===== DIALOG: BIN CONTENT ITEM ===== -->
<template id="t-dialog-bin-content">
<dialog id="dialog-bin-content" class="app-dialog">
<h2 class="dialog-title">Add item</h2>
<div class="form-row">
<label>Type</label>
<select id="bc-type" class="filter-select wide">
<option value="component">Component</option>
<option value="item">Free text</option>
</select>
</div>
<div class="form-row" id="bc-component-row">
<label>Component</label>
<select id="bc-component" class="filter-select wide">
<option value="">— select —</option>
</select>
</div>
<div class="form-row" id="bc-name-row" hidden>
<label>Name</label>
<input type="text" id="bc-name" autocomplete="off">
</div>
<div class="form-row">
<label>Quantity</label>
<input type="text" id="bc-quantity" autocomplete="off" placeholder="e.g. 10, ~50, full">
</div>
<div class="form-row">
<label>Notes</label>
<input type="text" id="bc-notes" autocomplete="off" placeholder="Optional">
</div>
<div class="dialog-actions">
<button type="button" class="btn btn-secondary" id="bc-cancel">Cancel</button>
<button type="button" class="btn btn-primary" id="bc-save">Save</button>
</div>
</dialog>
</template>
<template id="t-dialog-bin-type">
<dialog id="dialog-bin-type" class="app-dialog">
<h2 class="dialog-title"></h2>
@@ -717,6 +798,16 @@
<label>Description</label>
<input type="text" id="bt-description" autocomplete="off" placeholder="Optional">
</div>
<div class="form-section-label">Field values</div>
<div id="bt-field-rows"></div>
<div class="form-row add-field-row">
<div class="input-with-action">
<select id="bt-add-field-select" class="filter-select">
<option value="">— add a field —</option>
</select>
<button type="button" class="btn btn-secondary btn-sm" id="bt-new-field">New…</button>
</div>
</div>
<div class="dialog-actions">
<button type="button" class="btn btn-secondary" id="bt-cancel">Cancel</button>
<button type="button" class="btn btn-primary" id="bt-save">Save</button>