fix(master-land): optimize func upodate

This commit is contained in:
arieeefajar 2025-06-13 23:23:52 +07:00
parent 589e3189a2
commit 28f4f4ffc6
4 changed files with 52 additions and 362 deletions

View File

@ -87,7 +87,6 @@ public function store(Request $request)
public function edit($id)
{
$land = Land::with('detailLands')->findOrFail($id);
$provinces = Province::all();
$landDetails = $land->detailLands->map(function ($detail) {
return [
'lat' => $detail->lat,
@ -95,47 +94,26 @@ public function edit($id)
];
});
return view('master-data.lahan.edit', compact('id', 'provinces', 'land', 'landDetails'));
return view('master-data.lahan.edit', compact('id', 'land', 'landDetails'));
}
public function update(Request $request, $id)
{
$customMessage = [
'owner.required' => 'Nama pemilik wajib diisi',
'owner.max' => 'Nama pemilik maksimal 25 karakter',
'owner.string' => 'Nama pemilik harus berupa string',
'province_id.required' => 'Provinsi wajib diisi',
'province_id.exists' => 'Provinsi tidak ditemukan',
'regency_id.required' => 'Kota wajib diisi',
'regency_id.exists' => 'Kota tidak ditemukan',
'district_id.required' => 'Kecamatan wajib diisi',
'district_id.exists' => 'Kecamatan tidak ditemukan',
'address.required' => 'Alamat wajib diisi',
'address.max' => 'Alamat maksimal 100 karakter',
'address.string' => 'Alamat harus berupa string',
'lat.required' => 'Latitude wajib diisi',
'lat.numeric' => 'Latitude harus berupa angka',
'lng.required' => 'Longitude wajib diisi',
'lng.numeric' => 'Longitude harus berupa angka',
'polygon.required' => 'Petak lahan wajib digambar',
];
$validator = Validator::make($request->all(), [
'owner' => 'required|string|max:25',
'province_id' => 'required|exists:provinces,id',
'regency_id' => 'required|exists:regencies,id',
'district_id' => 'required|exists:districts,id',
'address' => 'required|string|max:100',
'lat' => 'required|numeric',
'lng' => 'required|numeric',
'polygon' => 'required',
], $customMessage);
@ -151,12 +129,7 @@ public function update(Request $request, $id)
$land = Land::findOrFail($id);
$land->user_id = Auth::user()->id;
$land->owner = $request->owner;
$land->province_code = $request->province_id;
$land->regency_code = $request->regency_id;
$land->district_code = $request->district_id;
$land->address = $request->address;
$land->latitude = $request->lat;
$land->longitude = $request->lng;
$land->save();
LandDetails::where('land_id', $land->id)->delete();
@ -174,7 +147,6 @@ public function update(Request $request, $id)
return redirect()->route('lahan.index');
} catch (\Throwable $th) {
DB::rollBack();
dd($th->getMessage());
toast('Terjadi kesalahan', 'error')->position('top')->autoclose(3000);
return redirect()->back();
}

View File

