Skip to content

Commit

Permalink
Merge pull request #6 from RehanShakir/WebApp
Browse files Browse the repository at this point in the history 
Frontend Updated
  • Loading branch information
@Nauman3S
Nauman3S authored Nov 22, 2021
2 parents 4461046 + 5ddcaab commit 1c32bbb
Show file tree
Hide file tree
Showing 8 changed files with 105 additions and 25 deletions.
Binary file added Web App/Backend/Backend.tar
View file
Binary file not shown.
2 changes: 0 additions & 2 deletions Web App/Backend/db/connection.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
14 changes: 12 additions & 2 deletions Web App/Backend/models/mqttmessage.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
const mongoose = require("mongoose");

// let date = new Date();

let mqttMessageSchema = mongoose.Schema(
{
macAddress: {
Expand All @@ -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: [
{
Expand All @@ -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;
1 change: 1 addition & 0 deletions Web App/Backend/routes/api/mqtt.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down
Binary file added Web App/Frontend/Frontend.tar
View file
Binary file not shown.
4 changes: 4 additions & 0 deletions Web App/Frontend/src/assets/styles/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
29 changes: 23 additions & 6 deletions Web App/Frontend/src/components/chart/LineChart.js
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -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",
Expand All @@ -111,7 +120,12 @@ const LineChart = ({ enData, soilData, data }) => {
"#8c8c8c",
],
},
itemMargin: {
horizontal: 15,
vertical: 10,
},
},

categories: enTime,
},

Expand Down Expand Up @@ -187,7 +201,7 @@ const LineChart = ({ enData, soilData, data }) => {
xaxis: {
labels: {
style: {
fontSize: "14px",
fontSize: "10px",
fontWeight: 600,
colors: [
"#8c8c8c",
Expand Down Expand Up @@ -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>
Expand Down
80 changes: 65 additions & 15 deletions Web App/Frontend/src/pages/Data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand All @@ -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);
})
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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,
Expand All @@ -157,6 +211,7 @@ const Data = () => {
message.success("Device Added");
})
.catch((err) => {
console.log("ER");
console.log(err);
});
};
Expand All @@ -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 () => {
Expand Down Expand Up @@ -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}
Expand Down

0 comments on commit 1c32bbb

Please sign in to comment.