feat(dashboard): create function set evalutaion value to map

app/Http/Controllers/DashboardController.php

@@ -2,6 +2,7 @@
 
 namespace App\Http\Controllers;
 
+use App\Models\Evaluation;
 use App\Models\Indicator;
 use App\Models\Land;
 use App\Models\Rule;
@@ -27,6 +28,8 @@ public function petugas()
         $indicatorCount = Indicator::whereIn('id', function ($query) {
             $query->select('indicator_id')->from('rule');
         })->count();
-        return view('dashboard.petugas', compact('landCount', 'indicatorCount'));
+
+        $evaluations = Evaluation::with('land.detailLands')->where('user_id', auth()->id())->get();
+        return view('dashboard.petugas', compact('landCount', 'indicatorCount', 'evaluations'));
     }
 }

public/assets/js/pages/customJs/dashboard/petugas.js

@@ -0,0 +1,50 @@
+var map, googleSat, marker, polygon;
+
+let evaluationElement = document.getElementById("evaluations");
+let evaluation = JSON.parse(evaluationElement.dataset.evaluations);
+
+document.addEventListener("DOMContentLoaded", function () {
+    initMap();
+    map.invalidateSize();
+    console.log(evaluation);
+    setEvaluationToMap();
+});
+
+function initMap() {
+    map = L.map("map", {
+        attributionControl: false,
+    }).setView([-8.172495095862395, 113.69876818661332], 10);
+
+    googleSat = L.tileLayer(
+        "http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}",
+        {
+            maxZoom: 20,
+            subdomains: ["mt0", "mt1", "mt2", "mt3"],
+        }
+    ).addTo(map);
+}
+
+function setEvaluationToMap() {
+    evaluation.forEach((evaluation) => {
+        let coordinates = evaluation.land.detail_lands.map((detail) => {
+            return [detail.lat, detail.lng];
+        });
+
+        let cfValue = evaluation.cf_value * 100;
+        console.log(cfValue.toFixed(2));
+
+        polygon = L.polygon(coordinates, {
+            color: "blue",
+            fillColor: "blue",
+            fillOpacity: 0.5,
+        }).addTo(map);
+
+        marker = L.marker(coordinates[0])
+            .addTo(map)
+            .bindPopup(
+                `<div class="text-center font-semibold"><b> Hasil presentase CF pada lahan <br /> ${
+                    evaluation.land.owner
+                }</br>${cfValue.toFixed(2)} %</b></div>`
+            );
+    });
+}

resources/views/dashboard/petugas.blade.php

@@ -80,6 +80,7 @@
                     </div>
                     <div class="card-body">
                         <div id="map" style="height: 400px;"></div>
+                        <input type="hidden" id="evaluations" data-evaluations="{{ $evaluations }}">
                     </div>
                 </div>
             </div>
@@ -88,15 +89,6 @@
     </div>
     <!-- End Page-content -->
     @push('other-js')
-        <script>
+        <script src="{{ asset('assets/js/pages/customJs/dashboard/petugas.js') }}"></script>
-            const map = L.map('map', {
-                attributionControl: false,
-            }).setView([-8.172495095862395, 113.69876818661332], 10);
-
-            const googleSat = L.tileLayer('http://{s}.google.com/vt?lyrs=s&x={x}&y={y}&z={z}', {
-                maxZoom: 20,
-                subdomains: ['mt0', 'mt1', 'mt2', 'mt3']
-            }).addTo(map);
-        </script>
     @endpush
 @endsection