Bkretz/feature/celcius temp

client/src/Components/FormMultiField.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import './FormMultiField.scss';
+
+const FormMultiField = ({ label, children }) => {
+  return (
+    <>
+      {label}
+      <div className="multi-field">
+        {children.map((child) => {
+          return (
+            <div key={child.props.metadata.name} className="multi-field__input">
+              {child}
+            </div>
+          );
+        })}
+      </div>
+    </>
+  );
+};
+
+export default FormMultiField;

client/src/EMS/BloodPressureField.scss → client/src/Components/FormMultiField.scss

@@ -1,12 +1,12 @@
 @import '../theme/base';
 
-.bpfield {
+.multi-field {
   display: flex;
   gap: 0.6rem;
   position: relative;
 }
 
-.bpfield__input {
+.multi-field__input {
   .grid-row {
     flex-wrap: nowrap;
   }

client/src/EMS/BloodPressureField.js

@@ -5,7 +5,7 @@ import { ValidationState } from '../Models/PatientFieldData';
 import FormInput from '../Components/FormInput';
 import { useForm } from '../Components/Form';
 
-import './BloodPressureField.scss';
+import FormMultiField from '../Components/FormMultiField';
 
 function BPInput({ metadata, unit }) {
   const { data, onChange } = useForm();
@@ -18,18 +18,16 @@ function BPInput({ metadata, unit }) {
     // grouped with its input in a div because the fields are arranged horizontally
     // in a row.  since the errors are absolutely positioned, they'd both shift to
     // the left margin of the .bpfield without this extra div, causing an overlap.
-    <div className="bpfield__input">
-      <FormInput
-        type="number"
-        property={name}
-        value={data[name]}
-        validationState={data.getValidationState(name)}
-        unit={unit || metadata.unit}
-        min={min}
-        max={max}
-        onChange={onChange}
-      />
-    </div>
+    <FormInput
+      type="number"
+      property={name}
+      value={data[name]}
+      validationState={data.getValidationState(name)}
+      unit={unit || metadata.unit}
+      min={min}
+      max={max}
+      onChange={onChange}
+    />
   );
 }
 
@@ -39,15 +37,16 @@ export default function BloodPressureField({ systolicMetadata, diastolicMetadata
   const hasError = validations.includes(ValidationState.RANGE_ERROR);
 
   return (
-    <>
-      <label htmlFor={systolicMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
-        Blood pressure
-      </label>
-      <div className="bpfield">
-        <BPInput metadata={systolicMetadata} unit="/" />
-        <BPInput metadata={diastolicMetadata} unit="mmHG" />
-      </div>
-    </>
+    <FormMultiField
+      label={
+        <label htmlFor={systolicMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+          Blood pressure
+        </label>
+      }
+    >
+      <BPInput metadata={systolicMetadata} unit="/" />
+      <BPInput metadata={diastolicMetadata} unit="mmHG" />
+    </FormMultiField>
   );
 }
 

client/src/EMS/PatientFields.js

@@ -12,6 +12,7 @@ import Ringdown from '../Models/Ringdown';
 import ApiService from '../ApiService';
 import Context from '../Context';
 import patient from '../../../shared/metadata/patient';
+import TemperatureField from './TemperatureField';
 
 const Patient = patient.getFieldHash();
 
@@ -157,7 +158,19 @@ function PatientFields({ ringdown, onChange }) {
               />
             </FormRadioFieldSet>
           </div>
-          <FormField metadata={Patient.temperature} />
+          {/* <FormField metadata={Patient.temperature} /> */}
+          <TemperatureField temperatureMetadata={Patient.temperature} />
+          {/* <FormField
+            metadata={Patient.temperature}
+            label="Temperature"
+          >
+            <span className="usa-hint usa-hint--unit">&nbsp;&nbsp;</span>
+            <FormField
+              metadata={Patient.temperature.conversion}
+              isWrapped={false}
+              label={false}
+            />
+          </FormField> */}
         </fieldset>
       </div>
       <Heading title="Additional notes" subtitle="optional" />

client/src/EMS/TemperatureField.js

@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import { useForm } from '../Components/Form';
+import FormInput from '../Components/FormInput';
+
+import { ValidationState } from '../Models/PatientFieldData';
+import classNames from 'classnames';
+
+import FormMultiField from '../Components/FormMultiField';
+
+const TemperatureInput = ({ metadata, unit, onChange, value }) => {
+  const { data } = useForm();
+  const { name, range = {} } = metadata || {};
+  const { min, max } = range;
+
+  return (
+    <FormInput
+      type="number"
+      property={name}
+      value={data[name] || value}
+      validationState={data.getValidationState(name)}
+      unit={unit || metadata?.unit}
+      min={min}
+      max={max}
+      onChange={onChange}
+    />
+  );
+};
+
+const TemperatureField = ({ temperatureMetadata }) => {
+  const { data, onChange } = useForm();
+  const [celsius, setCelsius] = useState('');
+  const celsiusMetadata = { name: 'celsius', unit: '°C', range: { min: 26.5, max: 65.5 } };
+
+  const hasError = data.getValidationState(temperatureMetadata.name) === ValidationState.RANGE_ERROR;
+
+  const handleOnChange = (name, value) => {
+    if (name === 'celsius') {
+      onChange('temperature', (parseFloat(value) * 1.8 + 32).toFixed(2));
+      setCelsius(value);
+    } else {
+      onChange(name, value);
+      setCelsius(((parseFloat(value) - 32) / 1.8).toFixed(2));
+    }
+  };
+  return (
+    <>
+      <FormMultiField
+        label={
+          <label htmlFor={temperatureMetadata.name} className={classNames('usa-label', { 'usa-label--error': hasError })}>
+            Temperature
+          </label>
+        }
+      >
+        <TemperatureInput metadata={temperatureMetadata} onChange={handleOnChange} />
+        <TemperatureInput metadata={celsiusMetadata} value={celsius} onChange={handleOnChange} />
+      </FormMultiField>
+    </>
+  );
+};
+
+export default TemperatureField;