new brach

src/components/GeneralStatus.js

-import React , {useState}  from "react"
-const GeneralStatus =() =>{
-  const [newDatasetBtn , setNewDatasetBtn ] =useState(true)
-  const [captueText , setCaptureText ] =useState("Start Capture")
-
-  const onNewDataSet =() => {
- setNewDatasetBtn(false)
-  } 
-  
-  const onStartCaptue =() => {
-    if (captueText === "Start Capture")
-    setCaptureText("End Capture")
+import React, { useState } from "react";
+const GeneralStatus = () => {
+  const [newDatasetBtn, setNewDatasetBtn] = useState(true);
+  const [captueBtn, setCaptureBtn] = useState("Start Capture");
+  const [gpsBtn, setGpsBtn] = useState("Start Gps");  
+  const [imuBtn, setImuBtn] = useState("Start Imu");    
+
+  const onNewDataSet = () => {
+    setNewDatasetBtn(false);
+  };
+
+  const onCaptureBtnClick = () => {
+    if (captueBtn === "Start Capture") {
+      setCaptureBtn("End Capture");
+    }
+    else {
+      setNewDatasetBtn(true);
+      setCaptureBtn("Start Capture");
+    }   
+  }; 
+
+  const onGpsBtnClick = () => {
+    if (gpsBtn === "Start Gps"){
+    setGpsBtn("End Gps");
+    } 
     else {
-       setNewDatasetBtn(true)
-       setCaptureText("Start Capture")
+      setGpsBtn("Start Gps");
+    }
+  };
+
+
+  const onImuBtnClick = () => {
+    if (imuBtn === "Start Imu") 
+    {
+      setImuBtn("End Imu");
     }
+    else {
+      setImuBtn("Start Imu");
+    }
+  };
+
+
+  return (
+    <React.Fragment>
+      <div className=" row  m-1 ">
+        <div className="col-6 px-1  my-1">
+          <button
+            disabled={!newDatasetBtn}
+            className="btn btn-primary btn-block"
+            onClick={onNewDataSet}
+          >
+            New Dataset a
+          </button>
+        </div>
+        <div className="col-6 px-1 my-1">DataSetName</div>
+        <div className="col-6 px-1 my-1">
+          <button
+            className="btn btn-primary btn-block"
+            disabled={newDatasetBtn}
+            onClick={onGpsBtnClick}
+          >
+            {gpsBtn}
+          </button>
+        </div>
+        <div className="col-6 px-1 my-1">
+          <button
+            className="btn btn-primary btn-block"
+            disabled={newDatasetBtn}
+            onClick={onImuBtnClick}
+          >
+           {imuBtn}
+          </button>
+        </div>
 
-  }
-    return(
-        <React.Fragment>
-       <div className=" row  m-1 ">
-          <div className="col-6 px-1  my-1">
-            <button disabled={!newDatasetBtn} className="btn btn-primary btn-block" onClick={onNewDataSet}>New Dataset</button>
-          </div>
-          <div className="col-6 px-1 my-1">DataSetName</div>
-          <div className="col-6 px-1 my-1">
-            <button className="btn btn-primary btn-block" disabled={newDatasetBtn} >Start GPS</button>
-          </div>
-          <div className="col-6 px-1 my-1">
-            <button className="btn btn-primary btn-block" disabled={newDatasetBtn} >Start IMU</button>
-          </div>
-
-          <div className="col-12 px-1 my-1">
-            <button className="btn btn-primary btn-block" disabled={newDatasetBtn} onClick={onStartCaptue}>{captueText}</button>
-          </div>
+        <div className="col-12 px-1 my-1">
+          <button
+            className="btn btn-primary btn-block"
+            disabled={newDatasetBtn}
+            onClick={onCaptureBtnClick}
+          >
+            {captueBtn}
+          </button>
         </div>
+      </div>
     </React.Fragment>
-    )
-}
-export default GeneralStatus
\ No newline at end of file
+  );
+};
+export default GeneralStatus;

src/components/UIElements/Gps.js

 import Axios from "axios";
 import { useEffect, useState } from "react";
-
+ const lockDic =[{key : 1 , value : "value1"}, {key: 2 , value: "value2"}];
+ 
 const Gps = ({socket}) => {
-    const lockDic =[{key : 1 , value : "value1"}, {key: 2 , value: "value2"}];
-  const [gpsData, setGpsData] = useState({});
-  const [newGpsData, setNewGpsData] = useState({});
+   
+
+  const [gpsData, setGpsData] = useState({}); 
   socket.on("gpsData", (res) => {
     console.log(res);
     setGpsData(res);
@@ -24,7 +25,7 @@ const Gps = ({socket}) => {
   // }, [newGpsData]);
 
   return (
-    <div className={"border p-1 rounded pb-3 border-thicker " + (gpsData.connection ? "border-success " : "border-dark")  }>
+    <div className={"border p-1 rounded pb-3 border-thicker " + (gpsData.connection ? "border-success " : "border-danger")  }>
           <h6>GPS</h6>
           <div>
             <div className="col-6 float-left text-right bold">Status :</div>

src/components/UIElements/Imu.js

@@ -23,7 +23,7 @@ const Imu = ({socket}) => {
   // }, [newImuData]);
 
   return (
-    <div className={"border p-1 rounded pb-3 border-thicker " + (imuData.connection ? "border-success " : "border-dark")  }>
+    <div className={"border p-1 rounded pb-3 border-thicker " + (imuData.connection ? "border-success " : "border-danger")  }>
     <h6>IMU</h6>
     <div>
       <div className="col-4 float-left text-right bold">X :</div>