Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Farm List</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" /> | |
| <style> | |
| #map { | |
| height: 300px; | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container mt-5"> | |
| <h2 class="mb-4">Farm Details</h2> | |
| <div class="mb-4"> | |
| <a href="/" class="btn btn-primary">Back to Home</a> | |
| {% if farms|length == 0 %} | |
| <a href="/farmer_registration" class="btn btn-success">Register Farm</a> | |
| {% endif %} | |
| </div> | |
| <div class="table-responsive"> | |
| <table class="table table-bordered table-striped"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Farmer Name</th> | |
| <th>Contact</th> | |
| <th>Address</th> | |
| <th>Crop Type</th> | |
| <th>Location</th> | |
| <th>Created At</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| {% for farm in farms %} | |
| <tr> | |
| <td>{{ farm.id }}</td> | |
| <td>{{ farm.farmer_name }}</td> | |
| <td>{{ farm.contact }}</td> | |
| <td>{{ farm.address }}</td> | |
| <td>{{ farm.crop_type or 'Not specified' }}</td> | |
| <td>{{ farm.center_lat }}, {{ farm.center_lng }}</td> | |
| <td>{{ farm.created_at }}</td> | |
| <td> | |
| <button class="btn btn-sm btn-info view-map" | |
| data-lat="{{ farm.center_lat }}" | |
| data-lng="{{ farm.center_lng }}" | |
| data-id="{{ farm.id }}" | |
| data-name="{{ farm.farmer_name }}" | |
| data-coordinates="{{ farm.field_coordinates }}"> | |
| View on Map | |
| </button> | |
| </td> | |
| </tr> | |
| {% else %} | |
| <tr><td colspan="8" class="text-center">No farms found.</td></tr> | |
| {% endfor %} | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Map Modal --> | |
| <div class="modal fade" id="mapModal" tabindex="-1"> | |
| <div class="modal-dialog modal-lg"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h5 class="modal-title">Farm Location</h5> | |
| <button type="button" class="btn-close" data-bs-dismiss="modal"></button> | |
| </div> | |
| <div class="modal-body"> | |
| <div id="map"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBvVLjWmCja331H8SuIZ4UlJdZytuYkC6Y&libraries=drawing"></script> | |
| <script> | |
| // Initialize map | |
| let map; | |
| let marker; | |
| let polygon; | |
| const mapModal = new bootstrap.Modal(document.getElementById('mapModal')); | |
| function initMap(lat, lng, coordinates) { | |
| const center = { lat: lat, lng: lng }; | |
| // Create map | |
| map = new google.maps.Map(document.getElementById('map'), { | |
| center: center, | |
| zoom: 15 | |
| }); | |
| // Add center marker | |
| marker = new google.maps.Marker({ | |
| position: center, | |
| map: map, | |
| title: 'Farm Center' | |
| }); | |
| // Create polygon if coordinates are available | |
| if (coordinates) { | |
| try { | |
| const path = JSON.parse(coordinates); | |
| const polygonPath = path.map(coord => { | |
| return { lat: parseFloat(coord.lat), lng: parseFloat(coord.lng) }; | |
| }); | |
| if (polygon) { | |
| polygon.setMap(null); | |
| } | |
| polygon = new google.maps.Polygon({ | |
| paths: polygonPath, | |
| strokeColor: '#4CAF50', | |
| strokeOpacity: 0.8, | |
| strokeWeight: 2, | |
| fillColor: '#4CAF50', | |
| fillOpacity: 0.35, | |
| map: map | |
| }); | |
| // Fit map to polygon bounds | |
| const bounds = new google.maps.LatLngBounds(); | |
| polygonPath.forEach(coord => bounds.extend(coord)); | |
| map.fitBounds(bounds); | |
| } catch (e) { | |
| console.error('Error parsing polygon coordinates:', e); | |
| } | |
| } | |
| } | |
| // Setup event listeners | |
| $(document).ready(function() { | |
| $('.view-map').on('click', function() { | |
| const lat = parseFloat($(this).data('lat')); | |
| const lng = parseFloat($(this).data('lng')); | |
| const farmName = $(this).data('name'); | |
| const coordinates = $(this).data('coordinates'); | |
| // Update modal title | |
| $('.modal-title').text(`Farm Location: ${farmName}`); | |
| // Show modal | |
| mapModal.show(); | |
| // Initialize map after modal is shown (to ensure correct sizing) | |
| $('#mapModal').on('shown.bs.modal', function() { | |
| initMap(lat, lng, coordinates); | |
| }); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |