68 lines
2.4 KiB
JavaScript
68 lines
2.4 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
|
import { query, collection, onSnapshot, where, orderBy, limit } from 'firebase/firestore';
|
|
import moment from 'moment';
|
|
|
|
import db from '../firebase';
|
|
import './Diagnostics.css';
|
|
|
|
const Diagnostics = () => {
|
|
const [samples, setSamples] = useState([]);
|
|
|
|
useEffect(() => {
|
|
if (!samples.length) {
|
|
const q = query(collection(db, "diagnostics"), where("runTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("runTime", "desc"));
|
|
|
|
const unsub = onSnapshot(q, (querySnapshot) => {
|
|
const samples = [];
|
|
querySnapshot.forEach((document) => {
|
|
console.log(document.id);
|
|
const data = document.data();
|
|
const id = document.id;
|
|
samples.push({id, ...data});
|
|
});
|
|
setSamples(samples);
|
|
});
|
|
|
|
return () => unsub;
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div>
|
|
{/* <div className='samples-heading'><h3>Samples page for denovix useage</h3></div>
|
|
{samples.length ? (
|
|
samples.map((alert, index) => (
|
|
<div key={index} className='samples-card'>
|
|
<div tabIndex={index}><strong>{alert._id}</strong></div>
|
|
<p className='sample-time'>{alert.testTime}</p>
|
|
<p className='sample-time-ago'>{moment(alert.testTime).fromNow()}</p>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className='no-samples-message'>Samples will appear as in when a test is recorded</div>
|
|
)} */}
|
|
|
|
|
|
<h1>Device Data</h1>
|
|
|
|
<div className='samples-container'>
|
|
<table id="samples-table">
|
|
<tr>
|
|
<th>Device</th>
|
|
<th>Raw Data</th>
|
|
<th>Time</th>
|
|
</tr>
|
|
{samples.map((sample, index) => (
|
|
<tr key={index} className='samples-table-tr'>
|
|
<td>{sample.deviceId}</td>
|
|
<td>{sample.deviceData || 'NA'}</td>
|
|
<td>{moment(sample.runTime).format('HH:mm:ss')}</td>
|
|
</tr>
|
|
))}
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Diagnostics; |