api zip file added

src/components/GeneralStatus.js

 import React, { useState } from "react";
+import Axios from "axios";
+
 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 [datasetName, setDatasetName] = useState("dataset 1"); 
 
   const onNewDataSet = () => {
+    Axios({
+      method: "GET",
+      withCredentials: true,
+      url: process.env.REACT_APP_BACKEND_URL + "/dataset/start",
+    }).then(async (res) => {
+      console.log("********************");
+      // update dataset name
+      setDatasetName(res)
+    });
+
     setNewDatasetBtn(false);
   };
 
   const onCaptureBtnClick = () => {
+    Axios({
+      method: "GET",
+      withCredentials: true,
+      url: process.env.REACT_APP_BACKEND_URL + "/camera/start",
+    }).then(async (res) => {
+      console.log("********************");
+    });
+
     if (captueBtn === "Start Capture") {
       setCaptureBtn("End Capture");
     }
@@ -20,6 +41,14 @@ const GeneralStatus = () => {
   }; 
 
   const onGpsBtnClick = () => {
+    Axios({
+      method: "GET",
+      withCredentials: true,
+      url: process.env.REACT_APP_BACKEND_URL + "/gps/start",
+    }).then(async (res) => {
+      console.log("********************");
+    });
+
     if (gpsBtn === "Start Gps"){
     setGpsBtn("End Gps");
     } 
@@ -30,6 +59,14 @@ const GeneralStatus = () => {
 
 
   const onImuBtnClick = () => {
+    Axios({
+      method: "GET",
+      withCredentials: true,
+      url: process.env.REACT_APP_BACKEND_URL + "/imu/start",
+    }).then(async (res) => {
+      console.log("********************");
+    });
+
     if (imuBtn === "Start Imu") 
     {
       setImuBtn("End Imu");
@@ -49,10 +86,10 @@ const GeneralStatus = () => {
             className="btn btn-primary btn-block"
             onClick={onNewDataSet}
           >
-            New Dataset a
+            New Dataset 
           </button>
         </div>
-        <div className="col-6 px-1 my-1">DataSetName</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"

src/components/UIElements/Gps.js

 import Axios from "axios";
-import { useEffect, useState } from "react";
+import {  useState } from "react";
  const lockDic =[{key : 1 , value : "value1"}, {key: 2 , value: "value2"}];
  
 const Gps = ({socket}) => {
@@ -11,21 +11,9 @@ const Gps = ({socket}) => {
     setGpsData(res);
 
   })
-  // useEffect(() => {
-  //   Axios({
-  //     method: "GET",
-  //     withCredentials: true,
-  //     url: process.env.REACT_APP_BACKEND_URL + "/gpsInfo",
-  //   }).then(async (res) => {
-  //     console.log("********************");
-  //     setGpsData(res.data);
-  //     console.log(res.data);
-  //   //   console.log(lockDic.find((x)=> x.key === gpsData.lock ).value)
-  //   });
-  // }, [newGpsData]);
 
   return (
-    <div className={"border p-1 rounded pb-3 border-thicker " + (gpsData.connection ? "border-success " : "border-danger")  }>
+    <div className={"border border-2 p-1 rounded pb-3 " + (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-danger")  }>
+    <div className={"border p-1 rounded pb-3 border-2 " + (imuData.connection ? "border-success " : "border-danger")  }>
     <h6>IMU</h6>
     <div>
       <div className="col-4 float-left text-right bold">X :</div>

src/index.css

@@ -15,9 +15,3 @@ code {
   font-weight: bold;
 }
 .border{ overflow:  auto !important;}
-.border-thick {
-  border-width: 2px !important;
-}
-.border-thicker {
-  border-width: 3px !important;
-}