carmine.savino/htt-locator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Carmine Savino
2026-01-18 12:23:37 +01:00
commit ae792f4996
124 changed files with 19497 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

155
resources/views/public/articolo.blade.php Normal file
View File

@@ -0,0 +1,155 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ $articolo->codice_articolo }} - HTT Locator</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
.gradient-bg {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
</style>
</head>
<body class="bg-gray-100 min-h-screen">
<!-- Header -->
<header class="gradient-bg text-white py-4 px-4 shadow-lg">
<div class="max-w-lg mx-auto">
<h1 class="text-xl font-bold text-center">HTT Locator</h1>
</div>
</header>
<!-- Main Content -->
<main class="max-w-lg mx-auto px-4 py-6">
<!-- Codice Articolo Card -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-6">
<div class="gradient-bg text-white p-6">
<p class="text-sm opacity-80 mb-1">Codice Articolo</p>
<h2 class="text-2xl font-bold">{{ $articolo->codice_articolo }}</h2>
</div>
@if($articolo->descrizione)
<div class="p-4 border-b">
<p class="text-gray-600 text-sm">{{ $articolo->descrizione }}</p>
</div>
@endif
</div>
<!-- Ubicazione -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-6">
<div class="px-4 py-3 bg-gray-50 border-b">
<h3 class="font-semibold text-gray-700 flex items-center">
<svg class="w-5 h-5 mr-2 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
Ubicazione
</h3>
</div>
<div class="divide-y">
@if($articolo->ciclo)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Ciclo</span>
<span class="font-medium text-gray-900">{{ $articolo->ciclo }}</span>
</div>
@endif
@if($articolo->diametro)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Diametro</span>
<span class="font-medium text-gray-900">{{ $articolo->diametro }}</span>
</div>
@endif
@if($articolo->posizione)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Posizione</span>
<span class="font-medium text-gray-900">{{ $articolo->posizione }}</span>
</div>
@endif
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Quantita</span>
<span class="font-medium text-gray-900 bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">
{{ $articolo->quantita }}
</span>
</div>
</div>
</div>
<!-- Parametri Tecnologici -->
<div class="bg-white rounded-2xl shadow-lg overflow-hidden mb-6">
<div class="px-4 py-3 bg-gray-50 border-b">
<h3 class="font-semibold text-gray-700 flex items-center">
<svg class="w-5 h-5 mr-2 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
</svg>
Parametri Tecnologici
</h3>
</div>
<div class="divide-y">
@if($articolo->tipo_lavorazione)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Tipo Lavorazione</span>
<span class="font-medium text-gray-900">{{ $articolo->tipo_lavorazione }}</span>
</div>
@endif
@if($articolo->materiale_lavorare)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Materiale</span>
<span class="font-medium text-gray-900">{{ $articolo->materiale_lavorare }}</span>
</div>
@endif
@if($articolo->maximum_thickness)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Max Thickness</span>
<span class="font-medium text-gray-900">{{ $articolo->maximum_thickness }}</span>
</div>
@endif
@if($articolo->speed_rpm)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Speed (RPM)</span>
<span class="font-medium text-gray-900">{{ number_format($articolo->speed_rpm) }}</span>
</div>
@endif
@if($articolo->feed)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Feed</span>
<span class="font-medium text-gray-900">{{ $articolo->feed }}</span>
</div>
@endif
@if($articolo->max_thrust_a)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Max Thrust (A)</span>
<span class="font-medium text-gray-900">{{ $articolo->max_thrust_a }}</span>
</div>
@endif
@if($articolo->min_torque_a)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Min Torque (A)</span>
<span class="font-medium text-gray-900">{{ $articolo->min_torque_a }}</span>
</div>
@endif
@if($articolo->quantita_fori)
<div class="flex justify-between items-center px-4 py-3">
<span class="text-gray-500 text-sm">Quantita Fori</span>
<span class="font-medium text-gray-900">{{ number_format($articolo->quantita_fori) }}</span>
</div>
@endif
</div>
</div>
<!-- Scan New QR Button -->
<div class="mb-6">
<a href="{{ route('scanner') }}" class="flex items-center justify-center gap-3 w-full bg-blue-600 hover:bg-blue-700 text-white font-semibold py-4 px-6 rounded-2xl shadow-lg transition-all">
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v1m6 11h2m-6 0h-2v4m0-11v3m0 0h.01M12 12h4.01M16 20h4M4 12h4m12 0h.01M5 8h2a1 1 0 001-1V5a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1zm12 0h2a1 1 0 001-1V5a1 1 0 00-1-1h-2a1 1 0 00-1 1v2a1 1 0 001 1zM5 20h2a1 1 0 001-1v-2a1 1 0 00-1-1H5a1 1 0 00-1 1v2a1 1 0 001 1z"></path>
</svg>
Scansiona Nuovo QR
</a>
</div>
<!-- Footer Info -->
<div class="text-center text-gray-400 text-xs">
<p>Ultimo aggiornamento: {{ $articolo->updated_at->format('d/m/Y H:i') }}</p>
</div>
</main>
</body>
</html>

309
resources/views/public/scanner.blade.php Normal file
View File

@@ -0,0 +1,309 @@
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Scanner QR Code - HTT</title>
<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
background-color: #1a1a2e;
color: white;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.header {
background-color: #16213e;
padding: 16px;
text-align: center;
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.header h1 {
font-size: 1.25rem;
font-weight: 600;
}
.scanner-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
#reader {
width: 100%;
max-width: 400px;
border-radius: 12px;
overflow: hidden;
}
#reader video {
border-radius: 12px;
}
.instructions {
text-align: center;
margin-top: 20px;
color: #a0a0a0;
font-size: 0.9rem;
}
.status {
margin-top: 16px;
padding: 12px 24px;
border-radius: 8px;
font-weight: 500;
text-align: center;
}
.status.scanning {
background-color: #0f3460;
color: #4da6ff;
}
.status.success {
background-color: #1e5128;
color: #4ade80;
}
.status.error {
background-color: #5c1a1a;
color: #f87171;
}
.btn {
margin-top: 20px;
padding: 14px 28px;
background-color: #3b82f6;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s;
}
.btn:hover {
background-color: #2563eb;
}
.btn:disabled {
background-color: #4b5563;
cursor: not-allowed;
}
.camera-switch {
margin-top: 12px;
padding: 10px 20px;
background-color: transparent;
color: #a0a0a0;
border: 1px solid #4b5563;
border-radius: 8px;
font-size: 0.875rem;
cursor: pointer;
}
.camera-switch:hover {
border-color: #6b7280;
color: white;
}
.logo {
font-size: 1.5rem;
font-weight: 700;
color: #3b82f6;
margin-bottom: 4px;
}
.permission-prompt {
text-align: center;
padding: 40px 20px;
}
.permission-prompt p {
margin-bottom: 20px;
color: #a0a0a0;
}
#qr-shaded-region {
border-color: #3b82f6 !important;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">HTT Locator</div>
<h1>Scanner Articoli</h1>
</div>
<div class="scanner-container">
<div id="reader"></div>
<div id="permission-prompt" class="permission-prompt" style="display: none;">
<p>Per scansionare i QR code, consenti l'accesso alla fotocamera.</p>
<button class="btn" onclick="startScanner()">Attiva Fotocamera</button>
</div>
<div id="status" class="status scanning" style="display: none;">
Inquadra il QR Code...
</div>
<p class="instructions" id="instructions">
Posiziona il QR code dell'articolo all'interno del riquadro
</p>
<button id="camera-switch" class="camera-switch" style="display: none;" onclick="switchCamera()">
Cambia fotocamera
</button>
</div>
<script>
let html5QrCode = null;
let currentCamera = 'environment'; // 'environment' = posteriore, 'user' = frontale
let cameras = [];
async function initScanner() {
try {
// Verifica supporto
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
showStatus('Il tuo browser non supporta l\'accesso alla fotocamera', 'error');
return;
}
// Ottieni lista fotocamere
cameras = await Html5Qrcode.getCameras();
if (cameras && cameras.length > 0) {
startScanner();
if (cameras.length > 1) {
document.getElementById('camera-switch').style.display = 'block';
}
} else {
document.getElementById('permission-prompt').style.display = 'block';
document.getElementById('instructions').style.display = 'none';
}
} catch (err) {
console.error('Errore inizializzazione:', err);
document.getElementById('permission-prompt').style.display = 'block';
document.getElementById('instructions').style.display = 'none';
}
}
async function startScanner() {
document.getElementById('permission-prompt').style.display = 'none';
document.getElementById('instructions').style.display = 'block';
showStatus('Inquadra il QR Code...', 'scanning');
if (html5QrCode) {
try {
await html5QrCode.stop();
} catch (e) {}
}
html5QrCode = new Html5Qrcode("reader");
const config = {
fps: 10,
qrbox: { width: 250, height: 250 },
aspectRatio: 1.0
};
try {
await html5QrCode.start(
{ facingMode: currentCamera },
config,
onScanSuccess,
onScanFailure
);
} catch (err) {
console.error('Errore avvio scanner:', err);
showStatus('Impossibile accedere alla fotocamera. Verifica i permessi.', 'error');
}
}
function onScanSuccess(decodedText, decodedResult) {
// Formato nuovo: id-timestamp (es: 42-1737235200)
const idTimestampRegex = /^\d+-\d+$/;
// Formato vecchio: UUID
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
if (idTimestampRegex.test(decodedText) || uuidRegex.test(decodedText)) {
showStatus('QR Code riconosciuto! Reindirizzamento...', 'success');
// Vibrazione feedback (se supportata)
if (navigator.vibrate) {
navigator.vibrate(200);
}
// Stop scanner
if (html5QrCode) {
html5QrCode.stop().catch(e => console.log(e));
}
// Redirect alla pagina articolo
setTimeout(() => {
window.location.href = '/articolo/' + decodedText;
}, 500);
} else {
// Potrebbe essere un vecchio QR con URL completo
if (decodedText.includes('/articolo/')) {
const match = decodedText.match(/\/articolo\/([^\s\/]+)/i);
if (match && match[1]) {
showStatus('QR Code riconosciuto! Reindirizzamento...', 'success');
if (navigator.vibrate) {
navigator.vibrate(200);
}
if (html5QrCode) {
html5QrCode.stop().catch(e => console.log(e));
}
setTimeout(() => {
window.location.href = '/articolo/' + match[1];
}, 500);
return;
}
}
showStatus('QR Code non valido per questo sistema', 'error');
setTimeout(() => {
showStatus('Inquadra il QR Code...', 'scanning');
}, 2000);
}
}
function onScanFailure(error) {
// Ignora errori di scansione continua (normale quando non c'è QR)
}
function showStatus(message, type) {
const status = document.getElementById('status');
status.textContent = message;
status.className = 'status ' + type;
status.style.display = 'block';
}
async function switchCamera() {
currentCamera = currentCamera === 'environment' ? 'user' : 'environment';
await startScanner();
}
// Avvia scanner al caricamento
document.addEventListener('DOMContentLoaded', initScanner);
</script>
</body>
</html>