sonika/patient_Information_reactProject
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added image marker values to json data

Browse Source
This commit is contained in:
vipeeshpavithran 2023-09-07 14:15:12 +05:30
parent b3b1843711
commit 303225458d
2 changed files with 646 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/Components/ImageMarker/ViewPatientImageMarker.tsx
View File

@ -1,11 +1,11 @@
import React, { useEffect, useState } from 'react'
import React, { useEffect, useState } from 'react';
import ImageMarker, { Marker } from 'react-image-marker';
import humanImage from '../../Assets/human_body_3d.jpg';
import './PatientImageMarker.css'
import './PatientImageMarker.css';
import Rating from './Rating';
type Props = {}
type Props = {};
const ViewPatientImageMarker = (props: Props) => {
const saved = JSON.parse(localStorage.getItem('entry') || '{}');
@ -16,7 +16,12 @@ const ViewPatientImageMarker = (props: Props) => {
{saved.entries?.map((entry: any, index: number) => (
<div className='ratingResult' key={index}>
<span className='image-marker__marker--default'>{entry.index}</span>
<Rating index={entry.index} defaultValue={entry.severity} onUpdate={() => {}} disabled/>
<Rating
index={entry.index}
defaultValue={entry.severity}
onUpdate={() => {}}
disabled
/>
</div>
))}
</div>
@ -24,7 +29,7 @@ const ViewPatientImageMarker = (props: Props) => {
<ImageMarker src={humanImage} markers={saved.markers ?? []} />
</div>
</div>
)
}
);
};
export default ViewPatientImageMarker;

273
src/Components/PatientForm/PatientForm.tsx
View File

