diff --git a/apps/web/src/lib/components/ErrorModal.svelte b/apps/web/src/lib/components/ErrorModal.svelte index a0a2bb4..a0176d0 100644 --- a/apps/web/src/lib/components/ErrorModal.svelte +++ b/apps/web/src/lib/components/ErrorModal.svelte @@ -13,20 +13,20 @@ let modalPosition = $state<{ top: number; left: number } | null>(null); - // Função para calcular a posição baseada no relógio sincronizado + // Função para calcular a posição baseada no card de registro de ponto function calcularPosicaoModal() { - // Procurar pelo elemento do relógio sincronizado - const relogioRef = document.getElementById('relogio-sincronizado-ref'); + // Procurar pelo elemento do card de registro de ponto + const cardRef = document.getElementById('card-registro-ponto-ref'); - if (relogioRef) { - const rect = relogioRef.getBoundingClientRect(); + if (cardRef) { + const rect = cardRef.getBoundingClientRect(); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; - // Posicionar o modal na mesma posição do relógio sincronizado - // Centralizado horizontalmente no card do relógio + // Posicionar o modal na mesma posição do card de registro + // Centralizado horizontalmente no card const left = rect.left + (rect.width / 2); - // Posicionar abaixo do card do relógio com um pequeno espaçamento + // Posicionar abaixo do card com um pequeno espaçamento const top = rect.bottom + 20; return { diff --git a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte index c93b0ed..6031454 100644 --- a/apps/web/src/lib/components/ponto/ComprovantePonto.svelte +++ b/apps/web/src/lib/components/ponto/ComprovantePonto.svelte @@ -21,20 +21,20 @@ let gerando = $state(false); let modalPosition = $state<{ top: number; left: number } | null>(null); - // Função para calcular a posição baseada no relógio sincronizado + // Função para calcular a posição baseada no card de registro de ponto function calcularPosicaoModal() { - // Procurar pelo elemento do relógio sincronizado - const relogioRef = document.getElementById('relogio-sincronizado-ref'); + // Procurar pelo elemento do card de registro de ponto + const cardRef = document.getElementById('card-registro-ponto-ref'); - if (relogioRef) { - const rect = relogioRef.getBoundingClientRect(); + if (cardRef) { + const rect = cardRef.getBoundingClientRect(); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; - // Posicionar o modal na mesma posição do relógio sincronizado - // Centralizado horizontalmente no card do relógio + // Posicionar o modal na mesma posição do card de registro + // Centralizado horizontalmente no card const left = rect.left + (rect.width / 2); - // Posicionar abaixo do card do relógio com um pequeno espaçamento + // Posicionar abaixo do card com um pequeno espaçamento const top = rect.bottom + 20; return { diff --git a/apps/web/src/lib/components/ponto/RegistroPonto.svelte b/apps/web/src/lib/components/ponto/RegistroPonto.svelte index 0376321..40170bc 100644 --- a/apps/web/src/lib/components/ponto/RegistroPonto.svelte +++ b/apps/web/src/lib/components/ponto/RegistroPonto.svelte @@ -65,6 +65,7 @@ let mostrandoModalConfirmacao = $state(false); let dataHoraAtual = $state<{ data: string; hora: string } | null>(null); let aguardandoProcessamento = $state(false); + let etapaProcessamento = $state<'coletando' | 'sincronizando' | 'upload' | 'registrando' | null>(null); const registrosHoje = $derived(registrosHojeQuery?.data || []); const config = $derived(configQuery?.data); @@ -204,15 +205,19 @@ registrando = true; sucesso = null; coletandoInfo = true; + aguardandoProcessamento = true; + etapaProcessamento = 'coletando'; try { // Coletar informações do dispositivo + etapaProcessamento = 'coletando'; const informacoesDispositivo = await obterInformacoesDispositivo(); // Nota: A permissão de sensor não é impeditiva - apenas câmera e localização são obrigatórias coletandoInfo = false; // Obter tempo sincronizado e aplicar GMT offset (igual ao relógio) + etapaProcessamento = 'sincronizando'; const configRelogio = await client.query(api.configuracaoRelogio.obterConfiguracao, {}); // Usar gmtOffset da configuração, sem valor padrão, pois 0 é um valor válido const gmtOffset = configRelogio.gmtOffset ?? 0; @@ -262,6 +267,7 @@ let imagemId: Id<'_storage'> | undefined = undefined; if (imagemCapturada) { try { + etapaProcessamento = 'upload'; imagemId = await uploadImagem(imagemCapturada); } catch (error) { console.error('Erro ao fazer upload da imagem:', error); @@ -272,6 +278,7 @@ } // Registrar ponto + etapaProcessamento = 'registrando'; const resultado = await client.mutation(api.pontos.registrarPonto, { imagemId, informacoesDispositivo, @@ -314,6 +321,7 @@ } catch (error) { console.error('Erro ao registrar ponto:', error); aguardandoProcessamento = false; + etapaProcessamento = null; let mensagemErro = 'Erro desconhecido ao registrar ponto'; let detalhesErro = 'Tente novamente em alguns instantes.'; @@ -392,6 +400,7 @@ registrando = false; coletandoInfo = false; aguardandoProcessamento = false; + etapaProcessamento = null; } } @@ -518,7 +527,11 @@ function confirmarRegistro() { mostrandoModalConfirmacao = false; aguardandoProcessamento = true; - registrarPonto(); + etapaProcessamento = 'coletando'; + // Usar setTimeout para garantir que o modal de processamento apareça antes de iniciar o registro + setTimeout(() => { + registrarPonto(); + }, 100); } function cancelarRegistro() { @@ -855,20 +868,20 @@ // Posicionamento dos modais let modalPosition = $state<{ top: number; left: number } | null>(null); - // Função para calcular a posição baseada no relógio sincronizado + // Função para calcular a posição baseada no card de registro de ponto function calcularPosicaoModal() { - // Procurar pelo elemento do relógio sincronizado - const relogioRef = document.getElementById('relogio-sincronizado-ref'); + // Procurar pelo elemento do card de registro de ponto + const cardRef = document.getElementById('card-registro-ponto-ref'); - if (relogioRef) { - const rect = relogioRef.getBoundingClientRect(); + if (cardRef) { + const rect = cardRef.getBoundingClientRect(); const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; - // Posicionar o modal na mesma posição do relógio sincronizado - // Centralizado horizontalmente no card do relógio + // Posicionar o modal na mesma posição do card de registro + // Centralizado horizontalmente no card const left = rect.left + (rect.width / 2); - // Posicionar abaixo do card do relógio com um pequeno espaçamento + // Posicionar abaixo do card com um pequeno espaçamento const top = rect.bottom + 20; return { @@ -1009,7 +1022,7 @@
-
+
@@ -1498,8 +1511,32 @@ >
-

Processando Registro

-

Por favor, aguarde enquanto processamos seu registro de ponto...

+

+ {#if etapaProcessamento === 'coletando'} + Coletando Informações + {:else if etapaProcessamento === 'sincronizando'} + Sincronizando Horário + {:else if etapaProcessamento === 'upload'} + Enviando Foto + {:else if etapaProcessamento === 'registrando'} + Registrando Ponto + {:else} + Processando Registro + {/if} +

+

+ {#if etapaProcessamento === 'coletando'} + Coletando informações do dispositivo e localização... + {:else if etapaProcessamento === 'sincronizando'} + Sincronizando o horário com o servidor... + {:else if etapaProcessamento === 'upload'} + Enviando a foto capturada para o servidor... + {:else if etapaProcessamento === 'registrando'} + Finalizando o registro de ponto no sistema... + {:else} + Por favor, aguarde enquanto processamos seu registro de ponto... + {/if} +

@@ -1540,7 +1577,7 @@ @@ -1658,7 +1695,7 @@