Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>User Dashboard - E. Coli Detection Portal</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); | |
| } | |
| .dashboard-card { | |
| backdrop-filter: blur(10px); | |
| background-color: rgba(255, 255, 255, 0.9); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex items-center justify-center p-4"> | |
| <div class="container mx-auto max-w-2xl"> | |
| <div class="dashboard-card rounded-xl shadow-2xl p-8"> | |
| <div class="text-center mb-6"> | |
| <h1 class="text-3xl font-bold text-gray-800">User Dashboard</h1> | |
| <p class="text-gray-600 mt-2">E. Coli Detection Portal</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="bg-blue-100 p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-blue-800 mb-4">Profile Information</h2> | |
| <div id="userProfileDetails"> | |
| <p class="mb-2"><strong>Name:</strong> Sharvesh</p> | |
| <p class="mb-2"><strong>Phone:</strong> 9342540825</p> | |
| <p class="mb-2"><strong>State:</strong> Tamil Nadu</p> | |
| <p class="mb-2"><strong>Town:</strong> Pollachi</p> | |
| </div> | |
| </div> | |
| <div class="bg-green-100 p-6 rounded-lg shadow-md"> | |
| <h2 class="text-xl font-semibold text-green-800 mb-4">Quick Actions</h2> | |
| <div class="space-y-4"> | |
| <button onclick="startNewTest()" class="w-full bg-green-500 text-white p-3 rounded-lg hover:bg-green-600 transition duration-300"> | |
| Start New E. Coli Test | |
| </button> | |
| <button onclick="toggleTestResults()" class="w-full bg-blue-500 text-white p-3 rounded-lg hover:bg-blue-600 transition duration-300"> | |
| <span id="testResultsButtonText">View Previous Tests</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="testResults" class="mt-8 hidden"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Recent Test Results</h2> | |
| <div id="testResultsContent" class="bg-gray-100 p-4 rounded-lg"> | |
| <!-- Test results will be dynamically populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script type="module"> | |
| import { initializeApp } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js"; | |
| import { | |
| getFirestore, | |
| collection, | |
| query, | |
| orderBy, | |
| limit, | |
| getDocs | |
| } from "https://www.gstatic.com/firebasejs/11.0.2/firebase-firestore.js"; | |
| const firebaseConfig = { | |
| apiKey: "AIzaSyBVazIeGCASyfCka3nU_INuZytrTdSVmXo", | |
| authDomain: "snippetscript-37175.firebaseapp.com", | |
| projectId: "snippetscript-37175", | |
| storageBucket: "snippetscript-37175.appspot.com", | |
| messagingSenderId: "154274113551", | |
| appId: "1:154274113551:web:4e9582f3a24f7d12695b7a", | |
| measurementId: "G-PSR30H9GH6" | |
| }; | |
| // Initialize Firebase | |
| const app = initializeApp(firebaseConfig); | |
| const db = getFirestore(app); | |
| // Load previous test results from Firestore | |
| async function loadPreviousTests() { | |
| try { | |
| const thingspeakQuery = query( | |
| collection(db, 'thingspeak_data'), | |
| orderBy('timestamp', 'desc'), | |
| limit(5) | |
| ); | |
| const querySnapshot = await getDocs(thingspeakQuery); | |
| const testResultsContent = document.getElementById('testResultsContent'); | |
| if (querySnapshot.empty) { | |
| testResultsContent.innerHTML = `<p class="text-gray-600">No previous test results available.</p>`; | |
| return; | |
| } | |
| let tableHTML = ` | |
| <table class="w-full"> | |
| <thead> | |
| <tr class="bg-gray-200"> | |
| <th class="p-2 text-left">Entry ID</th> | |
| <th class="p-2 text-left">Field 1</th> | |
| <th class="p-2 text-left">Field 2</th> | |
| <th class="p-2 text-left">Timestamp</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| `; | |
| querySnapshot.forEach((doc) => { | |
| const data = doc.data(); | |
| const timestamp = data.timestamp ? new Date(data.timestamp.seconds * 1000).toLocaleString() : 'N/A'; | |
| tableHTML += ` | |
| <tr class="border-b"> | |
| <td class="p-2">${data.entry_id || 'N/A'}</td> | |
| <td class="p-2">${data.field1 || 'N/A'}</td> | |
| <td class="p-2">${data.field2 || 'N/A'}</td> | |
| <td class="p-2">${timestamp}</td> | |
| </tr> | |
| `; | |
| }); | |
| tableHTML += `</tbody></table>`; | |
| testResultsContent.innerHTML = tableHTML; | |
| } catch (error) { | |
| alert("Error loading test results: " + error.message); | |
| } | |
| } | |
| // Dashboard actions | |
| function startNewTest() { | |
| alert('Place the water sample in the kit. The results will be updated here shortly.'); | |
| } | |
| function toggleTestResults() { | |
| const testResultsDiv = document.getElementById('testResults'); | |
| testResultsDiv.classList.toggle('hidden'); | |
| if (!testResultsDiv.classList.contains('hidden')) { | |
| document.getElementById('testResultsButtonText').textContent = 'Hide Previous Tests'; | |
| loadPreviousTests(); | |
| } else { | |
| document.getElementById('testResultsButtonText').textContent = 'View Previous Tests'; | |
| } | |
| } | |
| // Attach functions to window for button actions | |
| window.startNewTest = startNewTest; | |
| window.toggleTestResults = toggleTestResults; | |
| </script> | |
| </body> | |
| </html> | |