smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add sorting in date and test dropdowns

Browse Source
This commit is contained in:
prisar
2023-07-22 13:51:20 +05:30
parent 93208b00c8
commit a12dd7fd9c
5 changed files with 22 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Devices.js
View File

@@ -18,6 +18,7 @@ const Devices = () => {
const [days, setDays] = useState([]);
const [tests, setTests] = useState([]);
const [allTests, setAllTests] = useState(null);
const [showGraph, setShowGraph] = useState(false);
const changeDevice = ({ value }) => {
console.log(value);
@@ -27,7 +28,9 @@ const Devices = () => {
.filter((x) => {
if (x.deviceSerialNumber === device) return x;
})
.map(x => moment(x.testTime).format("YYYY-MM-DD")))]);
.map(x => moment(x.testTime).format("YYYY-MM-DD")))]
.sort()
.reverse());
// setTests(allTests
// .filter((x) => {
// if (x.deviceSerialNumber === device && x.testTime === ) return x;
@@ -39,18 +42,21 @@ const Devices = () => {
setTestDate(value);
setCurTest(null);
setCurTestData(null);
setShowGraph(false);
setTests(allTests
.filter((x) => {
if (x.deviceSerialNumber === device && moment(x.testTime).isBetween(moment(testDate).startOf('day'), moment(testDate).endOf('day'))) return x;
})
.map(x => x._id));
.map(x => x._id)
.sort());
}
const changeTest = ({ value }) => {
setCurTest(null); setCurTestData(null);
setCurTest(null); setCurTestData(null); setShowGraph(false);
if (curTest) alert('Click clear button first');
setCurTest(value);
setCurTestData(allTests.find(x => x._id === value));
setShowGraph(true);
}
useEffect(() => {
@@ -79,15 +85,15 @@ const Devices = () => {
<div>
<div className='title'>Insights</div>
<div className='dropdown-group'>
<Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an option" />
<Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an option" />
<Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an option" />
<Dropdown className='device-dropdown' options={devices} onChange={changeDevice} value={device} placeholder="Select an device" />
<Dropdown className='day-dropdown' options={days} onChange={changeTestDate} value={testDate} placeholder="Select an test date" />
<Dropdown className='test-dropdown' options={tests} onChange={changeTest} value={curTest} placeholder="Select an test" />
<button className='clear-button' onClick={() => { setCurTest(null); setCurTestData(null); }}>Clear</button>
</div>
<div className='graph-person-conatiner'>
{!curTestData && <div className='refresh-graph-message'>Select test device, date and person to get the detailed graph. Then, refresh or click clear button to render another entry.</div>}
{curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} />}
{curTestData?.csvPath && <DeviceGraph url={curTestData?.csvPath} show={showGraph} />}
{curTestData && <div className='person-details'>
<table>
@@ -96,10 +102,10 @@ const Devices = () => {
<th>value</th>
</tr>
<tr>
<td>deviceid</td> <td>{curTestData?.deviceId}</td>
<td>device</td> <td>{curTestData?.deviceId}</td>
</tr>
<tr>
<td>kit serial</td> <td>{curTestData?.kitSerial}</td>
<td>kit</td> <td>{curTestData?.kitSerial}</td>
</tr>
<tr>
<td>test time</td> <td>{curTestData?.testTime}</td>