Merge pull request #25 from arieeefajar/feat/dashboard

Feat/dashboard

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;
@@ -23,6 +24,12 @@ public function admin()
 
     public function petugas()
     {
-        return view('dashboard.petugas');
+        $landCount = Land::where('user_id', auth()->id())->count();
+        $indicatorCount = Indicator::whereIn('id', function ($query) {
+            $query->select('indicator_id')->from('rule');
+        })->count();
+
+        $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

@@ -35,7 +35,7 @@
                                 <div>
                                     <p class="fw-medium text-muted mb-0">Jumlah Lahan</p>
                                     <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
-                                            data-target="">0</span></h2>
+                                            data-target="{{ $landCount }}">0</span></h2>
                                 </div>
                                 <div>
                                     <div class="avatar-sm flex-shrink-0">
@@ -56,7 +56,7 @@
                                 <div>
                                     <p class="fw-medium text-muted mb-0">Jumlah indikator yang digunakan saat ini</p>
                                     <h2 class="mt-4 ff-secondary fw-semibold"><span class="counter-value"
-                                            data-target="">0</span></h2>
+                                            data-target="{{ $indicatorCount }}">0</span></h2>
                                 </div>
                                 <div>
                                     <div class="avatar-sm flex-shrink-0">
@@ -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>
-            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>
+        <script src="{{ asset('assets/js/pages/customJs/dashboard/petugas.js') }}"></script>
     @endpush
 @endsection