132 lines
4.5 KiB
Plaintext
132 lines
4.5 KiB
Plaintext
@{
|
|
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-xs bg-white border rounded-full">Detail</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
</script> |