Add guideline dropdown box

src/bilirubin_app.js

@@ -16,18 +16,39 @@
 	along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */
 
+// --------------------------------------
+// Extra questions by guideline/gestation
+
+function updateExtraQuestions() {
+	// Show or hide extra questions according to guideline and gestation
+}
+updateExtraQuestions();
+
 // --------------
 // Graph plotting
 
+function isGestationValid(guideline, gestation) {
+	if (isNaN(gestation)) {
+		return false;
+	}
+	if (guideline === 'nice' && gestation < 23) {
+		return false;
+	}
+	return true;
+}
+
 function plotGraphData() {
+	let guideline = document.getElementById('guideline').value;
 	let gestation = document.getElementById('gestation').valueAsNumber;
 	
-	if (isNaN(gestation) || gestation < 23) {
+	if (!isGestationValid(guideline, gestation)) {
 		chart.data.datasets[0].data = [];
 		chart.data.datasets[1].data = [];
-	} else {
+	} else if (guideline === 'nice') {
 		chart.data.datasets[0].data = [...Array(14*24).keys()].map((i) => i / 24).map((d) => ({x: d, y: nice_phototherapy_thresh(d, gestation)}));
 		chart.data.datasets[1].data = [...Array(14*24).keys()].map((i) => i / 24).map((d) => ({x: d, y: nice_exchange_thresh(d, gestation)}));
+	} else {
+		throw new Error('Unexpected guideline');
 	}
 	
 	chart.update();
@@ -130,6 +151,7 @@ function updateBilirubin() {
 	let resultDiv = document.getElementById('result');
 	let resultP = resultDiv.querySelector('p');
 	
+	let guideline = document.getElementById('guideline').value;
 	let bilirubin = document.getElementById('bilirubin').valueAsNumber;
 	let gestation = document.getElementById('gestation').valueAsNumber;
 	
@@ -145,12 +167,18 @@ function updateBilirubin() {
 		resultDiv.className = 'hidden';
 		return;
 	}
-	if (isNaN(gestation) || gestation < 23) {
+	if (!isGestationValid(guideline, gestation)) {
 		resultDiv.className = 'hidden';
 		return;
 	}
 	
-	let [d, result_text, text_colour, background_colour, accent_colour] = describeBilirubin(gestation, new Date(document.getElementById('time_birth').value), new Date(document.getElementById('time_measurement').value), bilirubin);
+	let d, result_text, text_colour, background_colour, accent_colour;
+	
+	if (guideline === 'nice') {
+		[d, result_text, text_colour, background_colour, accent_colour] = describeBilirubin(gestation, new Date(document.getElementById('time_birth').value), new Date(document.getElementById('time_measurement').value), bilirubin);
+	} else {
+		throw new Error('Unexpected guideline');
+	}
 	
 	chart.data.datasets[2].data = [{x: d, y: bilirubin}];
 	chart.update();

src/index.html

@@ -29,10 +29,16 @@
 		<div class="max-w-2xl mx-auto my-4 px-4">
 			<h1 class="text-gray-900 font-medium text-xl pb-3 mb-4 border-b border-gray-400">Neonatal jaundice treatment thresholds</h1>
 			<div class="space-y-2">
+				<div class="sm:grid sm:grid-cols-3">
+					<label for="guideline" class="text-sm font-medium text-gray-900 pt-1.5">Guideline:</label>
+					<select id="guideline" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="col-span-2 w-full rounded-md shadow-sm border-0 py-1.5 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
+						<option value="nice" selected>National Institute for Health and Clinical Excellence (NICE)</option>
+					</select>
+				</div>
 				<div class="sm:grid sm:grid-cols-3">
 					<label for="gestation" class="text-sm font-medium text-gray-900 pt-1.5">Gestational age:</label>
 					<div class="col-span-2 relative rounded-md shadow-sm">
-						<input id="gestation" type="number" value="38" min="23" onchange="plotGraphData();updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[8.8rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
+						<input id="gestation" type="number" value="38" min="23" onchange="updateExtraQuestions();plotGraphData();updateBilirubin()" class="w-full rounded-md border-0 py-1.5 pr-[8.8rem] text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 text-sm">
 						<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
 							<span class="text-gray-500 text-sm">completed weeks</span>
 						</div>