smart_garden_server/imports/ui/Home.jsx

93 lines
3.9 KiB
JavaScript

import React from 'react'
import {ConfiguredDevicesCollection, PlantTypesCollection} from "../../client/main";
import {useTracker} from 'meteor/react-meteor-data';
import { Table } from "react-bootstrap";
import Settings from "./Settings";
export default function Home() {
// Return all documents of the configuredDevices collection.
const configuredDevices = useTracker(() => {
return ConfiguredDevicesCollection.find().fetch();
});
// Return the soil type of the given plant type.
function getSoil(type) {
const plantType = PlantTypesCollection.findOne({plantType: type});
return plantType.dirtType
}
// Return the permanent wilting point of the given plant type.
function getPermWilPoint(type) {
const plantType = PlantTypesCollection.findOne({plantType: type});
return plantType.data.soilMoisture.pwp
}
// Return the field capacity of the given plant type.
function getFieldCap(type) {
const plantType = PlantTypesCollection.findOne({plantType: type});
return plantType.data.soilMoisture.fc
}
// Return the minimal temperature of the given plant type.
function getMinTemp(type) {
const plantType = PlantTypesCollection.findOne({plantType: type});
return plantType.data.temperature.minTemp
}
// Return the maximal temperature of the given plant type.
function getMaxTemp(type) {
const plantType = PlantTypesCollection.findOne({plantType: type});
return plantType.data.temperature.maxTemp
}
// Return the minimal lux value of the given plant type.
function getMinLux(type) {
const plantType = PlantTypesCollection.findOne({plantType: type});
return plantType.data.light.minLux
}
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={'mode'}>Mode</th>
<th key={'pwp'}>Permanent Wilting Point</th>
<th key={'fc'}>Field Capacity</th>
<th key={'minTemp'}>Min Temperature</th>
<th key={'maxTemp'}>Max 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={'mode-' + index}>{device.mode}</td>
<td key={'pwp-' + index}>{getPermWilPoint(device.type) + " %"}</td>
<td key={'fc-' + index}>{getFieldCap(device.type) + " %"}</td>
<td key={'minTemp-' + index}>{getMinTemp(device.type) + " °C"}</td>
<td key={'maxTemp-' + index}>{getMaxTemp(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>
</>
)
}