Frontend & Backend Updated

Nauman3S · Dec 4, 2021 · 06e9be4 · 06e9be4
1 parent 221534b
commit 06e9be4
Show file tree

Hide file tree

Showing 6 changed files with 190 additions and 14 deletions.
diff --git a/Web App/Backend/package.json b/Web App/Backend/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./bin/www"
+    "start": "nodemon ./bin/www"
   },
   "dependencies": {
     "axios": "^0.22.0",

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/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
@@ -23,7 +23,7 @@ const LineChart = ({ enData, soilData, data }) => {
 
   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);

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 } from "antd";
 import { UploadOutlined } from "@ant-design/icons";
 import React, { useState } from "react";
 
@@ -59,13 +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">
@@ -107,14 +149,57 @@ function Sidenav({ color }) {
               <Button
                 type="primary"
                 htmlType="submit"
-                style={{ width: "100%" }}
+                style={{ width: "100%", borderRadius: "50px" }}
               >
                 Submit
               </Button>
             </Form.Item>
           </Form>
         </Menu.Item>
       </Menu>
+      <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>
+      <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: "50px" }}
+          />
+        </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);
@@ -248,6 +254,63 @@ const Data = () => {
 
   return (
     <>
+      <div className="flex-container" style={{ marginBottom: "10px" }}>
+        <Button
+          type="primary"
+          style={btnPublish}
+          // onClick={executeScroll}
+        >
+          Realy 1
+        </Button>
+        <Button
+          type="primary"
+          style={btnPublish}
+          // onClick={executeScroll}
+        >
+          Realy 2
+        </Button>
+        <Button
+          type="primary"
+          style={btnPublish}
+          // onClick={executeScroll}
+        >
+          Realy 3
+        </Button>
+        <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: "30%", borderRadius: "50px", marginTop: "10px" }}
+              // style={{ paddingTop: 23.5, paddingBottom: 23.5}}
+            />
+          </Form.Item>
+          <Form.Item>
+            <Button
+              type="primary"
+              htmlType="submit"
+              style={btnPublish}
+              // onClick={executeScroll}
+            >
+              Send Setting
+            </Button>
+          </Form.Item>
+        </Form>
+      </div>
       <div className="flex-container" style={{ marginBottom: "10px" }}>
         <Button
           type="primary"