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