Frontend Updated

Web App/Backend/db/connection.js

@@ -19,8 +19,6 @@ mongoose
     console.log(err);
   });
 
-// const mongoose = require("mongoose");
-
 // mongoose
 //   .connect(
 //     "mongodb+srv://rehan:rehan@cluster0.qhfay.mongodb.net/sensors?retryWrites=true&w=majority",

Web App/Backend/models/mqttmessage.js

@@ -1,5 +1,7 @@
 const mongoose = require("mongoose");
 
+// let date = new Date();
+
 let mqttMessageSchema = mongoose.Schema(
   {
     macAddress: {
@@ -10,7 +12,14 @@ let mqttMessageSchema = mongoose.Schema(
       type: String,
     },
     Environment: [
-      { Temperautre: Number, Humidity: Number, Atmospheric_Pressure: Number },
+      {
+        Temperautre: Number,
+        Humidity: Number,
+        Atmospheric_Pressure: Number,
+        Time: { type: String, default: Date },
+
+        // Date: { type: String, default: date.toLocaleDateString() },
+      },
     ],
     Soil_Parameters: [
       {
@@ -20,12 +29,13 @@ let mqttMessageSchema = mongoose.Schema(
         Nitrogen: Number,
         Phosphorus: Number,
         Potassium: Number,
+        Time: { type: String, default: Date },
+        // Date: { type: String, default: date.toLocaleDateString() },
       },
     ],
   },
   { timestamps: true }
 );
-
 let mqttMessageModel = new mongoose.model("Mqttmessage", mqttMessageSchema);
 
 module.exports = mqttMessageModel;

Web App/Backend/routes/api/mqtt.js

@@ -2,6 +2,7 @@ const mqtt = require("mqtt");
 const express = require("express");
 const router = express.Router();
 const mqttMessgae = require("../../models/mqttmessage");
+const date = new Date();
 
 const topic = "data/#";
 const host = "34.214.65.82";

Web App/Frontend/src/assets/styles/main.css

@@ -3046,3 +3046,7 @@ section.ant-layout.ant-layout-has-sider.layout-dashboard.layout-profile
   box-shadow: 0 20px 27px rgb(0 0 0 / 5%) !important;
   border-radius: 50px !important;
 }
+.apex-x-axis {
+  margin-right: 100px;
+  padding: 50px;
+}

Web App/Frontend/src/components/chart/LineChart.js

@@ -1,5 +1,6 @@
 import ReactApexChart from "react-apexcharts";
 import React from "react";
+import "../../assets/styles/main.css";
 
 import { Typography } from "antd";
 import { MinusOutlined } from "@ant-design/icons";
@@ -20,7 +21,8 @@ const LineChart = ({ enData, soilData, data }) => {
   let enTime = [];
 
   data.map((d) => {
-    enTime.push(d.createdAt.split("T")[1].split(".")[0].slice(0, 5));
+    // enTime.push(d.createdAt.split("T")[1].split(".")[0].slice(0, 5));
+    enTime.push(d.createdAt);
     return 0;
   });
   // console.log(enTime);
@@ -95,10 +97,17 @@ const LineChart = ({ enData, soilData, data }) => {
       },
 
       xaxis: {
+        // type: "numeric",
         labels: {
+          trim: false,
+          // hideOverlappingLabels: false,
+          showDuplicates: false,
+          // tickAmount: 1,
+          // range: 10,
           style: {
-            fontSize: "14px",
+            fontSize: "10px",
             fontWeight: 600,
+            cssClass: "apex-x-axis",
             colors: [
               "#8c8c8c",
               "#8c8c8c",
@@ -111,7 +120,12 @@ const LineChart = ({ enData, soilData, data }) => {
               "#8c8c8c",
             ],
           },
+          itemMargin: {
+            horizontal: 15,
+            vertical: 10,
+          },
         },
+
         categories: enTime,
       },
 
@@ -187,7 +201,7 @@ const LineChart = ({ enData, soilData, data }) => {
       xaxis: {
         labels: {
           style: {
-            fontSize: "14px",
+            fontSize: "10px",
             fontWeight: 600,
             colors: [
               "#8c8c8c",
@@ -244,9 +258,12 @@ const LineChart = ({ enData, soilData, data }) => {
         </div>
         <div className="sales">
           <ul>
-            <li>{<MinusOutlined />} Termperature</li>
-            <li>{<MinusOutlined />} Humidity</li>
-            <li>{<MinusOutlined />} Atmospheric Pressure</li>
+            <li>{<MinusOutlined />}Soil_Moisture</li>
+            <li>{<MinusOutlined />}EC</li>
+            <li>{<MinusOutlined />}pH</li>
+            <li>{<MinusOutlined />}Nitrogen</li>
+            <li>{<MinusOutlined />}Phosphorus</li>
+            <li>{<MinusOutlined />}Potassium</li>
           </ul>
         </div>
       </div>

Web App/Frontend/src/pages/Data.js

@@ -28,9 +28,30 @@ const Data = () => {
   const [macAddress, setMacAddress] = useState("");
   const [userMacAddress, setUserMacAddress] = useState([]);
 
+  // let intervalId = null;
+
   const executeScroll = () => myRef.current.scrollIntoView();
   const executeScroll1 = () => myRef1.current.scrollIntoView();
 
+  const useInterval = (callback, delay) => {
+    const savedCallback = useRef();
+
+    // Remember the latest callback.
+    useEffect(() => {
+      savedCallback.current = callback;
+    }, [callback]);
+
+    // Set up the interval.
+    useEffect(() => {
+      function tick() {
+        savedCallback.current();
+      }
+      if (delay !== null) {
+        let id = setInterval(tick, delay);
+        return () => clearInterval(id);
+      }
+    }, [delay]);
+  };
   useEffect(() => {
     if (localStorage.getItem("user-info")) {
       history.push("/tables");
@@ -40,11 +61,10 @@ const Data = () => {
       console.log("Calling");
       smartAgri
         .post("/api/mqtt/getOne", {
-          macAddress,
+          macAddress: localStorage.getItem("macAddress"),
         })
         .then((res) => {
           console.log("Sucess");
-          localStorage.setItem("macAddress", JSON.stringify(macAddress));
           console.log(res.data.macAddress);
           setData(res.data);
         })
@@ -54,16 +74,38 @@ const Data = () => {
     };
     agriData();
   }, [macAddress]);
-  // console.log(data);
+
+  useEffect(() => {}, [data]);
+  useInterval(() => {
+    // Make the request here
+    smartAgri
+      .post("/api/mqtt/getOne", {
+        macAddress: localStorage.getItem("macAddress"),
+      })
+      .then((res) => {
+        console.log("Sucess");
+        // localStorage.setItem("macAddress", JSON.stringify(macAddress));
+        console.log(res.data);
+        setData(res.data);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, 1000 * 60);
+
   const environmentData = data.map((d) => {
     return d.Environment[0];
   });
-
   const soilData = data.map((d) => {
     return d.Soil_Parameters[0];
   });
 
   const environmentCol = [
+    {
+      title: "Date/Time",
+      dataIndex: "Time",
+      key: "Time",
+    },
     {
       title: "Temperature",
       dataIndex: "Temperautre",
@@ -83,6 +125,17 @@ const Data = () => {
   ];
 
   const soilCol = [
+    // {
+    //   title: "Date",
+    //   dataIndex: "Date",
+    //   key: "Date",
+    //   defaultSortOrder: "descend",
+    // },
+    {
+      title: "Date/Time",
+      dataIndex: "Time",
+      key: "Time",
+    },
     {
       title: "Soil Moisture",
       dataIndex: "Soil_Moisture",
@@ -148,6 +201,7 @@ const Data = () => {
   //Form Functions
   const onFinish = async (values) => {
     const id = getIdofLoggedInUser();
+    console.log(id);
     await smartAgri
       .put(`/api/users/update/${id}`, {
         macAddress: values.macAddress,
@@ -157,6 +211,7 @@ const Data = () => {
         message.success("Device Added");
       })
       .catch((err) => {
+        console.log("ER");
         console.log(err);
       });
   };
@@ -167,8 +222,10 @@ const Data = () => {
 
   //Select Functions
   function handleChange(value) {
-    setMacAddress(value);
-    console.log(`selected ${value}`);
+    localStorage.setItem("macAddress", value);
+
+    setMacAddress(localStorage.getItem("macAddress", value));
+    console.log(`selected ${localStorage.getItem("macAddress", value)}`);
   }
 
   const getMacAddresses = async () => {
@@ -271,17 +328,10 @@ const Data = () => {
           </Form>
         </Modal>
       </div>
-      {/* <Input
-        className="mac-search"
-        placeholder="Enter MacAddress"
-        onChange={(e) => {
-          setMacAddress(e.target.value);
-        }}
-        prefix={<SearchOutlined />}
-      /> */}
+
       <Select
         className="mac-search"
-        defaultValue="Select MacAddress"
+        defaultValue={localStorage.getItem("macAddress")}
         style={{ width: 120, borderRadius: "150px", marginBottom: "15px" }}
         onChange={handleChange}
         onClick={getMacAddresses}