add sample flow

firmware/sketch_aug4a/sketch_aug4a.ino

@@ -5,6 +5,16 @@ void setup() {
 
 void loop() {
   // put your main code here, to run repeatedly:
-  Serial.println("RESULT SN 18291 1937.23 2828.11 28211.20 121829.12");
+  Serial.println("#Start Buffer");
+  delay(2000);
+  Serial.println("#Buffer Completed");
+  delay(2000);
+  Serial.println("#Start Buffer");
+  delay(2000);
+  Serial.println("#Sample Completed");
   delay(3000);
+  Serial.println("RESULT SN 18291 1937.23 2828.11 28211.20 121829.12");
+  delay(15000);
+
+  // Serial.println("#ERROR");
 }

src/components/Calibrations.css

@@ -0,0 +1,9 @@
+.page-title {
+    /* width: 100vw; */
+    padding: 10px;
+    text-align: center;
+    background: rgb(207, 235, 250);
+    color: black;
+    font-size: 30px;
+    font-family: sans-serif;
+}

src/components/Calibrations.js

@@ -44,8 +44,8 @@ const Calibrations = () => {
     }, [device, curDeviceData]);
 
     return (
-        <div className="devices-page">
+        <div className="calibrations-page">
-            <div className='title'>Calibrations</div>
+            <div className='page-title'>Calibrations</div>
             <div className='dropdown-group'>
                 <Dropdown className='device-dropdown' options={devices?.map(x => x.deviceId)} onChange={changeDevice} value={device} placeholder="Select an device" />
 
@@ -66,7 +66,7 @@ const Calibrations = () => {
                             <td>calibratedAt</td> <td>{curDeviceData?.calibratedAt} </td>
                         </tr>
                         <tr>
-                            <td>coefficients</td> <td>{curDeviceData?.coefficients.toString()} </td>
+                            <td>coefficients</td> <td>{curDeviceData?.coefficients?.toString()} </td>
                         </tr>
                     </table>
                 </div>}

src/components/Devices.js

@@ -128,7 +128,7 @@ const Devices = () => {
 
             <div className='graph-person-conatiner'>
                 {!curTestData && <div className='refresh-graph-message'>Select test device, date and person to get the detailed graph. Then, click show button to render graph.</div>}
-                {curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
+                {curTestData?.csvPath && curTestData?.testType !== 'HEMOCUBE' && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
 
                 {curTestData && <div className='test-details'>
                     <table>
@@ -151,6 +151,14 @@ const Devices = () => {
                         <tr>
                             <td>result</td> <td>{curTestData?.result}</td>
                         </tr>
+                        {curTestData?.testType === 'HEMOCUBE' && <tr>
+                            <td>device data</td>
+                            <td>{curTestData?.calculatedRatio}</td>
+                        </tr>}
+                        {curTestData?.testType === 'HEMOCUBE' && <tr>
+                            <td>device data</td>
+                            <td>{curTestData?.deviceRatio}</td>
+                        </tr>}
                     </table>
                     {/* <img src={curTestData?.userImageURL} width={100} height={150} /> */}
                 </div>}