newdesignprestation/Vue/Rechercheparcarte/index.php

143 lines
4.4 KiB
PHP
Executable File

<?php
$this->titre = "INTER-SANTE - "._("Recherche du patient par carte") ;
?>
<style>
/* Masquage du texte */
#donneesCarte {
color: transparent !important;
text-shadow: 0 0 8px rgba(0,0,0,0.5) !important;
user-select: none !important;
}
#donneesCarte::placeholder {
color: #6c757d !important;
text-shadow: none !important;
}
/* Animation lors de la saisie */
#donneesCarte.reading {
border-color: #4caf50 !important;
box-shadow: 0 0 0 0.2rem rgba(76, 175, 80, 0.25) !important;
animation: pulse-border 1s infinite;
}
@keyframes pulse-border {
0%, 100% { border-color: #4caf50; }
50% { border-color: #66bb6a; }
}
/* Indicateur visuel simple */
.reading-indicator {
display: none;
text-align: center;
color: #4caf50;
font-size: 18px;
margin-top: 10px;
}
.reading-indicator.active {
display: block;
}
</style>
<form id="frmrechercheparcarte" name="frmrechercheparcarte" method="post" action="Rechercheparcarte/index/">
<INPUT style='font-size:40pt; height: 50px; text-align: center;'
class="form-control"
TYPE="text"
id="donneesCarte"
name="donneesCarte"
autofocus
AUTOCOMPLETE="OFF"
placeholder="<?= _("Veuillez scanner la carte NFC ou le QR code!")?>">
<div class="reading-indicator" id="reading-indicator">
<i class="fa fa-check-circle"></i> <span id="indicator-text"><?= _("Carte détectée") ?></span>
</div>
<input id="lancerrechercheparcarte" name="lancerrechercheparcarte" class="sr-only" type="submit" value="<?= _("Rechercher") ?>" >
</form>
<div id="div_wait_nfc"></div>
<?php if (isset($msgErreur) && $msgErreur>" "): ?>
<div class="alert alert-danger" style="height:38px; padding:5px; text-align: center;">
<H4><?= $msgErreur ?></H4>
</div>
<?php endif; ?>
<script>
const inputField = document.getElementById('donneesCarte');
const indicator = document.getElementById('reading-indicator');
const indicatorText = document.getElementById('indicator-text');
// Protection
inputField.addEventListener('contextmenu', e => e.preventDefault());
inputField.addEventListener('copy', e => e.preventDefault());
inputField.addEventListener('cut', e => e.preventDefault());
// ========== MAINTIEN DU FOCUS (Solution combinée optimale) ==========
// 1. Empêcher la perte de focus
inputField.addEventListener('blur', function(e) {
setTimeout(() => this.focus(), 10);
});
// 2. Surveillance par intervalle (backup)
const focusInterval = setInterval(function() {
if (document.activeElement !== inputField && !document.hidden) {
inputField.focus();
}
}, 200);
// 3. Capturer toutes les touches vers le champ
document.addEventListener('keydown', function(e) {
if (!e.ctrlKey && !e.altKey && !e.metaKey && document.activeElement !== inputField) {
inputField.focus();
}
});
// Nettoyage à la soumission du formulaire
document.getElementById('frmrechercheparcarte').addEventListener('submit', function() {
clearInterval(focusInterval);
});
// Détection du type de scan
function detectScanType(value) {
if (value.endsWith('qr')) {
return 'qr';
}
return 'nfc';
}
inputField.addEventListener('input', function() {
if (this.value.length > 0) {
this.classList.add('reading');
indicator.classList.add('active');
const type = detectScanType(this.value);
indicatorText.textContent = type === 'qr'
? '<?= _("QR code détecté") ?>'
: '<?= _("Carte détectée") ?>';
} else {
this.classList.remove('reading');
indicator.classList.remove('active');
}
});
inputField.addEventListener('change', function () {
// alert(this.value);
if (this.value.length > 3) {
const type = detectScanType(this.value);
const message = type === 'qr'
? '<?= _("Traitement du QR code...") ?>'
: '<?= _("Lecture de la carte...") ?>';
$('#div_wait_nfc').html('<div style="padding-top:80px; text-align:center; font-size:14px; color: #4caf50;"><span><i class="fa fa-spinner fa-spin fa-5x"></i></span><p style="margin-top:20px;">' + message + '</p></div>');
this.form.submit();
}
});
// Focus initial
window.addEventListener('load', () => inputField.focus());
document.addEventListener('DOMContentLoaded', () => inputField.focus());
</script>