feat: create detail page pjlp pendamping data
Regiaaaaaa
parent
81f1c41c08
commit
a64a9e1068
|
|
@ -12,7 +12,7 @@ namespace BpsRwApp.Controllers
|
|||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult DetailPendamping(string nama, string rw)
|
||||
public IActionResult Detail(string nama, string rw)
|
||||
{
|
||||
if (string.IsNullOrEmpty(nama) || string.IsNullOrEmpty(rw))
|
||||
return RedirectToAction("Index");
|
||||
|
|
@ -23,7 +23,7 @@ namespace BpsRwApp.Controllers
|
|||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult TableDetailPendamping(string rw)
|
||||
public IActionResult TableDetail(string rw)
|
||||
{
|
||||
var data = Enumerable.Range(1, 10)
|
||||
.Select(i => new
|
||||
|
|
@ -87,7 +87,7 @@ namespace BpsRwApp.Controllers
|
|||
}
|
||||
|
||||
var rw = (index % 10 + 1).ToString("D2");
|
||||
var detailUrl = $"/DataPendampingRw/DetailPendamping?nama={System.Web.HttpUtility.UrlEncode(nama)}&rw={rw}";
|
||||
var detailUrl = $"/DataPendampingRw/Detail?nama={System.Web.HttpUtility.UrlEncode(nama)}&rw={rw}";
|
||||
|
||||
return new
|
||||
{
|
||||
|
|
@ -130,6 +130,53 @@ namespace BpsRwApp.Controllers
|
|||
|
||||
return Json(new { data });
|
||||
}
|
||||
[HttpGet]
|
||||
public IActionResult DetailPendamping(string nama, string rw, string tanggal)
|
||||
{
|
||||
if (string.IsNullOrEmpty(nama) || string.IsNullOrEmpty(rw))
|
||||
return RedirectToAction("Index");
|
||||
|
||||
ViewBag.Nama = nama;
|
||||
ViewBag.RW = rw;
|
||||
ViewBag.Tanggal = tanggal ?? DateTime.Now.ToString("yyyy-MM-dd");
|
||||
return View();
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult TableDetailPendamping(string rw, string tanggal)
|
||||
{
|
||||
var random = new Random();
|
||||
|
||||
var data = Enumerable.Range(1, 50)
|
||||
.Select(i => new
|
||||
{
|
||||
no = i,
|
||||
alamat_rumah = GenerateAlamat(i),
|
||||
rw = rw ?? "04",
|
||||
mudah_terurai = true,
|
||||
material_daur = true,
|
||||
b3 = true,
|
||||
residu = true,
|
||||
photo = random.Next(0, 5)
|
||||
})
|
||||
.ToList();
|
||||
|
||||
return Json(new { data });
|
||||
}
|
||||
|
||||
private static string GenerateAlamat(int index)
|
||||
{
|
||||
var streetNames = new[]
|
||||
{
|
||||
"Kedongan", "Jambu", "Mangga", "Durian", "Sawo",
|
||||
"Mangga", "Rambutan", "Salak", "Nangka", "Duku"
|
||||
};
|
||||
|
||||
var randomStreet = streetNames[index % streetNames.Length];
|
||||
var houseNumber = (index * 11) % 100 + 1;
|
||||
|
||||
return $"Jalan {randomStreet} No. {houseNumber}";
|
||||
}
|
||||
|
||||
private static string BuildMetricBadge(int value, int warningThreshold, int successThreshold)
|
||||
{
|
||||
|
|
|
|||
|
|
@ -0,0 +1,132 @@
|
|||
@{
|
||||
ViewData["Title"] = "Data Detail Pendamping RW";
|
||||
var nama = ViewBag.Nama as string;
|
||||
var rw = ViewBag.RW as string;
|
||||
}
|
||||
|
||||
<div class="breadcrumbs text-sm mb-4">
|
||||
<ul>
|
||||
<li class="text-gray-500"><a href="/DataPendampingRw/Index">Data Pendamping RW</a></li>
|
||||
<li class="text-gray-500"><a>Checklist</a></li>
|
||||
<li id="breadcrumb-active">@nama</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-800">Data PJLP Pendamping</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">@nama</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="text-sm font-medium text-gray-700">RW :</label>
|
||||
<select class="select select-bordered rounded-lg px-4 py-2" id="select-rt" style="width: 120px;">
|
||||
<option value="">Pilih RW</option>
|
||||
@for (int i = 1; i <= 10; i++)
|
||||
{
|
||||
<option>@i.ToString("D2")</option>
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-white shadow-sm">
|
||||
<div class="card-body p-0">
|
||||
<table class="table w-full" id="tableDetail">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-12"></th>
|
||||
<th>Tanggal</th>
|
||||
<th>RW</th>
|
||||
<th>Kelurahan</th>
|
||||
<th>Mudah Terurai<br>(Jumlah/Berat)</th>
|
||||
<th>Materi Daur<br>(Jumlah/Berat)</th>
|
||||
<th>B3<br>(Jumlah/Berat)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
||||
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
|
||||
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
|
||||
<script>
|
||||
let table;
|
||||
let currentRW = '@rw';
|
||||
|
||||
$(document).ready(function () {
|
||||
table = new DataTable('#tableDetail', {
|
||||
ajax: {
|
||||
url: '@Url.Action("TableDetail", "DataPendampingRw")',
|
||||
data: (d) => ({ rw: currentRW })
|
||||
},
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
searching: true,
|
||||
paging: true,
|
||||
pageLength: 10,
|
||||
initComplete: function () {
|
||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
className: 'dt-control',
|
||||
orderable: false,
|
||||
data: null,
|
||||
defaultContent: '<button class="btn btn-xs btn-circle"><span class="icon icon-fill">expand_more</span></button>'
|
||||
},
|
||||
{ data: 'tanggal' },
|
||||
{ data: 'rw' },
|
||||
{ data: 'kelurahan' },
|
||||
{ data: 'mudah_terurai' },
|
||||
{ data: 'materi_daur' },
|
||||
{ data: 'b3' }
|
||||
]
|
||||
});
|
||||
|
||||
$('#tableDetail tbody').on('click', 'td.dt-control', function () {
|
||||
const tr = $(this).closest('tr');
|
||||
const row = table.row(tr);
|
||||
const btn = $(this).find('.icon');
|
||||
|
||||
if (row.child.isShown()) {
|
||||
row.child.hide();
|
||||
btn.text('expand_more');
|
||||
tr.removeClass('shown');
|
||||
} else {
|
||||
row.child(getExpandedContent(row.data())).show();
|
||||
btn.text('expand_less');
|
||||
tr.addClass('shown');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function getExpandedContent(data) {
|
||||
const nama = encodeURIComponent('@nama');
|
||||
const rw = encodeURIComponent(data.rw || '');
|
||||
const tanggal = encodeURIComponent(data.tanggal || '');
|
||||
|
||||
const detailUrl = `/DataPendampingRw/DetailPendamping?nama=${nama}&rw=${rw}&tanggal=${tanggal}`;
|
||||
|
||||
return `
|
||||
<div class="px-4 py-3 bg-base-100">
|
||||
<div class="flex justify-between items-center pl-10">
|
||||
<div class="grid grid-cols-2 gap-24">
|
||||
<div>
|
||||
<span class="text-sm text-gray-600">Residu (Jumlah/Berat):</span>
|
||||
<div class="font-semibold">${data.residu_jumlah}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-gray-600">Photo:</span>
|
||||
<div class="font-semibold">${data.photo}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<a href="${detailUrl}" class="btn btn-sm btn-ghost rounded-full">Detail</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,46 +1,86 @@
|
|||
@{
|
||||
ViewData["Title"] = "Data PILP Pendamping";
|
||||
ViewData["Title"] = "Detail Data PJLP Pendamping";
|
||||
var nama = ViewBag.Nama as string;
|
||||
var rw = ViewBag.RW as string;
|
||||
var tanggal = ViewBag.Tanggal as string;
|
||||
}
|
||||
|
||||
<div class="breadcrumbs text-sm mb-4">
|
||||
<div class="text-sm breadcrumbs mb-6">
|
||||
<ul>
|
||||
<li class="text-gray-500"><a href="/DataPendampingRw/Index">Data Pendamping RW</a></li>
|
||||
<li class="text-gray-500"><a>Checklist</a></li>
|
||||
<li id="breadcrumb-active">@nama</li>
|
||||
<li><a class="text-gray-600">Checklist</a></li>
|
||||
<li><a class="text-gray-600">@nama</a></li>
|
||||
<li class="font-medium">Detail</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold text-gray-800">Data PJLP Pendamping</h2>
|
||||
<p class="text-sm text-gray-600 mt-1">@nama</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<label class="text-sm font-medium text-gray-700">RW :</label>
|
||||
<select class="select select-bordered rounded-lg px-4 py-2" id="select-rt" style="width: 120px;">
|
||||
<option value="">Pilih RW</option>
|
||||
@for (int i = 1; i <= 10; i++)
|
||||
{
|
||||
<option>@i.ToString("D2")</option>
|
||||
}
|
||||
</select>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="flex flex-col lg:flex-row justify-between lg:items-center gap-4 mb-6">
|
||||
<h2 class="text-2xl font-semibold">
|
||||
Rabu, 22 Oktober 2025
|
||||
</h2>
|
||||
<div class="flex flex-wrap gap-3 justify-end">
|
||||
<a href="/DataPendampingRw/Index"
|
||||
class="btn bg-white hover:bg-gray-50 rounded-full">
|
||||
<span class="icon">arrow_back</span>
|
||||
Kembali
|
||||
</a>
|
||||
<button type="button"
|
||||
class="btn btn-primary rounded-full text-white border-0">
|
||||
<span class="icon icon-fill me-2">check_circle</span>
|
||||
Verifikasi
|
||||
</button>
|
||||
<button class="btn rounded-full bg-white">
|
||||
<span class="icon icon-fill me-2">filter_list</span>
|
||||
Filter
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card bg-white shadow-sm">
|
||||
|
||||
<!-- Summary Cards -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
|
||||
<div class="card bg-green-600 text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">Mudah Terurai</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-yellow-500 text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">Material Daur</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-red-500 text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">B3</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card bg-black text-white shadow-sm rounded-xl">
|
||||
<div class="card-body">
|
||||
<p class="text-sm opacity-90 mb-1">Residu</p>
|
||||
<h2 class="text-4xl font-bold">3,341 <span class="text-base font-normal opacity-90">Kg</span></h2>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table Card -->
|
||||
<div class="card bg-white shadow-sm rounded-xl">
|
||||
<div class="card-body p-0">
|
||||
<table class="table w-full" id="tableDetailPendamping">
|
||||
<thead>
|
||||
<table class="table" id="detailTable">
|
||||
<thead class="bg-gray-50">
|
||||
<tr>
|
||||
<th class="w-12"></th>
|
||||
<th>Tanggal</th>
|
||||
<th>RW</th>
|
||||
<th>Kelurahan</th>
|
||||
<th>Mudah Terurai<br>(Jumlah/Berat)</th>
|
||||
<th>Materi Daur<br>(Jumlah/Berat)</th>
|
||||
<th>B3<br>(Jumlah/Berat)</th>
|
||||
<th class="w-[5%] text-gray-600 font-medium">No</th>
|
||||
<th class="w-[25%] text-gray-600 font-medium">Alamat Rumah</th>
|
||||
<th class="w-[8%] text-gray-600 font-medium">RW</th>
|
||||
<th class="w-[12%] text-gray-600 font-medium text-center">Mudah Terurai</th>
|
||||
<th class="w-[12%] text-gray-600 font-medium text-center">Material Daur</th>
|
||||
<th class="w-[8%] text-gray-600 font-medium text-center">B3</th>
|
||||
<th class="w-[12%] text-gray-600 font-medium text-center">Residu</th>
|
||||
<th class="w-[10%] text-gray-600 font-medium text-center">Photo</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
|
|
@ -48,80 +88,87 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal Image Popup -->
|
||||
<dialog id="modal_image" class="modal">
|
||||
<div class="modal-box max-w-lg p-4">
|
||||
<h3 class="font-bold text-base mb-3">Foto Sampah</h3>
|
||||
<div class="mb-3">
|
||||
<img src="/images/weightrash.jpg" alt="Foto Sampah" class="w-full h-auto rounded-lg">
|
||||
</div>
|
||||
<div class="modal-action mt-3">
|
||||
<form method="dialog">
|
||||
<button class="btn btn-sm btn-neutral">Tutup</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<form method="dialog" class="modal-backdrop">
|
||||
<button>close</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
|
||||
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
|
||||
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
|
||||
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
|
||||
<script>
|
||||
let table;
|
||||
let currentRW = '@rw';
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
table = new DataTable('#tableDetailPendamping', {
|
||||
ajax: {
|
||||
url: '@Url.Action("TableDetailPendamping", "DataPendampingRw")',
|
||||
data: (d) => ({ rw: currentRW })
|
||||
},
|
||||
const rw = '@rw';
|
||||
const tanggal = '@tanggal';
|
||||
|
||||
console.log('RW:', rw, 'Tanggal:', tanggal);
|
||||
|
||||
new DataTable('#detailTable', {
|
||||
ajax: '/DataPendampingRw/TableDetailPendamping?rw=' + rw + '&tanggal=' + tanggal,
|
||||
scrollX: true,
|
||||
autoWidth: false,
|
||||
searching: true,
|
||||
paging: true,
|
||||
pageLength: 10,
|
||||
initComplete: function () {
|
||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||
},
|
||||
columns: [
|
||||
{ data: 'no', className: '!align-middle' },
|
||||
{ data: 'alamat_rumah', className: '!align-middle' },
|
||||
{ data: 'rw', className: '!align-middle' },
|
||||
|
||||
{
|
||||
className: 'dt-control',
|
||||
orderable: false,
|
||||
data: null,
|
||||
defaultContent: '<button class="btn btn-xs btn-circle"><span class="icon icon-fill">expand_more</span></button>'
|
||||
data: 'mudah_terurai',
|
||||
className: '!align-middle !text-center',
|
||||
render: (v) => v
|
||||
? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
|
||||
: '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{ data: 'tanggal' },
|
||||
{ data: 'rw' },
|
||||
{ data: 'kelurahan' },
|
||||
{ data: 'mudah_terurai' },
|
||||
{ data: 'materi_daur' },
|
||||
{ data: 'b3' }
|
||||
{
|
||||
data: 'material_daur',
|
||||
className: '!align-middle !text-center',
|
||||
render: (v) => v
|
||||
? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
|
||||
: '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{
|
||||
data: 'b3',
|
||||
className: '!align-middle !text-center',
|
||||
render: (v) => v
|
||||
? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
|
||||
: '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{
|
||||
data: 'residu',
|
||||
className: '!align-middle !text-center',
|
||||
render: (v) => v
|
||||
? '<input type="checkbox" checked class="checkbox checkbox-success text-white" />'
|
||||
: '<input type="checkbox" class="checkbox" />'
|
||||
},
|
||||
{
|
||||
data: 'photo',
|
||||
className: '!align-middle !text-center',
|
||||
render: () => `
|
||||
<button class="btn btn-sm btn-ghost rounded-full btn-lihat-gambar">Photo</button>`
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
$('#tableDetailPendamping tbody').on('click', 'td.dt-control', function () {
|
||||
const tr = $(this).closest('tr');
|
||||
const row = table.row(tr);
|
||||
const btn = $(this).find('.icon');
|
||||
|
||||
if (row.child.isShown()) {
|
||||
row.child.hide();
|
||||
btn.text('expand_more');
|
||||
tr.removeClass('shown');
|
||||
} else {
|
||||
row.child(getExpandedContent(row.data())).show();
|
||||
btn.text('expand_less');
|
||||
tr.addClass('shown');
|
||||
}
|
||||
$(document).on('click', '.btn-lihat-gambar', function() {
|
||||
modal_image.showModal();
|
||||
});
|
||||
});
|
||||
|
||||
// Expand row content
|
||||
function getExpandedContent(data) {
|
||||
return `
|
||||
<div class="px-4 py-3 bg-base-100">
|
||||
<div class="flex justify-between items-center pl-10">
|
||||
<div class="grid grid-cols-2 gap-24">
|
||||
<div>
|
||||
<span class="text-sm text-gray-600">Residu (Jumlah/Berat):</span>
|
||||
<div class="font-semibold">${data.residu_jumlah}</div>
|
||||
</div>
|
||||
<div>
|
||||
<span class="text-sm text-gray-600">Photo:</span>
|
||||
<div class="font-semibold">${data.photo}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-ghost rounded-full">Detail</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in New Issue