Update dashboard.html

Updated

Author: aimtyaem

dashboard.html

@@ -167,22 +167,6 @@ <h3 class="card-title">Reports</h3>
     <div class="card" id="recommendations-card">
         <h3 class="card-title">🌱 Expert Recommendations</h3>
         <div class="loading">⏳ Loading...</div>
-
-    <div class="card" id="recommendations-card">
-        <h3 class="card-title"></h3>
-        <button id="refresh-recommendations">🔄 Refresh Recommendations</button>
-        <div id="recommendations-list"></div>
-    </div>
-</div>
-
-<!-- Modal -->
-<div id="detail-modal" class="modal">
-    <div class="modal-content">
-        <span class="close-modal">&times;</span>
-        <h3 id="modal-title"></h3>
-        <p id="modal-details"></p>
-    </div>
-</div>
     </div>
 
     <div class="card" id="tutorials-card">
@@ -204,94 +188,123 @@ <h3 class="card-title">🔮 Yield Prediction</h3>
         <h3 class="card-title">🚜 Equipment Status</h3>
         <div class="equipment-list" id="equipment-status"></div>
     </div>
+</div>
 
+<!-- Modal -->
+<div id="detail-modal" class="modal">
+    <div class="modal-content">
+        <span class="close-modal">&times;</span>
+        <h3 id="modal-title"></h3>
+        <p id="modal-details"></p>
+    </div>
+</div>
 
 <script>
-    // Function to handle dynamic active class for navigation
-    function updateActiveNavLink() {
-        const navLinks = document.querySelectorAll('.nav-links .menu-item');
-        const currentPath = window.location.pathname.split('/').pop(); // Get the last part of the URL
-
-        navLinks.forEach(link => {
-            const linkPath = link.getAttribute('href').split('/').pop();
-            if (linkPath === currentPath) {
-                link.classList.add('active');
-            } else {
-                link.classList.remove('active');
-            }
-        });
-    }
-
-    // Call the function on page load
     document.addEventListener('DOMContentLoaded', () => {
-        updateActiveNavLink();
-        fetchReportsData();
-        fetchTutorialsData();
+        loadDashboardData();
     });
 
