302 lines
10 KiB
JavaScript
302 lines
10 KiB
JavaScript
document.addEventListener("DOMContentLoaded", function () {
|
|
initializePengolahanDataTable();
|
|
});
|
|
|
|
function initializePengolahanDataTable() {
|
|
if (!document.getElementById("pengolahanTable")) return;
|
|
|
|
if (typeof $ !== "undefined" && $.fn.DataTable) {
|
|
$("#pengolahanTable").DataTable({
|
|
ajax: {
|
|
url: "/website/data/pengolahan-data.json",
|
|
type: "GET",
|
|
dataSrc: "",
|
|
},
|
|
columns: [
|
|
{
|
|
data: "no",
|
|
className: "px-6 py-4 text-sm text-gray-900 text-center font-medium",
|
|
title: "No",
|
|
width: "8%",
|
|
},
|
|
{
|
|
data: "nama",
|
|
className: "px-6 py-4 text-sm text-gray-900 font-medium",
|
|
title: "Nama Perusahaan",
|
|
width: "28%",
|
|
},
|
|
{
|
|
data: "alamat",
|
|
className: "px-6 py-4 text-sm text-gray-700",
|
|
title: "Alamat",
|
|
width: "50%",
|
|
},
|
|
{
|
|
data: "tglBerlakuIzin",
|
|
className: "px-6 py-4 text-sm text-gray-900 text-center",
|
|
title: "Berlaku Hingga",
|
|
width: "25%",
|
|
render: function (data, type, row) {
|
|
if (type === "display") {
|
|
const date = new Date(data);
|
|
const formattedDate = date.toLocaleDateString("id-ID", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
});
|
|
|
|
const today = new Date();
|
|
const expiry = new Date(data);
|
|
const daysUntilExpiry = Math.ceil(
|
|
(expiry - today) / (1000 * 60 * 60 * 24)
|
|
);
|
|
|
|
let statusClass = "bg-green-100 text-green-800";
|
|
if (daysUntilExpiry < 30) {
|
|
statusClass = "bg-red-100 text-red-800";
|
|
} else if (daysUntilExpiry < 90) {
|
|
statusClass = "bg-yellow-100 text-yellow-800";
|
|
}
|
|
|
|
return `<div class="text-center">
|
|
<div class="text-sm font-medium text-gray-900 mb-1">${formattedDate}</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${statusClass}">
|
|
${
|
|
daysUntilExpiry > 0
|
|
? `${daysUntilExpiry} hari`
|
|
: "Expired"
|
|
}
|
|
</span>
|
|
</div>`;
|
|
}
|
|
return data;
|
|
},
|
|
},
|
|
],
|
|
language: {
|
|
search: "Cari:",
|
|
lengthMenu: "Tampilkan _MENU_ data per halaman",
|
|
info: "Menampilkan _START_ sampai _END_ dari _TOTAL_ data",
|
|
infoEmpty: "Menampilkan 0 sampai 0 dari 0 data",
|
|
infoFiltered: "(disaring dari _MAX_ total data)",
|
|
paginate: {
|
|
first: "Pertama",
|
|
last: "Terakhir",
|
|
next: "Selanjutnya",
|
|
previous: "Sebelumnya",
|
|
},
|
|
emptyTable: "Tidak ada data yang tersedia",
|
|
zeroRecords: "Tidak ditemukan data yang sesuai",
|
|
},
|
|
pageLength: 10,
|
|
responsive: false,
|
|
ordering: true,
|
|
searching: true,
|
|
paging: true,
|
|
info: true,
|
|
autoWidth: false,
|
|
scrollX: false,
|
|
layout: {
|
|
topStart: {
|
|
pageLength: {
|
|
text: "Tampilkan _MENU_ data",
|
|
},
|
|
},
|
|
topEnd: {
|
|
search: {
|
|
placeholder: "Cari perusahaan pengolahan...",
|
|
},
|
|
},
|
|
bottomStart: "info",
|
|
bottomEnd: "paging",
|
|
},
|
|
initComplete: function () {
|
|
$("#loadingIndicator").hide();
|
|
|
|
const wrapper = $(".dataTables_wrapper");
|
|
|
|
wrapper
|
|
.find('input[type="search"]')
|
|
.addClass(
|
|
"block w-full px-4 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 w-full"
|
|
)
|
|
.attr("placeholder", "Cari perusahaan pengolahan...");
|
|
|
|
wrapper
|
|
.find("select")
|
|
.addClass(
|
|
"px-3 py-2 text-sm border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-transparent"
|
|
);
|
|
|
|
wrapper
|
|
.find(".dt-paging .dt-paging-button")
|
|
.addClass(
|
|
"px-3 py-2 mx-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-blue-50 hover:text-blue-600 hover:border-blue-300 transition-all duration-200"
|
|
);
|
|
|
|
wrapper
|
|
.find(".dt-paging .dt-paging-button.current")
|
|
.addClass("bg-blue-600 text-white border-blue-600 hover:bg-blue-700")
|
|
.removeClass("bg-white text-gray-700");
|
|
|
|
wrapper
|
|
.find(".dt-paging .dt-paging-button.disabled")
|
|
.addClass("opacity-50 cursor-not-allowed");
|
|
|
|
wrapper.find(".dt-length").addClass("flex items-center space-x-2");
|
|
wrapper.find(".dt-search").addClass("flex items-center space-x-2");
|
|
wrapper.find(".dt-info").addClass("text-sm text-gray-600");
|
|
|
|
$("#pengolahanTable").removeClass("dataTable").addClass("w-full");
|
|
$("#pengolahanTable thead th").addClass(
|
|
"bg-cyan-400 text-white font-semibold text-sm uppercase tracking-wider border-b"
|
|
);
|
|
|
|
wrapper.find(".dtr-control").remove();
|
|
|
|
$("#pengolahanTable tbody tr").addClass("transition-all duration-200");
|
|
},
|
|
drawCallback: function () {
|
|
$("#pengolahanTable tbody tr")
|
|
.removeClass("bg-blue-50")
|
|
.hover(
|
|
function () {
|
|
$(this).addClass(
|
|
"bg-blue-50 shadow-sm transform transition-all duration-200"
|
|
);
|
|
},
|
|
function () {
|
|
$(this).removeClass("bg-blue-50 shadow-sm transform");
|
|
}
|
|
);
|
|
|
|
$("#pengolahanTable tbody tr:even").addClass("bg-gray-50");
|
|
$("#pengolahanTable tbody tr:odd").addClass("bg-white");
|
|
},
|
|
});
|
|
} else {
|
|
loadPengolahanDataManually();
|
|
}
|
|
}
|
|
|
|
function loadPengolahanDataManually() {
|
|
fetch("/website/data/pengolahan-data.json")
|
|
.then((response) => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.json();
|
|
})
|
|
.then((data) => {
|
|
const tbody = document.querySelector("#pengolahanTable tbody");
|
|
tbody.innerHTML = "";
|
|
|
|
data.forEach((item, index) => {
|
|
const row = document.createElement("tr");
|
|
row.className = `${
|
|
index % 2 === 0 ? "bg-gray-50" : "bg-white"
|
|
} hover:bg-blue-50 transition-all duration-200`;
|
|
|
|
const date = new Date(item.tglBerlakuIzin);
|
|
const formattedDate = date.toLocaleDateString("id-ID", {
|
|
year: "numeric",
|
|
month: "2-digit",
|
|
day: "2-digit",
|
|
});
|
|
|
|
const today = new Date();
|
|
const expiry = new Date(item.tglBerlakuIzin);
|
|
const daysUntilExpiry = Math.ceil(
|
|
(expiry - today) / (1000 * 60 * 60 * 24)
|
|
);
|
|
|
|
let statusClass = "bg-green-100 text-green-800";
|
|
let statusText = `${daysUntilExpiry} hari`;
|
|
|
|
if (daysUntilExpiry < 0) {
|
|
statusClass = "bg-red-100 text-red-800";
|
|
statusText = "Expired";
|
|
} else if (daysUntilExpiry < 30) {
|
|
statusClass = "bg-red-100 text-red-800";
|
|
} else if (daysUntilExpiry < 90) {
|
|
statusClass = "bg-yellow-100 text-yellow-800";
|
|
}
|
|
|
|
row.innerHTML = `
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center font-medium">${item.no}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 font-medium">${item.nama}</td>
|
|
<td class="px-6 py-4 text-sm text-gray-700">${item.alamat}</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 text-center">
|
|
<div class="text-sm font-medium text-gray-900">${formattedDate}</div>
|
|
<span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${statusClass} mt-1">
|
|
${statusText}
|
|
</span>
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
|
|
const loadingIndicator = document.getElementById("loadingIndicator");
|
|
if (loadingIndicator) {
|
|
loadingIndicator.style.display = "none";
|
|
}
|
|
|
|
addManualSearch(data);
|
|
})
|
|
.catch((error) => {
|
|
console.error("Error loading data:", error);
|
|
const loadingIndicator = document.getElementById("loadingIndicator");
|
|
if (loadingIndicator) {
|
|
loadingIndicator.innerHTML = `
|
|
<div class="text-red-500 text-center">
|
|
<i class="fas fa-exclamation-triangle mr-2"></i>
|
|
Error memuat data: ${error.message}
|
|
</div>
|
|
`;
|
|
}
|
|
});
|
|
}
|
|
|
|
function addManualSearch(data) {
|
|
const tableContainer = document
|
|
.querySelector("#pengolahanTable")
|
|
.closest(".bg-white");
|
|
if (!document.getElementById("manualSearchInput")) {
|
|
const searchContainer = document.createElement("div");
|
|
searchContainer.className = "mb-4 flex justify-end";
|
|
searchContainer.innerHTML = `
|
|
<div class="relative">
|
|
<input type="text" id="manualSearchInput" placeholder="Cari perusahaan pengolahan..."
|
|
class="px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent pr-10">
|
|
<div class="absolute inset-y-0 right-0 pr-3 flex items-center">
|
|
<svg class="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
tableContainer.insertBefore(
|
|
searchContainer,
|
|
document.querySelector(".overflow-x-auto")
|
|
);
|
|
|
|
document
|
|
.getElementById("manualSearchInput")
|
|
.addEventListener("input", function (e) {
|
|
const searchTerm = e.target.value.toLowerCase();
|
|
const rows = document.querySelectorAll("#pengolahanTable tbody tr");
|
|
|
|
rows.forEach((row) => {
|
|
const text = row.textContent.toLowerCase();
|
|
if (text.includes(searchTerm)) {
|
|
row.style.display = "";
|
|
} else {
|
|
row.style.display = "none";
|
|
}
|
|
});
|
|
});
|
|
}
|
|
}
|