mikael-lovqvists-claude-agent
cf37759893
- Grid images: photograph component boxes in sub-sections, assemble into one logical grid via perspective warp (homography) - Source image gallery: bulk upload photos separately from grid setup - Grid drafts: persist partial work, resume across sessions - Multi-panel grids: define rows/cols per photo, system computes panel layout; process partially configured grids, edit individual panels - Pan/zoom canvas editor (HiDPI-aware, touch support) for corner alignment - SPA routing with canonical URLs (history.pushState, server catch-all) - Express error visibility: uncaughtException/unhandledRejection handlers and 4-arg error middleware - Original filename stored on source image upload - Various null-safety fixes and CSS [hidden] override fixes Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
482 lines
16 KiB
HTML
482 lines
16 KiB
HTML
<!-- ===== COMPONENTS SECTION ===== -->
|
|
<template id="t-section-components">
|
|
<section class="section" id="section-components">
|
|
<div class="split-layout">
|
|
<div class="list-pane">
|
|
<input type="search" id="component-search" class="search-input" placeholder="Search…">
|
|
<input type="text" id="quick-add" class="quick-add-input" placeholder="New component… ↵" autocomplete="off" spellcheck="false">
|
|
<div id="component-list" class="component-list"></div>
|
|
</div>
|
|
<div class="detail-pane" id="detail-pane"></div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="t-component-row">
|
|
<div class="component-row" tabindex="0">
|
|
<div class="component-name"></div>
|
|
<div class="component-tags"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-field-tag">
|
|
<span class="field-tag"><span class="tag-name"></span><span class="tag-value"></span></span>
|
|
</template>
|
|
|
|
<!-- ===== DETAIL PANEL ===== -->
|
|
<template id="t-detail-placeholder">
|
|
<div class="detail-placeholder">Select a component to view details</div>
|
|
</template>
|
|
|
|
<template id="t-detail-content">
|
|
<div class="detail-content">
|
|
<div class="detail-header">
|
|
<div>
|
|
<h2 class="detail-name"></h2>
|
|
<p class="detail-description"></p>
|
|
</div>
|
|
<div class="detail-header-actions">
|
|
<button class="btn btn-secondary detail-edit-btn">Edit</button>
|
|
<button class="btn btn-danger detail-delete-btn">Delete</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-block">
|
|
<div class="detail-block-label">Fields</div>
|
|
<div class="detail-fields-list"></div>
|
|
</div>
|
|
|
|
<div class="detail-block">
|
|
<div class="detail-block-label">Images</div>
|
|
<div class="detail-images-row">
|
|
<div class="image-grid comp-image-grid"></div>
|
|
<label class="btn-add-image">
|
|
<input type="file" accept="image/*" multiple hidden class="comp-img-input">
|
|
+ Add image
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="detail-block">
|
|
<div class="detail-block-label">
|
|
Inventory
|
|
<button class="btn btn-secondary detail-add-inv-btn">+ Add entry</button>
|
|
</div>
|
|
<div class="detail-inventory-list"></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-detail-field-row">
|
|
<div class="detail-field-row">
|
|
<span class="detail-field-name"></span>
|
|
<span class="detail-field-value"></span>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-detail-inv-entry">
|
|
<div class="detail-inv-entry">
|
|
<div class="detail-inv-header">
|
|
<span class="detail-inv-type"></span>
|
|
<span class="detail-inv-ref"></span>
|
|
<span class="detail-inv-qty"></span>
|
|
<span class="detail-inv-notes"></span>
|
|
<span class="row-actions">
|
|
<button class="btn-icon btn-edit" title="Edit">✎</button>
|
|
<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
|
|
</span>
|
|
</div>
|
|
<div class="detail-inv-images">
|
|
<div class="image-grid inv-image-grid"></div>
|
|
<label class="btn-add-image btn-add-image-sm">
|
|
<input type="file" accept="image/*" multiple hidden class="inv-img-input">
|
|
+ Image
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-image-thumb">
|
|
<div class="image-thumb">
|
|
<a class="thumb-link" target="_blank" rel="noopener">
|
|
<img class="thumb-img" alt="">
|
|
</a>
|
|
<button type="button" class="thumb-delete btn-icon btn-danger" title="Remove">✕</button>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ===== INVENTORY SECTION ===== -->
|
|
<template id="t-section-inventory">
|
|
<section class="section" id="section-inventory">
|
|
<div class="section-toolbar">
|
|
<input type="search" id="inventory-search" class="search-input" placeholder="Search by component or location…">
|
|
<select id="inventory-type-filter" class="filter-select">
|
|
<option value="">All types</option>
|
|
<option value="physical">Physical</option>
|
|
<option value="bom">BOM / Drawing</option>
|
|
<option value="digital">Digital / Note</option>
|
|
</select>
|
|
<button class="btn btn-primary" id="btn-add-inventory">+ Add entry</button>
|
|
</div>
|
|
<table class="data-table">
|
|
<thead><tr>
|
|
<th>Component</th>
|
|
<th class="col-type">Type</th>
|
|
<th>Location / Reference</th>
|
|
<th class="col-qty">Qty</th>
|
|
<th>Notes</th>
|
|
<th class="col-actions"></th>
|
|
</tr></thead>
|
|
<tbody id="inventory-list"></tbody>
|
|
</table>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="t-inventory-row">
|
|
<tr class="data-row">
|
|
<td class="inv-component-name"></td>
|
|
<td class="inv-type-badge"></td>
|
|
<td class="inv-location-ref"></td>
|
|
<td class="inv-quantity"></td>
|
|
<td class="inv-notes"></td>
|
|
<td class="row-actions">
|
|
<button class="btn-icon btn-edit" title="Edit">✎</button>
|
|
<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<!-- ===== FIELDS SECTION ===== -->
|
|
<template id="t-section-fields">
|
|
<section class="section" id="section-fields">
|
|
<div class="section-toolbar">
|
|
<span class="section-note">Master field index — fields available for all components</span>
|
|
<button class="btn btn-primary" id="btn-add-field">+ Add field</button>
|
|
</div>
|
|
<table class="data-table">
|
|
<thead><tr>
|
|
<th>Field name</th>
|
|
<th class="col-unit">Unit</th>
|
|
<th>Description</th>
|
|
<th class="col-actions"></th>
|
|
</tr></thead>
|
|
<tbody id="field-list"></tbody>
|
|
</table>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="t-field-row">
|
|
<tr class="data-row">
|
|
<td class="fdef-name"></td>
|
|
<td class="fdef-unit"></td>
|
|
<td class="fdef-description"></td>
|
|
<td class="row-actions">
|
|
<button class="btn-icon btn-edit" title="Edit">✎</button>
|
|
<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
|
|
<!-- ===== EMPTY STATES ===== -->
|
|
<template id="t-empty-row">
|
|
<tr><td class="empty-state"></td></tr>
|
|
</template>
|
|
<template id="t-empty-block">
|
|
<div class="empty-state"></div>
|
|
</template>
|
|
|
|
<!-- ===== GRIDS SECTION ===== -->
|
|
<template id="t-section-grids">
|
|
<section class="section" id="section-grids">
|
|
<div class="section-toolbar">
|
|
<div class="tab-bar">
|
|
<button class="tab-btn" id="btn-tab-grids">Grids</button>
|
|
<button class="tab-btn" id="btn-tab-sources">Source images</button>
|
|
</div>
|
|
<button class="btn btn-primary" id="btn-new-grid">+ New grid</button>
|
|
<label class="btn btn-secondary" id="btn-upload-sources">
|
|
+ Upload
|
|
<input type="file" accept="image/*" multiple hidden id="source-upload-input">
|
|
</label>
|
|
</div>
|
|
<div id="tab-grids-content">
|
|
<div id="grid-list" class="grid-card-list"></div>
|
|
</div>
|
|
<div id="tab-sources-content" hidden>
|
|
<div id="source-image-list" class="source-gallery"></div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<template id="t-source-card">
|
|
<div class="source-card">
|
|
<a class="source-card-link" target="_blank" rel="noopener">
|
|
<img class="source-card-img" alt="">
|
|
</a>
|
|
<div class="source-card-meta"></div>
|
|
<button type="button" class="btn-icon btn-danger source-card-delete" title="Delete">✕</button>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-draft-card">
|
|
<div class="draft-card">
|
|
<div class="draft-badge">Draft</div>
|
|
<div class="draft-card-info">
|
|
<div class="draft-card-name"></div>
|
|
<div class="draft-card-meta"></div>
|
|
</div>
|
|
<div class="row-actions">
|
|
<button class="btn-icon btn-danger btn-delete" title="Discard">✕</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-grid-card">
|
|
<div class="grid-card">
|
|
<div class="grid-card-preview"></div>
|
|
<div class="grid-card-info">
|
|
<div class="grid-card-name"></div>
|
|
<div class="grid-card-meta"></div>
|
|
</div>
|
|
<div class="row-actions">
|
|
<button class="btn-icon btn-danger btn-delete" title="Delete">✕</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ===== PANEL MANAGER VIEW ===== -->
|
|
<template id="t-panel-manager">
|
|
<div class="panel-manager" id="panel-manager">
|
|
<div class="panel-manager-header">
|
|
<div>
|
|
<h2 class="pm-name"></h2>
|
|
<div class="pm-meta"></div>
|
|
</div>
|
|
<div class="pm-actions">
|
|
<button class="btn btn-secondary" id="pm-cancel">Cancel</button>
|
|
<button class="btn btn-primary" id="pm-process" disabled>Process all panels</button>
|
|
</div>
|
|
</div>
|
|
<div class="panel-slot-grid" id="panel-slot-grid"></div>
|
|
<div class="setup-progress" id="pm-progress" hidden>Processing panels…</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-panel-slot">
|
|
<div class="panel-slot" tabindex="0">
|
|
<div class="panel-slot-preview">
|
|
<img class="panel-slot-thumb" alt="" hidden>
|
|
<div class="panel-slot-empty-icon"></div>
|
|
</div>
|
|
<div class="panel-slot-label"></div>
|
|
<div class="panel-slot-range"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ===== GRID SETUP VIEW ===== -->
|
|
<template id="t-grid-setup">
|
|
<div class="grid-setup" id="grid-setup">
|
|
<div class="grid-setup-left">
|
|
<canvas id="grid-canvas" class="grid-canvas"></canvas>
|
|
<div class="grid-setup-hint">Scroll to zoom · drag to pan · drag handles to align</div>
|
|
</div>
|
|
<div class="grid-setup-right">
|
|
<div class="gs-panel-info" id="gs-panel-info"></div>
|
|
<div class="setup-cell-size" id="gs-cell-size"></div>
|
|
<div class="setup-actions">
|
|
<button class="btn btn-secondary" id="gs-cancel">← Back</button>
|
|
<button class="btn btn-primary" id="gs-confirm">Confirm panel</button>
|
|
</div>
|
|
<div class="setup-progress" id="gs-progress" hidden></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ===== GRID VIEWER ===== -->
|
|
<template id="t-grid-viewer">
|
|
<div class="grid-viewer" id="grid-viewer">
|
|
<div class="grid-viewer-header">
|
|
<div>
|
|
<h2 class="viewer-name"></h2>
|
|
<div class="viewer-meta"></div>
|
|
</div>
|
|
<div class="grid-viewer-actions">
|
|
<button class="btn btn-secondary" id="gv-back">← Back</button>
|
|
<button class="btn btn-secondary" id="gv-edit-panels">Edit panels</button>
|
|
<button class="btn btn-danger" id="gv-delete">Delete</button>
|
|
</div>
|
|
</div>
|
|
<div class="grid-cells" id="grid-cells"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<template id="t-grid-cell">
|
|
<div class="grid-cell">
|
|
<div class="grid-cell-img-wrap">
|
|
<img class="grid-cell-img" alt="">
|
|
</div>
|
|
<div class="grid-cell-label"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<!-- ===== DIALOG: COMPONENT ===== -->
|
|
<template id="t-dialog-component">
|
|
<dialog id="dialog-component" class="app-dialog">
|
|
<h2 class="dialog-title"></h2>
|
|
<form method="dialog" id="form-component">
|
|
<div class="form-row">
|
|
<label for="c-name">Name</label>
|
|
<input type="text" id="c-name" required autocomplete="off">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="c-description">Description</label>
|
|
<input type="text" id="c-description" autocomplete="off">
|
|
</div>
|
|
<div class="form-section-label">Field values</div>
|
|
<div id="c-field-rows"></div>
|
|
<div class="form-row add-field-row">
|
|
<select id="c-add-field-select" class="filter-select">
|
|
<option value="">— add a field —</option>
|
|
</select>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn btn-secondary" id="c-cancel">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="c-save">Save</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<!-- ===== DIALOG: INVENTORY ENTRY ===== -->
|
|
<template id="t-dialog-inventory">
|
|
<dialog id="dialog-inventory" class="app-dialog">
|
|
<h2 class="dialog-title"></h2>
|
|
<form method="dialog" id="form-inventory">
|
|
<div class="form-row">
|
|
<label for="i-component">Component</label>
|
|
<select id="i-component" required class="filter-select wide">
|
|
<option value="">— select component —</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="i-type">Location type</label>
|
|
<select id="i-type" required class="filter-select wide">
|
|
<option value="physical">Physical location</option>
|
|
<option value="bom">BOM / Drawing</option>
|
|
<option value="digital">Digital / Note</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="i-ref" id="i-ref-label">Location reference</label>
|
|
<input type="text" id="i-ref" autocomplete="off">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="i-qty">Quantity</label>
|
|
<input type="text" id="i-qty" autocomplete="off" placeholder="e.g. 10, ~50, see BOM">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="i-notes">Notes</label>
|
|
<input type="text" id="i-notes" autocomplete="off">
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn btn-secondary" id="i-cancel">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="i-save">Save</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<!-- ===== DIALOG: FIELD DEFINITION ===== -->
|
|
<template id="t-dialog-field">
|
|
<dialog id="dialog-field" class="app-dialog">
|
|
<h2 class="dialog-title"></h2>
|
|
<form method="dialog" id="form-field">
|
|
<div class="form-row">
|
|
<label for="f-name">Field name</label>
|
|
<input type="text" id="f-name" required autocomplete="off" placeholder="e.g. capacitance, mouser_order_no">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="f-unit">Unit <span class="label-hint">(optional, informational)</span></label>
|
|
<input type="text" id="f-unit" autocomplete="off" placeholder="e.g. F, V, Ω, mm">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="f-description">Description</label>
|
|
<input type="text" id="f-description" autocomplete="off">
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn btn-secondary" id="f-cancel">Cancel</button>
|
|
<button type="submit" class="btn btn-primary" id="f-save">Save</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<!-- ===== DIALOG: NEW GRID ===== -->
|
|
<template id="t-dialog-new-grid">
|
|
<dialog id="dialog-new-grid" class="app-dialog">
|
|
<h2 class="dialog-title">New grid</h2>
|
|
<form method="dialog" id="form-new-grid">
|
|
<div class="form-row">
|
|
<label for="ng-name">Name</label>
|
|
<input type="text" id="ng-name" autocomplete="off" placeholder="e.g. Capacitor box A">
|
|
</div>
|
|
<div class="form-row-pair">
|
|
<div class="form-row">
|
|
<label for="ng-rows">Total rows</label>
|
|
<input type="number" id="ng-rows" min="1" max="500" value="4">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="ng-cols">Total columns</label>
|
|
<input type="number" id="ng-cols" min="1" max="500" value="6">
|
|
</div>
|
|
</div>
|
|
<div class="form-section-label">Photo coverage <span class="label-hint">(cells visible in each photo)</span></div>
|
|
<div class="form-row-pair">
|
|
<div class="form-row">
|
|
<label for="ng-photo-rows">Rows per photo</label>
|
|
<input type="number" id="ng-photo-rows" min="1" max="500" value="4">
|
|
</div>
|
|
<div class="form-row">
|
|
<label for="ng-photo-cols">Cols per photo</label>
|
|
<input type="number" id="ng-photo-cols" min="1" max="500" value="6">
|
|
</div>
|
|
</div>
|
|
<div class="ng-summary" id="ng-summary"></div>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn btn-secondary" id="ng-cancel">Cancel</button>
|
|
<button type="submit" class="btn btn-primary">Continue →</button>
|
|
</div>
|
|
</form>
|
|
</dialog>
|
|
</template>
|
|
|
|
<!-- ===== DIALOG: SOURCE PICKER ===== -->
|
|
<template id="t-dialog-source-picker">
|
|
<dialog id="dialog-source-picker" class="app-dialog app-dialog-wide">
|
|
<h2 class="dialog-title">Choose source image</h2>
|
|
<div class="picker-toolbar">
|
|
<label class="btn btn-secondary">
|
|
+ Upload new
|
|
<input type="file" accept="image/*" multiple hidden id="picker-upload-input">
|
|
</label>
|
|
<span class="picker-hint">or select an existing image below</span>
|
|
</div>
|
|
<div id="source-picker-grid" class="source-gallery picker-gallery"></div>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn btn-secondary" id="picker-cancel">Cancel</button>
|
|
</div>
|
|
</dialog>
|
|
</template>
|
|
|
|
<!-- ===== DIALOG: CONFIRM ===== -->
|
|
<template id="t-dialog-confirm">
|
|
<dialog id="dialog-confirm" class="app-dialog app-dialog-sm">
|
|
<h2 class="dialog-title">Confirm</h2>
|
|
<p id="confirm-message" class="confirm-message"></p>
|
|
<div class="dialog-actions">
|
|
<button type="button" class="btn btn-secondary" id="confirm-cancel">Cancel</button>
|
|
<button type="button" class="btn btn-danger" id="confirm-ok">Delete</button>
|
|
</div>
|
|
</dialog>
|
|
</template>
|