@@ -3,6 +3,11 @@ import React, { useState, useEffect } from "react";
3
3
import { Chart } from "react-google-charts" ;
4
4
import Navbar from "./components/Navbar" ;
5
5
import { Typography } from '@mui/material' ;
6
+ import Card from '@mui/material/Card' ;
7
+ import CardContent from '@mui/material/CardContent' ;
8
+ import Box from '@mui/material/Box' ;
9
+ import Container from '@mui/material/Container' ;
10
+ import Grid from '@mui/material/Unstable_Grid2' ;
6
11
7
12
const SensorChart = ( { data } ) => {
8
13
const options = {
@@ -29,30 +34,51 @@ const NoDataMessage = () => {
29
34
)
30
35
}
31
36
37
+ const ActuatorCard = ( { title, value, testId } ) => {
38
+ return (
39
+ < Card style = { { height : "180px" } } data-testId = { testId } >
40
+ < React . Fragment >
41
+ < CardContent >
42
+ < Typography sx = { { fontSize : 14 } } color = "text.secondary" gutterBottom >
43
+ { title } :
44
+ </ Typography >
45
+ < Typography sx = { { fontSize : 48 } } color = "text.primary" gutterBottom data-testid = { testId + "Value" } >
46
+ { value }
47
+ </ Typography >
48
+ </ CardContent >
49
+ </ React . Fragment >
50
+ </ Card >
51
+ )
52
+ }
53
+
32
54
function App ( ) {
33
- const [ data , setData ] = useState ( [ ] )
55
+ const [ sensorData , setSensorData ] = useState ( [ ] )
56
+ const [ soilActuatorData , setSoilActuatorData ] = useState ( 0 )
57
+ const [ tempActuatorData , setTempActuatorData ] = useState ( 0 )
58
+ const [ humidActuatorData , setHumidActuatorData ] = useState ( 0 )
34
59
35
60
useEffect ( ( ) => {
36
61
subscribe ( )
37
62
} , [ ] )
38
63
39
-
40
64
const subscribe = ( function ( ) {
41
65
var executed = false ;
42
66
return function ( ) {
43
67
if ( ! executed ) {
44
68
executed = true ;
45
69
getSensorReadings ( )
70
+ getActuatorReadings ( )
46
71
setInterval ( ( ) => {
47
72
getSensorReadings ( )
73
+ getActuatorReadings ( )
48
74
} , 10000 ) ;
49
75
}
50
76
} ;
51
77
} ) ( ) ;
52
78
53
- const fetchSensorReadings = async ( ) => {
79
+ const fetchReadings = async ( path ) => {
54
80
try {
55
- const response = await fetch ( `${ process . env . REACT_APP_EVENTPROCESSOR_URL } ` , {
81
+ const response = await fetch ( `${ process . env . REACT_APP_EVENTPROCESSOR_URL } / ${ path } ` , {
56
82
method : "GET" ,
57
83
headers : {
58
84
accept : "application/json" ,
@@ -70,15 +96,42 @@ function App() {
70
96
}
71
97
72
98
const getSensorReadings = async ( ) => {
73
- const result = await fetchSensorReadings ( )
99
+ const result = await fetchReadings ( "sensors" )
100
+
101
+ if ( result !== undefined && result . length > 0 ) {
102
+ const formattedData = formatSensorData ( result )
103
+ setSensorData ( formattedData )
104
+ }
105
+ }
106
+
107
+ const getActuatorReadings = async ( ) => {
108
+ const result = await fetchReadings ( "actuators" )
74
109
75
- if ( result . length > 0 ) {
76
- const formattedData = formatToChartData ( result )
77
- setData ( formattedData )
110
+ if ( result !== undefined && result . length > 0 ) {
111
+ setActuatorData ( result )
78
112
}
79
113
}
80
114
81
- const formatToChartData = ( result ) => {
115
+ const setActuatorData = ( result ) => {
116
+ result . forEach ( reading => {
117
+ switch ( reading . sensor_type ) {
118
+ case "Soil Moisture" :
119
+ setSoilActuatorData ( soilActuatorData + 1 )
120
+ break ;
121
+ case "Temperature" :
122
+ setTempActuatorData ( tempActuatorData + 1 )
123
+ break ;
124
+ case "Humidity" :
125
+ setHumidActuatorData ( humidActuatorData + 1 )
126
+ break ;
127
+ default :
128
+ console . log ( "sensor type not recognised" )
129
+ break ;
130
+ }
131
+ } )
132
+ }
133
+
134
+ const formatSensorData = ( result ) => {
82
135
let data = [ ]
83
136
let lines = [ "Time" ]
84
137
let rows = [ ]
@@ -111,7 +164,22 @@ function App() {
111
164
return (
112
165
< div className = "App" >
113
166
< Navbar />
114
- { data . length === 0 ? < NoDataMessage /> : < SensorChart data = { data } /> }
167
+ < Container fixed style = { { paddingTop : "20px" } } >
168
+ < Box sx = { { flexGrow : 1 , minWidth : 275 } } style = { { paddingBottom : "30px" } } >
169
+ < Grid container spacing = { 2 } >
170
+ < Grid xs = { 4 } >
171
+ < ActuatorCard title = "No. of Soil Mositure Actuator Triggers from a Mositure <= 200" value = { soilActuatorData } testId = "soilCard" />
172
+ </ Grid >
173
+ < Grid xs = { 4 } >
174
+ < ActuatorCard title = "No. of Temperature Actuator Triggers from a Temperature <= 5°C" value = { tempActuatorData } testId = "tempCard" />
175
+ </ Grid >
176
+ < Grid xs = { 4 } >
177
+ < ActuatorCard title = "No. of Humidity Actuator Triggers from a Humidity <= 20%" value = { humidActuatorData } testId = "humidCard" />
178
+ </ Grid >
179
+ </ Grid >
180
+ </ Box >
181
+ { sensorData . length === 0 ? < NoDataMessage /> : < SensorChart data = { sensorData } /> }
182
+ </ Container >
115
183
</ div >
116
184
) ;
117
185
}
0 commit comments