consultoria-as/Autoparts-DB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pos): add exploded diagrams feature (#9) with interactive SVG viewer

Browse Source 
- Blueprint with API endpoints: list, detail, SVG serve, vehicle-linked diagrams
- Interactive SVG viewer with zoom/pan (mouse wheel, drag, touch, keyboard)
- Clickable hotspots that highlight on hover and show part detail panel
- Parts sidebar listing all callout numbers with catalog search integration
- 3 placeholder SVG diagrams: braking system, suspension, engine components
- Seeded diagrams, hotspots, and vehicle_diagrams in DB
- Added to sidebar nav, i18n (ES/EN), and "Ver diagramas" link in catalog

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
consultoria-as
2026-04-05 04:24:19 +00:00
parent 5a88d7c7ff
commit c333f2eaf0
10 changed files with 1759 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
pos/static/diagrams/braking-system.svg Normal file
View File

@@ -0,0 +1,103 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none" stroke-width="2">
<defs>
<style>
.part-area { fill: transparent; stroke: none; cursor: pointer; }
.part-area:hover { fill: rgba(245, 166, 35, 0.15); stroke: #F5A623; stroke-width: 2; }
.label { font-family: 'Inter', sans-serif; font-size: 13px; fill: #666; }
.callout { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; fill: #F5A623; }
.line { stroke: #999; stroke-width: 1; stroke-dasharray: 4 2; }
.component { stroke: #444; fill: #e8e8e8; }
.component-detail { stroke: #666; fill: #d0d0d0; }
.component-accent { stroke: #444; fill: #F5A623; opacity: 0.3; }
</style>
</defs>
<!-- Title -->
<text x="400" y="35" text-anchor="middle" font-family="Inter, sans-serif" font-size="22" font-weight="700" fill="#333">Sistema de Frenos - Vista Explodida</text>
<!-- Brake disc (rotor) -->
<g id="part-disc">
<ellipse cx="400" cy="320" rx="130" ry="130" class="component" stroke-width="3"/>
<ellipse cx="400" cy="320" rx="110" ry="110" stroke="#888" fill="none" stroke-width="1"/>
<ellipse cx="400" cy="320" rx="45" ry="45" class="component-detail"/>
<!-- Ventilation slots -->
<line x1="310" y1="290" x2="350" y2="290" stroke="#aaa" stroke-width="1"/>
<line x1="310" y1="310" x2="350" y2="310" stroke="#aaa" stroke-width="1"/>
<line x1="310" y1="330" x2="350" y2="330" stroke="#aaa" stroke-width="1"/>
<line x1="310" y1="350" x2="350" y2="350" stroke="#aaa" stroke-width="1"/>
<line x1="450" y1="290" x2="490" y2="290" stroke="#aaa" stroke-width="1"/>
<line x1="450" y1="310" x2="490" y2="310" stroke="#aaa" stroke-width="1"/>
<line x1="450" y1="330" x2="490" y2="330" stroke="#aaa" stroke-width="1"/>
<line x1="450" y1="350" x2="490" y2="350" stroke="#aaa" stroke-width="1"/>
<!-- Mounting holes -->
<circle cx="400" cy="280" r="5" fill="#999" stroke="#666"/>
<circle cx="380" cy="285" r="5" fill="#999" stroke="#666"/>
<circle cx="420" cy="285" r="5" fill="#999" stroke="#666"/>
<circle cx="385" cy="360" r="5" fill="#999" stroke="#666"/>
<circle cx="415" cy="360" r="5" fill="#999" stroke="#666"/>
<rect class="part-area" data-hotspot="1" x="270" y="190" width="260" height="260" rx="8"/>
</g>
<!-- Brake caliper (exploded out to right) -->
<g id="part-caliper">
<line x1="530" y1="320" x2="580" y2="250" class="line"/>
<rect x="580" y="200" width="120" height="100" rx="12" class="component" stroke-width="2.5"/>
<rect x="595" y="215" width="90" height="30" rx="4" class="component-detail"/>
<rect x="595" y="255" width="90" height="30" rx="4" class="component-detail"/>
<!-- Piston -->
<circle cx="640" cy="230" r="10" fill="#bbb" stroke="#888"/>
<circle cx="640" cy="270" r="10" fill="#bbb" stroke="#888"/>
<!-- Bleeder valve -->
<rect x="705" y="230" width="20" height="10" rx="3" fill="#999" stroke="#666"/>
<rect class="part-area" data-hotspot="2" x="575" y="195" width="155" height="115" rx="8"/>
</g>
<!-- Brake pads (exploded above) -->
<g id="part-pads">
<line x1="400" y1="190" x2="400" y2="120" class="line"/>
<rect x="340" y="60" width="120" height="55" rx="6" class="component" stroke-width="2"/>
<rect x="348" y="68" width="104" height="20" rx="3" class="component-accent"/>
<!-- Friction material -->
<rect x="348" y="93" width="104" height="15" rx="2" fill="#a0522d" stroke="#8b4513" stroke-width="1"/>
<!-- Wear indicator slot -->
<rect x="370" y="100" width="4" height="8" fill="#F5A623"/>
<rect class="part-area" data-hotspot="3" x="335" y="55" width="130" height="65" rx="8"/>
</g>
<!-- Brake hose (exploded to left) -->
<g id="part-hose">
<line x1="270" y1="320" x2="180" y2="280" class="line"/>
<path d="M80,240 Q100,220 120,240 Q140,260 160,240 Q180,220 180,260" stroke="#333" fill="none" stroke-width="4" stroke-linecap="round"/>
<!-- Fittings -->
<rect x="65" y="232" width="20" height="16" rx="3" fill="#999" stroke="#666"/>
<rect x="175" y="252" width="20" height="16" rx="3" fill="#999" stroke="#666"/>
<rect class="part-area" data-hotspot="4" x="60" y="215" width="145" height="60" rx="8"/>
</g>
<!-- Master cylinder (top-left) -->
<g id="part-master">
<line x1="270" y1="200" x2="180" y2="120" class="line"/>
<rect x="50" y="80" width="140" height="50" rx="8" class="component" stroke-width="2.5"/>
<circle cx="80" cy="105" r="12" class="component-detail"/>
<circle cx="120" cy="105" r="12" class="component-detail"/>
<!-- Reservoir -->
<rect x="85" y="55" width="60" height="25" rx="5" fill="#cde" stroke="#89a"/>
<!-- Pushrod -->
<rect x="190" y="97" width="30" height="16" rx="3" fill="#bbb" stroke="#888"/>
<rect class="part-area" data-hotspot="5" x="45" y="50" width="180" height="85" rx="8"/>
</g>
<!-- Callout numbers -->
<circle cx="400" cy="475" r="14" fill="#F5A623"/><text class="callout" x="400" y="480" text-anchor="middle" fill="white">1</text>
<circle cx="720" cy="175" r="14" fill="#F5A623"/><text class="callout" x="720" y="180" text-anchor="middle" fill="white">2</text>
<circle cx="400" cy="45" r="14" fill="#F5A623"/><text class="callout" x="400" y="50" text-anchor="middle" fill="white">3</text>
<circle cx="65" cy="200" r="14" fill="#F5A623"/><text class="callout" x="65" y="205" text-anchor="middle" fill="white">4</text>
<circle cx="135" cy="45" r="14" fill="#F5A623"/><text class="callout" x="135" y="50" text-anchor="middle" fill="white">5</text>
<!-- Labels -->
<text class="label" x="400" y="500" text-anchor="middle">Disco de freno</text>
<text class="label" x="720" y="195" text-anchor="middle">Caliper</text>
<text class="label" x="400" y="30" text-anchor="middle" dy="-10">Pastillas de freno</text>
<text class="label" x="65" y="220" text-anchor="middle">Manguera de freno</text>
<text class="label" x="135" y="30" text-anchor="middle" dy="-10">Cilindro maestro</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

117
pos/static/diagrams/engine-system.svg Normal file
View File

@@ -0,0 +1,117 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none" stroke-width="2">
<defs>
<style>
.part-area { fill: transparent; stroke: none; cursor: pointer; }
.part-area:hover { fill: rgba(245, 166, 35, 0.15); stroke: #F5A623; stroke-width: 2; }
.label { font-family: 'Inter', sans-serif; font-size: 13px; fill: #666; }
.callout { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; fill: #F5A623; }
.line { stroke: #999; stroke-width: 1; stroke-dasharray: 4 2; }
.component { stroke: #444; fill: #e8e8e8; }
.component-detail { stroke: #666; fill: #d0d0d0; }
</style>
</defs>
<text x="400" y="35" text-anchor="middle" font-family="Inter, sans-serif" font-size="22" font-weight="700" fill="#333">Motor - Componentes Principales</text>
<!-- Engine block (center) -->
<g id="engine-block">
<rect x="250" y="180" width="300" height="250" rx="8" class="component" stroke-width="3"/>
<!-- Cylinder bores -->
<rect x="280" y="200" width="50" height="80" rx="4" class="component-detail"/>
<rect x="340" y="200" width="50" height="80" rx="4" class="component-detail"/>
<rect x="400" y="200" width="50" height="80" rx="4" class="component-detail"/>
<rect x="460" y="200" width="50" height="80" rx="4" class="component-detail"/>
<!-- Oil pan area -->
<rect x="260" y="380" width="280" height="40" rx="4" fill="#ddd" stroke="#999"/>
</g>
<!-- Air filter (top-left, exploded) -->
<g id="part-filter">
<line x1="270" y1="180" x2="130" y2="100" class="line"/>
<ellipse cx="100" cy="75" rx="60" ry="30" class="component" stroke-width="2"/>
<ellipse cx="100" cy="75" rx="45" ry="20" fill="#c4a35a" stroke="#a08030" stroke-width="1"/>
<!-- Pleats -->
<line x1="65" y1="70" x2="65" y2="80" stroke="#b89040" stroke-width="1"/>
<line x1="80" y1="65" x2="80" y2="85" stroke="#b89040" stroke-width="1"/>
<line x1="95" y1="63" x2="95" y2="87" stroke="#b89040" stroke-width="1"/>
<line x1="110" y1="63" x2="110" y2="87" stroke="#b89040" stroke-width="1"/>
<line x1="125" y1="65" x2="125" y2="85" stroke="#b89040" stroke-width="1"/>
<line x1="135" y1="70" x2="135" y2="80" stroke="#b89040" stroke-width="1"/>
<rect class="part-area" data-hotspot="1" x="35" y="40" width="130" height="70" rx="8"/>
</g>
<!-- Spark plugs (top, exploded) -->
<g id="part-spark-plugs">
<line x1="400" y1="180" x2="400" y2="100" class="line"/>
<!-- Spark plug -->
<rect x="385" y="50" width="30" height="50" rx="3" fill="#bbb" stroke="#888"/>
<!-- Ceramic insulator -->
<rect x="392" y="40" width="16" height="20" rx="4" fill="#f0e8d0" stroke="#c0b090"/>
<!-- Terminal -->
<rect x="397" y="30" width="6" height="12" rx="1" fill="#999" stroke="#777"/>
<!-- Electrode -->
<path d="M398,100 L398,108 L405,108" stroke="#888" stroke-width="2"/>
<!-- Second plug hint -->
<rect x="430" y="53" width="25" height="44" rx="3" fill="#bbb" stroke="#888" opacity="0.5"/>
<rect x="340" y="53" width="25" height="44" rx="3" fill="#bbb" stroke="#888" opacity="0.5"/>
<rect class="part-area" data-hotspot="2" x="330" y="25" width="135" height="85" rx="8"/>
</g>
<!-- Belt (right side, exploded) -->
<g id="part-belt">
<line x1="550" y1="280" x2="610" y2="230" class="line"/>
<!-- Serpentine belt shape -->
<path d="M620,160 Q680,160 680,210 Q680,260 650,280 Q620,300 620,340 Q620,370 660,370" stroke="#333" fill="none" stroke-width="6" stroke-linecap="round"/>
<!-- Ribs pattern -->
<path d="M622,165 Q678,165 678,210 Q678,258 650,278" stroke="#555" fill="none" stroke-width="1" stroke-dasharray="3 3"/>
<!-- Pulleys -->
<circle cx="620" cy="160" r="15" fill="#ccc" stroke="#999" stroke-width="2"/>
<circle cx="660" cy="370" r="15" fill="#ccc" stroke="#999" stroke-width="2"/>
<circle cx="680" cy="260" r="10" fill="#ccc" stroke="#999" stroke-width="2"/>
<rect class="part-area" data-hotspot="3" x="600" y="140" width="100" height="250" rx="8"/>
</g>
<!-- Gasket (bottom, exploded) -->
<g id="part-gasket">
<line x1="400" y1="430" x2="400" y2="480" class="line"/>
<!-- Head gasket flat view -->
<rect x="280" y="490" width="240" height="20" rx="3" fill="#a0a0a0" stroke="#777" stroke-width="1.5"/>
<!-- Cylinder holes -->
<ellipse cx="320" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
<ellipse cx="370" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
<ellipse cx="420" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
<ellipse cx="470" cy="500" rx="18" ry="7" fill="#888" stroke="#666"/>
<!-- Bolt holes -->
<circle cx="290" cy="500" r="3" fill="#666"/>
<circle cx="505" cy="500" r="3" fill="#666"/>
<rect class="part-area" data-hotspot="4" x="275" y="485" width="250" height="30" rx="8"/>
</g>
<!-- Oil filter (bottom-left, exploded) -->
<g id="part-oil-filter">
<line x1="270" y1="400" x2="160" y2="470" class="line"/>
<!-- Canister -->
<rect x="80" y="450" width="60" height="90" rx="10" class="component" stroke-width="2"/>
<!-- Base plate -->
<ellipse cx="110" cy="540" rx="30" ry="8" fill="#999" stroke="#777"/>
<!-- Gasket ring -->
<ellipse cx="110" cy="536" rx="25" ry="4" fill="none" stroke="#333" stroke-width="2"/>
<!-- Thread -->
<rect x="102" y="540" width="16" height="12" rx="2" fill="#bbb" stroke="#999"/>
<rect class="part-area" data-hotspot="5" x="75" y="445" width="70" height="115" rx="8"/>
</g>
<!-- Callout numbers -->
<circle cx="100" cy="120" r="14" fill="#F5A623"/><text class="callout" x="100" y="125" text-anchor="middle" fill="white">1</text>
<circle cx="400" cy="18" r="14" fill="#F5A623"/><text class="callout" x="400" y="23" text-anchor="middle" fill="white">2</text>
<circle cx="720" cy="140" r="14" fill="#F5A623"/><text class="callout" x="720" y="145" text-anchor="middle" fill="white">3</text>
<circle cx="400" cy="530" r="14" fill="#F5A623"/><text class="callout" x="400" y="535" text-anchor="middle" fill="white">4</text>
<circle cx="110" cy="575" r="14" fill="#F5A623"/><text class="callout" x="110" y="580" text-anchor="middle" fill="white">5</text>
<!-- Labels -->
<text class="label" x="100" y="140" text-anchor="middle">Filtro de aire</text>
<text class="label" x="400" y="10" text-anchor="middle" dy="-8">Bujias</text>
<text class="label" x="720" y="160" text-anchor="middle">Banda serpentina</text>
<text class="label" x="400" y="550" text-anchor="middle">Junta de culata</text>
<text class="label" x="110" y="595" text-anchor="middle">Filtro de aceite</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 6.5 KiB

97
pos/static/diagrams/suspension-system.svg Normal file
View File

@@ -0,0 +1,97 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" fill="none" stroke-width="2">
<defs>
<style>
.part-area { fill: transparent; stroke: none; cursor: pointer; }
.part-area:hover { fill: rgba(245, 166, 35, 0.15); stroke: #F5A623; stroke-width: 2; }
.label { font-family: 'Inter', sans-serif; font-size: 13px; fill: #666; }
.callout { font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; fill: #F5A623; }
.line { stroke: #999; stroke-width: 1; stroke-dasharray: 4 2; }
.component { stroke: #444; fill: #e8e8e8; }
.component-detail { stroke: #666; fill: #d0d0d0; }
</style>
</defs>
<text x="400" y="35" text-anchor="middle" font-family="Inter, sans-serif" font-size="22" font-weight="700" fill="#333">Suspension Delantera - Vista Explodida</text>
<!-- Shock absorber (center) -->
<g id="part-shock">
<rect x="370" y="80" width="60" height="200" rx="10" class="component" stroke-width="2.5"/>
<!-- Piston rod -->
<rect x="393" y="55" width="14" height="40" rx="3" fill="#bbb" stroke="#888"/>
<!-- Body detail -->
<rect x="380" y="130" width="40" height="100" rx="5" class="component-detail"/>
<!-- Top mount -->
<ellipse cx="400" cy="55" rx="25" ry="10" fill="#ccc" stroke="#999"/>
<!-- Bottom eye -->
<circle cx="400" cy="290" r="12" fill="#ccc" stroke="#999"/>
<circle cx="400" cy="290" r="5" fill="#999" stroke="#666"/>
<rect class="part-area" data-hotspot="1" x="365" y="43" width="70" height="260" rx="8"/>
</g>
<!-- Coil spring (wrapped around shock, exploded to right) -->
<g id="part-spring">
<line x1="430" y1="180" x2="520" y2="180" class="line"/>
<!-- Spring coils -->
<path d="M540,80 Q580,95 540,110 Q500,125 540,140 Q580,155 540,170 Q500,185 540,200 Q580,215 540,230 Q500,245 540,260 Q580,275 540,290" stroke="#666" fill="none" stroke-width="5" stroke-linecap="round"/>
<!-- End plates -->
<rect x="520" y="70" width="40" height="8" rx="2" fill="#999" stroke="#777"/>
<rect x="520" y="290" width="40" height="8" rx="2" fill="#999" stroke="#777"/>
<rect class="part-area" data-hotspot="2" x="495" y="65" width="95" height="240" rx="8"/>
</g>
<!-- Control arm (lower, exploded down) -->
<g id="part-control-arm">
<line x1="400" y1="302" x2="400" y2="360" class="line"/>
<!-- A-arm shape -->
<path d="M250,400 L400,380 L550,400 L400,420 Z" class="component" stroke-width="2"/>
<!-- Bushings -->
<circle cx="270" cy="405" r="12" fill="#777" stroke="#555"/>
<circle cx="530" cy="405" r="12" fill="#777" stroke="#555"/>
<!-- Ball joint socket -->
<circle cx="400" cy="395" r="10" fill="#bbb" stroke="#888"/>
<rect class="part-area" data-hotspot="3" x="245" y="375" width="310" height="50" rx="8"/>
</g>
<!-- Ball joint (exploded down-left) -->
<g id="part-ball-joint">
<line x1="350" y1="395" x2="200" y2="460" class="line"/>
<!-- Ball joint body -->
<path d="M160,450 L240,450 L230,500 L170,500 Z" class="component" stroke-width="2"/>
<!-- Ball -->
<circle cx="200" cy="455" r="10" fill="#bbb" stroke="#888"/>
<!-- Stud -->
<rect x="194" y="500" width="12" height="30" rx="2" fill="#999" stroke="#777"/>
<!-- Boot -->
<path d="M172,465 Q200,490 228,465" stroke="#333" fill="#555" opacity="0.5"/>
<rect class="part-area" data-hotspot="4" x="155" y="440" width="90" height="95" rx="8"/>
</g>
<!-- Tie rod (exploded to the left) -->
<g id="part-tie-rod">
<line x1="250" y1="400" x2="150" y2="320" class="line"/>
<!-- Rod -->
<rect x="30" y="280" width="160" height="14" rx="5" class="component"/>
<!-- Inner end -->
<circle cx="40" cy="287" r="10" fill="#bbb" stroke="#888"/>
<!-- Outer end (ball joint) -->
<path d="M180,275 L200,275 L195,300 L175,300 Z" class="component-detail"/>
<circle cx="190" cy="278" r="6" fill="#bbb" stroke="#888"/>
<!-- Boot -->
<path d="M175,280 Q190,295 205,280" stroke="#333" fill="#555" opacity="0.5"/>
<rect class="part-area" data-hotspot="5" x="25" y="265" width="185" height="45" rx="8"/>
</g>
<!-- Callout numbers -->
<circle cx="400" cy="170" r="14" fill="#F5A623"/><text class="callout" x="400" y="175" text-anchor="middle" fill="white">1</text>
<circle cx="560" cy="55" r="14" fill="#F5A623"/><text class="callout" x="560" y="60" text-anchor="middle" fill="white">2</text>
<circle cx="400" cy="440" r="14" fill="#F5A623"/><text class="callout" x="400" y="445" text-anchor="middle" fill="white">3</text>
<circle cx="200" cy="550" r="14" fill="#F5A623"/><text class="callout" x="200" y="555" text-anchor="middle" fill="white">4</text>
<circle cx="40" cy="260" r="14" fill="#F5A623"/><text class="callout" x="40" y="265" text-anchor="middle" fill="white">5</text>
<!-- Labels -->
<text class="label" x="400" y="192" text-anchor="middle">Amortiguador</text>
<text class="label" x="560" y="48" text-anchor="middle" dy="-8">Resorte helicoidal</text>
<text class="label" x="400" y="460" text-anchor="middle">Brazo de control</text>
<text class="label" x="200" y="570" text-anchor="middle">Rotula</text>
<text class="label" x="40" y="253" text-anchor="middle" dy="-8">Barra de acoplamiento</text>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 5.2 KiB

15
pos/static/js/catalog.js
View File

@@ -122,7 +122,7 @@
}
// ─── UI helpers ───
function showLoading() { loading.classList.add('is-visible'); navGrid.innerHTML = ''; partsGrid.style.display = 'none'; partsGrid.innerHTML = ''; emptyState.classList.remove('is-visible'); paginationNav.innerHTML = ''; }
function showLoading() { loading.classList.add('is-visible'); navGrid.innerHTML = ''; partsGrid.style.display = 'none'; partsGrid.innerHTML = ''; emptyState.classList.remove('is-visible'); paginationNav.innerHTML = ''; var dl = document.getElementById('diagLink'); if (dl && nav.level !== 'categories') dl.style.display = 'none'; }
function hideLoading() { loading.classList.remove('is-visible'); }
function showEmpty(title, subtitle) {
@@ -345,6 +345,19 @@
updateBreadcrumb();
levelTitle.textContent = 'Categorias de partes';
setupLevelFilter(true);
// Add "Ver diagramas" link
var diagLink = document.getElementById('diagLink');
if (!diagLink) {
diagLink = document.createElement('a');
diagLink.id = 'diagLink';
diagLink.href = '/pos/diagrams';
diagLink.className = 'btn-diagram-link';
diagLink.innerHTML = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14.7 6.3a1 1 0 000 1.4l1.6 1.6a1 1 0 001.4 0l3.77-3.77a6 6 0 01-7.94 7.94l-6.91 6.91a2.12 2.12 0 01-3-3l6.91-6.91a6 6 0 017.94-7.94l-3.76 3.76z"/></svg> Ver diagramas';
diagLink.style.cssText = 'display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:var(--color-primary-muted);color:var(--color-primary);border:1px solid var(--color-primary);border-radius:var(--radius-md);font-size:var(--text-body-sm);font-weight:600;text-decoration:none;cursor:pointer;transition:var(--transition-fast);margin-left:auto;';
var titleContainer = levelTitle.parentElement;
if (titleContainer) titleContainer.appendChild(diagLink);
}
diagLink.style.display = 'inline-flex';
showLoading();
apiFetch(API + '/categories?mye_id=' + nav.engine.id_mye).then(function (data) {

513
pos/static/js/diagrams.js Normal file
View File

@@ -0,0 +1,513 @@
// /home/Autopartes/pos/static/js/diagrams.js
// Interactive exploded-view diagrams with zoom/pan and clickable hotspots.
(function () {
'use strict';
var API = '/pos/api/diagrams';
var CATALOG_API = '/pos/api/catalog';
var token = localStorage.getItem('pos_token');
if (!token) { window.location.href = '/pos/login'; return; }
var headers = { 'Authorization': 'Bearer ' + token, 'Content-Type': 'application/json' };
// ---- State ----
var state = {
view: 'list', // 'list' | 'viewer'
diagrams: [],
categories: [], // grouped by category
currentDiagram: null,
hotspots: [],
selectedHotspot: null,
// zoom/pan
scale: 1,
panX: 0,
panY: 0,
isPanning: false,
lastPointer: null,
};
// ---- DOM refs ----
var diagramList = document.getElementById('diagramList');
var diagramViewer = document.getElementById('diagramViewer');
var svgContainer = document.getElementById('svgContainer');
var svgWrapper = document.getElementById('svgWrapper');
var backBtn = document.getElementById('backBtn');
var zoomInBtn = document.getElementById('zoomInBtn');
var zoomOutBtn = document.getElementById('zoomOutBtn');
var zoomResetBtn = document.getElementById('zoomResetBtn');
var diagramTitle = document.getElementById('diagramTitle');
var hotspotPanel = document.getElementById('hotspotPanel');
var hotspotBody = document.getElementById('hotspotBody');
var hotspotClose = document.getElementById('hotspotClose');
var partsListEl = document.getElementById('partsList');
var loadingEl = document.getElementById('loading');
var emptyEl = document.getElementById('emptyState');
var filterInput = document.getElementById('diagramFilter');
var profileAvatar = document.getElementById('profileAvatar');
var profileName = document.getElementById('profileName');
var profileRole = document.getElementById('profileRole');
// ---- Init ----
function init() {
loadProfile();
loadAllDiagrams();
bindEvents();
}
function loadProfile() {
try {
var u = JSON.parse(localStorage.getItem('pos_user') || '{}');
if (profileName) profileName.textContent = u.name || '--';
if (profileRole) profileRole.textContent = u.role || '--';
if (profileAvatar) {
var n = (u.name || '--');
profileAvatar.textContent = n.split(' ').map(function(w){return w[0]||'';}).join('').substring(0,2).toUpperCase();
}
} catch(e) {}
}
function bindEvents() {
if (backBtn) backBtn.addEventListener('click', showList);
if (zoomInBtn) zoomInBtn.addEventListener('click', function() { zoom(1.25); });
if (zoomOutBtn) zoomOutBtn.addEventListener('click', function() { zoom(0.8); });
if (zoomResetBtn) zoomResetBtn.addEventListener('click', resetZoom);
if (hotspotClose) hotspotClose.addEventListener('click', closeHotspotPanel);
if (filterInput) filterInput.addEventListener('input', renderList);
// Zoom with mouse wheel on SVG container
if (svgContainer) {
svgContainer.addEventListener('wheel', function(e) {
e.preventDefault();
var factor = e.deltaY < 0 ? 1.1 : 0.9;
zoom(factor);
}, { passive: false });
// Pan with mouse drag
svgContainer.addEventListener('mousedown', startPan);
svgContainer.addEventListener('mousemove', doPan);
svgContainer.addEventListener('mouseup', endPan);
svgContainer.addEventListener('mouseleave', endPan);
// Touch support
svgContainer.addEventListener('touchstart', function(e) {
if (e.touches.length === 1) {
startPan({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY, preventDefault: function(){} });
}
});
svgContainer.addEventListener('touchmove', function(e) {
if (e.touches.length === 1) {
e.preventDefault();
doPan({ clientX: e.touches[0].clientX, clientY: e.touches[0].clientY });
}
}, { passive: false });
svgContainer.addEventListener('touchend', endPan);
}
// Keyboard shortcuts
document.addEventListener('keydown', function(e) {
if (state.view !== 'viewer') return;
if (e.key === 'Escape') {
if (state.selectedHotspot) closeHotspotPanel();
else showList();
}
if (e.key === '+' || e.key === '=') zoom(1.15);
if (e.key === '-') zoom(0.87);
if (e.key === '0') resetZoom();
});
}
// ---- API calls ----
function apiFetch(url, cb) {
loadingEl.style.display = 'flex';
emptyEl.style.display = 'none';
fetch(url, { headers: headers })
.then(function(r) { return r.json(); })
.then(function(data) {
loadingEl.style.display = 'none';
cb(null, data);
})
.catch(function(err) {
loadingEl.style.display = 'none';
cb(err);
});
}
function loadAllDiagrams() {
apiFetch(API + '/', function(err, data) {
if (err || !data || !data.data) {
emptyEl.style.display = 'flex';
return;
}
state.diagrams = data.data;
// Group by category
var cats = {};
data.data.forEach(function(d) {
var key = d.category_name || 'Other';
if (!cats[key]) cats[key] = { name: key, name_es: d.category_name_es || key, diagrams: [] };
cats[key].diagrams.push(d);
});
state.categories = Object.values(cats);
renderList();
});
}
function loadDiagram(id) {
apiFetch(API + '/' + id, function(err, data) {
if (err || !data || data.error) return;
state.currentDiagram = data;
state.hotspots = data.hotspots || [];
showViewer();
});
}
// ---- Render list view ----
function renderList() {
state.view = 'list';
diagramViewer.style.display = 'none';
diagramList.style.display = 'block';
var filter = (filterInput && filterInput.value || '').toLowerCase();
var html = '';
state.categories.forEach(function(cat) {
var filtered = cat.diagrams.filter(function(d) {
if (!filter) return true;
return (d.name_es || d.name || '').toLowerCase().indexOf(filter) !== -1 ||
(d.category_name_es || '').toLowerCase().indexOf(filter) !== -1 ||
(d.group_name_es || '').toLowerCase().indexOf(filter) !== -1;
});
if (filtered.length === 0) return;
html += '<div class="diagram-category">';
html += '<h3 class="category-title">' + esc(cat.name_es || cat.name) + '</h3>';
html += '<div class="diagram-grid">';
filtered.forEach(function(d) {
html += '<div class="diagram-card" data-id="' + d.id_diagram + '" onclick="DiagramsApp.openDiagram(' + d.id_diagram + ')">';
html += '<div class="diagram-card__preview">';
html += '<img src="/pos/static/' + esc(d.image_path) + '" alt="' + esc(d.name_es || d.name) + '" loading="lazy" />';
html += '</div>';
html += '<div class="diagram-card__info">';
html += '<div class="diagram-card__name">' + esc(d.name_es || d.name) + '</div>';
html += '<div class="diagram-card__group">' + esc(d.group_name_es || d.group_name || '') + '</div>';
html += '</div>';
html += '</div>';
});
html += '</div></div>';
});
if (!html) {
emptyEl.style.display = 'flex';
} else {
emptyEl.style.display = 'none';
}
diagramList.innerHTML = html;
}
// ---- Viewer ----
function showViewer() {
state.view = 'viewer';
diagramList.style.display = 'none';
diagramViewer.style.display = 'flex';
closeHotspotPanel();
var d = state.currentDiagram;
if (diagramTitle) diagramTitle.textContent = d.name_es || d.name;
// Load SVG inline for interactivity
resetZoom();
loadSVGInline(d.id_diagram);
renderPartsList();
}
function showList() {
state.view = 'list';
state.currentDiagram = null;
state.selectedHotspot = null;
diagramViewer.style.display = 'none';
diagramList.style.display = 'block';
closeHotspotPanel();
}
function loadSVGInline(diagramId) {
svgWrapper.innerHTML = '<div class="svg-loading">Cargando diagrama...</div>';
fetch(API + '/' + diagramId + '/svg', { headers: headers })
.then(function(r) { return r.text(); })
.then(function(svgText) {
svgWrapper.innerHTML = svgText;
var svg = svgWrapper.querySelector('svg');
if (svg) {
svg.style.width = '100%';
svg.style.height = '100%';
svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
attachHotspotListeners(svg);
}
})
.catch(function() {
svgWrapper.innerHTML = '<div class="svg-error">Error al cargar el diagrama</div>';
});
}
function attachHotspotListeners(svg) {
var areas = svg.querySelectorAll('[data-hotspot]');
areas.forEach(function(area) {
var callout = parseInt(area.getAttribute('data-hotspot'));
area.style.cursor = 'pointer';
area.addEventListener('click', function(e) {
e.stopPropagation();
selectHotspot(callout);
});
area.addEventListener('mouseenter', function() {
highlightHotspot(callout, true);
});
area.addEventListener('mouseleave', function() {
highlightHotspot(callout, false);
});
});
}
function highlightHotspot(callout, on) {
// Highlight in parts list
var items = partsListEl.querySelectorAll('.part-item');
items.forEach(function(item) {
if (parseInt(item.dataset.callout) === callout) {
item.classList.toggle('is-highlighted', on);
}
});
}
function selectHotspot(callout) {
var hotspot = state.hotspots.find(function(h) { return h.callout_number === callout; });
if (!hotspot) return;
state.selectedHotspot = hotspot;
// Highlight in SVG
var svg = svgWrapper.querySelector('svg');
if (svg) {
svg.querySelectorAll('[data-hotspot]').forEach(function(area) {
var num = parseInt(area.getAttribute('data-hotspot'));
if (num === callout) {
area.style.fill = 'rgba(245, 166, 35, 0.25)';
area.style.stroke = '#F5A623';
area.style.strokeWidth = '3';
} else {
area.style.fill = 'transparent';
area.style.stroke = 'none';
}
});
}
// Highlight in parts list
var items = partsListEl.querySelectorAll('.part-item');
items.forEach(function(item) {
item.classList.toggle('is-active', parseInt(item.dataset.callout) === callout);
});
// Show hotspot detail panel
showHotspotDetail(hotspot);
}
function showHotspotDetail(hotspot) {
hotspotPanel.classList.add('is-open');
var partName = hotspot.part_name_es || hotspot.part_name || 'Parte #' + hotspot.callout_number;
var partNum = hotspot.part_number || '';
var desc = hotspot.description_es || hotspot.description || '';
// Determine search term for catalog link
var searchTerm = partNum || partName;
// Map callout to friendly part names for placeholder diagrams
var placeholderNames = getPlaceholderPartInfo(hotspot.callout_number);
var displayName = hotspot.part_name_es || hotspot.part_name || placeholderNames.name;
var displayDesc = desc || placeholderNames.desc;
var html = '';
html += '<div class="hotspot-detail">';
html += '<div class="hotspot-callout">' + hotspot.callout_number + '</div>';
html += '<h4 class="hotspot-name">' + esc(displayName) + '</h4>';
if (partNum) {
html += '<div class="hotspot-partnumber">No. Parte: ' + esc(partNum) + '</div>';
}
if (displayDesc) {
html += '<p class="hotspot-desc">' + esc(displayDesc) + '</p>';
}
// Action buttons
html += '<div class="hotspot-actions">';
if (hotspot.part_id) {
html += '<button class="btn btn-primary btn-sm" onclick="DiagramsApp.viewPart(' + hotspot.part_id + ')">Ver detalle</button>';
html += '<button class="btn btn-accent btn-sm" onclick="DiagramsApp.addToCart(' + hotspot.part_id + ')"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 002 1.61h9.72a2 2 0 002-1.61L23 6H6"/></svg> Agregar</button>';
} else {
html += '<button class="btn btn-primary btn-sm" onclick="DiagramsApp.searchPart(\'' + esc(displayName) + '\')">Buscar en catalogo</button>';
}
html += '</div>';
html += '</div>';
hotspotBody.innerHTML = html;
}
function getPlaceholderPartInfo(callout) {
// For built-in placeholder diagrams, provide friendly names
var d = state.currentDiagram;
if (!d) return { name: 'Parte ' + callout, desc: '' };
var brakeNames = {
1: { name: 'Disco de freno', desc: 'Disco ventilado de freno delantero. Se recomienda cambiar en pares.' },
2: { name: 'Caliper de freno', desc: 'Caliper con pistones, incluye purga. Verificar compatibilidad con tipo de pastilla.' },
3: { name: 'Pastillas de freno', desc: 'Juego de pastillas con indicador de desgaste. Material ceramico o semi-metalico.' },
4: { name: 'Manguera de freno', desc: 'Manguera flexible de alta presion. Revisar por grietas cada 40,000 km.' },
5: { name: 'Cilindro maestro', desc: 'Cilindro maestro con deposito de liquido de frenos. Incluye empaques.' },
};
var suspNames = {
1: { name: 'Amortiguador', desc: 'Amortiguador delantero de gas. Se recomienda cambiar en pares.' },
2: { name: 'Resorte helicoidal', desc: 'Resorte de suspension delantera. Verificar altura libre.' },
3: { name: 'Brazo de control', desc: 'Brazo inferior de control con bujes. Incluye herraje de montaje.' },
4: { name: 'Rotula', desc: 'Rotula inferior de suspension. Incluye guardapolvo y seguros.' },
5: { name: 'Barra de acoplamiento', desc: 'Barra de acoplamiento de direccion con terminales. Requiere alineacion.' },
};
var engineNames = {
1: { name: 'Filtro de aire', desc: 'Filtro de aire del motor. Cambiar cada 15,000-20,000 km.' },
2: { name: 'Bujias', desc: 'Juego de bujias. Verificar tipo (platino, iridio) segun especificacion del motor.' },
3: { name: 'Banda serpentina', desc: 'Banda de accesorios. Revisar tension y desgaste. Incluye alternador, A/C y direccion.' },
4: { name: 'Junta de culata', desc: 'Junta de cabeza de cilindros. Material MLS multicapa. Requiere torque especifico.' },
5: { name: 'Filtro de aceite', desc: 'Filtro de aceite del motor. Cambiar en cada servicio de aceite.' },
};
var name = (d.name || '').toLowerCase();
if (name.indexOf('brak') !== -1 || name.indexOf('freno') !== -1) return brakeNames[callout] || { name: 'Parte ' + callout, desc: '' };
if (name.indexOf('susp') !== -1) return suspNames[callout] || { name: 'Parte ' + callout, desc: '' };
if (name.indexOf('engine') !== -1 || name.indexOf('motor') !== -1) return engineNames[callout] || { name: 'Parte ' + callout, desc: '' };
return { name: 'Parte ' + callout, desc: '' };
}
function closeHotspotPanel() {
hotspotPanel.classList.remove('is-open');
state.selectedHotspot = null;
// Clear SVG highlights
var svg = svgWrapper.querySelector('svg');
if (svg) {
svg.querySelectorAll('[data-hotspot]').forEach(function(area) {
area.style.fill = 'transparent';
area.style.stroke = 'none';
});
}
// Clear list highlights
if (partsListEl) {
partsListEl.querySelectorAll('.part-item').forEach(function(item) {
item.classList.remove('is-active');
});
}
}
// ---- Parts list sidebar ----
function renderPartsList() {
if (!partsListEl) return;
var html = '<h4 class="parts-list__title">Partes en diagrama</h4>';
state.hotspots.forEach(function(h) {
var info = getPlaceholderPartInfo(h.callout_number);
var name = h.part_name_es || h.part_name || info.name;
var num = h.part_number || '';
html += '<div class="part-item" data-callout="' + h.callout_number + '" onclick="DiagramsApp.selectHotspot(' + h.callout_number + ')">';
html += '<span class="part-item__callout">' + h.callout_number + '</span>';
html += '<div class="part-item__info">';
html += '<div class="part-item__name">' + esc(name) + '</div>';
if (num) html += '<div class="part-item__number">' + esc(num) + '</div>';
html += '</div>';
html += '</div>';
});
if (state.hotspots.length === 0) {
html += '<div class="parts-list__empty">Sin partes definidas</div>';
}
partsListEl.innerHTML = html;
}
// ---- Zoom / Pan ----
function zoom(factor) {
state.scale = Math.max(0.3, Math.min(5, state.scale * factor));
applyTransform();
}
function resetZoom() {
state.scale = 1;
state.panX = 0;
state.panY = 0;
applyTransform();
}
function applyTransform() {
if (!svgWrapper) return;
svgWrapper.style.transform = 'translate(' + state.panX + 'px, ' + state.panY + 'px) scale(' + state.scale + ')';
}
function startPan(e) {
// Only pan with left button and not on a hotspot
if (e.button && e.button !== 0) return;
state.isPanning = true;
state.lastPointer = { x: e.clientX, y: e.clientY };
}
function doPan(e) {
if (!state.isPanning || !state.lastPointer) return;
var dx = e.clientX - state.lastPointer.x;
var dy = e.clientY - state.lastPointer.y;
state.panX += dx;
state.panY += dy;
state.lastPointer = { x: e.clientX, y: e.clientY };
applyTransform();
}
function endPan() {
state.isPanning = false;
state.lastPointer = null;
}
// ---- Actions ----
function viewPart(partId) {
window.open('/pos/catalog?part=' + partId, '_blank');
}
function searchPart(query) {
window.open('/pos/catalog?search=' + encodeURIComponent(query), '_blank');
}
function addToCart(partId) {
// Reuse the catalog cart logic if available
alert('Funcion disponible desde el catalogo. Busca la parte para agregarla al carrito.');
}
// ---- Helpers ----
function esc(s) {
if (!s) return '';
var d = document.createElement('div');
d.appendChild(document.createTextNode(s));
return d.innerHTML;
}
// ---- Public API ----
window.DiagramsApp = {
openDiagram: loadDiagram,
selectHotspot: selectHotspot,
viewPart: viewPart,
searchPart: searchPart,
addToCart: addToCart,
};
// Init on DOM ready
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', init);
} else {
init();
}
})();

2
pos/static/js/i18n.js
View File

@@ -9,6 +9,7 @@ var I18N = {
'pos': 'Punto de Venta',
'catalog': 'Catalogo',
'inventory': 'Inventario',
'diagrams': 'Diagramas',
'customers': 'Clientes',
'invoicing': 'Facturacion',
'accounting': 'Contabilidad',
@@ -164,6 +165,7 @@ var I18N = {
'pos': 'Point of Sale',
'catalog': 'Catalog',
'inventory': 'Inventory',
'diagrams': 'Diagrams',
'customers': 'Customers',
'invoicing': 'Invoicing',
'accounting': 'Accounting',

1
pos/static/js/sidebar.js
View File

@@ -23,6 +23,7 @@
{ name: _t('pos'), href: '/pos/sale', icon: '<rect x="2" y="3" width="20" height="14" rx="2"/><path d="M8 21h8M12 17v4"/>' },
{ name: _t('catalog'), href: '/pos/catalog', icon: '<path d="M4 6h16M4 10h16M4 14h16M4 18h16"/>' },
{ name: _t('inventory'), href: '/pos/inventory', icon: '<path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"/><polyline points="3.27 6.96 12 12.01 20.73 6.96"/><line x1="12" y1="22.08" x2="12" y2="12"/>' },
{ name: _t('diagrams'), href: '/pos/diagrams', icon: '<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>' },
]},
{ label: _t('nav_management'), items: [
{ name: _t('customers'), href: '/pos/customers', icon: '<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>' },