78 lines
2.8 KiB
JavaScript
78 lines
2.8 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import { query, collection, onSnapshot } from 'firebase/firestore';
|
|
import Dropdown from 'react-dropdown';
|
|
import 'react-dropdown/style.css';
|
|
import moment from 'moment';
|
|
|
|
import db from '../firebase';
|
|
import './Calibrations.css';
|
|
|
|
const Calibrations = () => {
|
|
const [device, setDevice] = useState("Select a device");
|
|
const [devices, setDevices] = useState([]);
|
|
const [curDeviceData, setCurDeviceData] = useState(null);
|
|
|
|
const changeDevice = ({ value }) => {
|
|
setDevice(value);
|
|
}
|
|
|
|
const toggleShowDevice = () => {
|
|
console.log(devices.filter(x => x.deviceId === device))
|
|
setCurDeviceData(devices.find(x => x.deviceId === device));
|
|
// if (!device) {
|
|
// setCurDeviceData(devices.filter(x => x.deviceId === device));
|
|
// } else {
|
|
// setDevice(null);
|
|
// }
|
|
}
|
|
|
|
useEffect(() => {
|
|
if (!devices?.length) {
|
|
const q = query(collection(db, "devices"));
|
|
|
|
const unsub = onSnapshot(q, (querySnapshot) => {
|
|
const testDevices = [];
|
|
querySnapshot.forEach((document) => {
|
|
const deviceData = document.data();
|
|
testDevices.push(deviceData);
|
|
});
|
|
setDevices(testDevices);
|
|
});
|
|
|
|
return () => unsub;
|
|
}
|
|
}, [device, curDeviceData]);
|
|
|
|
return (
|
|
<div className="calibrations-page">
|
|
<div className='page-title'>Calibrations</div>
|
|
<div className='dropdown-group'>
|
|
<Dropdown className='device-dropdown' options={devices?.map(x => x.deviceId)} onChange={changeDevice} value={device} placeholder="Select an device" />
|
|
|
|
<button className='clear-button' onClick={toggleShowDevice}><img className="graph-icon" src={require('../assets/graph_icon.png')} alt='icon'></img>{device ? 'Clear' : 'Show'}</button>
|
|
</div>
|
|
|
|
<div className='graph-person-conatiner'>
|
|
{curDeviceData && <div className='test-details'>
|
|
<table>
|
|
<tr>
|
|
<th>key</th>
|
|
<th>value</th>
|
|
</tr>
|
|
<tr>
|
|
<td>device</td> <td>{curDeviceData?.deviceId} </td>
|
|
</tr>
|
|
<tr>
|
|
<td>calibratedAt</td> <td>{curDeviceData?.calibratedAt} </td>
|
|
</tr>
|
|
<tr>
|
|
<td>coefficients</td> <td>{curDeviceData?.coefficients?.toString()} </td>
|
|
</tr>
|
|
</table>
|
|
</div>}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Calibrations; |