111 lines
3.2 KiB
JavaScript
111 lines
3.2 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()"><3E></button>
|
||
<button class="slider-btn next" onclick="nextSlide()"><3E></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();
|
||
}); |