110 lines
4.1 KiB
JavaScript
110 lines
4.1 KiB
JavaScript
import React from 'react'
|
|
import {
|
|
SensorDataCollection,
|
|
ActiveDeviceCollection,
|
|
ConfiguredDevicesCollection,
|
|
PlantTypesCollection
|
|
} from "../../client/main";
|
|
import {useTracker} from 'meteor/react-meteor-data';
|
|
import { Card, CardDeck, Table } from "react-bootstrap";
|
|
import Settings from "./Settings";
|
|
|
|
export default function Home() {
|
|
const deviceId = useTracker(() => {
|
|
return ActiveDeviceCollection.find().fetch()[0];
|
|
});
|
|
|
|
const sensorData = useTracker(() => {
|
|
if (deviceId === null || deviceId === undefined) {
|
|
return [];
|
|
} else {
|
|
return SensorDataCollection.find({device_id: deviceId.deviceId}, {
|
|
sort: {timestamp: -1},
|
|
limit: 61
|
|
}).fetch().reverse();
|
|
}
|
|
});
|
|
|
|
const configuredDevices = useTracker(() => {
|
|
return ConfiguredDevicesCollection.find().fetch();
|
|
});
|
|
|
|
function getSoil(type) {
|
|
const plantType = PlantTypesCollection.findOne({plantType: type});
|
|
return plantType.dirtType
|
|
}
|
|
|
|
function getPermWilPoint(type) {
|
|
const plantType = PlantTypesCollection.findOne({plantType: type});
|
|
return plantType.data.soilMoisture.pwp
|
|
}
|
|
|
|
function getFieldCap(type) {
|
|
const plantType = PlantTypesCollection.findOne({plantType: type});
|
|
return plantType.data.soilMoisture.fc
|
|
}
|
|
|
|
function getMinTemp(type) {
|
|
const plantType = PlantTypesCollection.findOne({plantType: type});
|
|
return plantType.data.temperature.minTemp
|
|
}
|
|
|
|
function getMinLux(type) {
|
|
const plantType = PlantTypesCollection.findOne({plantType: type});
|
|
return plantType.data.light.minLux
|
|
}
|
|
|
|
|
|
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 (
|
|
<>
|
|
<Table striped bordered hover responsive>
|
|
<thead>
|
|
<tr key={'head'}>
|
|
<th key={'#'}>#</th>
|
|
<th key={'nickname'}>Device Nickname</th>
|
|
<th key={'id'}>Device ID</th>
|
|
<th key={'type'}>Plant Type</th>
|
|
<th key={'soil'}>Soil Type</th>
|
|
<th key={'pwp'}>Permanent Wilting Point</th>
|
|
<th key={'fc'}>Field Capacity</th>
|
|
<th key={'temp'}>Min Temperature</th>
|
|
<th key={'brightness'}>Min Brightness</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{configuredDevices.map((device, index) => {
|
|
return <tr key={'body' + index}>
|
|
<td key={'#-' + index}>{index}</td>
|
|
<td key={'nickname-' + index}>{device.alias}</td>
|
|
<td key={'id-' + index}>{device.deviceId}</td>
|
|
<td key={'type-' + index}>{device.type}</td>
|
|
<td key={'soil-' + index}>{getSoil(device.type)}</td>
|
|
<td key={'pwp-' + index}>{getPermWilPoint(device.type) + " %"}</td>
|
|
<td key={'fc-' + index}>{getFieldCap(device.type) + " %"}</td>
|
|
<td key={'temp-' + index}>{getMinTemp(device.type) + " °C"}</td>
|
|
<td key={'brightness-' + index}>{getMinLux(device.type) + " lux"}</td>
|
|
</tr>
|
|
})}
|
|
</tbody>
|
|
</Table>
|
|
<br></br>
|
|
<h4>If your device is not visible in the table above, configure it here below.</h4>
|
|
<br></br>
|
|
<br></br>
|
|
<Settings></Settings>
|
|
</>
|
|
)
|
|
}
|
|
} |