116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
function getQueryParam(name) {
|
|
return new URLSearchParams(window.location.search).get(name);
|
|
}
|
|
|
|
function formatTanggal(dateStr) {
|
|
return new Date(dateStr).toLocaleDateString("id-ID", {
|
|
day: "numeric",
|
|
month: "long",
|
|
year: "numeric"
|
|
});
|
|
}
|
|
|
|
function loadDetail() {
|
|
|
|
const id = getQueryParam("id");
|
|
|
|
fetch(`/WebNew/Berita/GetDetail?id=${id}`)
|
|
.then(res => {
|
|
if (!res.ok) throw new Error("Data tidak ditemukan");
|
|
return res.json();
|
|
})
|
|
.then(data => {
|
|
|
|
if (!data) {
|
|
document.getElementById("judul").innerText = "Data tidak ditemukan";
|
|
return;
|
|
}
|
|
|
|
document.getElementById("judul").innerText = data.judul || "-";
|
|
document.getElementById("tanggal").innerText = formatTanggal(data.tanggal || "");
|
|
|
|
renderSlider(data.gambar);
|
|
|
|
document.getElementById("isi").innerHTML =
|
|
(data.isi || "").replace(/\n/g, "<br>");
|
|
})
|
|
.catch(err => {
|
|
console.error(err);
|
|
document.getElementById("judul").innerText = "Gagal load berita";
|
|
});
|
|
}
|
|
|
|
function loadSidebar() {
|
|
|
|
fetch('/WebNew/Berita/GetAll')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
let html = "";
|
|
|
|
data.slice(0, 4).forEach(item => {
|
|
|
|
let gambar = Array.isArray(item.gambar) ? item.gambar[0] : item.gambar;
|
|
|
|
html += `
|
|
<div class="sidebar-item">
|
|
<img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}" class="sidebar-img">
|
|
|
|
<div class="sidebar-content">
|
|
<small class="sidebar-date">${formatTanggal(item.tanggal)}</small>
|
|
|
|
<div class="sidebar-title">${item.judul}</div>
|
|
|
|
<a href="/WebNew/Berita/Detail?id=${item.id}" class="sidebar-link">
|
|
Baca Selengkapnya
|
|
</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
document.getElementById("sidebar").innerHTML = html;
|
|
});
|
|
}
|
|
|
|
let currentIndex = 0;
|
|
let sliderImages = [];
|
|
|
|
function renderSlider(images) {
|
|
|
|
if (!images || images.length === 0) return;
|
|
|
|
sliderImages = images;
|
|
currentIndex = 0;
|
|
|
|
const slider = document.getElementById("slider");
|
|
|
|
slider.innerHTML = `
|
|
<img id="slide-img" src="${images[0]}">
|
|
|
|
${images.length > 1 ? `
|
|
<button class="slider-btn prev" onclick="prevSlide()">
|
|
<i class="bi bi-chevron-left"></i>
|
|
</button>
|
|
|
|
<button class="slider-btn next" onclick="nextSlide()">
|
|
<i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
` : ""}
|
|
`;
|
|
}
|
|
|
|
function nextSlide() {
|
|
currentIndex = (currentIndex + 1) % sliderImages.length;
|
|
document.getElementById("slide-img").src = sliderImages[currentIndex];
|
|
}
|
|
|
|
function prevSlide() {
|
|
currentIndex = (currentIndex - 1 + sliderImages.length) % sliderImages.length;
|
|
document.getElementById("slide-img").src = sliderImages[currentIndex];
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
loadDetail();
|
|
loadSidebar();
|
|
}); |