-    // Sync Reports and Tutorials (Assuming these functions are meant to fetch and display data)
-    async function fetchReportsData() {
-        // 'https://eoagritool.z39.web.core.windows.net'  API endpoint
-        try {
-            const response = await fetch('reports.html');
-            if (!response.ok) {
-                console.error('Failed to fetch reports:', response.status);
-                document.getElementById('reports-card').innerHTML = `
-                    <h3 class="card-title">📊 Reports</h3>
-                    <p class="error-message">Failed to load reports.</p>
-                `;
-                return;
-            }
-            const data = await response.json();
-            document.getElementById('reports-card').innerHTML = `
-                <h3 class="card-title">📊 Reports</h3>
-                <div>
-                    ${data.map(report => `
-                        <p><strong>${report.title}</strong></p>
-                        <p>${report.summary}</p>
-                        <p>Date: ${new Date(report.date).toLocaleDateString()}</p>
-                    `).join('')}
-                </div>
-            `;
-        } catch (error) {
-            console.error('Error fetching reports:', error);
-            document.getElementById('reports-card').innerHTML = `
-                <h3 class="card-title">📊 Reports</h3>
-                <p class="error-message">Error loading reports.</p>
-            `;
+    function loadDashboardData() {
+        const fieldsData = JSON.parse(localStorage.getItem('fieldsData')) || { fields: [] };
+        const climateData = JSON.parse(localStorage.getItem('climateData')) || {};
+        const waterData = JSON.parse(localStorage.getItem('waterData')) || {};
+        const reportsData = JSON.parse(localStorage.getItem('reportsData')) || {};
+        const recommendationsData = JSON.parse(localStorage.getItem('recommendationsData')) || {};
+        const tutorialsData = JSON.parse(localStorage.getItem('tutorialsData')) || {};
+
+        document.getElementById('fields-card').innerHTML = `<h3 class="card-title">Field Status</h3>${renderFields(fieldsData)}`;
+        document.getElementById('climate-card').innerHTML = `<h3 class="card-title">Climate Overview</h3>${renderClimate(climateData)}`;
+        document.getElementById('water-card').innerHTML = `<h3 class="card-title">Water Resources</h3>${renderWater(waterData)}`;
+        document.getElementById('reports-card').innerHTML = `<h3 class="card-title">Reports</h3>${renderReports(reportsData)}`;
+        document.getElementById('recommendations-card').innerHTML = `<h3 class="card-title">🌱 Expert Recommendations</h3>${renderRecommendations(recommendationsData)}`;
+        document.getElementById('tutorials-card').innerHTML = `<h3 class="card-title">🎓 Tutorials</h3>${renderTutorials(tutorialsData)}`;
+    }
+
+    function renderFields(data) {
+        if (!data.fields.length) {
+            return '<p>No fields registered yet.</p>';
+        }
+        return data.fields.map(field => `
+            <div>
+                <p><strong>${field.name}</strong></p>
+                <p>Crop: ${field.crop}</p>
+                <p>Yield: ${field.yield}</p>
+                <p>Health: ${field.health.charAt(0).toUpperCase() + field.health.slice(1)}</p>
+                <p>Last Updated: ${timeSince(field.lastUpdated)} ago</p>
+            </div>
+        `).join('');
+    }
+
+    function renderClimate(data) {
+        return `
+            <div>
+                <p>Average Temperature: ${data.avgTemp}°C</p>
+                <p>Last Recorded Precipitation: ${data.lastPrecip}mm</p>
+            </div>
+        `;
+    }
+
+    function renderWater(data) {
+        return `
+            <div>
+                <p>Surface Water: ${data.surface.length} bodies</p>
+                <p>Groundwater: ${data.groundwater.length} regions</p>
+                <p>Irrigation: ${data.irrigation.length} schedules</p>
+            </div>
+        `;
+    }
+
+    function renderReports(data) {
+        return `
+            <div>
+                <p>Last Report Generated: ${new Date(data.lastGenerated).toLocaleDateString()}</p>
+            </div>
+        `;
+    }
+
+    function renderRecommendations(data) {
+        if (!data.recommendations.length) {
+            return '<p>No recommendations available.</p>';
+        }
+        return data.recommendations.map(rec => `
+            <div>
+                <p><strong>${rec.title}</strong></p>
+                <p>${rec.details}</p>
+            </div>
+        `).join('');
+    }
+
+    function renderTutorials(data) {
+        if (!data.tutorials.length) {
+            return '<p>No tutorials available.</p>';
         }
+        return data.tutorials.map(tutorial => `
+            <div>
+                <p><strong>${tutorial.title}</strong></p>
+                <p>${tutorial.description}</p>
+                <p>Duration: ${tutorial.duration} minutes</p>
+            </div>
+        `).join('');
     }
 
-    async function fetchTutorialsData() {
-        // 'https://eoagritool.africa.communication.azure.com' API endpoint
-        try {
-            const response = await fetch('tutorials.html');
-            if (!response.ok) {
-                console.error('Failed to fetch tutorials:', response.status);
-                document.getElementById('tutorials-card').innerHTML = `
-                    <h3 class="card-title">🎓 Tutorials</h3>
-                    <p class="error-message">Failed to load tutorials.</p>
-                `;
-                return;
+    function timeSince(dateString) {
+        const date = new Date(dateString);
+        const seconds = Math.floor((new Date() - date) / 1000);
+        const intervals = {
+            year: 31536000,
+            month: 2592000,
+            day: 86400,
+            hour: 3600,
+            minute: 60
+        };
+
+        for (const [unit, secondsInUnit] of Object.entries(intervals)) {
+            const interval = Math.floor(seconds / secondsInUnit);
+            if (interval >= 1) {
+                return `${interval} ${unit}${interval !== 1 ? 's' : ''}`;
             }
-            const data = await response.json();
-            document.getElementById('tutorials-card').innerHTML = `
-                <h3 class="card-title">🎓 Tutorials</h3>
-                <div>
-                    ${data.map(tutorial => `
-                        <p><strong>${tutorial.title}</strong></p>
-                        <p>${tutorial.description}</p>
-                        <p>Duration: ${tutorial.duration} minutes</p>
-                    `).join('')}
-                </div>
-            `;
-        } catch (error) {
-            console.error('Error fetching tutorials:', error);
-            document.getElementById('tutorials-card').innerHTML = `
-                <h3 class="card-title">🎓 Tutorials</h3>
-                <p class="error-message">Error loading tutorials.</p>
-            `;
         }
+        return 'just now';
     }
 </script>