feat: FASE 3 - Flusso MeasurementTec (selezione ricetta, esecuzione misure, riepilogo)

Implementazione completa del flusso operativo per il ruolo MeasurementTec: Blueprint measure.py: - select_recipe: selezione ricetta con ricerca e barcode - task_list: lista task con conteggi subtask e allegati - task_execute: esecuzione misure con numpad, calibro USB, feedback real-time - task_complete: riepilogo con statistiche pass/fail e export CSV - API AJAX: lookup-barcode, save-traceability, save-measurement - Autorizzazione role_required("MeasurementTec") su tutte le route Componenti riutilizzabili: - numpad.html/js/css: tastierino numerico touch-friendly con keyboard support - caliper_status.html + caliper.js: integrazione calibro USB via Web Serial API - barcode_scanner.html + barcode.js: scansione barcode con html5-qrcode - measurement_feedback.html: feedback visivo pass/warning/fail in tempo reale - next_measurement.html: indicatore prossima misurazione - annotation-viewer.js: visualizzatore canvas con marker su disegni tecnici - csv-export.js: export CSV con locale italiano (delimitatore ;, decimale ,) Sicurezza: - Decoratore role_required(*roles) per autorizzazione basata su ruoli - CSRF token su tutti i POST AJAX - |tojson per prevenire XSS su annotations_json - Validazione input lato client e server i18n: 23+ nuove chiavi tradotte IT/EN per tutti i template FASE 3 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-07 08:40:58 +01:00
parent edd4580a5a
commit a386986c17
19 changed files with 3905 additions and 16 deletions
@@ -0,0 +1,77 @@
+<!--
+  Caliper Status Indicator
+  Compact component for navbar or header
+  Shows connection status and last reading
+-->
+<div x-data="caliperConnection()"
+     x-init="$watch('connected', value => console.log('Caliper connected:', value))"
+     class="inline-block">
+
+  <!-- Compact indicator button -->
+  <button @click="connected ? disconnect() : connect()"
+          :disabled="!isSupported"
+          class="flex items-center gap-2 px-3 py-1.5 rounded-lg border transition-all duration-200 hover:shadow-md disabled:opacity-50 disabled:cursor-not-allowed"
+          :class="{
+            'bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700': status === 'disconnected',
+            'bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800': status === 'connected',
+            'bg-amber-50 dark:bg-amber-900/20 border-amber-200 dark:border-amber-800': status === 'connecting',
+            'bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800': status === 'error'
+          }">
+
+    <!-- Status dot with animation -->
+    <span class="relative flex h-2.5 w-2.5">
+      <!-- Ping animation for active states -->
+      <span x-show="status === 'connected' || status === 'connecting'"
+            class="absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping"
+            :class="{
+              'bg-green-400': status === 'connected',
+              'bg-amber-400': status === 'connecting'
+            }"></span>
+
+      <!-- Static dot -->
+      <span class="relative inline-flex rounded-full h-2.5 w-2.5"
+            :class="{
+              'bg-green-500': status === 'connected',
+              'bg-slate-400': status === 'disconnected',
+              'bg-amber-400': status === 'connecting',
+              'bg-red-500': status === 'error'
+            }"></span>
+    </span>
+
+    <!-- Caliper icon -->
+    <svg class="w-4 h-4 text-slate-600 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>
+
+    <!-- Status label -->
+    <span class="text-xs font-medium text-slate-700 dark:text-slate-300"
+          x-text="status === 'connected' ? '{{ _('Calibro') }}' :
+                  status === 'connecting' ? '{{ _('Connessione...') }}' :
+                  status === 'error' ? '{{ _('Errore calibro') }}' :
+                  '{{ _('Calibro') }}'"></span>
+
+    <!-- Last reading (when connected) -->
+    <span x-show="connected && lastReading !== null"
+          x-transition
+          class="font-mono text-xs font-semibold text-primary px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/30 rounded"
+          x-text="lastReading?.toFixed(3) + ' mm'"></span>
+
+    <!-- Not supported warning icon -->
+    <template x-if="!isSupported">
+      <div class="flex items-center gap-1.5" x-data="{ showTooltip: false }">
+        <svg @mouseenter="showTooltip = true"
+             @mouseleave="showTooltip = false"
+             class="w-4 h-4 text-amber-500" fill="currentColor" viewBox="0 0 20 20">
+          <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+        </svg>
+
+        <!-- Tooltip -->
+        <div x-show="showTooltip"
+             x-transition
+             class="absolute z-50 px-2 py-1 text-xs text-white bg-slate-900 rounded shadow-lg whitespace-nowrap -translate-y-8">
+          {{ _('Browser non supporta Web Serial API') }}
+        </div>
+      </div>
+    </template>
+  </button>
+</div>