101 lines
3.2 KiB
Plaintext
101 lines
3.2 KiB
Plaintext
@model List<WebApplication2.Models.ViewModels.BeritaViewModel>
|
|
|
|
@{
|
|
ViewData["Title"] = "Berita";
|
|
}
|
|
|
|
@section Style {
|
|
<link rel="stylesheet" href="~/webnew/css/Berita/Berita.css" asp-append-version="true" />
|
|
}
|
|
|
|
@await Html.PartialAsync("Section/_Hero", "Berita")
|
|
|
|
<div class="container mt-5">
|
|
|
|
<div class="row mb-4">
|
|
<div class="col-md-6">
|
|
<input type="text" id="search" class="form-control" placeholder="Cari Berita...">
|
|
</div>
|
|
<div class="col-md-6">
|
|
<input type="date" id="filterDate" class="form-control">
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row" id="beritaList"></div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
function formatTanggal(dateStr) {
|
|
const date = new Date(dateStr);
|
|
return date.toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric"
|
|
});
|
|
}
|
|
|
|
function loadBerita() {
|
|
|
|
fetch('/Berita/GetBerita')
|
|
.then(res => res.json())
|
|
.then(data => {
|
|
|
|
renderBerita(data);
|
|
|
|
document.getElementById("search").addEventListener("keyup", function () {
|
|
const keyword = this.value.toLowerCase();
|
|
const filtered = data.filter(x =>
|
|
x.judul.toLowerCase().includes(keyword) ||
|
|
x.deskripsi.toLowerCase().includes(keyword)
|
|
);
|
|
renderBerita(filtered);
|
|
});
|
|
|
|
document.getElementById("filterDate").addEventListener("change", function () {
|
|
const date = this.value;
|
|
const filtered = data.filter(x => x.tanggal === date);
|
|
renderBerita(filtered);
|
|
});
|
|
|
|
});
|
|
}
|
|
|
|
function renderBerita(list) {
|
|
|
|
let html = "";
|
|
|
|
list.forEach(item => {
|
|
html += `
|
|
<div class="col-md-4 mb-4">
|
|
<div class="card h-100 shadow-sm">
|
|
|
|
<img src="${Array.isArray(item.gambar) ? item.gambar[0] : item.gambar}"
|
|
class="card-img-top">
|
|
|
|
<div class="card-body">
|
|
<small class="text-muted">${formatTanggal(item.tanggal)}</small>
|
|
|
|
<h6 class="fw-bold mt-2">${item.judul}</h6>
|
|
|
|
<p class="text-muted small">
|
|
${item.deskripsi}
|
|
</p>
|
|
|
|
<a href="/Berita/Detail?id=${item.id}" class="text-primary fw-semibold">
|
|
Baca Selengkapnya
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
document.getElementById("beritaList").innerHTML = html;
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", loadBerita);
|
|
</script>
|