working with corrent date entry

This commit is contained in:
Raika Furude 2025-11-24 10:46:05 -05:00
parent de4266af63
commit 1f7f75390a
9 changed files with 1194 additions and 584 deletions

View File

@ -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);
}}

View File

@ -1,4 +1,4 @@
49707
49720
49854
50116
52899
52915
52934
52970

File diff suppressed because it is too large Load Diff

View File

@ -1 +1 @@
49707
52899

View File

@ -3,7 +3,7 @@
> vite
VITE v7.1.10 ready in 357 ms
VITE v7.1.10 ready in 231 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose

View File

@ -1 +1 @@
49854
52934

View File

@ -4,7 +4,135 @@
Port 5173 is in use, trying another one...
VITE v7.1.10 ready in 339 ms
VITE v7.1.10 ready in 233 ms
➜ Local: http://localhost:5174/
➜ Network: use --host to expose
10:36:25 AM [vite] (client) Pre-transform error: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
> 1 | @import "tailwindcss";
| ^
2 |
3 | /* Extra large touchscreen keyboard */
4 | .kiosk-keyboard .hg-button {
Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
npx cross-env BABEL_SHOW_CONFIG_FOR=/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.
Plugin: vite:react-babel
File: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx:1:0
1 | @import "tailwindcss";
| ^
2 |
3 | /* Extra large touchscreen keyboard */
10:36:25 AM [vite] Internal server error: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
> 1 | @import "tailwindcss";
| ^
2 |
3 | /* Extra large touchscreen keyboard */
4 | .kiosk-keyboard .hg-button {
Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
npx cross-env BABEL_SHOW_CONFIG_FOR=/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.
Plugin: vite:react-babel
File: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx:1:0
1 | @import "tailwindcss";
| ^
2 |
3 | /* Extra large touchscreen keyboard */
at constructor (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:367:19)
at JSXParserMixin.raise (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6630:19)
at JSXParserMixin.expectOnePlugin (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6664:18)
at JSXParserMixin.parseDecorator (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12957:10)
at JSXParserMixin.parseDecorators (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12942:28)
at JSXParserMixin.parseStatementLike (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12774:25)
at JSXParserMixin.parseModuleItem (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12753:17)
at JSXParserMixin.parseBlockOrModuleBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13325:36)
at JSXParserMixin.parseBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13318:10)
at JSXParserMixin.parseProgram (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12634:10)
at JSXParserMixin.parseTopLevel (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12624:25)
at JSXParserMixin.parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14501:10)
at parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14535:38)
at parser (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/parser/index.js:41:34)
at parser.next (<anonymous>)
at normalizeFile (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
at normalizeFile.next (<anonymous>)
at run (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/index.js:22:50)
at run.next (<anonymous>)
at transform (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transform.js:22:33)
at transform.next (<anonymous>)
at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:261:32)
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:189:28
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:113:33
at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:287:14)
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
10:36:28 AM [vite] Internal server error: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx: Support for the experimental syntax 'decorators' isn't currently enabled (1:1):
> 1 | @import "tailwindcss";
| ^
2 |
3 | /* Extra large touchscreen keyboard */
4 | .kiosk-keyboard .hg-button {
Add @babel/plugin-proposal-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-proposal-decorators) to the 'plugins' section of your Babel config to enable transformation.
If you want to leave it as-is, add @babel/plugin-syntax-decorators (https://github.com/babel/babel/tree/main/packages/babel-plugin-syntax-decorators) to the 'plugins' section to enable parsing.
If you already added the plugin for this syntax to your config, it's possible that your config isn't being loaded.
You can re-run Babel with the BABEL_SHOW_CONFIG_FOR environment variable to show the loaded configuration:
npx cross-env BABEL_SHOW_CONFIG_FOR=/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx <your build command>
See https://babeljs.io/docs/configuration#print-effective-configs for more info.
Plugin: vite:react-babel
File: /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/src/App.jsx:1:0
1 | @import "tailwindcss";
| ^
2 |
3 | /* Extra large touchscreen keyboard */
at constructor (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:367:19)
at JSXParserMixin.raise (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6630:19)
at JSXParserMixin.expectOnePlugin (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:6664:18)
at JSXParserMixin.parseDecorator (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12957:10)
at JSXParserMixin.parseDecorators (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12942:28)
at JSXParserMixin.parseStatementLike (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12774:25)
at JSXParserMixin.parseModuleItem (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12753:17)
at JSXParserMixin.parseBlockOrModuleBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13325:36)
at JSXParserMixin.parseBlockBody (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:13318:10)
at JSXParserMixin.parseProgram (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12634:10)
at JSXParserMixin.parseTopLevel (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:12624:25)
at JSXParserMixin.parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14501:10)
at parse (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/parser/lib/index.js:14535:38)
at parser (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/parser/index.js:41:34)
at parser.next (<anonymous>)
at normalizeFile (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/normalize-file.js:64:37)
at normalizeFile.next (<anonymous>)
at run (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transformation/index.js:22:50)
at run.next (<anonymous>)
at transform (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/transform.js:22:33)
at transform.next (<anonymous>)
at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:261:32)
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:189:28
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/@babel/core/lib/gensync-utils/async.js:67:7
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:113:33
at step (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:287:14)
at /home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:273:13
at async.call.result.err.err (/home/mai/documents/school/capstone/vitallink-BS/vitallink/frontend/kiosk/node_modules/gensync/index.js:223:11)
10:38:52 AM [vite] (client) hmr update /src/index.css
10:43:47 AM [vite] (client) hmr update /src/App.jsx, /src/index.css

View File

@ -1 +1 @@
50116
52970

View File

@ -1 +1 @@
49720
52915