153 lines
4.3 KiB
Plaintext
153 lines
4.3 KiB
Plaintext
@{
|
||
Layout = "~/Views/WebNew/Shared/_Layout.cshtml";
|
||
|
||
}
|
||
@section Style {
|
||
<link rel="stylesheet" href="~/webnew/css/berita/detailberita.css" asp-append-version="true" />
|
||
}
|
||
|
||
@await Html.PartialAsync("~/Views/WebNew/Shared/Section/_Helpdesk.cshtml")
|
||
|
||
|
||
<div class="rounded-3 container mb-4 mt-5 mt-4 bg-white p-3 px-3">
|
||
|
||
<div class="row">
|
||
|
||
<div class="col-md-8">
|
||
|
||
<small class="text-muted" id="tanggal"></small>
|
||
|
||
<h3 class="fw-bold mt-2" id="judul"></h3>
|
||
|
||
<div id="slider" class="slider my-3"></div>
|
||
|
||
<p id="isi" style="line-height:1.7;"></p>
|
||
|
||
</div>
|
||
|
||
<div class="col-md-4">
|
||
|
||
<div class="card sidebar-card p-3 shadow-sm">
|
||
<h6 class="fw-semibold mb-3">Baca Artikel Lainnya</h6>
|
||
<div id="sidebar"></div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
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()">‹</button>
|
||
<button class="slider-btn next" onclick="nextSlide()">›</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();
|
||
});
|
||
</script> |