491 lines
17 KiB
JavaScript
491 lines
17 KiB
JavaScript
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;
|
|
}
|