calibration

src/components/Calibrations.js

@@ -0,0 +1,81 @@
+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="devices-page">
+            <div className='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" />
+                {/* <Select className='device-dropdown' options={devices.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeDevice} />
+                <Select className='day-dropdown' options={days.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={250} menuShouldScrollIntoView={true} onChange={changeTestDate} />
+                <Select className='test-dropdown' options={tests.map(x => { return { value: x, label: x }; })} menuPlacement='auto' maxMenuHeight={220} menuShouldScrollIntoView={true} onChange={changeTestDate} /> */}
+
+                <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;

src/index.js

@@ -11,6 +11,7 @@ import Devices from './components/Devices';
 import TestAnalytics from './components/TestAnalytics';
 import WorldMap from './components/WorldMap';
 import RegistraionChart from './RegistraionChart';
+import Calibrations from './components/Calibrations';
 
 const router = createBrowserRouter([
   {
@@ -32,6 +33,10 @@ const router = createBrowserRouter([
   {
     path: "/map",
     element: <RegistraionChart />,
+  },
+  {
+    path: "/calibrations",
+    element: <Calibrations />,
   }
 ]);