From d1624a4c6d46139b8bf71688af378263db0fd265 Mon Sep 17 00:00:00 2001 From: arieeefajar Date: Wed, 5 Mar 2025 21:54:56 +0700 Subject: [PATCH] fix(master-land): create page land --- .../Controllers/MasterData/LandController.php | 6 + leafletDrawer.html | 90 +++++ .../customJs/master-data/lahan/create.js | 347 ++++++++++++++++++ public/assets/js/plugins.js | 13 +- resources/views/layouts/app.blade.php | 28 +- .../views/master-data/lahan/create.blade.php | 164 +++++++++ .../views/master-data/lahan/index.blade.php | 7 +- resources/views/partials/navbar.blade.php | 14 +- resources/views/partials/sidebar.blade.php | 8 +- routes/web.php | 1 + 10 files changed, 649 insertions(+), 29 deletions(-) create mode 100644 leafletDrawer.html create mode 100644 public/assets/js/pages/customJs/master-data/lahan/create.js create mode 100644 resources/views/master-data/lahan/create.blade.php diff --git a/app/Http/Controllers/MasterData/LandController.php b/app/Http/Controllers/MasterData/LandController.php index 423753d..f4c5505 100644 --- a/app/Http/Controllers/MasterData/LandController.php +++ b/app/Http/Controllers/MasterData/LandController.php @@ -17,6 +17,12 @@ public function index() return view('master-data.lahan.index', compact('lands', 'provinces')); } + public function create() + { + $provinces = Province::all(); + return view('master-data.lahan.create', compact('provinces')); + } + public function store(Request $request) { $customMessage = [ diff --git a/leafletDrawer.html b/leafletDrawer.html new file mode 100644 index 0000000..11a5bd9 --- /dev/null +++ b/leafletDrawer.html @@ -0,0 +1,90 @@ + + + + + + Leaflet Draw Polygon + + + + + + + + + + + + + +
+ + + + diff --git a/public/assets/js/pages/customJs/master-data/lahan/create.js b/public/assets/js/pages/customJs/master-data/lahan/create.js new file mode 100644 index 0000000..621ce86 --- /dev/null +++ b/public/assets/js/pages/customJs/master-data/lahan/create.js @@ -0,0 +1,347 @@ +var map; +var currentMarker = null; + +document.addEventListener("DOMContentLoaded", function () { + map = L.map("map", { + attributionControl: false, + }).setView([-8.157416852745705, 113.72281580436439], 16); + + googleStreets = L.tileLayer( + "http://{s}.google.com/vt?lyrs=m&x={x}&y={y}&z={z}", + { + maxZoom: 20, + subdomains: ["mt0", "mt1", "mt2", "mt3"], + } + ).addTo(map); + + var iconMarker = L.icon({ + iconUrl: "/assets/images/marker.png", + iconSize: [50, 50], + iconAnchor: [25, 50], + popupAnchor: [0, -50], + }); + + currentMarker = L.marker([-8.157416852745705, 113.72281580436439], { + icon: iconMarker, + draggable: true, + }) + .addTo(map) + .bindPopup( + `
Anda berada di sini
Silahkan priksa lokasi petamu sudah benar.
` + ); + + var drawnItems = new L.FeatureGroup(); + map.addLayer(drawnItems); + + var drawControl = new L.Control.Draw({ + draw: { + polygon: true, // Izinkan user menggambar polygon + polyline: false, + rectangle: false, + circle: false, + marker: false, + circlemarker: false, + }, + edit: { + featureGroup: drawnItems, // Edit hanya objek yang sudah digambar + remove: true, // Izinkan menghapus objek + }, + }); + map.addControl(drawControl); + + // 4️⃣ Event saat user menggambar polygon + map.on("draw:created", function (event) { + var layer = event.layer; + drawnItems.addLayer(layer); + var coordinates = layer.getLatLngs(); + console.log("Koordinat Polygon:", coordinates); + alert("Polygon berhasil dibuat! Cek console untuk koordinatnya."); + }); + + // 5️⃣ Event saat user mengedit polygon + map.on("draw:edited", function (event) { + var layers = event.layers; + layers.eachLayer(function (layer) { + var coordinates = layer.getLatLngs(); + console.log("Koordinat setelah diedit:", coordinates); + alert("Polygon berhasil diedit! Cek console untuk koordinatnya."); + }); + }); + + // 6️⃣ Event saat user menghapus polygon + map.on("draw:deleted", function (event) { + alert("Polygon telah dihapus!"); + }); + + $("#showModal").on("shown.bs.modal", function () { + map.invalidateSize(); + }); + + map.on("click", onMapClick); +}); + +var form = document.getElementById("add-form"); +var provinceField = form.querySelector("#province-field"); +var provinceVal = new Choices(provinceField); + +var regencyContainer = form.querySelector("#regency-container"); +var regencyField = form.querySelector("#regency-field"); +var regencyVal = new Choices(regencyField, { + shouldSort: false, +}); + +var districtContainer = form.querySelector("#district-container"); +var districtField = form.querySelector("#district-field"); +var districtVal = new Choices(districtField, { + shouldSort: false, +}); + +var addressContainer = form.querySelector("#address-container"); +var addressField = form.querySelector("#address-field"); + +var mapContainer = form.querySelector("#map-container"); +var latField = form.querySelector("#lat"); +var lngField = form.querySelector("#lng"); + +var btnContainer = form.querySelector("#add-footer"); + +function getRegencies(provinceId) { + regencyContainer.style.display = "none"; + // regencyEditContainer.style.display = "none"; + districtContainer.style.display = "none"; + // districtEditContainer.style.display = "none"; + addressContainer.style.display = "none"; + // addressEditContainer.style.display = "none"; + loading.style.display = "block"; + // loadingEdit.style.display = "block"; + mapContainer.style.display = "none"; + // mapEditConatiner.style.display = "none"; + + const url = "/location/get-regency/" + provinceId; + $.ajax({ + url: url, + type: "GET", + success: function (response) { + if (response.success) { + loading.style.display = "none"; + // loadingEdit.style.display = "none"; + const data = response.data; + + regencyVal.clearStore(); + regencyVal.clearChoices(); + + // regencyEditVal.clearStore(); + // regencyEditVal.clearChoices(); + + regencyVal.value = ""; + regencyVal.setChoices([ + { + value: "", + label: "Pilih Kabupaten", + selected: true, + disabled: true, + }, + ]); + + // regencyEditVal.value = ""; + // regencyEditVal.setChoices([ + // { + // value: "", + // label: "Pilih Kabupaten", + // selected: true, + // disabled: true, + // }, + // ]); + + if (Array.isArray(data)) { + regencyVal.setChoices( + data.map((regency) => ({ + value: regency.id, + label: regency.name, + selected: false, + disabled: false, + })) + ); + + // regencyEditVal.setChoices( + // data.map((regency) => ({ + // value: regency.id, + // label: regency.name, + // selected: false, + // disabled: false, + // })) + // ); + regencyContainer.style.display = "block"; + // regencyEditContainer.style.display = "block"; + } else { + mapContainer.style.display = "block"; + mapContainer.innerHTML = + "

Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi

"; + + // mapEditConatiner.style.display = "block"; + // mapEditConatiner.innerHTML = + // "

Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi

"; + } + } + }, + error: function (xhr, status, error) { + mapContainer.style.display = "block"; + mapContainer.innerHTML = + "

Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi

"; + + // mapEditConatiner.style.display = "block"; + // mapEditConatiner.innerHTML = + // "

Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi

"; + }, + }); +} + +function getDistricts(regencyId) { + districtContainer.style.display = "none"; + addressContainer.style.display = "none"; + loading.style.display = "block"; + mapContainer.style.display = "none"; + + const url = "/location/get-district/" + regencyId; + $.ajax({ + url: url, + type: "GET", + success: function (response) { + if (response.success) { + loading.style.display = "none"; + const data = response.data; + + districtVal.clearStore(); + districtVal.clearChoices(); + + districtVal.value = ""; + districtVal.setChoices([ + { + value: "", + label: "Pilih Kecamatan", + selected: true, + disabled: true, + }, + ]); + + if (Array.isArray(data)) { + districtVal.setChoices( + data.map((district) => ({ + value: district.id, + label: district.name, + selected: false, + disabled: false, + })) + ); + + districtContainer.style.display = "block"; + } else { + mapContainer.style.display = "block"; + mapContainer.innerHTML = + "

Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi

"; + } + } + }, + error: function (xhr, status, error) { + mapContainer.style.display = "block"; + mapContainer.innerHTML = + "

Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi

"; + }, + }); +} + +function showmap(districtId) { + loading.style.display = "block"; + if (!navigator.geolocation) { + alert("Geolocation tidak didukung oleh browser ini."); + return; + } + + navigator.geolocation.getCurrentPosition( + function (position) { + loading.style.display = "none"; + + mapContainer.style.display = "block"; + map.invalidateSize(); + + addressContainer.style.display = "block"; + + btnContainer.style.display = "block"; + + var lat = position.coords.latitude; + var lng = position.coords.longitude; + + map.setView([lat, lng], 16); + + if (currentMarker) { + map.removeLayer(currentMarker); + } + if (currentMarker || currentMarkerEdit) { + map.removeLayer(currentMarker); + } + + var iconMarker = L.icon({ + iconUrl: "/assets/images/marker.png", + iconSize: [50, 50], + iconAnchor: [25, 50], + popupAnchor: [0, -50], + }); + + currentMarker = L.marker([lat, lng], { + icon: iconMarker, + draggable: true, + }).addTo(map); + + currentMarker.on("dragend", onPointerDragend); + + currentMarker + .bindPopup( + `
Anda berada di sini
Silahkan priksa lokasi petamu sudah benar.
` + ) + .openPopup(); + + latField.value = lat; + lngField.value = lng; + }, + function (error) { + alert("Error: " + error.message); + } + ); +} + +function onMapClick(e) { + var lat = e.latlng.lat; + var lng = e.latlng.lng; + + if (!currentMarker) { + currentMarker = L.marker(e.latlng).addTo(map); + } else { + currentMarker.setLatLng(e.latlng); + } + + currentMarker.on("dragend", onPointerDragend); + + currentMarker + .bindPopup( + `
Anda berada di sini
Silahkan priksa lokasi petamu sudah benar.
` + ) + .openPopup(); + + latField.value = lat; + lngField.value = lng; +} + +function onPointerDragend() { + if (!currentMarker) return; + var coordinates = currentMarker.getLatLng(); + + currentMarker + .setLatLng(coordinates) + .bindPopup( + `
Anda berada di sini
Silahkan priksa lokasi petamu sudah benar.
` + ) + .openPopup(); + + latField.value = coordinates.lat; + lngField.value = coordinates.lng; +} diff --git a/public/assets/js/plugins.js b/public/assets/js/plugins.js index e8ec6ae..c407f01 100644 --- a/public/assets/js/plugins.js +++ b/public/assets/js/plugins.js @@ -1 +1,12 @@ -(document.querySelectorAll("[toast-list]")||document.querySelectorAll("[data-choices]")||document.querySelectorAll("[data-provider]"))&&(document.writeln("" + ), + document.writeln( + "" + ), + document.writeln( + "" + )); diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index 563ee55..16fc14b 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -9,18 +9,18 @@ - + - + - + - + - + - + @stack('other-css') @@ -594,18 +594,18 @@ class="form-check-input"> @include('sweetalert::alert') - - - - - - + + + + + + @stack('other-js') - - + + diff --git a/resources/views/master-data/lahan/create.blade.php b/resources/views/master-data/lahan/create.blade.php new file mode 100644 index 0000000..1653180 --- /dev/null +++ b/resources/views/master-data/lahan/create.blade.php @@ -0,0 +1,164 @@ +@extends('layouts.app') +@push('title', 'Tambah Data Lahan') +@section('content') + @push('other-css') + + + + + + + @endpush +
+
+ +
+
+
+

Tambah Data Lahan

+ +
+
    +
  1. Master Data
    2. +
  2. Tambah Data Lahan
    3. +
+
+ +
+
+
+ + +
+
+
+
+

Tambah Data Lahan

+
+
+
+ @csrf +
+ + + +
+ + +
+ Masukan Nama Pemilik Lahan +
+
+ + {{--
+ + +
+ Masukan Nama Lahan +
+
--}} + +
+ + +
+ Harap Pilih Provinsi +
+
+ + + + + + + + + + +
+ +
+
+
+
+
+
+
+ + @push('other-js') + + + + + + + @endpush +@endsection diff --git a/resources/views/master-data/lahan/index.blade.php b/resources/views/master-data/lahan/index.blade.php index d501f49..3dbe139 100644 --- a/resources/views/master-data/lahan/index.blade.php +++ b/resources/views/master-data/lahan/index.blade.php @@ -52,9 +52,10 @@
- + + Tambah
diff --git a/resources/views/partials/navbar.blade.php b/resources/views/partials/navbar.blade.php index 2e0d4f9..5cd1876 100644 --- a/resources/views/partials/navbar.blade.php +++ b/resources/views/partials/navbar.blade.php @@ -6,19 +6,19 @@ @@ -86,7 +86,7 @@
- user-pic
Angela Bernier
@@ -97,7 +97,7 @@ class="me-3 rounded-circle avatar-xs" alt="user-pic">
- user-pic
David Grasso
@@ -108,7 +108,7 @@ class="me-3 rounded-circle avatar-xs" alt="user-pic">
- user-pic
Mike Bunch
diff --git a/resources/views/partials/sidebar.blade.php b/resources/views/partials/sidebar.blade.php index 069a42d..89df66d 100644 --- a/resources/views/partials/sidebar.blade.php +++ b/resources/views/partials/sidebar.blade.php @@ -4,19 +4,19 @@