working with corrent date entry
This commit is contained in:
@@ -14,6 +14,7 @@ function App() {
|
||||
symptoms: [],
|
||||
severity: 'moderate'
|
||||
});
|
||||
const [dobDisplay, setDobDisplay] = useState('');
|
||||
const [assignedBand, setAssignedBand] = useState(null);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
@@ -28,6 +29,8 @@ function App() {
|
||||
'Dizziness', 'Injury/Trauma', 'Other'
|
||||
];
|
||||
|
||||
const fieldOrder = ['firstName', 'lastName', 'dob'];
|
||||
|
||||
const handleSymptomToggle = (symptom) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
@@ -37,8 +40,62 @@ function App() {
|
||||
}));
|
||||
};
|
||||
|
||||
const formatDateUS = (digits) => {
|
||||
// Only keep digits, max 8
|
||||
const cleaned = digits.replace(/\D/g, '').slice(0, 8);
|
||||
|
||||
let formatted = '';
|
||||
|
||||
// Add slashes as user types: MM/DD/YYYY
|
||||
if (cleaned.length >= 1) {
|
||||
formatted = cleaned.slice(0, 2); // MM
|
||||
}
|
||||
if (cleaned.length >= 3) {
|
||||
formatted += '/' + cleaned.slice(2, 4); // DD
|
||||
}
|
||||
if (cleaned.length >= 5) {
|
||||
formatted += '/' + cleaned.slice(4, 8); // YYYY
|
||||
}
|
||||
|
||||
return formatted;
|
||||
};
|
||||
|
||||
const convertToISODate = (usDate) => {
|
||||
// Convert MM/DD/YYYY to YYYY-MM-DD for backend
|
||||
const match = usDate.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
|
||||
if (match) {
|
||||
const [_, month, day, year] = match;
|
||||
return `${year}-${month}-${day}`;
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const getDatePreview = (usDate) => {
|
||||
const match = usDate.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
|
||||
if (match) {
|
||||
const [_, month, day, year] = match;
|
||||
const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
||||
const monthIdx = parseInt(month) - 1;
|
||||
if (monthIdx >= 0 && monthIdx < 12) {
|
||||
const monthName = months[monthIdx];
|
||||
return `${monthName} ${parseInt(day)}, ${year}`;
|
||||
}
|
||||
}
|
||||
return '';
|
||||
};
|
||||
|
||||
const onKeyboardChange = (input) => {
|
||||
if (activeField) {
|
||||
if (activeField === 'dob') {
|
||||
// Keep only the raw digits the user types
|
||||
const digitsOnly = input.replace(/\D/g, '');
|
||||
const formatted = formatDateUS(digitsOnly);
|
||||
|
||||
setDobDisplay(formatted);
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
dob: convertToISODate(formatted)
|
||||
}));
|
||||
} else if (activeField) {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[activeField]: input
|
||||
@@ -50,7 +107,24 @@ function App() {
|
||||
if (button === "{shift}" || button === "{lock}") {
|
||||
setLayoutName(layoutName === "default" ? "shift" : "default");
|
||||
}
|
||||
if (button === "{enter}" || button === "{close}") {
|
||||
|
||||
if (button === "{tab}") {
|
||||
const currentIndex = fieldOrder.indexOf(activeField);
|
||||
const nextIndex = (currentIndex + 1) % fieldOrder.length;
|
||||
const nextField = fieldOrder[nextIndex];
|
||||
|
||||
setActiveField(nextField);
|
||||
setLayoutName(nextField === 'dob' ? 'numbers' : 'default');
|
||||
|
||||
setTimeout(() => {
|
||||
if (keyboard.current) {
|
||||
const value = nextField === 'dob' ? dobDisplay.replace(/\//g, '') : formData[nextField] || '';
|
||||
keyboard.current.setInput(value);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
|
||||
if (button === "{enter}") {
|
||||
setShowKeyboard(false);
|
||||
setActiveField(null);
|
||||
}
|
||||
@@ -59,9 +133,13 @@ function App() {
|
||||
const handleInputFocus = (fieldName) => {
|
||||
setActiveField(fieldName);
|
||||
setShowKeyboard(true);
|
||||
setLayoutName(fieldName === 'dob' ? 'numbers' : 'default');
|
||||
|
||||
setTimeout(() => {
|
||||
if (keyboard.current) {
|
||||
keyboard.current.setInput(formData[fieldName] || '');
|
||||
// For date field, show only digits (no slashes) in keyboard input
|
||||
const value = fieldName === 'dob' ? dobDisplay.replace(/\//g, '') : formData[fieldName] || '';
|
||||
keyboard.current.setInput(value);
|
||||
}
|
||||
}, 100);
|
||||
};
|
||||
@@ -141,8 +219,10 @@ function App() {
|
||||
}
|
||||
|
||||
if (step === 'form') {
|
||||
const datePreview = getDatePreview(dobDisplay);
|
||||
|
||||
return (
|
||||
<div className={`min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4 transition-all ${showKeyboard ? 'pb-[400px]' : ''}`}>
|
||||
<div className={`min-h-screen bg-gradient-to-br from-blue-50 to-blue-100 p-4 transition-all ${showKeyboard ? 'pb-[550px]' : ''}`}>
|
||||
<div className="max-w-3xl mx-auto pt-8">
|
||||
<div className="bg-white rounded-2xl shadow-2xl p-8">
|
||||
<h2 className="text-3xl font-bold text-gray-800 mb-6">Patient Information</h2>
|
||||
@@ -188,16 +268,22 @@ function App() {
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Date of Birth * (YYYY-MM-DD)
|
||||
Date of Birth *
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.dob}
|
||||
value={dobDisplay}
|
||||
onFocus={() => handleInputFocus('dob')}
|
||||
onChange={(e) => setFormData({...formData, dob: e.target.value})}
|
||||
readOnly
|
||||
className="w-full px-6 py-4 border-2 border-gray-300 rounded-lg focus:border-blue-500 focus:outline-none text-xl font-semibold cursor-pointer"
|
||||
placeholder="Tap to enter date"
|
||||
placeholder="MM/DD/YYYY"
|
||||
/>
|
||||
{datePreview && (
|
||||
<p className="mt-2 text-green-600 font-semibold text-lg flex items-center gap-2">
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
{datePreview}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@@ -269,42 +355,61 @@ function App() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Simple Keyboard */}
|
||||
{/* Large Touchscreen Keyboard */}
|
||||
{showKeyboard && (
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-white border-t-4 border-blue-500 shadow-2xl p-4 z-50">
|
||||
<div className="max-w-6xl mx-auto">
|
||||
<div className="fixed bottom-0 left-0 right-0 bg-gradient-to-t from-gray-800 to-gray-700 border-t-4 border-blue-500 shadow-2xl p-6 z-50">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="text-center mb-4">
|
||||
<p className="text-white text-2xl font-bold mb-2">
|
||||
{activeField === 'firstName' ? '👤 First Name' :
|
||||
activeField === 'lastName' ? '👤 Last Name' :
|
||||
'📅 Date of Birth'}
|
||||
</p>
|
||||
{activeField === 'dob' && (
|
||||
<div className="bg-blue-600 text-white px-6 py-3 rounded-lg inline-block">
|
||||
<p className="text-lg">
|
||||
Type: <span className="font-mono text-2xl">{dobDisplay || 'MM/DD/YYYY'}</span>
|
||||
</p>
|
||||
{datePreview && (
|
||||
<p className="text-sm text-blue-200 mt-1">= {datePreview}</p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Keyboard
|
||||
keyboardRef={r => (keyboard.current = r)}
|
||||
layoutName={activeField === 'dob' ? 'numbers' : layoutName}
|
||||
onChange={onKeyboardChange}
|
||||
onKeyPress={onKeyPress}
|
||||
theme="hg-theme-default hg-layout-default vitallink-keyboard"
|
||||
theme="hg-theme-default hg-layout-default kiosk-keyboard"
|
||||
display={{
|
||||
'{bksp}': '⌫',
|
||||
'{bksp}': '⌫ Delete',
|
||||
'{enter}': '✓ Done',
|
||||
'{tab}': '→ Next',
|
||||
'{shift}': '⬆',
|
||||
'{space}': '___________',
|
||||
'{space}': '_____ Space _____',
|
||||
}}
|
||||
layout={activeField === 'dob' ? {
|
||||
numbers: [
|
||||
"1 2 3",
|
||||
"4 5 6",
|
||||
"7 8 9",
|
||||
"0 - {bksp}",
|
||||
"{bksp} 0 {tab}",
|
||||
"{enter}"
|
||||
]
|
||||
} : {
|
||||
default: [
|
||||
"Q W E R T Y U I O P {bksp}",
|
||||
"A S D F G H J K L {enter}",
|
||||
"A S D F G H J K L",
|
||||
"{shift} Z X C V B N M {shift}",
|
||||
"{space}"
|
||||
"{tab} {space} {enter}"
|
||||
],
|
||||
shift: [
|
||||
"Q W E R T Y U I O P {bksp}",
|
||||
"A S D F G H J K L {enter}",
|
||||
"A S D F G H J K L",
|
||||
"{shift} Z X C V B N M {shift}",
|
||||
"{space}"
|
||||
"{tab} {space} {enter}"
|
||||
]
|
||||
}}
|
||||
/>
|
||||
@@ -367,6 +472,7 @@ function App() {
|
||||
onClick={() => {
|
||||
setStep('welcome');
|
||||
setFormData({ firstName: '', lastName: '', dob: '', symptoms: [], severity: 'moderate' });
|
||||
setDobDisplay('');
|
||||
setAssignedBand(null);
|
||||
setError(null);
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user