Merge branch 'Dev-2' into 'master'

Dev 2

See merge request !1

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";
+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");
+    }
+    else {
+      setNewDatasetBtn(true);
+      setCaptureBtn("Start Capture");
+    }   
+  }; 
+
+  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");
+    } 
+    else {
+      setGpsBtn("Start Gps");
+    }
+  };
+
+
+  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");
+    }
     else {
-       setNewDatasetBtn(true)
-       setCaptureText("Start Capture")
+      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 
+          </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
+  );
+};
+export default GeneralStatus;
\ No newline at end of file

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}) => {
-    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);
 
   })
-  // 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-dark")  }>
+    <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-dark")  }>
+    <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;
-}