import React, { useEffect, useState } from 'react'; import { db } from '../../firebaseconfig'; import { collection, addDoc, onSnapshot, doc, query, where, orderBy, limit, getDocs } from 'firebase/firestore'; import soundA from './path_to_sound_A.mp3'; import domtoimage from 'dom-to-image'; import { saveAs } from 'file-saver'; import "./screenP.css"; const ScreenP = () => { const [mobileNumber, setMobileNumber] = useState(''); const [existingMobileNumber, setExistingMobileNumber] = useState(''); const [name, setName] = useState(''); const [status, setStatus] = useState(''); const [patientId, setPatientId] = useState(null); const [patientDetails, setPatientDetails] = useState(null); const [nowServingToken, setNowServingToken] = useState(''); const [isProcessing, setIsProcessing] = useState(false); const [proceedClicked, setProceedClicked] = useState(false); useEffect(() => { if (patientId) { const unsubscribe = onSnapshot(doc(db, 'patients', patientId), (doc) => { const patientData = doc.data(); setPatientDetails(patientData); if (patientData.status !== status) { setStatus(patientData.status); vibrateAndPlaySound(); } if (patientData.doctorAssigned && ['C', 'D', 'E', 'F'].includes(patientData.status)) { const servingTokenQuery = query(collection(db, 'patients'), where('status', '==', 'D'), where('doctorAssigned', '==', patientData.doctorAssigned)); const unsubscribeServingToken = onSnapshot(servingTokenQuery, (snapshot) => { const serving = snapshot.docs.map(doc => doc.data()).find(p => p.doctorAssigned === patientData.doctorAssigned); if (serving) { setNowServingToken(serving.tokenNumber); } else { setNowServingToken(''); } }); return () => unsubscribeServingToken(); } }); return () => unsubscribe(); } }, [patientId, status]); const vibrateAndPlaySound = () => { if ('vibrate' in navigator) { navigator.vibrate(500); } const audio = new Audio(soundA); audio.play().catch((error) => console.error('Audio playback failed:', error)); }; const handleSubmit = async (e) => { e.preventDefault(); try { setProceedClicked(true); setIsProcessing(true); // Disable the button and indicate processing const docRef = await addDoc(collection(db, 'patients'), { mobileNumber, name, status: 'A', requestTime: new Date(), tag: 'QR', }); setPatientId(docRef.id); setStatus('A'); vibrateAndPlaySound(); } catch (error) { console.error('Error adding document: ', error); } finally { setIsProcessing(false); // Enable the button after processing } }; const fetchLatestToken = async () => { const today = new Date(); today.setHours(0, 0, 0, 0); const patientsQuery = query( collection(db, 'patients'), where('mobileNumber', '==', existingMobileNumber), where('requestTime', '>=', today), orderBy('requestTime', 'desc'), limit(1) ); const querySnapshot = await getDocs(patientsQuery); const latestPatient = querySnapshot.docs.map(doc => ({ id: doc.id, ...doc.data() }))[0]; if (latestPatient) { setPatientDetails(latestPatient); setPatientId(latestPatient.id); setStatus(latestPatient.status); setName(latestPatient.name); setMobileNumber(latestPatient.mobileNumber); } else { alert('No token found for the given mobile number today.'); } }; const takeScreenshot = () => { const patientDetailsElement = document.querySelector('.patient-details'); domtoimage.toBlob(patientDetailsElement) .then(function (blob) { saveAs(blob, 'token-details.png'); }) .catch(function (error) { console.error('Error taking screenshot:', error); }); }; const displayMessage = () => { if (!patientDetails) return null; let messageClass = 'message ' + 'status-' + patientDetails.status; switch (patientDetails.status) { case 'A': return

Kindly wait.
We are processing your request

; case 'B': return

Kindly go to the Reception to make the payment.

; case 'C': return (

Your Token Number: {patientDetails.tokenNumber}
Doctor Assigned: {patientDetails.doctorAssigned}
Doctor's Room: {patientDetails.doctorRoom}

Wait for your Token Number

Now Serving Token: {nowServingToken}

); case 'D': return (

Your Token Number: {patientDetails.tokenNumber}

The doctor has called you.

Please go to the Doctor's room now

Doctor Assigned: {patientDetails.doctorAssigned}
Doctor's Room: {patientDetails.doctorRoom}

Now Serving Token: {nowServingToken}

); case 'E': return

Your Token Number: {patientDetails.tokenNumber}
Consultation Completed. Thank you for visiting us!

; case 'F': return

You didn't show up for the consultation. Please contact the Reception.

; default: return

Status not recognized.

; } }; return (

{patientId ? (

Please find the details below

Your Name: {name}

Your Mobile Number: {mobileNumber}

{displayMessage()}

) : (

{proceedClicked && isProcessing &&

Processing...

}

Already have a token?
Enter your mobile number to check the latest status.

setExistingMobileNumber(e.target.value)} placeholder="Enter your Mobile Number without country code" />

)}

); }; export default ScreenP;

alex__c26dc0794bc7521a0e6

After pressing “Proceed” button it is not moving further in mobile phone browsers.

Join Our Newsletter. No Spam, Only the good stuff.