@ -1,40 +1,47 @@
var mapEdit, drawnItems, drawControl, googleHybrid, iconMarker;
var currentMarkerEdit = null;
var formEdit = document.getElementById("edit-form");
var provinceEditField = formEdit.querySelector("#province-edit-field");
var provinceEditVal = new Choices(provinceEditField);
var regencyEditContainer = formEdit.querySelector("#regency-edit-container");
let regencyCode = formEdit.querySelector("#regency-code").dataset.regency;
var regencyEditField = formEdit.querySelector("#regency-edit-field");
var regencyEditVal = new Choices(regencyEditField, {
shouldSort: false,
});
var districtEditContainer = formEdit.querySelector("#district-edit-container");
let districtCode = formEdit.querySelector("#district-code").dataset.district;
var districtEditField = formEdit.querySelector("#district-edit-field");
var districtEditVal = new Choices(districtEditField, {
shouldSort: false,
});
var addressEditContainer = formEdit.querySelector("#address-edit-container");
var addressEditField = formEdit.querySelector("#address-edit-field");
var mapEditConatiner = formEdit.querySelector("#map-edit-container");
var latEditField = formEdit.querySelector("#lat-edit");
var lngEditField = formEdit.querySelector("#lng-edit");
var polygonField = formEdit.querySelector("#polygon-edit");
let latDb = formEdit.querySelector("#lat-db").dataset.lat;
let lngDb = formEdit.querySelector("#lng-db").dataset.lng;
let polygonDb = formEdit.querySelector("#polygon-db");
let polygonData = polygonDb.getAttribute("data-polygon");
var loadingEdit = formEdit.querySelector("#loading-edit");
var btnEditContainer = formEdit.querySelector("#edit-footer");
document.addEventListener("DOMContentLoaded", function () {
initMapEdit();
setMapEdit();
});
function fetchWithTimeout(url, options = {}, timeout = 10000) {
return Promise.race([
fetch(url, options),
new Promise((_, reject) =>
setTimeout(
() =>
reject(new Error("Request timeout, periksa koneksi Anda")),
timeout
)
),
]);
}
async function reverseGeocode(lat, lng) {
try {
const response = await fetchWithTimeout(
`https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json&accept-language=id`
);
const data = await response.json();
return data.display_name;
} catch (error) {
return alert(`Error ` + error.message);
}
}
function initMapEdit() {
mapEdit = L.map("map-edit", {
attributionControl: false,
@ -89,246 +96,43 @@ function initMapEdit() {
mapEdit.invalidateSize();
}
document.addEventListener("DOMContentLoaded", function () {
initMapEdit();
getRegencies(provinceEditField.value);
getDistricts(regencyCode);
setMapEdit();
});
function getProvinces(provinceId) {
return new Promise(function (resolve, reject) {
$.ajax({
url: "/location/get-province",
type: "GET",
success: function (response) {
if (response.success) {
const province = response.data.find(
(province) => province.id == provinceId
);
resolve(province);
} else {
reject(new Error("Terjadi kesalahan saat mengambil data"));
}
},
error: function (xhr, status, error) {
reject(new Error("Terjadi kesalahan saat mengambil data"));
},
});
});
}
function getRegencies(provinceId) {
regencyEditContainer.style.display = "none";
districtEditContainer.style.display = "none";
addressEditContainer.style.display = "none";
loadingEdit.style.display = "block";
mapEditConatiner.style.display = "none";
const url = "/location/get-regency/" + provinceId;
$.ajax({
url: url,
type: "GET",
success: function (response) {
if (response.success) {
loadingEdit.style.display = "none";
const data = response.data;
regencyEditVal.clearStore();
regencyEditVal.clearChoices();
regencyEditVal.value = "";
regencyEditVal.setChoices([
{
value: "",
label: "Pilih Kabupaten",
selected: false,
disabled: true,
},
]);
if (Array.isArray(data)) {
regencyEditVal.setChoices(
data.map((regency) => ({
value: regency.id,
label: regency.name,
selected: regency.id == regencyCode,
disabled: false,
}))
);
regencyEditContainer.style.display = "block";
} else {
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}
}
},
error: function (xhr, status, error) {
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
},
});
}
function getDistricts(regencyId) {
districtEditContainer.style.display = "none";
addressEditContainer.style.display = "none";
loadingEdit.style.display = "block";
mapEditConatiner.style.display = "none";
handleDrawDeleted();
const url = "/location/get-district/" + regencyId;
$.ajax({
url: url,
type: "GET",
success: function (response) {
if (response.success) {
loadingEdit.style.display = "none";
const data = response.data;
console.log(data);
districtEditVal.clearStore();
districtEditVal.clearChoices();
districtEditVal.value = "";
districtEditVal.setChoices([
{
value: "",
label: "Pilih Kecamatan",
selected: false,
disabled: true,
},
]);
if (Array.isArray(data)) {
districtEditVal.setChoices(
data.map((district) => ({
value: district.id,
label: district.name,
selected: district.id == districtCode,
disabled: false,
}))
);
districtEditContainer.style.display = "block";
} else {
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
}
}
},
error: function (xhr, status, error) {
mapEditConatiner.style.display = "block";
mapEditConatiner.innerHTML =
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
},
});
}
function showmap(districtId) {
loadingEdit.style.display = "block";
if (!navigator.geolocation) {
alert("Geolocation tidak didukung oleh browser ini.");
return;
}
navigator.geolocation.getCurrentPosition(
function (position) {
loadingEdit.style.display = "none";
mapEditConatiner.style.display = "block";
mapEdit.invalidateSize();
addressEditContainer.style.display = "block";
btnEditContainer.style.display = "block";
var lat = position.coords.latitude;
var lng = position.coords.longitude;
console.log(lat, lng);
mapEdit.setView([lat, lng], 16);
if (currentMarkerEdit) {
mapEdit.removeLayer(currentMarkerEdit);
}
var iconMarker = L.icon({
iconUrl: "/assets/images/marker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50],
});
currentMarkerEdit = L.marker([lat, lng], {
icon: iconMarker,
draggable: true,
}).addTo(mapEdit);
currentMarkerEdit.on("dragend", onPointerDragend);
currentMarkerEdit
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
)
.openPopup();
latEditField.value = lat;
lngEditField.value = lng;
},
function (error) {
alert("Error: " + error.message);
}
);
}
function setMapEdit() {
loadingEdit.style.display = "block";
mapEditConatiner.style.display = "block";
mapEdit.invalidateSize();
addressEditContainer.style.display = "block";
btnEditContainer.style.display = "block";
mapEdit.setView([latDb, lngDb], 16);
if (polygonData) {
let coordinates = JSON.parse(polygonData);
console.log("Polygon Data:", coordinates);
let latlngs = coordinates.map((point) => [point.lat, point.lng]);
let polygon = L.polygon(latlngs, { color: "blue" }).addTo(mapEdit);
drawnItems.addLayer(polygon);
mapEdit.fitBounds(polygon.getBounds());
polygonField.value = JSON.stringify(coordinates);
}
if (currentMarkerEdit) {
mapEdit.removeLayer(currentMarkerEdit);
}
var iconMarker = L.icon({
iconUrl: "/assets/images/marker.png",
iconSize: [50, 50],
iconAnchor: [25, 50],
popupAnchor: [0, -50],
});
currentMarkerEdit = L.marker([latDb, lngDb], {
icon: iconMarker,
draggable: true,
}).addTo(mapEdit);
currentMarkerEdit.on("dragend", onPointerDragend);
currentMarkerEdit
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
)
.openPopup();
loadingEdit.style.display = "none";
}
function handleDrawCreated(e) {
@ -358,16 +162,28 @@ function handleDrawDeleted(e) {
polygonField.value = "";
}
function onPointerDragend() {
async function onPointerDragend() {
if (!currentMarkerEdit) return;
var coordinates = currentMarkerEdit.getLatLng();
loadingEdit.style.display = "block";
addressEditContainer.style.display = "none";
btnEditContainer.style.display = "none";
try {
const address = await reverseGeocode(coordinates.lat, coordinates.lng);
loadingEdit.style.display = "none";
addressEditContainer.style.display = "block";
addressEditField.value = address;
} catch (error) {
alert(`Error ` + error.message);
} finally {
loadingEdit.style.display = "none";
btnEditContainer.style.display = "block";
}
currentMarkerEdit
.setLatLng(coordinates)
.bindPopup(
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
)
.openPopup();
latEditField.value = coordinates.lat;
lngEditField.value = coordinates.lng;
}

View File

@ -60,50 +60,6 @@
onclick="getLocation()">Dapatkan Lokasi Lahan!</button>
</div>
{{-- <div class="mb-3">
<label for="province-field" class="form-label">Provinsi</label>
<select name="province_id" id="province-field" class="form-control" required
onchange="getRegencies(this.value)">
<option value="" selected disabled>Pilih Provinsi</option>
@foreach ($provinces as $province)
<option value="{{ $province->id }}"
{{ old('province_id') == $province->id ? 'selected' : '' }}>
{{ $province->name }}</option>
@endforeach
</select>
<div class="invalid-feedback">
Harap Pilih Provinsi
</div>
</div>
<div class="mb-3" id="regency-container" style="display: none">
<label for="regency-field" class="form-label">Kabupaten atau Kota</label>
<select name="regency_id" id="regency-field" class="form-control" required
onchange="getDistricts(this.value)">
<option value="" selected disabled>Pilih Kabupaten atau Kota</option>
</select>
<div class="invalid-feedback">
Harap Pilih Kabupaten atau Kota
</div>
</div>
<div class="mb-3" id="district-container" style="display: none">
<label for="district-field" class="form-label">Kecamatan</label>
<select name="district_id" id="district-field" class="form-control" required
onchange="showmap(this.value)">
<option value="" selected disabled>Pilih Kecamatan</option>
</select>
<div class="invalid-feedback">
Harap Pilih Kecamatan
</div>
</div>
<div id="loading" class="text-center" style="display: none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div> --}}
<div id="loading" class="text-center" style="display: none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>

View File

@ -59,55 +59,6 @@
</div>
</div>
{{-- <div class="mb-3">
<label for="landname-edit-field" class="form-label">Nama Lahan</label>
<input type="text" id="landname-edit-field" class="form-control" name="land_name"
value="{{ old('land_name') }}" placeholder="Masukan Nama Lahan" required />
<div class="invalid-feedback">
Masukan Nama Lahan
</div>
</div> --}}
<div class="mb-3">
<label for="province-edit-field" class="form-label">Provinsi</label>
<select name="province_id" id="province-edit-field" class="form-control" required
onchange="getRegencies(this.value)">
<option value="" selected disabled>Pilih Provinsi</option>
@foreach ($provinces as $province)
<option value="{{ $province->id }}"
{{ old('province_id', $land->province_code) == $province->id ? 'selected' : '' }}>
{{ $province->name }}</option>
@endforeach
</select>
<div class="invalid-feedback">
Harap Pilih Provinsi
</div>
</div>
<div class="mb-3" id="regency-edit-container">
<label for="regency-edit-field" class="form-label">Kabupaten atau Kota</label>
<input type="hidden" id="regency-code" data-regency="{{ $land->regency_code }}">
<select name="regency_id" id="regency-edit-field" class="form-control" required
onchange="getDistricts(this.value)">
<option value="" selected disabled>Pilih Kabupaten atau Kota</option>
</select>
<div class="invalid-feedback">
Harap Pilih Kabupaten atau Kota
</div>
</div>
<div class="mb-3" id="district-edit-container">
<label for="district-edit-field" class="form-label">Kecamatan</label>
<input type="hidden" id="district-code" data-district="{{ $land->district_code }}">
<select name="district_id" id="district-edit-field" class="form-control" required
onchange="showmap(this.value)">
<option value="" selected disabled>Pilih Kecamatan</option>
</select>
<div class="invalid-feedback">
Harap Pilih Kecamatan
</div>
</div>
<div id="loading-edit" class="text-center" style="display: none">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
@ -116,7 +67,7 @@
<div class="mb-3" id="address-edit-container">
<label for="address-edit-field" class="form-label">Alamat</label>
<textarea name="address" id="address-edit-field" rows="3" class="form-control"
<textarea name="address" id="address-edit-field" rows="3" class="form-control" readonly
placeholder="Masukan Alamat, cnth: Jl. Jend. Sudirman No. 12" required>{{ old('address', $land->address) }}</textarea>
<div class="invalid-feedback">
Masukan Alamat
@ -128,16 +79,11 @@
<div id="map-edit"></div>
<div class="mt-3">
<input type="hidden" name="lat" id="lat-edit" class="form-control"
value="{{ $land->latitude }}" readonly>
<input type="hidden" name="lng" id="lng-edit" class="form-control"
value="{{ $land->longitude }}" readonly>
<input type="hidden" name="polygon" id="polygon-edit" class="form-control"
readonly>
<input type="hidden" id="lat-db" data-lat={{ $land->latitude }}>
<input type="hidden" id="lng-db" data-lng={{ $land->longitude }}>
<input type="hidden" id="lat-db" data-lat={{ $landDetails[0]['lat'] }}>
<input type="hidden" id="lng-db" data-lng={{ $landDetails[0]['lng'] }}>
<input type="hidden" id="polygon-db"
data-polygon="{{ json_encode($landDetails) }}">