· 5 years ago · Nov 22, 2020, 08:22 PM
1import React, { Fragment, Component } from 'react';
2import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
3
4import '../css/alignmentbutton.css';
5import '../css/calc.css';
6import '../css/rpage.css';
7import '../css/rpage1.css';
8import '../css/rpage2.css';
9
10import { Dropdown } from 'semantic-ui-react';
11import { Checkbox } from 'semantic-ui-react';
12
13import { makeStyles, useTheme } from '@material-ui/core/styles';
14import { data } from 'jquery';
15
16//import LayoutTextFields from './LayoutTextFields';
17const styleLink = document.createElement('link');
18styleLink.rel = 'stylesheet';
19styleLink.href = 'https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css';
20document.head.appendChild(styleLink);
21//these are the options for epidem dropdown
22const options = [
23 {
24 key: 'H/O PULMONARY DISEASE',
25 text: 'H/O PULMONARY DISEASE',
26 value: 'H/O PULMONARY DISEASE'
27 },
28 { key: 'H/O CKD', text: 'H/O CKD', value: 'H/O CKD' },
29 {
30 key: 'H/O DM/(HbA1c>7.6)',
31 text: 'H/O DM/(HbA1c>7.6)',
32 value: 'H/O DM/(HbA1c>7.6)'
33 },
34 { key: 'H/O HCN', text: 'H/O HCN', value: 'H/O HCN' },
35 { key: 'H/O HIV', text: 'H/O HIV', value: 'H/O HIV' },
36 {
37 key: 'IMMUNOSUPRESSION',
38 text: 'IMMUNOSUPRESSION',
39 value: 'IMMUNOSUPRESSION'
40 }
41];
42const ITEM_HEIGHT = 48;
43const ITEM_PADDING_TOP = 8;
44const MenuProps = {
45 PaperProps: {
46 style: {
47 maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
48 width: 250
49 }
50 }
51};
52//basic styling property using library functions
53const useStyles = makeStyles(theme => ({
54 root: {
55 display: 'block',
56 flexWrap: 'wrap'
57 },
58 textField: {
59 marginLeft: theme.spacing(1),
60 marginRight: theme.spacing(1),
61 marginTop: theme.spacing(1),
62 marginBottom: theme.spacing(1),
63 width: '25ch'
64 },
65 formControl: {
66 margin: theme.spacing(1),
67 minWidth: 120,
68 maxWidth: 300
69 },
70 chips: {
71 display: 'flex',
72 flexWrap: 'wrap'
73 },
74 chip: {
75 margin: 2
76 },
77 noLabel: {
78 marginTop: theme.spacing(3)
79 }
80}));
81/*api */
82const MOCK_SERVICE = 'http://akshatrest.herokuapp.com/api/trial/';
83/*api ka name and defining all parameter*/
84export class Calculator extends Component {
85 // const classes = useStyles();
86 constructor() {
87 super();
88 this.state = {
89 checked: false,
90 age: '50',
91 spo: '',
92 heartrate: '',
93 resrate: '',
94 drpdownValue: '',
95 ddimer: '',
96 cpk: '',
97 crp: '',
98 ldh: '',
99 tropo: '',
100 ferr: '',
101 absolute: '',
102 ctscan: '',
103 abg: '',
104 checkAbg: '',
105 measure_ddimer: 1,
106 measure_cpk: 1,
107 measure_crp: 1,
108 measure_ldh: 1,
109 measure_tropo: 1,
110 measure_ferr: 1,
111 measure_absolute: 1,
112 measure_ctscan: 1,
113 measure_abg: 1,
114 measure_checkAbg: 1,
115 responseData: {},
116 modalOpen: false
117 };
118 this.changeBind = this.changeBind.bind(this);
119 }
120 /*for the checked box*/
121
122 changeBind() {
123 this.setState({ checked: !this.state.checked });
124 }
125
126 /*for all the values getting filled*/
127
128 handleChange = e => {
129 const { id, value } = e.target;
130 this.setState({ [id]: value });
131 };
132
133 toggleModal = () =>
134 this.setState(prevState => ({
135 modalOpen: !prevState.modalOpen
136 }));
137
138 /*dropdown ki values set ke lie*/
139
140 handleDropDownChange = (e, { value }) => {
141 this.setState({ drpdownValue: value });
142 };
143
144 /*this function is for units change if its sec unit multiply by 1000 and send the values*/
145
146 handleLabFindings = e => {
147 const { id, value } = e.target;
148 const meaureToCheck = `measure_${id}`;
149 console.log(meaureToCheck, 'meaureToCheck');
150 if (this.state[meaureToCheck] === '2') {
151 this.setState({ [id]: value * 1000 });
152 } else {
153 this.setState({ [id]: value });
154 }
155 };
156
157 /*form submit button*/
158
159 handleSubmit = e => {
160 const {
161 state: { age, spo, heartrate, resrate, drpdownValue, ddimer, cpk, crp, ldh, tropo, ferr, absolute, ctscan, abg }
162 } = this;
163
164 /*this is how the data is being sent in json format*/
165
166 try {
167 fetch(`${MOCK_SERVICE}`, {
168 method: 'POST',
169 headers: {
170 'Content-Type': 'application/json'
171 },
172 body: JSON.stringify({
173 spo,
174 heartrate,
175 drpdownValue,
176 ddimer,
177 cpk,
178 crp,
179 ldh,
180 tropo,
181 ferr,
182 absolute,
183 ctscan,
184 abg,
185 age,
186 resrate
187 })
188 })
189 .then(response => response.json())
190 .then(data => {
191 this.setState({ responseData: data, modalOpen: true });
192 });
193 } catch (error) {
194 console.log(error);
195 }
196 };
197
198 render() {
199 const hidden = this.state.checked ? '' : 'hidden';
200
201 const {
202 responseData: { message, epicount, vitalcount, labcount },
203 modalOpen
204 } = this.state;
205 return (
206 <div className="jupiter">
207 {/* < */}
208 <title>Risk Calculator</title>
209 <div className="full">
210 <div className="titlo">
211 <h1>RISK CALCULATOR</h1>
212 </div>
213 <br />
214 <br />
215
216 <div className="Image-container container">
217 <div className="putto">
218 <h4>
219 This web based risk calculator estimates the risk of cytokine storm activaton in Covid-19 patients,
220 which is based on epidemiological, vital signs and laboratory findings. Ref: 1. Eva W. Cheung at al.
221 Multisystem Inflammatory Syndrome Related to COVID-19 in Previously Healthy Children and Adolescents in
222 New York City. JAMA. June 08, 2020. doi:10.1001/jama.2020.10374
223 </h4>
224 </div>
225 </div>
226
227 <form onSubmit={this.handleSubmit} className="form">
228 <div className="para-container mars">
229 <div className="epidem-container col-md-8 col-sm-12 width=50% ">
230 <h1 className="head">EPIDEMIOLOGY</h1>
231
232 <div className="yoyo">
233 <Dropdown
234 placeholder="Comorbidities"
235 fluid
236 multiple
237 selection
238 options={options}
239 // onChange={() =>this.handleDropDownChange(e, data, 'drpdownValue')}
240 onChange={this.handleDropDownChange}
241 />
242 </div>
243
244 <h1 className="head">VITAL SIGNS</h1>
245 <div className="box1">
246 <br />
247 <br />
248
249 <label className="para_name">
250 RESPIRATORY RATE:
251 <input type="number" id="resrate" required onChange={this.handleChange} />
252 </label>
253 <span className="error" id="srr" color="red">
254 *
255 </span>
256 <br />
257 <br />
258 <label className="para_name">
259 HEART RATE:
260 <input type="number" id="heartrate" required onChange={this.handleChange} />
261 <span className="error" id="shr" color="red">
262 *
263 </span>
264 </label>
265 <br />
266 <br />
267 <label className="para_name">
268 SPO2 :
269 <input type="number" id="spo" required onChange={this.handleChange} />
270 <span className="error" id="sspoe" color="red">
271 *
272 </span>
273 </label>
274
275 <br></br>
276 </div>
277 <Checkbox
278 className="ruby"
279 label={{ children: 'LAB READINGS' }}
280 checked={this.state.checked}
281 onChange={this.changeBind}
282 />
283
284 <div className={hidden}>
285 <div className="lab">
286 <div>
287 <h1 className="head">LABORATORY FINDINGS</h1>
288 <div className="box2">
289 <div style={{ display: 'flex', flexDirection: 'row' }}>
290 <label className="para_name">
291 DDIMER:
292 <span className="error" id="sage" color="red">
293 *
294 </span>
295 </label>
296
297 <input
298 className="ind"
299 placeholder="DDIMER"
300 color="red"
301 type="number"
302 id="ddimer"
303 onChange={this.handleLabFindings}
304 required
305 />
306 <select id="measure_ddimer" name="measure" onChange={this.handleChange}>
307 <option value={1}>g/mL</option>
308 <option value={2}>ml/ml</option>
309 </select>
310 <button type="button" class="not_app_dd" id="btn_dd" onclick="NA_DD()">
311 N/A
312 </button>
313 </div>
314 <br />
315 <br />
316
317 <div style={{ display: 'flex', flexDirection: 'row' }}>
318 <label className="para_name md-col-4">
319 CPK:
320 <span className="error" id="sage" color="red">
321 *
322 </span>
323 </label>
324
325 <input className="ind1" type="number" id="cpk" required onChange={this.handleLabFindings} />
326 <select className="md-col-2" id="measure_cpk" name="measure" onChange={this.handleChange}>
327 <option value={1}>U/L</option>
328 <option value={2}>G/L</option>
329 </select>
330 <button type="button" class="not_app_dd" id="btn_cpk" onclick="NA_DD()">
331 N/A
332 </button>
333 </div>
334 <br />
335 <br />
336 <div style={{ display: 'flex', flexDirection: 'row' }}>
337 <label className="para_name">
338 CRP:
339 <span className="error" id="sage" color="red">
340 *
341 </span>
342 </label>
343 <input className="ind2" type="number" id="crp" required onChange={this.handleLabFindings} />
344 <select id="measure_crp" name="measure" onChange={this.handleChange}>
345 <option value={1}>mg/L</option>
346 <option value={2}>g/L</option>
347 </select>
348 <button type="button" class="not_app_dd" id="btn_crp" onclick="NA_DD()">
349 N/A
350 </button>
351 </div>
352 <br />
353 <br />
354 <div style={{ display: 'flex', flexDirection: 'row' }}>
355 <label className="para_name">
356 LDH:
357 <span className="error" id="sage" color="red">
358 *
359 </span>
360 </label>
361 <input className="ind3" type="number" id="ldh" required onChange={this.handleLabFindings} />
362 <select id="measure_ldh" name="measure" onChange={this.handleChange}>
363 <option value={1}>U/L</option>
364 <option value={2}>g/L</option>
365 </select>
366 <button type="button" class="not_app_dd" id="btn_ldh" onclick="NA_DD()">
367 N/A
368 </button>
369 </div>
370 <br />
371 <br />
372 <div style={{ display: 'flex', flexDirection: 'row' }}>
373 <label className="para_name">
374 Troponin:
375 <span className="error" id="sage" color="red">
376 *
377 </span>
378 </label>
379 <input className="ind4" type="number" id="tropo" onChange={this.handleLabFindings} required />
380 <select id="measure_tropo" name="measure" onChange={this.handleChange}>
381 <option value={1}>ng/ml</option>
382 <option value={2}>g/mL</option>
383 </select>
384 <button type="button" class="not_app_dd" id="btn_tropo" onclick="NA_DD()">
385 N/A
386 </button>
387 </div>
388 <br />
389 <br />
390 <div style={{ display: 'flex', flexDirection: 'row' }}>
391 <label className="para_name">
392 Ferritin:
393 <span className="error" id="sage" color="red">
394 *
395 </span>
396 </label>
397 <input className="ind5" type="number" id="ferr" onChange={this.handleLabFindings} required />
398 <select id="measure_ferr" name="measure" onChange={this.handleChange}>
399 <option value={1}>g/L</option>
400 <option value={2}>mg/L</option>
401 </select>
402 <button type="button" class="not_app_dd" id="btn_ferr" onclick="NA_DD()">
403 N/A
404 </button>
405 </div>
406 <br />
407 <br />
408 <div style={{ display: 'flex', flexDirection: 'row' }}>
409 <label className="para_name md-col-4">
410 Absolute LC:
411 <span className="error" id="sage" color="red">
412 *
413 </span>
414 </label>
415 <input
416 className="ind6"
417 className="md-col-6"
418 type="number"
419 id="absolute"
420 onChange={this.handleLabFindings}
421 />
422 <select className="md-col-2" id="measure_abg" name="measure" onChange={this.handleChange}>
423 <option value={1}>10^-6/L</option>
424 <option value={2}>g/L</option>
425 </select>
426 <button type="button" class="not_app_dd" id="btn_abs" onclick="NA_DD()">
427 N/A
428 </button>
429 <br />
430 </div>
431 <br />
432 <div style={{ display: 'flex', flexDirection: 'row' }}>
433 <label className="para_name" style={{ marginRight: '15px' }}>
434 ABG :(P / F)
435 </label>
436
437 <input className="ind8" type="number" id="abg" onChange={this.handleLabFindings} />
438 <select id="measure_checkAbg" name="measure" onChange={this.handleChange}>
439 <option value={1}>U/L</option>
440 <option value={2}>g/L</option>
441 </select>
442 <button type="button" class="not_app_dd" id="btn_abg" onclick="NA_DD()">
443 N/A
444 </button>
445 </div>
446
447 <br />
448 <br />
449
450 <div
451 style={{
452 display: 'flex',
453 flexDirection: 'row',
454 marginTop: '-1%'
455 }}>
456 <label className="para_name">CT SCAN:(corad)</label>
457 <input className="ind7" type="ctscan" id="ctscan" />
458 <select id="measure_ctscan" name="measure" onChange={this.handleChange}>
459 <option value={1}>U/L</option>
460 <option value={2}>g/L</option>
461 </select>
462 <button type="button" class="not_app_dd" id="btn_ctscan" onclick="NA_DD()">
463 N/A
464 </button>
465 </div>
466 <br />
467 </div>
468 </div>
469 </div>
470 </div>
471 </div>
472 </div>
473
474 <div className="btype">
475 <button className="cbbt" type="button" id="sub" onClick={this.handleSubmit}>
476 CALCULATE
477 </button>
478 </div>
479 </form>
480 <a href="https://forms.gle/3yrDBz4CeLhnW4kX8" target="_blank">
481 <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
482 Please help us to contribute more by providing your valuable feedback
483 </marquee>
484 </a>
485
486 <div className="information container">
487 <div className="ptor">
488 Moderate and high risk patients require aggressive monitoring of inflammatory milieu or up triaging.
489 Anti-inflammatory therapy with steroid and Anticoagulation recommended.{'\n'}*Please note these are mere
490 recommendation from the author based on the available scientific recommendation and no means intended to
491 replace local guidelines.{'\n'}
492 {'\n'}* compulsary{'\n'}
493 {' '}
494 </div>
495 </div>
496 <div className="modahai" id="modahai">
497 <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal}>
498 <ModalHeader toggle={this.toggleModal}>Risk Factor is 7.5 on a scale of 1-10</ModalHeader>
499 <ModalBody>
500 <div>Epimemiopology: {epicount} Parameters out of Normal Range</div>
501 <div>Vital Signs: {vitalcount} Parameters out of Normal Range</div>
502 <div>
503 Lab-Findings: {labcount}
504 Parameters out of Normal Range
505 </div>
506 </ModalBody>
507 <ModalFooter>Patient is at {message}</ModalFooter>
508 </Modal>
509 </div>
510 </div>
511 <div className="footer-copyright text-center py-3">
512 <fluid>
513 © {new Date().getFullYear()} Copyright: <a href="https://www.google.in"> RISK CALCULATOR</a>
514 </fluid>
515 </div>
516 </div>
517 );
518 }
519}
520
521export default Calculator;
522import React, { Fragment, Component } from 'react';
523import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';
524
525import '../css/alignmentbutton.css';
526import '../css/calc.css';
527import '../css/rpage.css';
528import '../css/rpage1.css';
529import '../css/rpage2.css';
530
531import { Dropdown } from 'semantic-ui-react';
532import { Checkbox } from 'semantic-ui-react';
533
534import { makeStyles, useTheme } from '@material-ui/core/styles';
535import { data } from 'jquery';
536
537//import LayoutTextFields from './LayoutTextFields';
538const styleLink = document.createElement('link');
539styleLink.rel = 'stylesheet';
540styleLink.href = 'https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css';
541document.head.appendChild(styleLink);
542//these are the options for epidem dropdown
543const options = [
544 {
545 key: 'H/O PULMONARY DISEASE',
546 text: 'H/O PULMONARY DISEASE',
547 value: 'H/O PULMONARY DISEASE'
548 },
549 { key: 'H/O CKD', text: 'H/O CKD', value: 'H/O CKD' },
550 {
551 key: 'H/O DM/(HbA1c>7.6)',
552 text: 'H/O DM/(HbA1c>7.6)',
553 value: 'H/O DM/(HbA1c>7.6)'
554 },
555 { key: 'H/O HCN', text: 'H/O HCN', value: 'H/O HCN' },
556 { key: 'H/O HIV', text: 'H/O HIV', value: 'H/O HIV' },
557 {
558 key: 'IMMUNOSUPRESSION',
559 text: 'IMMUNOSUPRESSION',
560 value: 'IMMUNOSUPRESSION'
561 }
562];
563const ITEM_HEIGHT = 48;
564const ITEM_PADDING_TOP = 8;
565const MenuProps = {
566 PaperProps: {
567 style: {
568 maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
569 width: 250
570 }
571 }
572};
573//basic styling property using library functions
574const useStyles = makeStyles(theme => ({
575 root: {
576 display: 'block',
577 flexWrap: 'wrap'
578 },
579 textField: {
580 marginLeft: theme.spacing(1),
581 marginRight: theme.spacing(1),
582 marginTop: theme.spacing(1),
583 marginBottom: theme.spacing(1),
584 width: '25ch'
585 },
586 formControl: {
587 margin: theme.spacing(1),
588 minWidth: 120,
589 maxWidth: 300
590 },
591 chips: {
592 display: 'flex',
593 flexWrap: 'wrap'
594 },
595 chip: {
596 margin: 2
597 },
598 noLabel: {
599 marginTop: theme.spacing(3)
600 }
601}));
602/*api */
603const MOCK_SERVICE = 'http://akshatrest.herokuapp.com/api/trial/';
604/*api ka name and defining all parameter*/
605export class Calculator extends Component {
606 // const classes = useStyles();
607 constructor() {
608 super();
609 this.state = {
610 checked: false,
611 age: '50',
612 spo: '',
613 heartrate: '',
614 resrate: '',
615 drpdownValue: '',
616 ddimer: '',
617 cpk: '',
618 crp: '',
619 ldh: '',
620 tropo: '',
621 ferr: '',
622 absolute: '',
623 ctscan: '',
624 abg: '',
625 checkAbg: '',
626 measure_ddimer: 1,
627 measure_cpk: 1,
628 measure_crp: 1,
629 measure_ldh: 1,
630 measure_tropo: 1,
631 measure_ferr: 1,
632 measure_absolute: 1,
633 measure_ctscan: 1,
634 measure_abg: 1,
635 measure_checkAbg: 1,
636 responseData: {},
637 modalOpen: false
638 };
639 this.changeBind = this.changeBind.bind(this);
640 }
641 /*for the checked box*/
642
643 changeBind() {
644 this.setState({ checked: !this.state.checked });
645 }
646
647 /*for all the values getting filled*/
648
649 handleChange = e => {
650 const { id, value } = e.target;
651 this.setState({ [id]: value });
652 };
653
654 toggleModal = () =>
655 this.setState(prevState => ({
656 modalOpen: !prevState.modalOpen
657 }));
658
659 /*dropdown ki values set ke lie*/
660
661 handleDropDownChange = (e, { value }) => {
662 this.setState({ drpdownValue: value });
663 };
664
665 /*this function is for units change if its sec unit multiply by 1000 and send the values*/
666
667 handleLabFindings = e => {
668 const { id, value } = e.target;
669 const meaureToCheck = `measure_${id}`;
670 console.log(meaureToCheck, 'meaureToCheck');
671 if (this.state[meaureToCheck] === '2') {
672 this.setState({ [id]: value * 1000 });
673 } else {
674 this.setState({ [id]: value });
675 }
676 };
677
678 /*form submit button*/
679
680 handleSubmit = e => {
681 const {
682 state: { age, spo, heartrate, resrate, drpdownValue, ddimer, cpk, crp, ldh, tropo, ferr, absolute, ctscan, abg }
683 } = this;
684
685 /*this is how the data is being sent in json format*/
686
687 try {
688 fetch(`${MOCK_SERVICE}`, {
689 method: 'POST',
690 headers: {
691 'Content-Type': 'application/json'
692 },
693 body: JSON.stringify({
694 spo,
695 heartrate,
696 drpdownValue,
697 ddimer,
698 cpk,
699 crp,
700 ldh,
701 tropo,
702 ferr,
703 absolute,
704 ctscan,
705 abg,
706 age,
707 resrate
708 })
709 })
710 .then(response => response.json())
711 .then(data => {
712 this.setState({ responseData: data, modalOpen: true });
713 });
714 } catch (error) {
715 console.log(error);
716 }
717 };
718
719 render() {
720 const hidden = this.state.checked ? '' : 'hidden';
721
722 const {
723 responseData: { message, epicount, vitalcount, labcount },
724 modalOpen
725 } = this.state;
726 return (
727 <div className="jupiter">
728 {/* < */}
729 <title>Risk Calculator</title>
730 <div className="full">
731 <div className="titlo">
732 <h1>RISK CALCULATOR</h1>
733 </div>
734 <br />
735 <br />
736
737 <div className="Image-container container">
738 <div className="putto">
739 <h4>
740 This web based risk calculator estimates the risk of cytokine storm activaton in Covid-19 patients,
741 which is based on epidemiological, vital signs and laboratory findings. Ref: 1. Eva W. Cheung at al.
742 Multisystem Inflammatory Syndrome Related to COVID-19 in Previously Healthy Children and Adolescents in
743 New York City. JAMA. June 08, 2020. doi:10.1001/jama.2020.10374
744 </h4>
745 </div>
746 </div>
747
748 <form onSubmit={this.handleSubmit} className="form">
749 <div className="para-container mars">
750 <div className="epidem-container col-md-8 col-sm-12 width=50% ">
751 <h1 className="head">EPIDEMIOLOGY</h1>
752
753 <div className="yoyo">
754 <Dropdown
755 placeholder="Comorbidities"
756 fluid
757 multiple
758 selection
759 options={options}
760 // onChange={() =>this.handleDropDownChange(e, data, 'drpdownValue')}
761 onChange={this.handleDropDownChange}
762 />
763 </div>
764
765 <h1 className="head">VITAL SIGNS</h1>
766 <div className="box1">
767 <br />
768 <br />
769
770 <label className="para_name">
771 RESPIRATORY RATE:
772 <input type="number" id="resrate" required onChange={this.handleChange} />
773 </label>
774 <span className="error" id="srr" color="red">
775 *
776 </span>
777 <br />
778 <br />
779 <label className="para_name">
780 HEART RATE:
781 <input type="number" id="heartrate" required onChange={this.handleChange} />
782 <span className="error" id="shr" color="red">
783 *
784 </span>
785 </label>
786 <br />
787 <br />
788 <label className="para_name">
789 SPO2 :
790 <input type="number" id="spo" required onChange={this.handleChange} />
791 <span className="error" id="sspoe" color="red">
792 *
793 </span>
794 </label>
795
796 <br></br>
797 </div>
798 <Checkbox
799 className="ruby"
800 label={{ children: 'LAB READINGS' }}
801 checked={this.state.checked}
802 onChange={this.changeBind}
803 />
804
805 <div className={hidden}>
806 <div className="lab">
807 <div>
808 <h1 className="head">LABORATORY FINDINGS</h1>
809 <div className="box2">
810 <div style={{ display: 'flex', flexDirection: 'row' }}>
811 <label className="para_name">
812 DDIMER:
813 <span className="error" id="sage" color="red">
814 *
815 </span>
816 </label>
817
818 <input
819 className="ind"
820 placeholder="DDIMER"
821 color="red"
822 type="number"
823 id="ddimer"
824 onChange={this.handleLabFindings}
825 required
826 />
827 <select id="measure_ddimer" name="measure" onChange={this.handleChange}>
828 <option value={1}>g/mL</option>
829 <option value={2}>ml/ml</option>
830 </select>
831 <button type="button" class="not_app_dd" id="btn_dd" onclick="NA_DD()">
832 N/A
833 </button>
834 </div>
835 <br />
836 <br />
837
838 <div style={{ display: 'flex', flexDirection: 'row' }}>
839 <label className="para_name md-col-4">
840 CPK:
841 <span className="error" id="sage" color="red">
842 *
843 </span>
844 </label>
845
846 <input className="ind1" type="number" id="cpk" required onChange={this.handleLabFindings} />
847 <select className="md-col-2" id="measure_cpk" name="measure" onChange={this.handleChange}>
848 <option value={1}>U/L</option>
849 <option value={2}>G/L</option>
850 </select>
851 <button type="button" class="not_app_dd" id="btn_cpk" onclick="NA_DD()">
852 N/A
853 </button>
854 </div>
855 <br />
856 <br />
857 <div style={{ display: 'flex', flexDirection: 'row' }}>
858 <label className="para_name">
859 CRP:
860 <span className="error" id="sage" color="red">
861 *
862 </span>
863 </label>
864 <input className="ind2" type="number" id="crp" required onChange={this.handleLabFindings} />
865 <select id="measure_crp" name="measure" onChange={this.handleChange}>
866 <option value={1}>mg/L</option>
867 <option value={2}>g/L</option>
868 </select>
869 <button type="button" class="not_app_dd" id="btn_crp" onclick="NA_DD()">
870 N/A
871 </button>
872 </div>
873 <br />
874 <br />
875 <div style={{ display: 'flex', flexDirection: 'row' }}>
876 <label className="para_name">
877 LDH:
878 <span className="error" id="sage" color="red">
879 *
880 </span>
881 </label>
882 <input className="ind3" type="number" id="ldh" required onChange={this.handleLabFindings} />
883 <select id="measure_ldh" name="measure" onChange={this.handleChange}>
884 <option value={1}>U/L</option>
885 <option value={2}>g/L</option>
886 </select>
887 <button type="button" class="not_app_dd" id="btn_ldh" onclick="NA_DD()">
888 N/A
889 </button>
890 </div>
891 <br />
892 <br />
893 <div style={{ display: 'flex', flexDirection: 'row' }}>
894 <label className="para_name">
895 Troponin:
896 <span className="error" id="sage" color="red">
897 *
898 </span>
899 </label>
900 <input className="ind4" type="number" id="tropo" onChange={this.handleLabFindings} required />
901 <select id="measure_tropo" name="measure" onChange={this.handleChange}>
902 <option value={1}>ng/ml</option>
903 <option value={2}>g/mL</option>
904 </select>
905 <button type="button" class="not_app_dd" id="btn_tropo" onclick="NA_DD()">
906 N/A
907 </button>
908 </div>
909 <br />
910 <br />
911 <div style={{ display: 'flex', flexDirection: 'row' }}>
912 <label className="para_name">
913 Ferritin:
914 <span className="error" id="sage" color="red">
915 *
916 </span>
917 </label>
918 <input className="ind5" type="number" id="ferr" onChange={this.handleLabFindings} required />
919 <select id="measure_ferr" name="measure" onChange={this.handleChange}>
920 <option value={1}>g/L</option>
921 <option value={2}>mg/L</option>
922 </select>
923 <button type="button" class="not_app_dd" id="btn_ferr" onclick="NA_DD()">
924 N/A
925 </button>
926 </div>
927 <br />
928 <br />
929 <div style={{ display: 'flex', flexDirection: 'row' }}>
930 <label className="para_name md-col-4">
931 Absolute LC:
932 <span className="error" id="sage" color="red">
933 *
934 </span>
935 </label>
936 <input
937 className="ind6"
938 className="md-col-6"
939 type="number"
940 id="absolute"
941 onChange={this.handleLabFindings}
942 />
943 <select className="md-col-2" id="measure_abg" name="measure" onChange={this.handleChange}>
944 <option value={1}>10^-6/L</option>
945 <option value={2}>g/L</option>
946 </select>
947 <button type="button" class="not_app_dd" id="btn_abs" onclick="NA_DD()">
948 N/A
949 </button>
950 <br />
951 </div>
952 <br />
953 <div style={{ display: 'flex', flexDirection: 'row' }}>
954 <label className="para_name" style={{ marginRight: '15px' }}>
955 ABG :(P / F)
956 </label>
957
958 <input className="ind8" type="number" id="abg" onChange={this.handleLabFindings} />
959 <select id="measure_checkAbg" name="measure" onChange={this.handleChange}>
960 <option value={1}>U/L</option>
961 <option value={2}>g/L</option>
962 </select>
963 <button type="button" class="not_app_dd" id="btn_abg" onclick="NA_DD()">
964 N/A
965 </button>
966 </div>
967
968 <br />
969 <br />
970
971 <div
972 style={{
973 display: 'flex',
974 flexDirection: 'row',
975 marginTop: '-1%'
976 }}>
977 <label className="para_name">CT SCAN:(corad)</label>
978 <input className="ind7" type="ctscan" id="ctscan" />
979 <select id="measure_ctscan" name="measure" onChange={this.handleChange}>
980 <option value={1}>U/L</option>
981 <option value={2}>g/L</option>
982 </select>
983 <button type="button" class="not_app_dd" id="btn_ctscan" onclick="NA_DD()">
984 N/A
985 </button>
986 </div>
987 <br />
988 </div>
989 </div>
990 </div>
991 </div>
992 </div>
993 </div>
994
995 <div className="btype">
996 <button className="cbbt" type="button" id="sub" onClick={this.handleSubmit}>
997 CALCULATE
998 </button>
999 </div>
1000 </form>
1001 <a href="https://forms.gle/3yrDBz4CeLhnW4kX8" target="_blank">
1002 <marquee behavior="scroll" direction="left" onmouseover="this.stop();" onmouseout="this.start();">
1003 Please help us to contribute more by providing your valuable feedback
1004 </marquee>
1005 </a>
1006
1007 <div className="information container">
1008 <div className="ptor">
1009 Moderate and high risk patients require aggressive monitoring of inflammatory milieu or up triaging.
1010 Anti-inflammatory therapy with steroid and Anticoagulation recommended.{'\n'}*Please note these are mere
1011 recommendation from the author based on the available scientific recommendation and no means intended to
1012 replace local guidelines.{'\n'}
1013 {'\n'}* compulsary{'\n'}
1014 {' '}
1015 </div>
1016 </div>
1017 <div className="modahai" id="modahai">
1018 <Modal isOpen={this.state.modalOpen} toggle={this.toggleModal}>
1019 <ModalHeader toggle={this.toggleModal}>Risk Factor is 7.5 on a scale of 1-10</ModalHeader>
1020 <ModalBody>
1021 <div>Epimemiopology: {epicount} Parameters out of Normal Range</div>
1022 <div>Vital Signs: {vitalcount} Parameters out of Normal Range</div>
1023 <div>
1024 Lab-Findings: {labcount}
1025 Parameters out of Normal Range
1026 </div>
1027 </ModalBody>
1028 <ModalFooter>Patient is at {message}</ModalFooter>
1029 </Modal>
1030 </div>
1031 </div>
1032 <div className="footer-copyright text-center py-3">
1033 <fluid>
1034 © {new Date().getFullYear()} Copyright: <a href="https://www.google.in"> RISK CALCULATOR</a>
1035 </fluid>
1036 </div>
1037 </div>
1038 );
1039 }
1040}
1041
1042export default Calculator;
1043