2021-1-capstone-design1 / RIT_Project1

Go to a project
Toggle navigation Toggle navigation pinning
박권수
5492f415 1 parent 6918915f

feat. 차트 에러, 전체 복용기록조회 등

Inline Side-by-side
Showing 4 changed files with 207 additions and 26 deletions
......@@ -11,7 +11,7 @@ export const make = (chartData : any[], numberOfRow : number) => {
chartData.forEach((data : any) => {
const key : string = moment(data.takeDate).format('MM/DD');
result[key] = result[key] + 1;
!isNaN(result[key]) ? result[key] = result[key] + 1 : null;
});
const categories : any = [];
......@@ -28,5 +28,5 @@ export const make = (chartData : any[], numberOfRow : number) => {
return {
categories,
data,
}
};
};
\ No newline at end of file
......
......@@ -35,6 +35,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
takeMedicineHist : [],
});
//차트에 표시되는 행의 개수
const numberOfChartItem = 7;
const [chartOption, setChartOption] = useState<any>({
chart : {
......@@ -56,14 +57,17 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
data : [],
}],
});
const [takeMedicineHist, setTakeMedicineHist] = useState<any[]>([]);
const [feedback, setFeedback] = useState<string>('');
const [fdbType, setFdbType] = useState<string>('RECOMMEND');
const [medicineInfoModal, setMedicineInfoModal] = useState<boolean>(false);
const [modalType, setModalType] = useState<string>('hist'); //hist , info
const fetchData = async () => {
setModalType('hist');
setFeedback('');
setFdbType('RECOMMEND');
setMedicineInfoModal(false);
......@@ -71,6 +75,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
try {
const result = await doctorApi.getPatientBottleDetail(token, bottleId);
if (result.statusText === 'OK') {
setTakeMedicineHist(result.data.takeMedicineHist);
const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem);
setBottleInfo({
...result.data,
......@@ -134,6 +139,14 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
};
const onViewTakeHist = () => {
if(modalType === 'info') setModalType('hist');
};
const onViewMedicineInfo = () => {
if(modalType === 'hist') setModalType('info');
};
useEffect(() => {
if(userTypeCd !== 'DOCTOR') {
......@@ -148,8 +161,12 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
<BottleInfoPresenter
bottleInfo = {bottleInfo}
chartOption = {chartOption}
takeMedicineHist = {takeMedicineHist}
medicineInfoModal = {medicineInfoModal}
modalType = {modalType}
onViewTakeHist = {onViewTakeHist}
onViewMedicineInfo = {onViewMedicineInfo}
setMedicineInfoModal = {setMedicineInfoModal}
feedback = {feedback}
......@@ -157,6 +174,8 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
fdbType = {fdbType}
setFdbType = {setFdbType}
onSubmitFeedback = {onSubmitFeedback}
/>
</>
);
......
......@@ -16,8 +16,12 @@ interface BottleInfoProps {
takeMedicineHist : any[];
};
chartOption : any;
takeMedicineHist : any[];
medicineInfoModal : boolean;
modalType : string;
onViewTakeHist : () => void;
onViewMedicineInfo : () => void;
setMedicineInfoModal : (arg0 : boolean) => void;
feedback : string;
......@@ -33,30 +37,85 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
{
props.medicineInfoModal ?
<Modal onModalClose = {() => props.setMedicineInfoModal(false)}>
<>
<styled.MedicineNameWrapper>
<styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
<styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
</styled.MedicineNameWrapper>
<styled.MedicineInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
</styled.MedicineInfoWrapper>
</>
<>
<styled.ModalTypeButtonWrapper>
<styled.ModalTypeButton
isSelect = {props.modalType === 'hist'}
onClick = {props.onViewTakeHist}
>
복용 기록
</styled.ModalTypeButton>
<styled.ModalTypeButton
isSelect = {props.modalType === 'info'}
onClick = {props.onViewMedicineInfo}
>
약 정보
</styled.ModalTypeButton>
</styled.ModalTypeButtonWrapper>
{
props.modalType === 'hist' ?
<>
<styled.MedicineNameWrapper>
<styled.MedicineName>{`복용 기록`}</styled.MedicineName>
<styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{`전체 : ${props.takeMedicineHist.length}건`}</styled.MedicineName>
</styled.MedicineNameWrapper>
<styled.MedicineInfoWrapper>
{
props.takeMedicineHist.map((hist : any) => {
return (
<styled.HistWrapper
key = {hist._id}
>
<styled.HistDtmWrapper>
<styled.HistInfoEachWrapper style = {{fontSize : 11}}>복용 날짜</styled.HistInfoEachWrapper>
<styled.HistDtm>{hist.takeDate}</styled.HistDtm>
</styled.HistDtmWrapper>
<styled.HistInfoWrapper>
<styled.HistInfoEachWrapper>
약병 내 온도
<styled.HistInfoEach>{hist.temperature}℃</styled.HistInfoEach>
</styled.HistInfoEachWrapper>
<styled.HistInfoEachWrapper>
약병 내 습도
<styled.HistInfoEach>{hist.humidity}%</styled.HistInfoEach>
</styled.HistInfoEachWrapper>
<styled.HistInfoEachWrapper>
약병 내 잔량
<styled.HistInfoEach>{hist.balance}%</styled.HistInfoEach>
</styled.HistInfoEachWrapper>
</styled.HistInfoWrapper>
</styled.HistWrapper>
)
})
}
</styled.MedicineInfoWrapper>
</> :
<>
<styled.MedicineNameWrapper>
<styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
<styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
</styled.MedicineNameWrapper>
<styled.MedicineInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>효능</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.target}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle>복용 정보</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo>{props.bottleInfo.medicine.dosage}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>주의 사항</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.warn}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoWrapper>
<styled.MedicineEachInfoTitle style = {{color : '#FF3F3F', fontWeight : 'bold'}}>부작용</styled.MedicineEachInfoTitle>
<styled.MedicineEachInfo style = {{color : '#9B0000'}}>{props.bottleInfo.medicine.antiEffect}</styled.MedicineEachInfo>
</styled.MedicineEachInfoWrapper>
</styled.MedicineInfoWrapper>
</>
}
</>
</Modal> : null
}
<styled.ChartAndFeedbackWrapper>
......
......@@ -9,6 +9,108 @@ export const Container = styled.div `
justify-content : center;
`;
export const ModalTypeButtonWrapper = styled.div `
border : none;
display : flex;
flex-direction : row;
width : 100%;
justify-content : center;
align-items : center;
background-color : transparent;
gap : 5%;
padding : 3% 0 0 0;
`;
export const ModalTypeButton = styled.button<{isSelect : boolean}> `
border : 1px solid #337DFF;
border-radius : 3px;
color : ${props => props.isSelect ? '#fff' : '#337DFF'};
background-color : ${props => props.isSelect ? '#337DFF' : '#fff'};
padding : 1% 3%;
cursor : pointer;
font-size : 16px;
font-weight : ${props => props.isSelect ? '600' : '500'};
transition : .25s all;
&:hover {
opacity : .5;
}
`;
export const HistWrapper = styled.div `
display : flex;
flex-direction : column;
height : 65px;
width : 100%;
border : none;
border-bottom : 1px solid #ddd;
`;
export const HistDtmWrapper = styled.div `
flex : 2;
padding : 0 3%;
border : none;
display : flex;
flex-direction : column;
justify-content : center;
`;
export const HistDtm = styled.div `
font-size : 18px;
color : #000;
`;
export const HistInfoWrapper = styled.div `
flex : 1;
padding : 0 3%;
border : none;
display : flex;
flex-direction : row;
align-items : flex-start;
`;
export const HistInfoEachWrapper = styled.div `
flex : 1;
border : none;
display : flex;
flex-direction : row;
align-items : center;
gap : 5%;
font-size : 14px;
font-weight : 500;
color : #a0a0a0;
`;
export const HistInfoEach = styled.div `
font-size : 15px;
font-weight : 600;
color : #337DFF;
`;
export const MedicineNameWrapper = styled.div `
border : none;
border-bottom : 1px solid #ddd;
......@@ -59,6 +161,7 @@ export const MedicineEachInfoWrapper = styled.div `
display : flex;
flex-direction : column;
width : 80%;
padding : 20px 10%;
border : none;
......