Update templates/index.html

templates/index.html

@@ -123,6 +123,14 @@
         </div>
       </div>
 
+      <!-- Soil Data Section -->
+      <div class="form-section" id="soilPropertiesTable">
+        <h4 class="text-2xl font-semibold mb-4">Soil Nutrient Parameters</h4>
+        <div id="soilTableContainer">
+          <p class="text-center text-gray-600">Fetching soil data...</p>
+        </div>
+      </div>
+
       <!-- Additional Agricultural Inputs -->
       <div class="form-section">
         <h4 class="text-2xl font-semibold mb-4">Additional Agricultural Inputs</h4>
@@ -234,8 +242,10 @@
       attribution: 'Tiles © Esri',
       maxZoom: 18,
     }).addTo(map);
+
     // Explicitly define the geocoder provider using Nominatim
     var geocoder = L.Control.Geocoder.nominatim();
+
     // Add geocoder (search bar) to the map with the provider
     L.Control.geocoder({
       geocoder: geocoder,
@@ -248,6 +258,7 @@
       setMarker(center);
     })
     .addTo(map);
+
     var marker;
     function setMarker(latlng) {
       if (marker) {
@@ -260,13 +271,16 @@
       document.getElementById('longitude').value = latlng.lng.toFixed(6);
       document.getElementById('manual_lat').value = latlng.lat.toFixed(6);
       document.getElementById('manual_lon').value = latlng.lng.toFixed(6);
+
       // Fetch weather and soil data
       fetchWeatherData(latlng.lat, latlng.lng);
       fetchSoilProperties(latlng.lat, latlng.lng);
     }
+
     map.on('click', function(e) {
       setMarker(e.latlng);
     });
+
     // Update location using manual input
     document.getElementById('updateLocationBtn').addEventListener('click', function(){
       const lat = parseFloat(document.getElementById('manual_lat').value);
@@ -279,9 +293,10 @@
         alert("Please enter valid latitude and longitude values.");
       }
     });
+
     // Fetch weather data from backend (/get_weather_data)
     function fetchWeatherData(lat, lng) {
-      fetch(/get_weather_data?lat=${lat}&lon=${lng})
+      fetch(`/get_weather_data?lat=${lat}&lon=${lng}`)
         .then(response => response.json())
         .then(data => {
           // Update the weather card container
@@ -320,6 +335,7 @@
               <div>${data.cloud_cover !== null ? data.cloud_cover.toFixed(1) + " %" : "Not available"}</div>
             </div>
           `;
+
           // Also store these values in hidden fields so they pass to Gemini
           document.getElementById('max_temp_hidden').value       = data.max_temp       ?? "";
           document.getElementById('min_temp_hidden').value       = data.min_temp       ?? "";
@@ -332,7 +348,25 @@
         })
         .catch(error => console.error('Error fetching weather data:', error));
     }
-    
+
+    // Fetch soil properties from backend (/get_soil_properties)
+    function fetchSoilProperties(lat, lng) {
+      fetch(`/get_soil_properties?lat=${lat}&lon=${lng}`)
+        .then(response => response.json())
+        .then(data => {
+          if(data.soil_properties) {
+            let tableHTML = "<table><thead><tr><th>Parameter</th><th>Value</th><th>Unit</th></tr></thead><tbody>";
+            data.soil_properties.forEach(function(item) {
+              tableHTML += `<tr><td>${item[0]}</td><td>${item[1]}</td><td>${item[2]}</td></tr>`;
+            });
+            tableHTML += "</tbody></table>";
+            document.getElementById("soilTableContainer").innerHTML = tableHTML;
+          } else {
+            document.getElementById("soilTableContainer").innerHTML = "<p class='text-center text-gray-600'>No soil data available.</p>";
+          }
+        })
+        .catch(error => console.error('Error fetching soil properties:', error));
+    }
   </script>
 </body>
-</html>
+</html>