smart_garden_server/imports/ui/SensorCardDeck.jsx
2020-07-14 16:49:36 +02:00

39 lines
1.3 KiB
JavaScript

import React from 'react'
import { Card, CardDeck } from 'react-bootstrap';
import {SensorDataCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data';
export default function SensorCardDeck() {
const sensorData = useTracker(() => {
return SensorDataCollection.find({ device_id: 'esp-andy' }, { sort: { timestamp: -1 }, limit: 1 }).fetch();
});
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>
)
}