@ -1,9 +1,20 @@
import * as React from 'react';
import Typography from '@mui/material/Typography';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import Footer from "../Footer";
import Header from "../Header";
import {Button, Checkbox, FormControlLabel, FormGroup, FormLabel, Grid, Paper, Radio, RadioGroup, TextField } from '@mui/material';
import Footer from '../Footer';
import Header from '../Header';
import {
Button,
Checkbox,
FormControlLabel,
FormGroup,
FormLabel,
Grid,
Paper,
Radio,
RadioGroup,
TextField,
} from '@mui/material';
import PersonalSection from './PersonalSection1';
import { styled } from '@mui/material/styles';
import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp';
@ -61,7 +72,7 @@ import AlertDialog from '../Helper/AlertDialogBox';
type Props = {
type: any;
}
};
export default function PatientForm({ type }: Props) {
const [alertProps, setAlertProps] = React.useState<any>({});
@ -90,7 +101,7 @@ export default function PatientForm({type}:Props){
city?: string | undefined,
state?: string | undefined,
zipCode?: string | undefined,
gender?: string|undefined,
gender?: string | undefined
) => {
setSection1Data({
fullName,
@ -105,8 +116,8 @@ export default function PatientForm({type}:Props){
state,
zipCode,
gender,
})
}
});
};
const handleFormSection2Data = (
maritalStatus: string | undefined,
@ -120,7 +131,7 @@ export default function PatientForm({type}:Props){
spouseBusinessPhone: string | undefined,
emergencyContact: string | undefined,
relationship: string | undefined,
spousePhone: string | undefined,
spousePhone: string | undefined
) => {
setSection2Data({
maritalStatus,
@ -135,8 +146,8 @@ export default function PatientForm({type}:Props){
emergencyContact,
relationship,
spousePhone,
})
}
});
};
const handleFormSection3Data = (
physicianname: string | undefined,
@ -149,7 +160,7 @@ export default function PatientForm({type}:Props){
haveChiropractor: string | undefined,
reference: string | undefined,
visitDetails: string | undefined,
cellPhoneProvider: string |undefined,
cellPhoneProvider: string | undefined
) => {
setSection3Data({
physicianname,
@ -163,8 +174,8 @@ export default function PatientForm({type}:Props){
reference,
visitDetails,
cellPhoneProvider,
})
}
});
};
const handleFormSection4Data = (
chiefComplaint: string | undefined,
@ -176,7 +187,7 @@ export default function PatientForm({type}:Props){
painDuration: string | undefined,
currentTreatment: string | undefined,
treatmentGoal: string | undefined,
selfTreatment:string|undefined,
selfTreatment: string | undefined
) => {
setSection4Data({
chiefComplaint,
@ -189,8 +200,8 @@ export default function PatientForm({type}:Props){
currentTreatment,
treatmentGoal,
selfTreatment,
})
}
});
};
const handleFormSection5Data = (
generalHealth: string | undefined,
@ -204,7 +215,7 @@ export default function PatientForm({type}:Props){
ifyesdizzinessFetigue: string | undefined,
antiColligent: string | undefined,
injuriesHospitalization: string | undefined,
supplementsOrDrugs: string|undefined,
supplementsOrDrugs: string | undefined
) => {
setSection5Data({
generalHealth,
@ -219,8 +230,8 @@ export default function PatientForm({type}:Props){
antiColligent,
injuriesHospitalization,
supplementsOrDrugs,
})
}
});
};
const handleFormSection6Data = (
eyes: string | undefined,
@ -239,7 +250,7 @@ export default function PatientForm({type}:Props){
nerves: string | undefined,
blood: string | undefined,
prostate: string | undefined,
explanation:string|undefined,
explanation: string | undefined
) => {
setSection6Data({
eyes,
@ -259,9 +270,8 @@ export default function PatientForm({type}:Props){
blood,
prostate,
explanation,
})
}
});
};
const handleFormSection7Data = (
hobbies: string | undefined,
@ -281,7 +291,7 @@ export default function PatientForm({type}:Props){
familyLife: string | undefined,
familyLifeExplanation: string | undefined,
drugs: string | undefined,
drugsExplanation:string|undefined,
drugsExplanation: string | undefined
) => {
setSection7Data({
hobbies,
@ -302,8 +312,8 @@ export default function PatientForm({type}:Props){
familyLifeExplanation,
drugs,
drugsExplanation,
})
}
});
};
const handleFormSection8Data = (
familyHistory: string | undefined,
@ -312,7 +322,7 @@ export default function PatientForm({type}:Props){
orthotics: string | undefined,
brestExam: any,
pregnancy: string | undefined,
menstralCycle: any,
menstralCycle: any
) => {
setSection8Data({
familyHistory,
@ -322,10 +332,11 @@ export default function PatientForm({type}:Props){
brestExam,
pregnancy,
menstralCycle,
})
}
});
};
const handleSubmit = () => {
const saved = JSON.parse(localStorage.getItem('entry') || '{}');
const newPatientData = {
personalInformation: section1Data,
familyInformation: section2Data,
@ -335,6 +346,7 @@ export default function PatientForm({type}:Props){
systemReviewQuestions: section6Data,
recreationalActivities: section7Data,
otherDetails: section8Data,
injuryPainDetails: saved.entries,
};
// Create a copy of the existing data array and push the new patient data
@ -346,11 +358,17 @@ export default function PatientForm({type}:Props){
localStorage.setItem('patientData', JSON.stringify(newPatientData));
if (
section1Data.fullName !== "" && section1Data.cellPhone &&
/^\d{10}$/.test(section1Data.cellPhone) && section1Data.email &&
/^\S+@\S+\.\S+$/.test(section1Data.email) && section1Data.age &&
section1Data.age !== "" && Number(section1Data.age) >= 0 && section1Data.mailingAddress &&
section1Data.mailingAddress !== "" ){
section1Data.fullName !== '' &&
section1Data.cellPhone &&
/^\d{10}$/.test(section1Data.cellPhone) &&
section1Data.email &&
/^\S+@\S+\.\S+$/.test(section1Data.email) &&
section1Data.age &&
section1Data.age !== '' &&
Number(section1Data.age) >= 0 &&
section1Data.mailingAddress &&
section1Data.mailingAddress !== ''
) {
TextFile();
} else {
setAlertProps({
@ -363,15 +381,16 @@ export default function PatientForm({type}:Props){
};
const TextFile = () => {
const element = document.createElement("a");
const element = document.createElement('a');
//@ts-ignore
const textFile = new Blob([localStorage.getItem('patientData')], {type: 'text/json'});
const textFile = new Blob([localStorage.getItem('patientData')], {
type: 'text/json',
});
element.href = URL.createObjectURL(textFile);
element.download = "patientData.json";
element.download = 'patientData.json';
document.body.appendChild(element);
element.click();
}
};
const handleExpandChange =
(panel: string) => (event: React.SyntheticEvent, newExpanded: boolean) => {
@ -386,10 +405,12 @@ export default function PatientForm({type}:Props){
setAlertProps({});
};
//@ts-ignore
const patientData = localStorage.getItem('patientData') ? JSON.parse(localStorage.getItem('patientData')) : [];
const patientData = localStorage.getItem('patientData')
? //@ts-ignore
JSON.parse(localStorage.getItem('patientData'))
: [];
console.log("dfsdfdsf",patientData)
console.log('dfsdfdsf', patientData);
return (
<>
@ -410,14 +431,18 @@ export default function PatientForm({type}:Props){
Confidential Patient Information
</Typography>
<Grid>
<Accordion expanded={expanded === 'panel1'} onChange={handleExpandChange('panel1')}>
<Accordion
expanded={expanded === 'panel1'}
onChange={handleExpandChange('panel1')}
>
<AccordionSummary
expandIcon={<ExpandMoreIcon />}
aria-controls="panel1a-content"
id="panel1a-header"
aria-controls='panel1a-content'
id='panel1a-header'
>
<Typography sx={{fontSize:18}}>Patient's Personal Information</Typography>
<Typography sx={{ fontSize: 18 }}>
Patient's Personal Information
</Typography>
</AccordionSummary>
<AccordionDetails>
@ -425,15 +450,21 @@ export default function PatientForm({type}:Props){
handleFormSection1Data={handleFormSection1Data}
patientDataDiplay={patientData.personalInformation}
type={type}
/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel2'} onChange={handleExpandChange('panel2')}>
<AccordionSummary aria-controls="panel2d-content" id="panel2d-header">
<Typography sx={{fontSize:18}}>Patient's Family Information</Typography>
<Accordion
expanded={expanded === 'panel2'}
onChange={handleExpandChange('panel2')}
>
<AccordionSummary
aria-controls='panel2d-content'
id='panel2d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Family Information
</Typography>
</AccordionSummary>
<AccordionDetails>
@ -445,9 +476,17 @@ export default function PatientForm({type}:Props){
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel3'} onChange={handleExpandChange('panel3')}>
<AccordionSummary aria-controls="panel3d-content" id="panel3d-header">
<Typography sx={{fontSize:18}}>Patient's Medical History Information</Typography>
<Accordion
expanded={expanded === 'panel3'}
onChange={handleExpandChange('panel3')}
>
<AccordionSummary
aria-controls='panel3d-content'
id='panel3d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Medical History Information
</Typography>
</AccordionSummary>
<AccordionDetails>
@ -459,26 +498,39 @@ export default function PatientForm({type}:Props){
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel9'} onChange={handleExpandChange('panel9')}>
<AccordionSummary aria-controls="panel9d-content" id="panel9d-header">
<Typography sx={{fontSize:18}}>Patient's Injury Image</Typography>
<Accordion
expanded={expanded === 'panel9'}
onChange={handleExpandChange('panel9')}
>
<AccordionSummary
aria-controls='panel9d-content'
id='panel9d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Injury Image
</Typography>
</AccordionSummary>
<AccordionDetails>
{
type === 'fill' ?
{type === 'fill' ? (
<PatientImageMarker />
:
) : (
<ViewPatientImageMarker />
}
)}
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel4'} onChange={handleExpandChange('panel4')}>
<AccordionSummary aria-controls="panel4d-content" id="panel4d-header">
<Typography sx={{fontSize:18}}>Patient's Injury Details</Typography>
<Accordion
expanded={expanded === 'panel4'}
onChange={handleExpandChange('panel4')}
>
<AccordionSummary
aria-controls='panel4d-content'
id='panel4d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Injury Details
</Typography>
</AccordionSummary>
<AccordionDetails>
@ -490,22 +542,39 @@ export default function PatientForm({type}:Props){
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel5'} onChange={handleExpandChange('panel5')}>
<AccordionSummary aria-controls="panel5d-content" id="panel5d-header">
<Typography sx={{fontSize:18}}>Patient's Past Treatment Details</Typography>
<Accordion
expanded={expanded === 'panel5'}
onChange={handleExpandChange('panel5')}
>
<AccordionSummary
aria-controls='panel5d-content'
id='panel5d-header'
>
<Typography sx={{ fontSize: 18 }}>
Patient's Past Treatment Details
</Typography>
</AccordionSummary>
<AccordionDetails>
<PastTreatment5
handleFormSection5Data={handleFormSection5Data}
patientDataDiplay={patientData.pastTreatment}
type={type}/>
type={type}
/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel6'} onChange={handleExpandChange('panel6')}>
<AccordionSummary aria-controls="panel6d-content" id="panel6d-header">
<Typography sx={{fontSize:18}}>System Review Questions</Typography>
<Accordion
expanded={expanded === 'panel6'}
onChange={handleExpandChange('panel6')}
>
<AccordionSummary
aria-controls='panel6d-content'
id='panel6d-header'
>
<Typography sx={{ fontSize: 18 }}>
System Review Questions
</Typography>
</AccordionSummary>
<AccordionDetails>
@ -517,21 +586,36 @@ export default function PatientForm({type}:Props){
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel7'} onChange={handleExpandChange('panel7')}>
<AccordionSummary aria-controls="panel7d-content" id="panel7d-header">
<Typography sx={{fontSize:18}}>Recreational Activities/Hobbies Details</Typography>
<Accordion
expanded={expanded === 'panel7'}
onChange={handleExpandChange('panel7')}
>
<AccordionSummary
aria-controls='panel7d-content'
id='panel7d-header'
>
<Typography sx={{ fontSize: 18 }}>
Recreational Activities/Hobbies Details
</Typography>
</AccordionSummary>
<AccordionDetails>
<RecreationalHobbiesSection7
handleFormSection7Data={handleFormSection7Data}
patientDataDiplay={patientData.recreationalActivities}
type={type}/>
type={type}
/>
</AccordionDetails>
</Accordion>
<Accordion expanded={expanded === 'panel8'} onChange={handleExpandChange('panel8')}>
<AccordionSummary aria-controls="panel8d-content" id="panel8d-header">
<Accordion
expanded={expanded === 'panel8'}
onChange={handleExpandChange('panel8')}
>
<AccordionSummary
aria-controls='panel8d-content'
id='panel8d-header'
>
<Typography sx={{ fontSize: 18 }}>Other Details</Typography>
</AccordionSummary>
@ -539,7 +623,8 @@ export default function PatientForm({type}:Props){
<OtherDetails8
handleFormSection8Data={handleFormSection8Data}
patientDataDiplay={patientData.otherDetails}
type={type}/>
type={type}
/>
</AccordionDetails>
</Accordion>
@ -548,8 +633,13 @@ export default function PatientForm({type}:Props){
<FormGroup sx={{ marginTop: 3 }}>
<FormControlLabel
required
control={<Checkbox checked={isChecked} onChange={handleCheckboxChange} />}
label="I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history."
control={
<Checkbox
checked={type === 'display' ? true : isChecked}
onChange={handleCheckboxChange}
/>
}
label='I hereby state that all the information I have provided is complete and truthful and that I have fully disclosed my health history.'
/>
</FormGroup>
</Grid>
@ -557,12 +647,12 @@ export default function PatientForm({type}:Props){
<Grid item xs={6} className='collapsable-form-style'>
<TextField
disabled={type == 'display'}
variant="outlined"
label="SIGNATURE"
variant='outlined'
label='SIGNATURE'
name='treatmentGoal'
placeholder='Please type your name'
onChange={(event) => {
setSignature(event.target.value)
setSignature(event.target.value);
}}
/>
</Grid>
@ -570,10 +660,12 @@ export default function PatientForm({type}:Props){
<Grid>
<Button
// type="submit"
variant="contained"
color="primary"
variant='contained'
color='primary'
sx={{ margin: 5, left: '40%', width: '200px' }}
disabled={isChecked==false || signature=='' || type=='display'}
disabled={
isChecked == false || signature == '' || type == 'display'
}
onClick={handleSubmit}
>
Submit
@ -581,10 +673,9 @@ export default function PatientForm({type}:Props){
</Grid>
</Grid>
{/* </form> */}
</Paper>
<Footer />
</Paper>
</>
)
);
}