fix(master-land): create edit page with function setvalue
This commit is contained in:
arieeefajar
parent
f747c36eb7
commit
2c933d6a02
|
|
@ -9,12 +9,16 @@
|
|||
use Illuminate\Http\Request;
|
||||
use Illuminate\Support\Facades\DB;
|
||||
use Illuminate\Support\Facades\Validator;
|
||||
use Psy\CodeCleaner\ReturnTypePass;
|
||||
|
||||
class LandController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
$lands = Land::orderBy('created_at', 'desc')->get();
|
||||
if ($lands->isEmpty()) {
|
||||
return view('master-data.lahan.index', compact('lands'));
|
||||
}
|
||||
$province = Province::where('id', $lands->first()->province_code)->first();
|
||||
$regency = $province->regency()->where('id', $lands->first()->regency_code)->first();
|
||||
$district = $regency->district()->where('id', $lands->first()->district_code)->first();
|
||||
|
|
@ -95,7 +99,7 @@ public function store(Request $request)
|
|||
}
|
||||
DB::commit();
|
||||
toast('Data berhasil disimpan', 'success')->position('top-right')->autoclose(3000);
|
||||
return redirect()->back();
|
||||
return redirect()->route('master_data.lahan.index');
|
||||
} catch (\Throwable $th) {
|
||||
DB::rollBack();
|
||||
dd($th->getMessage());
|
||||
|
|
@ -104,6 +108,13 @@ public function store(Request $request)
|
|||
}
|
||||
}
|
||||
|
||||
public function edit($id)
|
||||
{
|
||||
$land = Land::with('detailLands')->findOrFail($id);
|
||||
$provinces = Province::all();
|
||||
return view('master-data.lahan.edit', compact('id', 'provinces', 'land',));
|
||||
}
|
||||
|
||||
public function update(Request $request, $id)
|
||||
{
|
||||
$customMessage = [
|
||||
|
|
|
|||
|
|
@ -11,4 +11,9 @@ class Land extends Model
|
|||
|
||||
protected $table = 'land';
|
||||
protected $guarded = [];
|
||||
|
||||
public function detailLands()
|
||||
{
|
||||
return $this->hasMany(LandDetails::class, 'land_id', 'id');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,8 +57,6 @@ function initMap() {
|
|||
});
|
||||
}
|
||||
|
||||
document.addEventListener("DOMContentLoaded", initMap);
|
||||
|
||||
var form = document.getElementById("add-form");
|
||||
var provinceField = form.querySelector("#province-field");
|
||||
var provinceVal = new Choices(provinceField);
|
||||
|
|
@ -87,6 +85,13 @@ var loading = form.querySelector("#loading");
|
|||
|
||||
var btnContainer = form.querySelector("#add-footer");
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
initMap();
|
||||
if (provinceField.value !== "") {
|
||||
getRegencies(provinceField.value);
|
||||
}
|
||||
});
|
||||
|
||||
function getRegencies(provinceId) {
|
||||
regencyContainer.style.display = "none";
|
||||
districtContainer.style.display = "none";
|
||||
|
|
|
|||
|
|
@ -1,390 +1,3 @@
|
|||
var mapEdit;
|
||||
var currentMarkerEdit = null;
|
||||
|
||||
var formEdit = document.getElementById("edit-form");
|
||||
|
||||
var regencyEditContainer = formEdit.querySelector("#regency-edit-container");
|
||||
var regencyEditField = formEdit.querySelector("#regency-edit-field");
|
||||
var regencyEditVal = new Choices(regencyEditField, {
|
||||
shouldSort: false,
|
||||
});
|
||||
|
||||
var districtEditContainer = formEdit.querySelector("#district-edit-container");
|
||||
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 loadingEdit = formEdit.querySelector("#loading-edit");
|
||||
|
||||
var btnEditContainer = formEdit.querySelector("#edit-footer");
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
mapEdit = L.map("map-edit", {
|
||||
attributionControl: false,
|
||||
}).setView([-8.157416852745705, 113.72281580436439], 16);
|
||||
|
||||
L.tileLayer("https://tile.openstreetmap.org/{z}/{x}/{y}.png", {
|
||||
maxZoom: 19,
|
||||
}).addTo(mapEdit);
|
||||
|
||||
var iconMarker = L.icon({
|
||||
iconUrl: "/assets/images/marker.png",
|
||||
iconSize: [50, 50],
|
||||
iconAnchor: [25, 50],
|
||||
popupAnchor: [0, -50],
|
||||
});
|
||||
|
||||
currentMarkerEdit = L.marker([-8.157416852745705, 113.72281580436439], {
|
||||
icon: iconMarker,
|
||||
draggable: true,
|
||||
})
|
||||
.addTo(mapEdit)
|
||||
.bindPopup(
|
||||
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan priksa lokasi petamu sudah benar.</div>`
|
||||
);
|
||||
|
||||
$("#editModal").on("shown.bs.modal", function () {
|
||||
mapEdit.invalidateSize();
|
||||
});
|
||||
|
||||
mapEdit.on("click", onMapClick);
|
||||
});
|
||||
|
||||
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: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
regencyEditVal.setChoices(
|
||||
data.map((regency) => ({
|
||||
value: regency.id,
|
||||
label: regency.name,
|
||||
selected: false,
|
||||
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";
|
||||
|
||||
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;
|
||||
|
||||
districtEditVal.clearStore();
|
||||
districtEditVal.clearChoices();
|
||||
|
||||
districtEditVal.value = "";
|
||||
districtEditVal.setChoices([
|
||||
{
|
||||
value: "",
|
||||
label: "Pilih Kecamatan",
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
if (Array.isArray(data)) {
|
||||
districtEditVal.setChoices(
|
||||
data.map((district) => ({
|
||||
value: district.id,
|
||||
label: district.name,
|
||||
selected: false,
|
||||
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 priksa lokasi petamu sudah benar.</div>`
|
||||
)
|
||||
.openPopup();
|
||||
|
||||
latEditField.value = lat;
|
||||
lngEditField.value = lng;
|
||||
},
|
||||
function (error) {
|
||||
alert("Error: " + error.message);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
async function updateData(data) {
|
||||
const land = data.land;
|
||||
const userRole = data.role;
|
||||
|
||||
var ownerEditField = formEdit.querySelector("#owner-edit-field");
|
||||
var noHpEditField = formEdit.querySelector("#nohp-edit-field");
|
||||
var rentalPriceEditField = formEdit.querySelector(
|
||||
"#rentalprice-edit-field"
|
||||
);
|
||||
var rentalStartEditField = formEdit.querySelector(
|
||||
"#rentalstart-edit-field"
|
||||
);
|
||||
var rentalUntilEditField = formEdit.querySelector(
|
||||
"#rentaluntil-edit-field"
|
||||
);
|
||||
var landNameEditField = formEdit.querySelector("#landname-edit-field");
|
||||
var provinceEditField = formEdit.querySelector("#province-edit-field");
|
||||
var provinceEditVal = new Choices(provinceEditField);
|
||||
|
||||
let rentalPrice = new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(land.rental_price);
|
||||
|
||||
ownerEditField.value = land.owner;
|
||||
noHpEditField.value = land.no_hp;
|
||||
rentalPriceEditField.value = rentalPrice.replace(/Rp\s?/g, "").trim();
|
||||
rentalStartEditField.value = land.rental_start;
|
||||
rentalUntilEditField.value = land.rental_until;
|
||||
landNameEditField.value = land.land_name;
|
||||
provinceEditField.value = land.province_code;
|
||||
try {
|
||||
const province = await getProvinces(land.province_code);
|
||||
provinceEditVal.setChoices([
|
||||
{
|
||||
value: province.id,
|
||||
label: province.name,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/location/get-regency/" + land.province_code,
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
const dataRegencies = response.data;
|
||||
const regencies = response.data.find(
|
||||
(regency) => regency.id === parseInt(land.regency_code)
|
||||
);
|
||||
|
||||
regencyEditVal.setChoices([
|
||||
{
|
||||
value: regencies.id,
|
||||
label: regencies.name,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
if (Array.isArray(dataRegencies)) {
|
||||
regencyEditVal.setChoices(
|
||||
dataRegencies.map((regency) => ({
|
||||
value: regency.id,
|
||||
label: regency.name,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
mapEditConatiner.style.display = "block";
|
||||
mapEditConatiner.innerHTML =
|
||||
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/location/get-district/" + land.regency_code,
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
const dataDistricts = response.data;
|
||||
const districts = response.data.find(
|
||||
(district) =>
|
||||
district.id === parseInt(land.district_code)
|
||||
);
|
||||
|
||||
districtEditVal.setChoices([
|
||||
{
|
||||
value: districts.id,
|
||||
label: districts.name,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
if (Array.isArray(dataDistricts)) {
|
||||
districtEditVal.setChoices(
|
||||
dataDistricts.map((district) => ({
|
||||
value: district.id,
|
||||
label: district.name,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
mapEditConatiner.style.display = "block";
|
||||
mapEditConatiner.innerHTML =
|
||||
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
addressEditContainer.style.display = "block";
|
||||
addressEditField.value = land.address;
|
||||
|
||||
mapEdit.setView([land.latitude, land.longitude], 16);
|
||||
currentMarkerEdit
|
||||
.setLatLng([land.latitude, land.longitude])
|
||||
.openPopup();
|
||||
|
||||
latEditField.value = land.latitude;
|
||||
lngEditField.value = land.longitude;
|
||||
|
||||
if (userRole === "admin") {
|
||||
formEdit.action = "/data-lahan/" + land.id;
|
||||
} else {
|
||||
formEdit.action = "/data-lahan-petugas/" + land.id;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
function deleteData(data) {
|
||||
const landId = data.landId;
|
||||
const userRole = data.role;
|
||||
|
|
@ -573,26 +186,26 @@ var table = document.getElementById("customerTable"),
|
|||
// filterContact("All"),
|
||||
// count++);
|
||||
// }),
|
||||
editBtn.addEventListener("click", function (e) {
|
||||
(document.getElementById("exampleModalLabel").innerHTML = "Edit Customer"),
|
||||
customerList.get({ id: idField.value }).forEach(function (e) {
|
||||
(isid = new DOMParser().parseFromString(e._values.id, "text/html")),
|
||||
isid.body.firstElementChild.innerHTML == itemId &&
|
||||
e.values({
|
||||
id:
|
||||
'<a href="javascript:void(0);" class="fw-medium link-primary">' +
|
||||
idField.value +
|
||||
"</a>",
|
||||
customer_name: customerNameField.value,
|
||||
email: emailField.value,
|
||||
date: dateField.value,
|
||||
phone: phoneField.value,
|
||||
status: isStatus(statusField.value),
|
||||
});
|
||||
}),
|
||||
document.getElementById("close-modal").click(),
|
||||
clearFields();
|
||||
});
|
||||
// editBtn.addEventListener("click", function (e) {
|
||||
// (document.getElementById("exampleModalLabel").innerHTML = "Edit Customer"),
|
||||
// customerList.get({ id: idField.value }).forEach(function (e) {
|
||||
// (isid = new DOMParser().parseFromString(e._values.id, "text/html")),
|
||||
// isid.body.firstElementChild.innerHTML == itemId &&
|
||||
// e.values({
|
||||
// id:
|
||||
// '<a href="javascript:void(0);" class="fw-medium link-primary">' +
|
||||
// idField.value +
|
||||
// "</a>",
|
||||
// customer_name: customerNameField.value,
|
||||
// email: emailField.value,
|
||||
// date: dateField.value,
|
||||
// phone: phoneField.value,
|
||||
// status: isStatus(statusField.value),
|
||||
// });
|
||||
// }),
|
||||
// document.getElementById("close-modal").click(),
|
||||
// clearFields();
|
||||
// });
|
||||
function isStatus(e) {
|
||||
switch (e) {
|
||||
case "Active":
|
||||
|
|
|
|||
|
|
@ -0,0 +1,490 @@
|
|||
var mapEdit, drawnItems, drawControl, googleStreets, 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");
|
||||
|
||||
let latDb = formEdit.querySelector("#lat-db").dataset.lat;
|
||||
let lngDb = formEdit.querySelector("#lng-db").dataset.lng;
|
||||
|
||||
var loadingEdit = formEdit.querySelector("#loading-edit");
|
||||
var btnEditContainer = formEdit.querySelector("#edit-footer");
|
||||
|
||||
function initMapEdit() {
|
||||
mapEdit = L.map("map-edit", {
|
||||
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(mapEdit);
|
||||
|
||||
iconMarker = L.icon({
|
||||
iconUrl: "/assets/images/marker.png",
|
||||
iconSize: [50, 50],
|
||||
iconAnchor: [25, 50],
|
||||
popupAnchor: [0, -50],
|
||||
});
|
||||
|
||||
currentMarkerEdit = L.marker([-8.157416852745705, 113.72281580436439], {
|
||||
icon: iconMarker,
|
||||
draggable: true,
|
||||
})
|
||||
.addTo(mapEdit)
|
||||
.bindPopup(
|
||||
`<div class="text-center"><b>Anda berada di sini</b><br />Silahkan tentukan petak lahan.<br />Pastikan lokasi anda sudah benar.</div>`
|
||||
);
|
||||
|
||||
drawnItems = new L.FeatureGroup();
|
||||
mapEdit.addLayer(drawnItems);
|
||||
|
||||
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
|
||||
},
|
||||
});
|
||||
mapEdit.addControl(drawControl);
|
||||
|
||||
mapEdit.on("draw:created", handleDrawCreated);
|
||||
mapEdit.on("draw:edited", handleDrawEdited);
|
||||
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";
|
||||
|
||||
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;
|
||||
|
||||
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 (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();
|
||||
}
|
||||
|
||||
async function updateData(data) {
|
||||
const land = data.land;
|
||||
const userRole = data.role;
|
||||
|
||||
var ownerEditField = formEdit.querySelector("#owner-edit-field");
|
||||
var noHpEditField = formEdit.querySelector("#nohp-edit-field");
|
||||
var rentalPriceEditField = formEdit.querySelector(
|
||||
"#rentalprice-edit-field"
|
||||
);
|
||||
var rentalStartEditField = formEdit.querySelector(
|
||||
"#rentalstart-edit-field"
|
||||
);
|
||||
var rentalUntilEditField = formEdit.querySelector(
|
||||
"#rentaluntil-edit-field"
|
||||
);
|
||||
var landNameEditField = formEdit.querySelector("#landname-edit-field");
|
||||
var provinceEditField = formEdit.querySelector("#province-edit-field");
|
||||
var provinceEditVal = new Choices(provinceEditField);
|
||||
|
||||
let rentalPrice = new Intl.NumberFormat("id-ID", {
|
||||
style: "currency",
|
||||
currency: "IDR",
|
||||
minimumFractionDigits: 0,
|
||||
}).format(land.rental_price);
|
||||
|
||||
ownerEditField.value = land.owner;
|
||||
noHpEditField.value = land.no_hp;
|
||||
rentalPriceEditField.value = rentalPrice.replace(/Rp\s?/g, "").trim();
|
||||
rentalStartEditField.value = land.rental_start;
|
||||
rentalUntilEditField.value = land.rental_until;
|
||||
landNameEditField.value = land.land_name;
|
||||
provinceEditField.value = land.province_code;
|
||||
try {
|
||||
const province = await getProvinces(land.province_code);
|
||||
provinceEditVal.setChoices([
|
||||
{
|
||||
value: province.id,
|
||||
label: province.name,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/location/get-regency/" + land.province_code,
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
const dataRegencies = response.data;
|
||||
const regencies = response.data.find(
|
||||
(regency) => regency.id === parseInt(land.regency_code)
|
||||
);
|
||||
|
||||
regencyEditVal.setChoices([
|
||||
{
|
||||
value: regencies.id,
|
||||
label: regencies.name,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
if (Array.isArray(dataRegencies)) {
|
||||
regencyEditVal.setChoices(
|
||||
dataRegencies.map((regency) => ({
|
||||
value: regency.id,
|
||||
label: regency.name,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
mapEditConatiner.style.display = "block";
|
||||
mapEditConatiner.innerHTML =
|
||||
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
url: "/location/get-district/" + land.regency_code,
|
||||
success: function (response) {
|
||||
if (response.success) {
|
||||
const dataDistricts = response.data;
|
||||
const districts = response.data.find(
|
||||
(district) =>
|
||||
district.id === parseInt(land.district_code)
|
||||
);
|
||||
|
||||
districtEditVal.setChoices([
|
||||
{
|
||||
value: districts.id,
|
||||
label: districts.name,
|
||||
selected: true,
|
||||
disabled: true,
|
||||
},
|
||||
]);
|
||||
|
||||
if (Array.isArray(dataDistricts)) {
|
||||
districtEditVal.setChoices(
|
||||
dataDistricts.map((district) => ({
|
||||
value: district.id,
|
||||
label: district.name,
|
||||
selected: false,
|
||||
disabled: false,
|
||||
}))
|
||||
);
|
||||
} else {
|
||||
mapEditConatiner.style.display = "block";
|
||||
mapEditConatiner.innerHTML =
|
||||
"<p class='text-center text-muted'>Terjadi kesalaahan saat mengambil data, silahkan coba beberapa saat lagi</p>";
|
||||
}
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
addressEditContainer.style.display = "block";
|
||||
addressEditField.value = land.address;
|
||||
|
||||
mapEdit.setView([land.latitude, land.longitude], 16);
|
||||
currentMarkerEdit
|
||||
.setLatLng([land.latitude, land.longitude])
|
||||
.openPopup();
|
||||
|
||||
latEditField.value = land.latitude;
|
||||
lngEditField.value = land.longitude;
|
||||
|
||||
if (userRole === "admin") {
|
||||
formEdit.action = "/data-lahan/" + land.id;
|
||||
} else {
|
||||
formEdit.action = "/data-lahan-petugas/" + land.id;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
function handleDrawCreated(e) {
|
||||
var layer = e.layer;
|
||||
drawnItems.addLayer(layer);
|
||||
var coordinates = layer.getLatLngs()[0];
|
||||
console.log("Koordinat Polygon:", coordinates);
|
||||
polygonField.value = JSON.stringify(coordinates);
|
||||
|
||||
layer.bindPopup("<b>Petak Lahan Berhasil Dibuat!</b>").openPopup();
|
||||
btnContainer.style.display = "block";
|
||||
}
|
||||
|
||||
function handleDrawEdited(e) {
|
||||
var layers = e.layers;
|
||||
layers.eachLayer(function (layer) {
|
||||
var coordinates = layer.getLatLngs();
|
||||
console.log("Koordinat setelah diedit:", coordinates);
|
||||
polygonField.value = JSON.stringify(coordinates);
|
||||
|
||||
layer.bindPopup("<b>Petak Lahan Berhasil Diedit!</b>").openPopup();
|
||||
});
|
||||
}
|
||||
|
||||
function onPointerDragend() {
|
||||
if (!currentMarkerEdit) return;
|
||||
var coordinates = currentMarkerEdit.getLatLng();
|
||||
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;
|
||||
}
|
||||
|
|
@ -0,0 +1,171 @@
|
|||
@extends('layouts.app')
|
||||
@push('title', 'Edit Data Lahan')
|
||||
@section('content')
|
||||
@push('other-css')
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
|
||||
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
|
||||
|
||||
<!-- Leaflet Draw CSS -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.css" />
|
||||
|
||||
<style>
|
||||
#map-edit {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
<div class="page-content">
|
||||
<div class="container-fluid">
|
||||
<!-- start page title -->
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
|
||||
<h4 class="mb-sm-0">Edit Data Lahan</h4>
|
||||
|
||||
<div class="page-title-right">
|
||||
<ol class="breadcrumb m-0">
|
||||
<li class="breadcrumb-item"><a href="javascript: void(0);">Master Data</a></li>
|
||||
<li class="breadcrumb-item active">Edit Data Lahan</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end page title -->
|
||||
|
||||
<div class="row">
|
||||
<div class="col-lg-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h4 class="card-title mb-0">Edit Data Lahan</h4>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="edit-form" action="" method="POST" class="needs-validation" novalidate>
|
||||
@csrf
|
||||
@method('PUT')
|
||||
<div class="modal-body">
|
||||
|
||||
<div class="mb-3" id="modal-id" style="display: none;">
|
||||
<label for="id-field" class="form-label">ID</label>
|
||||
<input type="text" id="id-field" class="form-control" placeholder="ID"
|
||||
readonly />
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="owner-edit-field" class="form-label">Pemilik Lahan</label>
|
||||
<input type="text" id="owner-edit-field" class="form-control" name="owner"
|
||||
value="{{ old('owner', $land->owner) }}"
|
||||
placeholder="Masukan Nama Pemilik Lahan" required />
|
||||
<div class="invalid-feedback">
|
||||
Masukan Nama Pemilik Lahan
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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"
|
||||
placeholder="Masukan Alamat, cnth: Jl. Jend. Sudirman No. 12" required>{{ old('address', $land->address) }}</textarea>
|
||||
<div class="invalid-feedback">
|
||||
Masukan Alamat
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="map-edit-container">
|
||||
<label for="map-edit" class="form-label">Lokasi</label>
|
||||
<div id="map-edit"></div>
|
||||
|
||||
<div class="mt-3">
|
||||
<input type="hidden" name="lat" id="lat-edit" class="form-control"
|
||||
readonly>
|
||||
<input type="hidden" name="lng" id="lng-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 }}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer" id="edit-footer">
|
||||
<div class="hstack gap-2 justify-content-end">
|
||||
<button type="button" class="btn btn-light"
|
||||
data-bs-dismiss="modal">Tutup</button>
|
||||
<button type="submit" class="btn btn-success" id="edit-btn">Update</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@push('other-js')
|
||||
<script src="{{ asset('assets/js/pages/customJs/master-data/lahan/update.js') }}"></script>
|
||||
|
||||
<!-- Make sure you put this AFTER Leaflet's CSS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
|
||||
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
|
||||
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/1.0.4/leaflet.draw.js"></script>
|
||||
@endpush
|
||||
@endsection
|
||||
|
|
@ -88,15 +88,18 @@ class="fw-medium link-primary">#VZ2101</a></td>
|
|||
</td>
|
||||
<td class="status">
|
||||
<span class="text-capitalize">{{ $land->address }}, Kecamatan
|
||||
{{ $district->name }},
|
||||
{{ $regency->name }}, Provinsi {{ $province->name }}</span>
|
||||
{{ ucwords(strtolower($district->name)) }},
|
||||
{{ ucwords(strtolower($regency->name)) }}, Provinsi
|
||||
{{ ucwords(strtolower($province->name)) }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex gap-2 justify-content-center">
|
||||
<div class="edit">
|
||||
<button class="btn btn-sm btn-warning edit-item-btn"
|
||||
<a href="{{ route('master_data.lahan.edit', $land->id) }}"
|
||||
class="btn btn-sm btn-warning edit-item-btn">Edit</a>
|
||||
{{-- <button class="btn btn-sm btn-warning edit-item-btn"
|
||||
data-bs-toggle="modal" data-bs-target="#editModal"
|
||||
onclick="updateData({{ json_encode(['land' => $land, 'role' => Auth::user()->role]) }})">Edit</button>
|
||||
onclick="updateData({{ json_encode(['land' => $land, 'role' => Auth::user()->role]) }})">Edit</button> --}}
|
||||
</div>
|
||||
<div class="remove">
|
||||
<button class="btn btn-sm btn-danger remove-item-btn"
|
||||
|
|
|
|||
|
|
@ -89,7 +89,8 @@
|
|||
Route::get('/', 'index')->name('index');
|
||||
Route::get('/tambah', 'create')->name('create');
|
||||
Route::post('/', 'store')->name('store');
|
||||
Route::put('/{id}', 'update')->name('update');
|
||||
Route::get('/edit/{id}', 'edit')->name('edit');
|
||||
Route::put('/edit/{id}', 'update')->name('update');
|
||||
Route::delete('/{id}', 'destroy')->name('destroy');
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue