- ScanNew aggiornato
This commit is contained in:
@ -21,99 +21,22 @@
|
||||
<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">
|
||||
<button type="button"
|
||||
class="btn btn-action"
|
||||
aria-label="Chiudi"
|
||||
@onclick="OnClose">
|
||||
<button type="button" class="btn btn-action" aria-label="Chiudi" @onclick="OnClose">
|
||||
<i class="fa fa-x footer-icon"></i>
|
||||
</button>
|
||||
|
||||
<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>
|
||||
</button>
|
||||
</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="mb-5">
|
||||
<div class="qr-shell">
|
||||
<span class="ti ti-qrcode qr-icon"></span>
|
||||
|
||||
<span class="qr-corner tl"></span>
|
||||
<span class="qr-corner tr"></span>
|
||||
<span class="qr-corner bl"></span>
|
||||
@ -124,24 +47,94 @@
|
||||
<div style="max-width: 320px;">
|
||||
<h1 class="h2 mb-2 fw-bold">Scan QR Code</h1>
|
||||
<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>
|
||||
</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="d-grid gap-3">
|
||||
<button type="button"
|
||||
class="btn btn-lg btn-primary d-inline-flex align-items-center justify-content-center gap-2"
|
||||
@onclick="OnScan">
|
||||
<button type="button" 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>Scan Code</span>
|
||||
<span>Avvia Scan</span>
|
||||
</button>
|
||||
|
||||
<button type="button"
|
||||
class="btn btn-link text-secondary fw-bold"
|
||||
@onclick="OnManual">
|
||||
Enter code manually
|
||||
<button type="button" class="btn btn-link text-secondary fw-bold" @onclick="OnManual">
|
||||
Inserisci il codice manualmente
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@ -154,13 +147,12 @@
|
||||
</div>
|
||||
|
||||
@code {
|
||||
[Parameter] public EventCallback Close { get; set; }
|
||||
[Parameter] public EventCallback Help { get; set; }
|
||||
|
||||
private bool openManual { get; set; } = false;
|
||||
private bool openScan { get; set; } = false;
|
||||
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
|
||||
private ElementReference videoRef;
|
||||
@ -184,8 +176,9 @@
|
||||
|
||||
private void OnManual()
|
||||
{
|
||||
openScan = false;
|
||||
openManual = true;
|
||||
invalidCode = string.Empty;
|
||||
invalidMessage = string.Empty;
|
||||
}
|
||||
|
||||
private async Task GoTo()
|
||||
@ -196,18 +189,18 @@
|
||||
|
||||
if (iscrizione != null)
|
||||
{
|
||||
invalidCode = string.Empty;
|
||||
invalidMessage = string.Empty;
|
||||
|
||||
var result = await _dialogService.OpenAsync<Component_Conferma_Iscrizione>("Conferma Numero Partecipanti",
|
||||
new Dictionary<string, object>() {
|
||||
{ "RagioneSociale", iscrizione.RagioneSociale },
|
||||
{ "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;
|
||||
|
||||
iscrizione.ScanCompleto = true;
|
||||
@ -215,30 +208,33 @@
|
||||
iscrizione.Partecipanti = numPartecipanti;
|
||||
await _managerService.IscrizioneEventoService.Salva(iscrizione);
|
||||
|
||||
await Reset();
|
||||
}
|
||||
else
|
||||
{
|
||||
invalidCode = "Codice non trovato.";
|
||||
confirmationMessage = $"La presenza di {iscrizione.RagioneSociale} è confermata con {iscrizione.Partecipanti} partecipanti ";
|
||||
StateHasChanged();
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
invalidCode = "Il codice inserito non risulta corretto!";
|
||||
invalidMessage = "Codice non trovato.";
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
if (!string.IsNullOrEmpty(registrationCode.Trim()))
|
||||
invalidMessage = "Il codice inserito non risulta corretto!";
|
||||
}
|
||||
|
||||
private async Task UndoChoice()
|
||||
if (openScan)
|
||||
{
|
||||
openManual = false;
|
||||
registrationCode = string.Empty;
|
||||
await StopScan();
|
||||
openScan = false;
|
||||
isScanning = false;
|
||||
await StartScan();
|
||||
}
|
||||
}
|
||||
|
||||
private async Task OnScan()
|
||||
{
|
||||
openManual = false;
|
||||
openScan = true;
|
||||
|
||||
// Delay per crazione tag <video>
|
||||
await Task.Delay(100);
|
||||
await StartScan();
|
||||
@ -255,17 +251,11 @@
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
invalidCode = "Impossibile avviare la fotocamera: " + ex.Message;
|
||||
invalidMessage = "Impossibile avviare la fotocamera: " + ex.Message;
|
||||
isScanning = false;
|
||||
}
|
||||
}
|
||||
|
||||
private async Task StopScanAndClose()
|
||||
{
|
||||
await StopScan();
|
||||
openScan = false;
|
||||
}
|
||||
|
||||
private async Task StopScan()
|
||||
{
|
||||
if (!isScanning) return;
|
||||
@ -275,19 +265,20 @@
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public async Task OnQrDecoded(string text)
|
||||
public Task OnQrDecoded(string text)
|
||||
{
|
||||
await StopScan();
|
||||
//await StopScan();
|
||||
registrationCode = text;
|
||||
|
||||
await GoTo();
|
||||
GoTo();
|
||||
StateHasChanged();
|
||||
return Task.CompletedTask;
|
||||
}
|
||||
|
||||
[JSInvokable]
|
||||
public Task OnQrError(string message)
|
||||
{
|
||||
invalidCode = message;
|
||||
invalidMessage = message;
|
||||
isScanning = false;
|
||||
StateHasChanged();
|
||||
return Task.CompletedTask;
|
||||
@ -303,20 +294,13 @@
|
||||
objRef?.Dispose();
|
||||
}
|
||||
|
||||
private async Task RefreshScan()
|
||||
{
|
||||
invalidCode = string.Empty;
|
||||
await OnScan();
|
||||
}
|
||||
|
||||
private async Task Reset()
|
||||
{
|
||||
registrationCode = string.Empty;
|
||||
invalidCode = string.Empty;
|
||||
|
||||
invalidMessage = string.Empty;
|
||||
confirmationMessage = string.Empty;
|
||||
openManual = false;
|
||||
openScan = false;
|
||||
|
||||
await StopScan();
|
||||
StateHasChanged();
|
||||
}
|
||||
|
||||
@ -39,7 +39,7 @@
|
||||
// Chiama il metodo C# marcato [JSInvokable]
|
||||
await dotNetRef.invokeMethodAsync("OnQrDecoded", code.data);
|
||||
|
||||
stop(videoElement); // ferma appena trovato
|
||||
//stop(videoElement); // ferma appena trovato
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user