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 183 additions and 2 deletions
...@@ -11,7 +11,7 @@ export const make = (chartData : any[], numberOfRow : number) => { ...@@ -11,7 +11,7 @@ export const make = (chartData : any[], numberOfRow : number) => {
11 11
12 chartData.forEach((data : any) => { 12 chartData.forEach((data : any) => {
13 const key : string = moment(data.takeDate).format('MM/DD'); 13 const key : string = moment(data.takeDate).format('MM/DD');
14 - result[key] = result[key] + 1; 14 + !isNaN(result[key]) ? result[key] = result[key] + 1 : null;
15 }); 15 });
16 16
17 const categories : any = []; 17 const categories : any = [];
...@@ -28,5 +28,5 @@ export const make = (chartData : any[], numberOfRow : number) => { ...@@ -28,5 +28,5 @@ export const make = (chartData : any[], numberOfRow : number) => {
28 return { 28 return {
29 categories, 29 categories,
30 data, 30 data,
31 - } 31 + };
32 }; 32 };
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -35,6 +35,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -35,6 +35,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
35 takeMedicineHist : [], 35 takeMedicineHist : [],
36 }); 36 });
37 37
38 + //차트에 표시되는 행의 개수
38 const numberOfChartItem = 7; 39 const numberOfChartItem = 7;
39 const [chartOption, setChartOption] = useState<any>({ 40 const [chartOption, setChartOption] = useState<any>({
40 chart : { 41 chart : {
...@@ -56,14 +57,17 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -56,14 +57,17 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
56 data : [], 57 data : [],
57 }], 58 }],
58 }); 59 });
60 + const [takeMedicineHist, setTakeMedicineHist] = useState<any[]>([]);
59 61
60 const [feedback, setFeedback] = useState<string>(''); 62 const [feedback, setFeedback] = useState<string>('');
61 const [fdbType, setFdbType] = useState<string>('RECOMMEND'); 63 const [fdbType, setFdbType] = useState<string>('RECOMMEND');
62 64
63 const [medicineInfoModal, setMedicineInfoModal] = useState<boolean>(false); 65 const [medicineInfoModal, setMedicineInfoModal] = useState<boolean>(false);
66 + const [modalType, setModalType] = useState<string>('hist'); //hist , info
64 67
65 68
66 const fetchData = async () => { 69 const fetchData = async () => {
70 + setModalType('hist');
67 setFeedback(''); 71 setFeedback('');
68 setFdbType('RECOMMEND'); 72 setFdbType('RECOMMEND');
69 setMedicineInfoModal(false); 73 setMedicineInfoModal(false);
...@@ -71,6 +75,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -71,6 +75,7 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
71 try { 75 try {
72 const result = await doctorApi.getPatientBottleDetail(token, bottleId); 76 const result = await doctorApi.getPatientBottleDetail(token, bottleId);
73 if (result.statusText === 'OK') { 77 if (result.statusText === 'OK') {
78 + setTakeMedicineHist(result.data.takeMedicineHist);
74 const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem); 79 const { categories, data } = makeChart.make(result.data.takeMedicineHist, numberOfChartItem);
75 setBottleInfo({ 80 setBottleInfo({
76 ...result.data, 81 ...result.data,
...@@ -134,6 +139,14 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -134,6 +139,14 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
134 139
135 }; 140 };
136 141
142 + const onViewTakeHist = () => {
143 + if(modalType === 'info') setModalType('hist');
144 + };
145 +
146 + const onViewMedicineInfo = () => {
147 + if(modalType === 'hist') setModalType('info');
148 + };
149 +
137 150
138 useEffect(() => { 151 useEffect(() => {
139 if(userTypeCd !== 'DOCTOR') { 152 if(userTypeCd !== 'DOCTOR') {
...@@ -148,8 +161,12 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -148,8 +161,12 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
148 <BottleInfoPresenter 161 <BottleInfoPresenter
149 bottleInfo = {bottleInfo} 162 bottleInfo = {bottleInfo}
150 chartOption = {chartOption} 163 chartOption = {chartOption}
164 + takeMedicineHist = {takeMedicineHist}
151 165
152 medicineInfoModal = {medicineInfoModal} 166 medicineInfoModal = {medicineInfoModal}
167 + modalType = {modalType}
168 + onViewTakeHist = {onViewTakeHist}
169 + onViewMedicineInfo = {onViewMedicineInfo}
153 setMedicineInfoModal = {setMedicineInfoModal} 170 setMedicineInfoModal = {setMedicineInfoModal}
154 171
155 feedback = {feedback} 172 feedback = {feedback}
...@@ -157,6 +174,8 @@ const BottleInfoContainer = (props : BottleInfoProps) => { ...@@ -157,6 +174,8 @@ const BottleInfoContainer = (props : BottleInfoProps) => {
157 fdbType = {fdbType} 174 fdbType = {fdbType}
158 setFdbType = {setFdbType} 175 setFdbType = {setFdbType}
159 onSubmitFeedback = {onSubmitFeedback} 176 onSubmitFeedback = {onSubmitFeedback}
177 +
178 +
160 /> 179 />
161 </> 180 </>
162 ); 181 );
......
...@@ -16,8 +16,12 @@ interface BottleInfoProps { ...@@ -16,8 +16,12 @@ interface BottleInfoProps {
16 takeMedicineHist : any[]; 16 takeMedicineHist : any[];
17 }; 17 };
18 chartOption : any; 18 chartOption : any;
19 + takeMedicineHist : any[];
19 20
20 medicineInfoModal : boolean; 21 medicineInfoModal : boolean;
22 + modalType : string;
23 + onViewTakeHist : () => void;
24 + onViewMedicineInfo : () => void;
21 setMedicineInfoModal : (arg0 : boolean) => void; 25 setMedicineInfoModal : (arg0 : boolean) => void;
22 26
23 feedback : string; 27 feedback : string;
...@@ -34,6 +38,59 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -34,6 +38,59 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
34 props.medicineInfoModal ? 38 props.medicineInfoModal ?
35 <Modal onModalClose = {() => props.setMedicineInfoModal(false)}> 39 <Modal onModalClose = {() => props.setMedicineInfoModal(false)}>
36 <> 40 <>
41 + <styled.ModalTypeButtonWrapper>
42 + <styled.ModalTypeButton
43 + isSelect = {props.modalType === 'hist'}
44 + onClick = {props.onViewTakeHist}
45 + >
46 + 복용 기록
47 + </styled.ModalTypeButton>
48 + <styled.ModalTypeButton
49 + isSelect = {props.modalType === 'info'}
50 + onClick = {props.onViewMedicineInfo}
51 + >
52 + 약 정보
53 + </styled.ModalTypeButton>
54 + </styled.ModalTypeButtonWrapper>
55 + {
56 + props.modalType === 'hist' ?
57 + <>
58 + <styled.MedicineNameWrapper>
59 + <styled.MedicineName>{`복용 기록`}</styled.MedicineName>
60 + <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{`전체 : ${props.takeMedicineHist.length}건`}</styled.MedicineName>
61 + </styled.MedicineNameWrapper>
62 + <styled.MedicineInfoWrapper>
63 + {
64 + props.takeMedicineHist.map((hist : any) => {
65 + return (
66 + <styled.HistWrapper
67 + key = {hist._id}
68 + >
69 + <styled.HistDtmWrapper>
70 + <styled.HistInfoEachWrapper style = {{fontSize : 11}}>복용 날짜</styled.HistInfoEachWrapper>
71 + <styled.HistDtm>{hist.takeDate}</styled.HistDtm>
72 + </styled.HistDtmWrapper>
73 + <styled.HistInfoWrapper>
74 + <styled.HistInfoEachWrapper>
75 + 약병 내 온도
76 + <styled.HistInfoEach>{hist.temperature}℃</styled.HistInfoEach>
77 + </styled.HistInfoEachWrapper>
78 + <styled.HistInfoEachWrapper>
79 + 약병 내 습도
80 + <styled.HistInfoEach>{hist.humidity}%</styled.HistInfoEach>
81 + </styled.HistInfoEachWrapper>
82 + <styled.HistInfoEachWrapper>
83 + 약병 내 잔량
84 + <styled.HistInfoEach>{hist.balance}%</styled.HistInfoEach>
85 + </styled.HistInfoEachWrapper>
86 + </styled.HistInfoWrapper>
87 + </styled.HistWrapper>
88 + )
89 + })
90 + }
91 + </styled.MedicineInfoWrapper>
92 + </> :
93 + <>
37 <styled.MedicineNameWrapper> 94 <styled.MedicineNameWrapper>
38 <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName> 95 <styled.MedicineName>{props.bottleInfo.medicine.name}</styled.MedicineName>
39 <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName> 96 <styled.MedicineName style = {{color : '#343434', fontSize : 15, marginTop : 4,}}>{props.bottleInfo.medicine.company}</styled.MedicineName>
...@@ -57,6 +114,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => { ...@@ -57,6 +114,8 @@ const BottleInfoPresenter = (props : BottleInfoProps) => {
57 </styled.MedicineEachInfoWrapper> 114 </styled.MedicineEachInfoWrapper>
58 </styled.MedicineInfoWrapper> 115 </styled.MedicineInfoWrapper>
59 </> 116 </>
117 + }
118 + </>
60 </Modal> : null 119 </Modal> : null
61 } 120 }
62 <styled.ChartAndFeedbackWrapper> 121 <styled.ChartAndFeedbackWrapper>
......
...@@ -9,6 +9,108 @@ export const Container = styled.div ` ...@@ -9,6 +9,108 @@ export const Container = styled.div `
9 justify-content : center; 9 justify-content : center;
10 `; 10 `;
11 11
12 +export const ModalTypeButtonWrapper = styled.div `
13 + border : none;
14 + display : flex;
15 + flex-direction : row;
16 +
17 + width : 100%;
18 +
19 + justify-content : center;
20 + align-items : center;
21 +
22 + background-color : transparent;
23 +
24 + gap : 5%;
25 +
26 + padding : 3% 0 0 0;
27 +`;
28 +
29 +export const ModalTypeButton = styled.button<{isSelect : boolean}> `
30 + border : 1px solid #337DFF;
31 + border-radius : 3px;
32 + color : ${props => props.isSelect ? '#fff' : '#337DFF'};
33 + background-color : ${props => props.isSelect ? '#337DFF' : '#fff'};
34 +
35 + padding : 1% 3%;
36 +
37 + cursor : pointer;
38 +
39 + font-size : 16px;
40 + font-weight : ${props => props.isSelect ? '600' : '500'};
41 +
42 + transition : .25s all;
43 +
44 + &:hover {
45 + opacity : .5;
46 + }
47 +
48 +`;
49 +
50 +export const HistWrapper = styled.div `
51 + display : flex;
52 + flex-direction : column;
53 +
54 + height : 65px;
55 + width : 100%;
56 +
57 + border : none;
58 + border-bottom : 1px solid #ddd;
59 +`;
60 +
61 +export const HistDtmWrapper = styled.div `
62 + flex : 2;
63 + padding : 0 3%;
64 +
65 + border : none;
66 +
67 + display : flex;
68 + flex-direction : column;
69 +
70 + justify-content : center;
71 +
72 +`;
73 +
74 +export const HistDtm = styled.div `
75 + font-size : 18px;
76 + color : #000;
77 +`;
78 +
79 +export const HistInfoWrapper = styled.div `
80 + flex : 1;
81 + padding : 0 3%;
82 +
83 + border : none;
84 +
85 + display : flex;
86 + flex-direction : row;
87 + align-items : flex-start;
88 +
89 +`;
90 +
91 +export const HistInfoEachWrapper = styled.div `
92 + flex : 1;
93 + border : none;
94 +
95 + display : flex;
96 + flex-direction : row;
97 + align-items : center;
98 +
99 + gap : 5%;
100 +
101 + font-size : 14px;
102 + font-weight : 500;
103 +
104 + color : #a0a0a0;
105 +`;
106 +
107 +export const HistInfoEach = styled.div `
108 + font-size : 15px;
109 + font-weight : 600;
110 +
111 + color : #337DFF;
112 +`;
113 +
12 export const MedicineNameWrapper = styled.div ` 114 export const MedicineNameWrapper = styled.div `
13 border : none; 115 border : none;
14 border-bottom : 1px solid #ddd; 116 border-bottom : 1px solid #ddd;
...@@ -59,6 +161,7 @@ export const MedicineEachInfoWrapper = styled.div ` ...@@ -59,6 +161,7 @@ export const MedicineEachInfoWrapper = styled.div `
59 display : flex; 161 display : flex;
60 flex-direction : column; 162 flex-direction : column;
61 163
164 +
62 width : 80%; 165 width : 80%;
63 padding : 20px 10%; 166 padding : 20px 10%;
64 border : none; 167 border : none;
......