wip

timrobinson33 · Mar 14, 2021 · eb2cbdd · eb2cbdd
1 parent f443fc2
commit eb2cbdd
Show file tree

Hide file tree

Showing 7 changed files with 15,954 additions and 11,420 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -24,7 +24,7 @@
  work correctly both with client-side routing and a non-root public URL.
  Learn how to configure a non-root public URL by running `npm run build`.
  -->
- <title>React App</title>
+ <title>Drug Calculator</title>
  </head>
  <body>
  <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
- "short_name": "React App",
- "name": "Create React App Sample",
+ "short_name": "Drug Calc",
+ "name": "Drug Calculator",
  "icons": [
  {
  "src": "favicon.ico",

diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,12 @@
+html, body, button, input, select {
+ font-family:Arial, Helvetica, sans-serif;
+ font-size: 14pt;
+}
+
+div {
+ margin: 15px 0px;
+}
+
+input[type=number] {
+ width: 70px;
+}
diff --git a/src/App.js b/src/App.js
@@ -1,30 +1,174 @@
+import React, { useState } from 'react'
 import './App.css';
+import _ from 'lodash'
 
 const medicines = [
- { drugName: "Morphine 1st Line"},
- { drugName: "Diamorphine" },
- { drugName: "Haloperidol" },
- { drugName: "Metoclopramide" },
- { drugName: "Cyclizine" },
- { drugName: "Levomepromazine" },
- { drugName: "Midazolam" },
- { drugName: "Haloperidol" },
- { drugName: "Levomepromazine" },
- { drugName: "Hyoscine Butylbromide" },
- { drugName: "Hyoscine Hydrobromide" },
+ { drugName: "" },
+ {
+ drugName: "Morphine 1st Line",
+ strengths: [
+ { mg: 10, ml: 1 },
+ { mg: 15, ml: 1 },
+ { mg: 30, ml: 1 },
+ { mg: 30, ml: 1 },
+ { mg: 10, ml: 2 },
+ { mg: 15, ml: 2 },
+ { mg: 30, ml: 2 },
+ { mg: 30, ml: 2 },
+ ]
+ },
+ {
+ drugName: "Diamorphine",
+ strengths: [
+ { mg: 10, ml: 1 },
+ { mg: 15, ml: 1 },
+ { mg: 30, ml: 1 },
+ { mg: 100, ml: 1 },
+ { mg: 10, ml: 2 },
+ { mg: 15, ml: 2 },
+ { mg: 30, ml: 2 },
+ { mg: 100, ml: 2 },
+ ]
+ },
+ {
+ drugName: "Haloperidol",
+ strengths: [
+ { mg: 5, ml: 1 },
+ ]
+ },
+ {
+ drugName: "Metoclopramide",
+ strengths: [
+ { mg: 10, ml: 2 },
+ ]
+ },
+ {
+ drugName: "Cyclizine",
+ strengths: [
+ { mg: 50, ml: 1 },
+ ]
+ },
+ {
+ drugName: "Levomepromazine",
+ strengths: [
+ { mg: 25, ml: 1 },
+ ]
+ },
+ {
+ drugName: "Midazolam",
+ strengths: [
+ { mg: 10, ml: 2 },
+ ]
+ },
+ {
+ drugName: "Haloperidol",
+ strengths: [
+ { mg: 5, ml: 1 },
+ ]
+ },
+ {
+ drugName: "Levomepromazine",
+ strengths: [
+ { mg: 25, ml: 1 },
+ ]
+ },
+ {
+ drugName: "Hyoscine Butylbromide",
+ strengths: [
+ { mg: 20, ml: 1 },
+ ]
+ },
+ {
+ drugName: "Hyoscine Hydrobromide",
+ strengths: [
+ { mg: 0.4, ml: 1 },
+ ]
+ },
 ]
 
 function App() {
- return (
+ const [drugIdx, setDrugIdx] = useState(0)
+ const [strengthIdx, setStrengthIdx] = useState(0)
+ const [prescribedDoseStr, setPrescribedDoseStr] = useState("")
+ const [numStatDoses, setNumStatDoses] = useState(0)
+ const [statDoseStrengthStr, setStatDoseStrengthStr] = useState("")
 
- <div>
- <select>
- {medicines.map(o => <option value={o.drugName}>{o.drugName}</option>)}
- </select>
- </div>
+ const statDoseStrength = Number(statDoseStrengthStr)
+ const prescribedDose = Number(prescribedDoseStr)
 
- );
+ const showCalc = !!(drugIdx && prescribedDoseStr)
+
+ const totalDoseMg = showCalc && prescribedDose + numStatDoses * statDoseStrength
+ const drugStrength = showCalc && medicines[drugIdx].strengths[strengthIdx]
+ const totalDoseMl = showCalc && totalDoseMg / drugStrength.mg * drugStrength.ml
+ const numVials = _.ceil(totalDoseMl / drugStrength.ml)
+ const wasteMl = numVials * drugStrength.ml - totalDoseMl
+ const wasteMg = numVials * drugStrength.mg - totalDoseMg
+
+ const selectDrug = x => {
+ setDrugIdx(x)
+ setStrengthIdx(0)
+ setPrescribedDoseStr("")
+ setNumStatDoses(0)
+ setStatDoseStrengthStr("")
+ }
+
+ const formatNumber = n => parseFloat(n.toFixed(2))
+
+ return (
+ <div>
+ <div>
+ <span>Drug: </span>
+ <select value={drugIdx} onChange={e => selectDrug(Number(e.target.value))}>
+ {medicines.map((x, i) => <option key={i} value={i}>{x.drugName}</option>)}
+ </select>
+ <span> </span>
+ {!!drugIdx &&
+ <select value={strengthIdx} onChange={e => setStrengthIdx(parseInt(e.target.value))}>
+ {medicines[drugIdx].strengths.map((x, i) => <option key={i} value={i}>{`${x.mg}mg/${x.ml}ml`}</option>)}
+ </select>
+ }
+ </div>
+ {!!drugIdx && <>
+ <div>
+ <span>Prescribed dose: </span>
+ <input type="number" min={0} value={prescribedDoseStr} onChange={e => setPrescribedDoseStr(e.target.value)} />
+ <span> mg</span>
+ </div>
+ <div>
+ <span>Stat/PRN doses: </span>
+ <select onChange={e => setNumStatDoses(Number(e.target.value))}>
+ {_.range(7).map(x => <option key={x} value={x}>{x}</option>)}
+ </select>
+ {!!numStatDoses && <>
+ <span> x </span>
+ <input type="number" min={0} value={statDoseStrengthStr} onChange={e => setStatDoseStrengthStr(e.target.value)} />
+ <span> mg</span>
+ </>}
+ </div>
+ {showCalc && <>
+ <div>
+ <span>Total dose: {totalDoseMg}mg = {formatNumber(totalDoseMl)} ml</span>
+ </div>
+ <div>
+ <span>Number of vials: {numVials}</span>
+ </div>
+ <div>
+ <span>Waste: {wasteMg}mg = {formatNumber(wasteMl)}ml</span>
+ </div>
+ </>}
+ <button onClick = {() => setDrugIdx(0)}>Clear</button>
+ </>}
+ </div>
+ );
 }
 
 export default App;
 
+/*
+bug - select morphine, select strength not in list, select different drug, select amount
+deal with change drug
+layout
+text boxes smaller
+
+*/
diff --git a/src/logo.svg b/src/logo.svg