Merge branch 'main' of https://github.com/Nauman3S/SmartAgri

Nauman3S · Dec 4, 2021 · a87f241 · a87f241
2 parents 0f5b29e + e228649
commit a87f241
Show file tree

Hide file tree

Showing 8 changed files with 155 additions and 32 deletions.
diff --git a/Web App/Backend/Backend.tar b/Web App/Backend/Backend.tar
diff --git a/Web App/Backend/routes/api/mqtt.js b/Web App/Backend/routes/api/mqtt.js
@@ -9,6 +9,14 @@ const host = "34.214.65.82";
 const port = "1883";
 const clientId = `mqtt_${Math.random().toString(16).slice(3)}`;
 const connectUrl = `mqtt://${host}:${port}`;
+const client = mqtt.connect(connectUrl, {
+  clientId,
+  clean: true,
+  connectTimeout: 4000000,
+  username: "hello",
+  password: "hello",
+  reconnectPeriod: 1000000,
+});
 //Get all Devices Data
 router.get("/", async (req, res) => {
   try {
@@ -33,15 +41,6 @@ router.post("/getOne", async (req, res) => {
 });
 router.post("/", async (req, res) => {
   try {
-    const client = mqtt.connect(connectUrl, {
-      clientId,
-      clean: true,
-      connectTimeout: 4000000,
-      username: "hello",
-      password: "hello",
-      reconnectPeriod: 1000000,
-    });
-
     client.on("connect", () => {
       console.log("Connected");
       client.subscribe([topic], () => {
@@ -69,4 +68,28 @@ router.post("/", async (req, res) => {
   }
 });
 
+router.post("/publish/:macAddress/:button", async (req, res) => {
+  try {
+    let { message } = req.body;
+
+    // console.log(message);
+    console.log(req.params.macAddress);
+    console.log(req.params.button);
+
+    client.publish(
+      `${req.params.macAddress}/${req.params.button}`,
+      message,
+      { qos: 0, retain: false },
+      (error) => {
+        if (error) {
+          console.error(error);
+        }
+      }
+    );
+    return res.status(200).send("Message Published  ");
+  } catch (e) {
+    console.log(e);
+  }
+});
+
 module.exports = router;
diff --git a/Web App/Frontend/Frontend.tar b/Web App/Frontend/Frontend.tar
diff --git a/Web App/Frontend/package.json b/Web App/Frontend/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "muse-ant-design-dashboard",
+  "name": "smart-agri",
   "version": "1.0.0",
   "private": true,
   "dependencies": {

diff --git a/Web App/Frontend/src/assets/styles/main.css b/Web App/Frontend/src/assets/styles/main.css
@@ -3050,3 +3050,8 @@ section.ant-layout.ant-layout-has-sider.layout-dashboard.layout-profile
   margin-right: 100px;
   padding: 50px;
 }
+
+.btn-publish {
+  padding-left: 11;
+  border-radius: "50px";
+}
diff --git a/Web App/Frontend/src/components/chart/LineChart.js b/Web App/Frontend/src/components/chart/LineChart.js
@@ -17,12 +17,13 @@ const LineChart = ({ enData, soilData, data }) => {
   let pH = [];
   let nitrogen = [];
   let phosphorus = [];
+  let potassium = [];
 
   let enTime = [];
 
   data.map((d) => {
     // enTime.push(d.createdAt.split("T")[1].split(".")[0].slice(0, 5));
-    enTime.push(d.createdAt);
+    enTime.reverse().push(d.createdAt);
     return 0;
   });
   // console.log(enTime);
@@ -41,6 +42,7 @@ const LineChart = ({ enData, soilData, data }) => {
     pH.push(d.pH);
     nitrogen.push(d.Nitrogen);
     phosphorus.push(d.Phosphorus);
+    potassium.push(d.Potassium);
 
     return 0;
   });
@@ -165,6 +167,11 @@ const LineChart = ({ enData, soilData, data }) => {
         data: phosphorus,
         offsetY: 0,
       },
+      {
+        name: "Potassium",
+        data: potassium,
+        offsetY: 0,
+      },
     ],
 
     options: {

diff --git a/Web App/Frontend/src/components/layout/Sidenav.js b/Web App/Frontend/src/components/layout/Sidenav.js
@@ -1,4 +1,4 @@
-import { Menu, Upload, message, Button, Form } from "antd";
+import { Menu, Upload, message, Button, Form, Input, Divider } from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import React, { useState } from "react";
 
@@ -59,12 +59,55 @@ function Sidenav({ color }) {
     </svg>,
   ];
 
+  const publishToMqtt = (topic, msg) => {
+    let macaddress = localStorage.getItem("macAddress");
+
+    smartAgri
+      .post(`/api/mqtt/publish/${macaddress}/${topic}`, {
+        message: msg,
+      })
+      .then((res) => {
+        console.log(res);
+        setUploadList(false);
+
+        message.success("Message Published");
+      })
+      .catch((err) => {
+        console.log("In err");
+        setUploadList(false);
+        message.error("Cant Upload");
+        console.log(err);
+      });
+  };
+
+  const handleRe1 = () => {
+    publishToMqtt("relay", "1");
+  };
+  const handleRe2 = () => {
+    publishToMqtt("relay", "2");
+  };
+  const handleRe3 = () => {
+    publishToMqtt("relay", "3");
+  };
+  const onFinish = (values) => {
+    console.log(values.settings);
+    publishToMqtt("settings", values.settings);
+  };
+
+  const onFinishFailed = () => {};
   const beforeUpload = (file) => {
+    console.log(file);
     setDta(file);
     console.log("INFOLEreder");
 
     return false;
   };
+  const btnPublish = {
+    marginTop: "20px",
+    // marginLeft: "0px",
+    borderRadius: "50px",
+    width: "100%",
+  };
   return (
     <>
       <div className="brand">
@@ -106,14 +149,60 @@ function Sidenav({ color }) {
               <Button
                 type="primary"
                 htmlType="submit"
-                style={{ width: "100%" }}
+                style={{ width: "100%", borderRadius: "50px" }}
               >
                 Submit
               </Button>
             </Form.Item>
           </Form>
         </Menu.Item>
       </Menu>
+      <Divider style={{ marginTop: "5px" }} />
+
+      <Button type="primary" style={btnPublish} onClick={handleRe1}>
+        Realy 1
+      </Button>
+      <Button type="primary" style={btnPublish} onClick={handleRe2}>
+        Realy 2
+      </Button>
+      <Button type="primary" style={btnPublish} onClick={handleRe3}>
+        Realy 3
+      </Button>
+      <Divider style={{ marginTop: "40px" }} />
+      <Form
+        onFinish={onFinish}
+        onFinishFailed={onFinishFailed}
+        layout="vertical"
+        className="row-col"
+      >
+        <Form.Item
+          className="username"
+          label=""
+          name="settings"
+          rules={[
+            {
+              required: true,
+              message: "Please Enter Settings",
+            },
+          ]}
+        >
+          <Input
+            placeholder="Enter Settings"
+            style={{ width: "100%", borderRadius: "50px", marginTop: "20px" }}
+          />
+        </Form.Item>
+        <Form.Item>
+          <Button
+            type="primary"
+            htmlType="submit"
+            style={btnPublish}
+            // onClick={executeScroll}
+            style={{ marginTop: "0px", borderRadius: "50px", width: "100%" }}
+          >
+            Send Settings
+          </Button>
+        </Form.Item>
+      </Form>
     </>
   );
 }

diff --git a/Web App/Frontend/src/pages/Data.js b/Web App/Frontend/src/pages/Data.js
@@ -1,7 +1,7 @@
-import "../assets/styles/main.css";
 import React, { useEffect, useState, useRef } from "react";
 import history from "../utils/CreateBrowserHistory";
 import LineChart from "../components/chart/LineChart";
+import "../assets/styles/main.css";
 
 import smartAgri from "../api/smartAgri";
 import {
@@ -20,6 +20,12 @@ import {
 
 const { Option } = Select;
 
+const btnPublish = {
+  paddingLeft: 11,
+  borderRadius: "50px",
+  marginLeft: "10px",
+};
+
 const Data = () => {
   const myRef = useRef(null);
   const myRef1 = useRef(null);
@@ -56,25 +62,24 @@ const Data = () => {
     if (localStorage.getItem("user-info")) {
       history.push("/tables");
     }
-    console.log("In USE");
+    // console.log("In USE");
     const agriData = () => {
-      console.log("Calling");
+      // console.log("Calling");
       smartAgri
         .post("/api/mqtt/getOne", {
           macAddress: localStorage.getItem("macAddress"),
         })
         .then((res) => {
-          console.log("Sucess");
-          console.log(res.data.macAddress);
-          setData(res.data);
+          // console.log("Sucess");
+          // console.log(res.data.macAddress);
+          setData(res.data.reverse());
         })
         .catch((err) => {
           console.log(err);
         });
     };
     agriData();
   }, [macAddress]);
-
   useEffect(() => {}, [data]);
   useInterval(() => {
     // Make the request here
@@ -83,10 +88,10 @@ const Data = () => {
         macAddress: localStorage.getItem("macAddress"),
       })
       .then((res) => {
-        console.log("Sucess");
+        // console.log("Sucess");
         // localStorage.setItem("macAddress", JSON.stringify(macAddress));
-        console.log(res.data);
-        setData(res.data);
+        // console.log(res.data);
+        setData(res.data.reverse());
       })
       .catch((err) => {
         console.log(err);
@@ -125,12 +130,6 @@ const Data = () => {
   ];
 
   const soilCol = [
-    // {
-    //   title: "Date",
-    //   dataIndex: "Date",
-    //   key: "Date",
-    //   defaultSortOrder: "descend",
-    // },
     {
       title: "Date/Time",
       dataIndex: "Time",
@@ -201,7 +200,7 @@ const Data = () => {
   //Form Functions
   const onFinish = async (values) => {
     const id = getIdofLoggedInUser();
-    console.log(id);
+    // console.log(id);
     await smartAgri
       .put(`/api/users/update/${id}`, {
         macAddress: values.macAddress,
@@ -211,7 +210,7 @@ const Data = () => {
         message.success("Device Added");
       })
       .catch((err) => {
-        console.log("ER");
+        // console.log("ER");
         console.log(err);
       });
   };
@@ -225,7 +224,7 @@ const Data = () => {
     localStorage.setItem("macAddress", value);
 
     setMacAddress(localStorage.getItem("macAddress", value));
-    console.log(`selected ${localStorage.getItem("macAddress", value)}`);
+    // console.log(`selected ${localStorage.getItem("macAddress", value)}`);
   }
 
   const getMacAddresses = async () => {