Files
TieMeasureFlow/client/templates/components/caliper_status.html
Adriano bcd807e57d feat: FASE 5b/6.1+6.2 - SPC Backend + Dashboard Metrologist (Plotly.js)
Aggiunge servizio SPC con calcoli Cp/Cpk/Pp/Ppk, carta di controllo (UCL/LCL),
istogramma con curva normale. Router FastAPI con 5 endpoint statistics, blueprint
Flask con proxy AJAX, dashboard interattiva Alpine.js + Plotly.js con filtri per
ricetta/subtask/date, riepilogo pass/fail, gauge Cpk e i18n IT/EN completo.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 15:00:05 +01:00

64 lines
2.8 KiB
HTML

<!--
Caliper Status Indicator - Passive HID Monitor
Shows USB caliper reading feedback without Web Serial.
Flashes green when a caliper reading is detected via burst timing.
-->
<div x-data="caliperStatus()"
class="inline-block">
<!-- Passive indicator (no connect/disconnect button needed) -->
<div class="flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all duration-300"
:class="active
? 'bg-green-50 dark:bg-green-900/20 border-green-300 dark:border-green-700 shadow-md shadow-green-100 dark:shadow-green-900/30'
: 'bg-[var(--bg-card)] border-[var(--border-color)]'"
:title="readingCount > 0
? '{{ _('Letture calibro') }}: ' + readingCount
: '{{ _('Calibro USB') }}'">
<!-- Status dot -->
<span class="relative flex h-2.5 w-2.5">
<!-- Ping animation when active -->
<span x-show="active"
x-transition
class="absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75 animate-ping"></span>
<!-- Static dot -->
<span class="relative inline-flex rounded-full h-2.5 w-2.5 transition-colors duration-300"
:class="active
? 'bg-green-500'
: readingCount > 0
? 'bg-green-400'
: 'bg-slate-400 dark:bg-slate-500'
"></span>
</span>
<!-- Caliper icon -->
<svg class="w-4 h-4 transition-colors duration-300"
:class="active ? 'text-green-600 dark:text-green-400' : 'text-slate-500 dark:text-slate-400'"
fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
</svg>
<!-- Label -->
<span class="text-xs font-medium transition-colors duration-300"
:class="active ? 'text-green-700 dark:text-green-300' : 'text-slate-600 dark:text-slate-400'"
x-text="active ? '{{ _('Lettura calibro') }}' : '{{ _('Calibro USB') }}'"></span>
<!-- Last reading value (shows when active or when there's a recent reading) -->
<span x-show="lastReading !== null"
x-transition
class="font-mono text-xs font-semibold px-1.5 py-0.5 rounded transition-colors duration-300"
:class="active
? 'text-green-700 dark:text-green-200 bg-green-100 dark:bg-green-800/40'
: 'text-primary bg-blue-50 dark:bg-blue-900/30'"
x-text="lastReading?.toFixed(3) + ' mm'"></span>
<!-- Reading counter badge -->
<span x-show="readingCount > 0 && !active"
x-transition
class="text-[10px] font-mono text-slate-400 dark:text-slate-500"
x-text="'(' + readingCount + ')'"></span>
</div>
</div>