57 lines
1.9 KiB
JavaScript
57 lines
1.9 KiB
JavaScript
import React from 'react'
|
|
import { Card, CardDeck } from 'react-bootstrap';
|
|
import {ActiveDeviceCollection, SensorDataCollection} from "../../client/main";
|
|
import {useTracker} from 'meteor/react-meteor-data';
|
|
|
|
export default function SensorCardDeck() {
|
|
const deviceName = useTracker(() => {
|
|
return ActiveDeviceCollection.find().fetch()[0];
|
|
});
|
|
|
|
const sensorData = useTracker(() => {
|
|
return SensorDataCollection.find({ device_id: deviceName.deviceName }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
|
|
});
|
|
|
|
|
|
if (sensorData.length <= 0) {
|
|
return (
|
|
<CardDeck>
|
|
<Card>
|
|
<Card.Body>
|
|
<Card.Title>Loading!</Card.Title>
|
|
<Card.Text>Please wait...</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
</CardDeck>
|
|
)
|
|
} else {
|
|
return (
|
|
<CardDeck>
|
|
<Card>
|
|
<Card.Body>
|
|
<Card.Title>Temperature</Card.Title>
|
|
<Card.Text>{sensorData[0].temperature} °C</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
<Card>
|
|
<Card.Body>
|
|
<Card.Title>Humidity</Card.Title>
|
|
<Card.Text>{sensorData[0].humidity} %</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
<Card>
|
|
<Card.Body>
|
|
<Card.Title>Brightness</Card.Title>
|
|
<Card.Text>{sensorData[0].brightness} lux</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
<Card>
|
|
<Card.Body>
|
|
<Card.Title>Moisture</Card.Title>
|
|
<Card.Text>{sensorData[0].moisture} %</Card.Text>
|
|
</Card.Body>
|
|
</Card>
|
|
</CardDeck>
|
|
)
|
|
}
|
|
} |