add samples page

src/components/Samples.css

@@ -0,0 +1,38 @@
+#samples-table {
+    font-family: Arial, Helvetica, sans-serif;
+    border-collapse: collapse;
+    width: 100%;
+}
+
+#samples-table td,
+#samples-table th {
+    border: 1px solid #ddd;
+    padding: 8px;
+    width: 10vw;
+}
+
+#samples-table td {
+    width: 15vw;
+}
+
+#samples-table tr:nth-child(even) {
+    background-color: #f2f2f2;
+}
+
+#samples-table tr:hover {
+    background-color: #ddd;
+}
+
+#samples-table th {
+    padding-top: 12px;
+    padding-bottom: 12px;
+    text-align: center;
+    background-color: rgb(144, 183, 255);
+    color: black;
+    width: 5vw;
+}
+
+.samples-container {
+    overflow-x: auto;
+    overflow-y: auto;
+}

src/components/Samples.js

@@ -0,0 +1,75 @@
+import React, { useEffect, useState, useRef } from 'react';
+import { query, collection, onSnapshot, where, orderBy, limit } from 'firebase/firestore';
+
+import './Samples.css';
+import db from '../firebase';
+import moment from 'moment';
+
+const Samples = () => {
+    const [samples, setSamples] = useState([]);
+
+    useEffect(() => {
+        if (!samples.length) {
+            const q = query(collection(db, "testData"), where("testTime", ">=", moment().format("YYYY-MM-DD").toString()), orderBy("testTime", "desc"));
+
+            const unsub = onSnapshot(q, (querySnapshot) => {
+                const samples = [];
+                querySnapshot.forEach((document) => {
+                    console.log(document.data());
+                    const alert = document.data();
+                    samples.push(alert);
+                });
+                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>Samples</h1>
+
+            <div className='samples-container'>
+                <table id="samples-table">
+                    <tr>
+                        <th>Sample Name</th>
+                        <th>Device</th>
+                        <th>led1Average</th>
+                        {/* <th>led2Average</th> */}
+                        <th>led3Average</th>
+                        <th>Dev ratio</th>
+                        <th>Time</th>
+                    </tr>
+                    {samples.map((sample, index) => (
+                        <tr key={index} className='samples-table-tr'>
+                                <td>{sample.name}</td>
+                                <td>{sample.deviceId}</td>
+                                <td>{sample.led1Average}</td>
+                                {/* <td>{sample.led2Average || 'NA'}</td> */}
+                                <td>{sample.led3Average || 'NA'}</td>
+                                <td>{sample.deviceRatio}</td>
+                                <td>{sample.testTime}</td>
+                        </tr>
+                    ))}
+                </table>
+            </div>
+        </div>
+    )
+}
+
+export default Samples;

src/routes/appRoutes.js

@@ -7,8 +7,9 @@ import Devices from '../components/Devices';
 import { Download } from '@mui/icons-material';
 import ExportData from '../components/ExportData';
 import Registration from '../components/Registration';
-import { FaAndroid, FaPhone, FaUser } from 'react-icons/fa';
+import { FaAndroid, FaFlask, FaPhone, FaSearch, FaUser } from 'react-icons/fa';
 import AppInstallation from '../components/AppInstallation';
+import Samples from '../components/Samples';
 
 const appRoutes = [
     {
@@ -61,6 +62,15 @@ const appRoutes = [
             icon: <FaAndroid />
         }
     },
+    {
+        path: "/samples",
+        element: <Samples />,
+        state: "Samples",
+        sidebarProps: {
+            displayText: "Samples",
+            icon: <FaFlask />
+        }
+    },
 ]
 
 export default appRoutes;