add device data page

src/components/Diagnostics.js

@@ -0,0 +1,68 @@
+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>Diagnostics</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.testTime).format('HH:mm:ss')}</td>
+                        </tr>
+                    ))}
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default Diagnostics;

src/routes/appRoutes.js

@@ -7,7 +7,7 @@ import Devices from '../components/Devices';
 import { Download, FactCheck } from '@mui/icons-material';
 import ExportData from '../components/ExportData';
 import Registration from '../components/Registration';
-import { FaAndroid, FaArrowCircleLeft, FaBars, FaBezierCurve, FaChalkboardTeacher, FaChartArea, FaChartLine, FaCheck, FaCommentAlt, FaExclamation, FaFlask, FaGolfBall, FaPhone, FaQuestionCircle, FaSearch, FaUser } from 'react-icons/fa';
+import { FaAndroid, FaArrowCircleLeft, FaBars, FaBezierCurve, FaChalkboardTeacher, FaChartArea, FaChartLine, FaCheck, FaCommentAlt, FaExclamation, FaFlask, FaGolfBall, FaMicrochip, FaPhone, FaQuestionCircle, FaSearch, FaUser } from 'react-icons/fa';
 import AppInstallation from '../components/AppInstallation';
 import Samples from '../components/Samples';
 import Precision from '../components/Precision';
@@ -15,6 +15,7 @@ import Accuracy from '../components/Accuracy';
 import CurveFit from '../components/CurveFit';
 import Help from '../components/Help';
 import Gemini from '../components/Gemini';
+import Diagnostics from '../components/Diagnostics';
 
 const appRoutes = [
     {
@@ -76,6 +77,15 @@ const appRoutes = [
             icon: <FaFlask />
         }
     },
+    {
+        path: "/diagnostics",
+        element: <Diagnostics />,
+        state: "Diagnostics",
+        sidebarProps: {
+            displayText: "Device Data",
+            icon: <FaMicrochip />
+        }
+    },
     // {
     //     path: "/precision",
     //     element: <Precision />,