MIF_E31222541/public/assets/js/custom/parameter-list-ph-village.js

109 lines
3.4 KiB
JavaScript

document.addEventListener("DOMContentLoaded", function () {
loadParameterListPhVillage("15");
$("#btn-update-list-ph-village").on("click", function () {
var subDistrictId = $("#choiceSubDistrict").val();
$.ajax({
url:
"/list-parameter-ph-desa/updateListParameterPhVillage/" +
subDistrictId,
method: "GET",
dataType: "json",
beforeSend: function () {
NProgress.start(); // Menampilkan progress bar
},
success: function (response) {
NProgress.done();
$("#result").html(`<p>${response.message}</p>`);
console.log(response);
// agar refresh
setTimeout(function () {
window.location.href = "/list-parameter-ph-desa";
}, 1000);
},
error: function (xhr) {
NProgress.done();
$("#result").html(
"<p style='color:red;'>Gagal mengambil data!</p>"
);
// agar refresh
setTimeout(function () {
window.location.href = "/list-parameter-ph-desa";
}, 1000);
console.log("gagal");
},
});
});
$("#choiceSubDistrict").on("change", function () {
var subDistrictId = $(this).val();
loadParameterListPhVillage(subDistrictId);
});
});
let gridInstance;
function loadParameterListPhVillage(subDistrictId) {
const tableParameterListPhVillage = document.getElementById(
"table-parameter-list-ph-village"
);
if (tableParameterListPhVillage) {
tableParameterListPhVillage.innerHTML = "";
}
$.ajax({
url:
"/list-parameter-ph-desa/getDataParameterListPhVillage/" +
subDistrictId,
type: "GET",
dataType: "json",
success: function (data) {
const TableDataVillage = data["listPhVillage"].map(
(item, index) => [
index + 1,
item["village"],
item["meter_0_5"],
item["meter_5_15"],
item["meter_15_30"],
item["meter_30_60"],
item["meter_60_100"],
item["meter_100_200"],
]
);
// Render ulang grid jika instance sudah ada, atau buat baru
if (gridInstance) {
gridInstance
.updateConfig({
data: TableDataVillage, // Update data
})
.forceRender(); // Paksa render ulang
} else {
// Jika grid belum ada, buat grid baru
gridInstance = new gridjs.Grid({
columns: [
"No",
"Desa / Kelurahan",
"0 - 5 cm",
"5 - 15 cm",
"15 - 30 cm",
"30 - 60 cm",
"60 - 100 cm",
"100 - 200 cm",
],
data: TableDataVillage,
search: true,
sort: true,
pagination: {
limit: 15,
},
}).render(tableParameterListPhVillage);
}
},
});
}