- ScanNew aggiornato

This commit is contained in:
2025-12-29 14:47:32 +01:00
parent 0b8ecdd665
commit 6127c73ecf
2 changed files with 117 additions and 133 deletions

View File

@ -21,99 +21,22 @@
<div class="container container-tight py-4 d-flex flex-column" style="min-height: 100dvh;"> <div class="container container-tight py-4 d-flex flex-column" style="min-height: 100dvh;">
<div class="d-flex align-items-center justify-content-between pt-4"> <div class="d-flex align-items-center justify-content-between pt-4">
<button type="button" <button type="button" class="btn btn-action" aria-label="Chiudi" @onclick="OnClose">
class="btn btn-action"
aria-label="Chiudi"
@onclick="OnClose">
<i class="fa fa-x footer-icon"></i> <i class="fa fa-x footer-icon"></i>
</button> </button>
<div class="flex-fill"></div> <div class="flex-fill"></div>
<button type="button" class="btn btn-action" aria-label="Aiuto" @onclick="OnHelp">
<button type="button"
class="btn btn-action"
aria-label="Aiuto"
@onclick="OnHelp">
<i class="fa fa-question footer-icon"></i> <i class="fa fa-question footer-icon"></i>
</button> </button>
</div> </div>
@if (openManual) @if (!openManual)
{ {
<div class="d-flex flex-column align-items-center justify-content-center text-center flex-fill px-3">
<div class="row">
<div class="col-12 mb-3">
<RadzenTextBox @bind-Value="@registrationCode" Placeholder="Inserirci il codice" Style="width: 100%;" />
</div>
@if (!string.IsNullOrWhiteSpace(invalidCode))
{
<div class="alert alert-danger w-100">
<strong>Errore:</strong> @invalidCode
</div>
}
<div class="col-6 mb-3">
<button type="button" class="btn btn-primary w-100" @onclick="GoTo">
Invia
</button>
</div>
<div class="col-6 mb-3">
<button type="button" class="btn btn-default w-100" @onclick="UndoChoice">
Annulla
</button>
</div>
</div>
</div>
}
@if (openScan)
{
<div class="d-flex flex-column align-items-center justify-content-center text-center flex-fill px-3">
<div class="mb-3 w-100">
<div style="position: relative; width: 100%; max-width: 400px; margin: 0 auto;">
<video @ref="videoRef" autoplay playsinline class="w-100 rounded border border-2 border-primary" style="aspect-ratio: 1/1; object-fit: cover;"></video>
<div style="position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%; border: 2px dashed rgba(255,255,255,0.8); border-radius: 12px; pointer-events: none;"></div>
</div>
<p class="text-secondary mt-3">Inquadra il QR Code</p>
</div>
@if (!string.IsNullOrWhiteSpace(invalidCode))
{
<div class="row">
<div class="col-11">
<div class="alert alert-danger w-100">
<strong>Errore:</strong> @invalidCode
</div>
</div>
<div class="col-1">
<button type="button"
class="btn btn-action"
aria-label="Chiudi"
@onclick="RefreshScan">
<i class="fa-solid fa-arrows-rotate footer-icon"></i>
</button>
</div>
</div>
}
<div class="mt-3">
<button type="button" class="btn btn-default" @onclick="StopScanAndClose">
Ferma Scansione
</button>
</div>
</div>
}
@if (!openManual && !openScan)
{
<div class="d-flex flex-column align-items-center justify-content-center text-center flex-fill px-3"> <div class="d-flex flex-column align-items-center justify-content-center text-center flex-fill px-3">
<div class="mb-5"> <div class="mb-5">
<div class="qr-shell"> <div class="qr-shell">
<span class="ti ti-qrcode qr-icon"></span> <span class="ti ti-qrcode qr-icon"></span>
<span class="qr-corner tl"></span> <span class="qr-corner tl"></span>
<span class="qr-corner tr"></span> <span class="qr-corner tr"></span>
<span class="qr-corner bl"></span> <span class="qr-corner bl"></span>
@ -124,24 +47,94 @@
<div style="max-width: 320px;"> <div style="max-width: 320px;">
<h1 class="h2 mb-2 fw-bold">Scan QR Code</h1> <h1 class="h2 mb-2 fw-bold">Scan QR Code</h1>
<p class="text-secondary mb-0"> <p class="text-secondary mb-0">
Align the QR code within the frame to automatically detect and identify the client. Allinea il QR code per il riconoscimento automatico dei dati del cliente.
</p> </p>
</div> </div>
</div> </div>
<div class="d-x flex-column align-items-center justify-content-center text-center flex-fill px-3">
@if (!string.IsNullOrWhiteSpace(confirmationMessage))
{
<div class="alert alert-success w-100">
<strong>Conferma:</strong> @confirmationMessage
</div>
}
<div class="mb-3 w-100">
<div style="position: relative; width: 100%; max-width: 400px; margin: 0 auto;">
<video @ref="videoRef" autoplay playsinline class="w-100 rounded border border-2 border-primary" style="aspect-ratio: 1/1; object-fit: cover;"></video>
<div style="position: absolute; top: 10%; left: 10%; right: 10%; bottom: 10%; border: 2px dashed rgba(255,255,255,0.8); border-radius: 12px; pointer-events: none;"></div>
</div>
</div>
@if (!string.IsNullOrWhiteSpace(invalidMessage))
{
<div class="alert alert-danger w-100">
<strong>Errore:</strong> @invalidMessage
</div>
}
@if (openScan)
{
<div class="mt-3">
<button type="button" class="btn btn-default" @onclick="Reset">
Annulla
</button>
</div>
}
</div>
}
@if (openManual)
{
<div class="d-flex flex-column align-items-center justify-content-center text-center flex-fill px-3">
<div class="row">
@if (!string.IsNullOrWhiteSpace(confirmationMessage))
{
<div class="alert alert-success w-100">
<strong>Conferma:</strong> @confirmationMessage
</div>
}
<div class="col-12 mb-3">
<RadzenTextBox @bind-Value="@registrationCode" Placeholder="Inserirci il codice" Style="width: 100%;" />
</div>
@if (!string.IsNullOrEmpty(invalidMessage))
{
<div class="alert alert-danger w-100">
<strong>Errore:</strong> @invalidMessage
</div>
}
<div class="row">
<div class="col-6 mb-3">
<button type="button" class="btn btn-primary w-100" @onclick="GoTo">
Invia
</button>
</div>
<div class="col-6 mb-3">
<button type="button" class="btn btn-default w-100" @onclick="Reset">
Annulla
</button>
</div>
</div>
</div>
</div>
}
@if (!openManual && !openScan)
{
<div class="pb-4"> <div class="pb-4">
<div class="d-grid gap-3"> <div class="d-grid gap-3">
<button type="button" <button type="button" class="btn btn-lg btn-primary d-inline-flex align-items-center justify-content-center gap-2" @onclick="OnScan">
class="btn btn-lg btn-primary d-inline-flex align-items-center justify-content-center gap-2"
@onclick="OnScan">
<span class="ti ti-scan fs-3"></span> <span class="ti ti-scan fs-3"></span>
<span>Scan Code</span> <span>Avvia Scan</span>
</button> </button>
<button type="button" <button type="button" class="btn btn-link text-secondary fw-bold" @onclick="OnManual">
class="btn btn-link text-secondary fw-bold" Inserisci il codice manualmente
@onclick="OnManual">
Enter code manually
</button> </button>
</div> </div>
@ -154,13 +147,12 @@
</div> </div>
@code { @code {
[Parameter] public EventCallback Close { get; set; }
[Parameter] public EventCallback Help { get; set; }
private bool openManual { get; set; } = false; private bool openManual { get; set; } = false;
private bool openScan { get; set; } = false; private bool openScan { get; set; } = false;
private string registrationCode { get; set; } = string.Empty; private string registrationCode { get; set; } = string.Empty;
private string invalidCode { get; set; } = string.Empty; private string invalidMessage { get; set; } = string.Empty;
private string confirmationMessage { get; set; } = string.Empty;
// Scanner // Scanner
private ElementReference videoRef; private ElementReference videoRef;
@ -184,8 +176,9 @@
private void OnManual() private void OnManual()
{ {
openScan = false;
openManual = true; openManual = true;
invalidCode = string.Empty; invalidMessage = string.Empty;
} }
private async Task GoTo() private async Task GoTo()
@ -196,49 +189,52 @@
if (iscrizione != null) if (iscrizione != null)
{ {
invalidCode = string.Empty; invalidMessage = string.Empty;
var result = await _dialogService.OpenAsync<Component_Conferma_Iscrizione>("Conferma Numero Partecipanti", var result = await _dialogService.OpenAsync<Component_Conferma_Iscrizione>("Conferma Numero Partecipanti",
new Dictionary<string, object>() { new Dictionary<string, object>() {
{ "RagioneSociale", iscrizione.RagioneSociale }, { "RagioneSociale", iscrizione.RagioneSociale },
{ "Partecipanti", iscrizione.Partecipanti } { "Partecipanti", iscrizione.Partecipanti }
}, },
new DialogOptions() { Width = "400px", CloseDialogOnOverlayClick = false } new DialogOptions() { Width = "600px", CloseDialogOnOverlayClick = false }
); );
if (result == null) await Reset(); if (result != null)
{
var numPartecipanti = (int)result;
var numPartecipanti = (int)result; iscrizione.ScanCompleto = true;
iscrizione.DataScan = DateTime.Now;
iscrizione.Partecipanti = numPartecipanti;
await _managerService.IscrizioneEventoService.Salva(iscrizione);
iscrizione.ScanCompleto = true; confirmationMessage = $"La presenza di {iscrizione.RagioneSociale} è confermata con {iscrizione.Partecipanti} partecipanti ";
iscrizione.DataScan = DateTime.Now; StateHasChanged();
iscrizione.Partecipanti = numPartecipanti; }
await _managerService.IscrizioneEventoService.Salva(iscrizione);
await Reset();
} }
else else
{ {
invalidCode = "Codice non trovato."; invalidMessage = "Codice non trovato.";
} }
} }
else else
{ {
invalidCode = "Il codice inserito non risulta corretto!"; if (!string.IsNullOrEmpty(registrationCode.Trim()))
invalidMessage = "Il codice inserito non risulta corretto!";
} }
}
private async Task UndoChoice() if (openScan)
{ {
openManual = false; isScanning = false;
registrationCode = string.Empty; await StartScan();
await StopScan(); }
openScan = false;
} }
private async Task OnScan() private async Task OnScan()
{ {
openManual = false;
openScan = true; openScan = true;
// Delay per crazione tag <video> // Delay per crazione tag <video>
await Task.Delay(100); await Task.Delay(100);
await StartScan(); await StartScan();
@ -255,17 +251,11 @@
} }
catch (Exception ex) catch (Exception ex)
{ {
invalidCode = "Impossibile avviare la fotocamera: " + ex.Message; invalidMessage = "Impossibile avviare la fotocamera: " + ex.Message;
isScanning = false; isScanning = false;
} }
} }
private async Task StopScanAndClose()
{
await StopScan();
openScan = false;
}
private async Task StopScan() private async Task StopScan()
{ {
if (!isScanning) return; if (!isScanning) return;
@ -275,19 +265,20 @@
} }
[JSInvokable] [JSInvokable]
public async Task OnQrDecoded(string text) public Task OnQrDecoded(string text)
{ {
await StopScan(); //await StopScan();
registrationCode = text; registrationCode = text;
await GoTo(); GoTo();
StateHasChanged(); StateHasChanged();
return Task.CompletedTask;
} }
[JSInvokable] [JSInvokable]
public Task OnQrError(string message) public Task OnQrError(string message)
{ {
invalidCode = message; invalidMessage = message;
isScanning = false; isScanning = false;
StateHasChanged(); StateHasChanged();
return Task.CompletedTask; return Task.CompletedTask;
@ -303,20 +294,13 @@
objRef?.Dispose(); objRef?.Dispose();
} }
private async Task RefreshScan()
{
invalidCode = string.Empty;
await OnScan();
}
private async Task Reset() private async Task Reset()
{ {
registrationCode = string.Empty; registrationCode = string.Empty;
invalidCode = string.Empty; invalidMessage = string.Empty;
confirmationMessage = string.Empty;
openManual = false; openManual = false;
openScan = false; openScan = false;
await StopScan(); await StopScan();
StateHasChanged(); StateHasChanged();
} }

View File

@ -39,7 +39,7 @@
// Chiama il metodo C# marcato [JSInvokable] // Chiama il metodo C# marcato [JSInvokable]
await dotNetRef.invokeMethodAsync("OnQrDecoded", code.data); await dotNetRef.invokeMethodAsync("OnQrDecoded", code.data);
stop(videoElement); // ferma appena trovato //stop(videoElement); // ferma appena trovato
return; return;
} }