MIF_E31222541/public/assets/js/custom/village-alternatif.js

835 lines
30 KiB
JavaScript

document.addEventListener("DOMContentLoaded", function () {
loadListAlterntifVillage("01", "2021", "15");
$(document).on("click", ".btn-add-alternatif-village", function () {
var subDistrictId = $("#subDistrictId").val();
if (subDistrictId) {
// Kosongkan list desa saat kecamatan berubah
$("#villageIdInput")
.empty()
.append('<option value="">-- Pilih Desa --</option>');
$.ajax({
url: "/alternatif-desa/getVillage/" + subDistrictId,
type: "GET",
dataType: "json",
success: function (data) {
$.each(data["village"], function (key, village) {
$("#villageIdInput").append(
`<option value="${village.id}">${village.village}</option>`
);
});
},
});
}
$(document).on("change", "#subDistrictId", function () {
subDistrictId = $(this).val();
if (subDistrictId) {
// Kosongkan list desa saat kecamatan berubah
$("#villageIdInput")
.empty()
.append('<option value="">-- Pilih Desa --</option>');
$.ajax({
url: "/alternatif-desa/getVillage/" + subDistrictId,
type: "GET",
dataType: "json",
success: function (data) {
$.each(data["village"], function (key, village) {
$("#villageIdInput").append(
`<option value="${village.id}">${village.village}</option>`
);
});
},
});
}
});
});
$(document).on("click", ".btn-edit-alternatif", function () {
let villageId = $(this).data("village-id");
let village = $(this).data("village");
let month = $(this).data("month");
let year = $(this).data("year");
$("#villageId").val(villageId);
$("#village").val(village);
$("#month").val(month);
$("#year").val(year);
// Parsing JSON dari data-criteria-sub-district dan data-criteria
let criteriaVillage = JSON.parse($(this).attr("data-criteria-village"));
let criteriaList = JSON.parse($(this).attr("data-criteria"));
// // Kosongkan inputan sebelumnya
$("#criteriaFields").empty();
// // Loop criteria dan buat input dinamis
$.each(criteriaList, function (index, crit) {
let foundCrit = criteriaVillage.find(
(item) => item.criteria_id === crit.id
);
let value = foundCrit ? foundCrit.value_alternatif : "";
let criteriaName = crit.criteria.replace(/\s+/g, "");
let inputField = `
<div class="col-lg-6 mb-2">
<div>
<label for="${criteriaName}" class="form-label">
Masukkan ${crit.criteria}
</label>
<input type="text" class="form-control mb-1 criteria-input"
id="${criteriaName}" name="${crit.criteria}"
placeholder="Masukkan nilai kriteria" required value="${value}"
>
</div>
</div>`;
$("#criteriaFields").append(inputField);
});
});
$(document).on("input", ".criteria-input", function () {
this.value = this.value
.replace(/[^0-9.]/g, "")
.replace(/^\.+|\.\.+/g, "")
.replace(/(\.\d*)\./g, "$1");
});
$(document).on("input", ".year-input", function () {
this.value = this.value
.replace(/\D/g, "") // Hanya angka
.slice(0, 4); // Maksimal 4 digit
});
$("#btn-count-topsis").on("click", function () {
month = $("#choiceMonth").val();
years = $("#choiceYear").val();
subDistrictId = $("#choiceSubDistrict").val();
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
beforeSend: function () {
NProgress.start();
},
success: function (response) {
NProgress.done();
if ((response.message = "success")) {
let tableSections = [
"#matriks-ternomalisasi-id",
"#matriks-ternomalisasi-terbobot-id",
"#solusi-ideal-id",
"#solusi-ideal-terbobot-id",
"#hasil-preferensi-id",
"#hasil-plantByVillage-id",
];
tableSections.forEach((id) => {
$(id).removeClass("d-none").addClass("d-block");
});
loadMatriksTernomalisasiVillage(
month,
years,
subDistrictId
);
loadTernomalisasiTerbobotVillage(
month,
years,
subDistrictId
);
loadSolusiIdealVillage(month, years, subDistrictId);
loadSolusiIdealTerbobotVillage(month, years, subDistrictId);
loadPreferensiVillage(month, years, subDistrictId);
loadListPlantByVillage(month, years, subDistrictId);
}
},
error: function (xhr) {
NProgress.done();
console.log("gagal");
},
});
});
$("#choiceMonth").on("change", function () {
month = $(this).val();
years = $("#choiceYear").val();
subDistrictId = $("#choiceSubDistrict").val();
let tableSections = [
"#matriks-ternomalisasi-id",
"#matriks-ternomalisasi-terbobot-id",
"#solusi-ideal-id",
"#solusi-ideal-terbobot-id",
"#hasil-preferensi-id",
"#hasil-plantByVillage-id",
];
tableSections.forEach((id) => {
$(id).removeClass("d-block").addClass("d-none");
});
$("#btn-count-topsis").removeClass("d-block").addClass("d-none");
loadListAlterntifVillage(month, years, subDistrictId);
});
$("#choiceYear").on("change", function () {
years = $(this).val();
month = $("#choiceMonth").val();
subDistrictId = $("#choiceSubDistrict").val();
let tableSections = [
"#matriks-ternomalisasi-id",
"#matriks-ternomalisasi-terbobot-id",
"#solusi-ideal-id",
"#solusi-ideal-terbobot-id",
"#hasil-preferensi-id",
"#hasil-plantByVillage-id",
];
tableSections.forEach((id) => {
$(id).removeClass("d-block").addClass("d-none");
});
$("#btn-count-topsis").removeClass("d-block").addClass("d-none");
loadListAlterntifVillage(month, years, subDistrictId);
});
$("#choiceSubDistrict").on("change", function () {
subDistrictId = $(this).val();
years = $("#choiceYear").val();
month = $("#choiceMonth").val();
let tableSections = [
"#matriks-ternomalisasi-id",
"#matriks-ternomalisasi-terbobot-id",
"#solusi-ideal-id",
"#solusi-ideal-terbobot-id",
"#hasil-preferensi-id",
"#hasil-plantByVillage-id",
];
tableSections.forEach((id) => {
$(id).removeClass("d-block").addClass("d-none");
});
$("#btn-count-topsis").removeClass("d-block").addClass("d-none");
loadListAlterntifVillage(month, years, subDistrictId);
});
$(document).on("click", "#btn-hapus", function () {
let id = $(this).data("id");
let month = $("#choiceMonth").val();
let year = $("#choiceYear").val();
Swal.fire({
html: '<div class="mt-3"><lord-icon src="https://cdn.lordicon.com/gsqxdxog.json" trigger="loop" colors="primary:#f7b84b,secondary:#f06548" style="width:100px;height:100px"></lord-icon><div class="mt-4 pt-2 fs-15 mx-5"><h4>Apakah anda benar ?</h4><p class="text-muted mx-4 mb-0">Anda benar, akan menghapus data alternatif desa atau kelurahan ?</p></div></div>',
showCancelButton: !0,
confirmButtonClass: "btn btn-primary w-xs me-2 mb-1",
confirmButtonText: "Ya, hapus!",
cancelButtonClass: "btn btn-danger w-xs mb-1",
buttonsStyling: !1,
showCloseButton: !0,
}).then((result) => {
if (result.isConfirmed) {
window.location.href =
"/alternatif-desa/deleteAlternatifVillage/" +
id +
"/" +
month +
"/" +
year;
}
});
});
$("#btn-update-alternatif-village").on("click", function () {
const month = $("#choiceMonth").val();
const years = $("#choiceYear").val();
const subDistrictId = $("#choiceSubDistrict").val();
$.ajax({
url:
"/alternatif-desa/" + month + "/" + years + "/" + 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 = "/alternatif-desa";
}, 1000);
},
error: function (xhr) {
NProgress.done();
$("#result").html(
"<p style='color:red;'>Gagal mengambil data!</p>"
);
console.log("gagal");
// agar refresh
setTimeout(function () {
window.location.href = "/alternatif-desa";
}, 1000);
},
});
});
});
let gridInstance;
function loadListAlterntifVillage(month, years, subDistrictId) {
const tableContainerAlternatifVillage = document.getElementById(
"table-alternatif-village"
);
if (tableContainerAlternatifVillage) {
tableContainerAlternatifVillage.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
if (data.message == "Data tidak ditemukan") {
$("#btn-count-topsis")
.removeClass("d-block")
.addClass("d-none");
} else {
$("#btn-count-topsis")
.removeClass("d-none")
.addClass("d-block");
const groupByVillageArray = Object.values(data.groupByVillage);
const listCriteriaArray = Object.values(
data.listCriterias
).sort((a, b) => a.id - b.id);
// jika jumlah alternatif kurang dari 2 tidak dapat dihitung
if (groupByVillageArray.length < 2) {
$("#btn-count-topsis")
.removeClass("d-block")
.addClass("d-none");
}
const tableDataAlternatifVillage = groupByVillageArray.map(
(item, index) => {
const criteriaValues = listCriteriaArray.map(
(criteriaItem) => {
// Cari nilai yang sesuai dengan ID kriteria
const foundCriteria = item.criteria.find(
(crit) =>
crit.criteria_id === criteriaItem.id
);
return foundCriteria
? foundCriteria.value_alternatif
: "";
}
);
// jika data belum lengkap tidak dapat dihitung
const hasEmptyValue = criteriaValues.includes("");
if (hasEmptyValue) {
$("#btn-count-topsis").addClass("d-none");
}
return [
index + 1,
item.village,
...criteriaValues,
gridjs.html(`
<button type="button" class="btn btn-warning btn-edit-alternatif"
data-bs-toggle="modal"
data-bs-target="#modal-edit"
data-village-id="${item.village_id}"
data-village="${item.village}"
data-year = "${item.year}"
data-month = "${item.month}"
data-criteria-village='${JSON.stringify(
item.criteria
)}'
data-criteria='${JSON.stringify(
listCriteriaArray
)}'>
Ubah
</button>
<button type="button" class="btn btn-danger btn-hapus-village" id="btn-hapus"
data-id="${item.village_id}">
Hapus
</button>`),
];
}
);
// ambil status dan bobot
const criteriaTypes = listCriteriaArray.map(
(crit) => crit.status
);
const criteriaBobot = listCriteriaArray.map(
(crit) => crit.bobot
);
const footerRow = [
"",
gridjs.html(`<b>Keterangan</b> / <b>Bobot</b>`), // Dua baris dalam satu sel
...criteriaTypes.map(
(status, index) =>
gridjs.html(`${status} / ${criteriaBobot[index]}`) // Gabungkan per kolom
),
];
tableDataAlternatifVillage.push(footerRow);
if (gridInstance) {
gridInstance
.updateConfig({
data: tableDataAlternatifVillage,
})
.forceRender();
} else {
const isMobile = window.innerWidth < 768;
const columns = isMobile
? [
"No",
"desa",
...listCriteriaArray.map((item, index) => ({
id: `col_${index}`,
name: gridjs.html(`${item["criteria"]}`),
})),
"Aksi",
]
: [
{ name: "No", width: "5%" },
{ name: "desa", width: "15%" },
...listCriteriaArray.map((item, index) => ({
id: `col_${index}`,
name: gridjs.html(`${item["criteria"]}`),
width: "10%",
})),
{ name: "Aksi", width: "20%" },
];
gridInstance = new gridjs.Grid({
columns: columns,
data: tableDataAlternatifVillage,
search: true,
sort: true,
pagination: {
limit: 6,
},
}).render(tableContainerAlternatifVillage);
}
}
},
});
}
let gridInstance2;
function loadMatriksTernomalisasiVillage(month, years, subDistrictId) {
const tableContainerMatriksTernomalisasiVillage = document.getElementById(
"table-matriks-ternomalisasi-village"
);
if (tableContainerMatriksTernomalisasiVillage) {
tableContainerMatriksTernomalisasiVillage.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
const matriksTernomalisasiVillageArray = Object.values(
data.matriksTernomalisasiVillage
);
const tableDataMatriksTernomalisasiVillage =
matriksTernomalisasiVillageArray.map((item, index) => {
const criteriaValues = item.criteria.map(
(crit) => crit.value_alternatif
);
return [index + 1, item.village, ...criteriaValues];
});
const isMobile = window.innerWidth < 768;
const columns = isMobile
? [
"No",
"Desa",
...data["pembagiMatriksTernomalisasi"].map(
(item, index) => ({
id: `col_${index}`,
name: item,
})
),
]
: [
{ name: "No", width: "5%" },
{ name: "Desa", width: "15%" },
...data["pembagiMatriksTernomalisasi"].map(
(item, index) => ({
id: `col_${index}`,
name: item,
width: "10%",
})
),
];
if (gridInstance2) {
gridInstance2
.updateConfig({
columns: columns,
data: tableDataMatriksTernomalisasiVillage,
})
.forceRender();
} else {
gridInstance2 = new gridjs.Grid({
columns: columns,
data: tableDataMatriksTernomalisasiVillage,
search: true,
sort: true,
pagination: {
limit: 6,
},
}).render(tableContainerMatriksTernomalisasiVillage);
}
},
});
}
let gridInstance3;
function loadTernomalisasiTerbobotVillage(month, years, subDistrictId) {
const tableContainerTernomalisasiTerbobotVillage = document.getElementById(
"table-ternomalisasi-terbobot-village"
);
if (tableContainerTernomalisasiTerbobotVillage) {
tableContainerTernomalisasiTerbobotVillage.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
const ternomalisasiTerbobotVillageArray = Object.values(
data.ternomalisasiTerbobotVillage
);
const tableDataTernomalisasiTerbobotVillage =
ternomalisasiTerbobotVillageArray.map((item, index) => {
const criteriaValues = item.criteria.map(
(crit) => crit.value_alternatif
);
return [index + 1, item.village, ...criteriaValues];
});
const isMobile = window.innerWidth < 768;
const columns = isMobile
? [
"No",
"Desa",
...ternomalisasiTerbobotVillageArray[0]["criteria"].map(
(item, index) => ({
id: `col_${index}`,
name: gridjs.html(
`${item["status"]} / ${item["bobot"]}`
),
})
),
]
: [
{ name: "No", width: "5%" },
{ name: "Desa", width: "15%" },
...ternomalisasiTerbobotVillageArray[0]["criteria"].map(
(item, index) => ({
id: `col_${index}`,
name: gridjs.html(
`${item["status"]} / ${item["bobot"]}`
),
width: "10%",
})
),
];
if (gridInstance3) {
gridInstance3
.updateConfig({
columns: columns,
data: tableDataTernomalisasiTerbobotVillage,
})
.forceRender();
} else {
gridInstance3 = new gridjs.Grid({
columns: columns,
data: tableDataTernomalisasiTerbobotVillage,
search: true,
sort: true,
pagination: {
limit: 6,
},
}).render(tableContainerTernomalisasiTerbobotVillage);
}
},
});
}
let gridInstance4;
function loadSolusiIdealVillage(month, years, subDistrictId) {
const tableContainerSolusiIdealVillage = document.getElementById(
"table-solusi-ideal-village"
);
if (tableContainerSolusiIdealVillage) {
tableContainerSolusiIdealVillage.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
const solusiIdealPositifVillageArray = Object.values(
data.solusiIdealPositif
);
const solusiIdealNegatifVillageArray = Object.values(
data.solusiIdealNegatif
);
const tableDataSolusiIdealVillage = [
[
"Positif",
...solusiIdealPositifVillageArray.map((val) => val),
],
[
"Negatif",
...solusiIdealNegatifVillageArray.map((val) => val),
],
];
const isMobile = window.innerWidth < 768;
const columns = isMobile
? [
{ id: "type", name: "Solusi Ideal" },
...solusiIdealPositifVillageArray.map((_, index) => ({
id: `col_${index}`,
name: `Kriteria ${index + 1}`,
})),
]
: [
{ id: "type", name: "Solusi Ideal", width: "20%" },
...solusiIdealPositifVillageArray.map((_, index) => ({
id: `col_${index}`,
name: `Kriteria ${index + 1}`,
width: "10%",
})),
];
if (gridInstance4) {
gridInstance4
.updateConfig({
columns: columns,
data: tableDataSolusiIdealVillage,
})
.forceRender();
} else {
gridInstance4 = new gridjs.Grid({
columns: columns,
data: tableDataSolusiIdealVillage,
search: false, // Tidak perlu pencarian
sort: false, // Tidak perlu sorting
pagination: false, // Hanya 2 baris, tidak perlu paginasi
}).render(tableContainerSolusiIdealVillage);
}
},
});
}
let gridInstance5;
function loadSolusiIdealTerbobotVillage(month, years, subDistrictId) {
const tableContainerSolusiIdealTerbobot = document.getElementById(
"table-solusi-ideal-terbobot-village"
);
if (tableContainerSolusiIdealTerbobot) {
tableContainerSolusiIdealTerbobot.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
const determinanVillageArray = Object.values(
data.determinanVillage
);
const tableDataDeterminanVillage = determinanVillageArray.map(
(val, index) => [
index + 1,
val["village"],
val["determinanPositif"],
val["determinanNegatif"],
]
);
if (gridInstance5) {
gridInstance5
.updateConfig({
columns: [
{ name: "No", width: "10%" },
{ name: "Desa", width: "30%" },
{ name: "D+", width: "30%" },
{ name: "D-", width: "30%" },
],
data: tableDataDeterminanVillage,
})
.forceRender();
} else {
gridInstance5 = new gridjs.Grid({
columns: [
{ name: "No", width: "10%" },
{ name: "Desa", width: "30%" },
{ name: "D+", width: "30%" },
{ name: "D-", width: "30%" },
],
data: tableDataDeterminanVillage,
search: true,
sort: true,
pagination: { limit: 6 },
resizable: true,
}).render(tableContainerSolusiIdealTerbobot);
}
},
});
}
let gridInstance6;
function loadPreferensiVillage(month, years, subDistrictId) {
const tableContainerPreferensiVillage = document.getElementById(
"table-hasil-preferensi-village"
);
if (tableContainerPreferensiVillage) {
tableContainerPreferensiVillage.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
const determinanVillageArray = Object.values(
data.determinanVillage
);
const tableDataPreferensiVillage = determinanVillageArray.map(
(val, index) => [
index + 1,
val["village"],
(
val["determinanNegatif"] /
(val["determinanNegatif"] + val["determinanPositif"])
).toFixed(5),
]
);
if (gridInstance6) {
gridInstance6
.updateConfig({
columns: [
{ name: "No", width: "10%" },
{ name: "Desa", width: "30%" },
{ name: "Nilai Preferensi", width: "30%" },
],
data: tableDataPreferensiVillage,
})
.forceRender();
} else {
gridInstance6 = new gridjs.Grid({
columns: [
{ name: "No", width: "10%" },
{ name: "Desa", width: "30%" },
{ name: "Nilai Preferensi", width: "30%" },
],
data: tableDataPreferensiVillage,
search: true,
sort: true,
pagination: { limit: 6 },
resizable: true,
}).render(tableContainerPreferensiVillage);
}
},
});
}
let gridInstance7;
function loadListPlantByVillage(month, years, subDistrictId) {
const tableContainerPlantByVillage = document.getElementById(
"table-hasil-plantByVillage"
);
if (tableContainerPlantByVillage) {
tableContainerPlantByVillage.innerHTML = "";
}
$.ajax({
url: `/alternatif-desa/getAlternatifVillage/${month}/${years}/${subDistrictId}`,
type: "GET",
dataType: "json",
success: function (data) {
const plantByVillageArray = Object.entries(
data.resultPlantByVillage
);
const tableDataPlantByVillage = plantByVillageArray.map(
(val, index) => [index + 1, val[0], val[1]]
);
if (gridInstance7) {
gridInstance7
.updateConfig({
columns: [
{ name: "No", width: "10%" },
{ name: "Desa", width: "30%" },
{ name: "Tanaman", width: "30%" },
],
data: tableDataPlantByVillage,
})
.forceRender();
} else {
gridInstance7 = new gridjs.Grid({
columns: [
{ name: "No", width: "10%" },
{ name: "Desa", width: "30%" },
{ name: "Tanaman", width: "30%" },
],
data: tableDataPlantByVillage,
search: true,
sort: true,
pagination: { limit: 6 },
resizable: true,
language: {
noRecordsFound:
"Hitung Prefrensi Tanaman Terlebih Dahulu",
},
noRecordsFound: "Hitung Preferensi Tanaman Terlebih Dahulu",
}).render(tableContainerPlantByVillage);
}
},
});
}