banksampah
/
bps-rw
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

style: add button detail on menu rw

main-dlh
Yuri Dimas 2025-11-18 12:41:15 +07:00
parent 66b391e11e
commit 7f6517dda7
No known key found for this signature in database
GPG Key ID: 9FD7E44BC294C68C
2 changed files with 142 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
Controllers/DataRwController.cs
View File

@ -13,7 +13,7 @@ namespace BpsRwApp.Controllers
[HttpGet]
public IActionResult Table()
{
var data = new[]
var rows = new[]
{
new {
rw = "001",
@ -21,9 +21,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 581,
jumlah_rumah_nasabah = 701,
jumlah_bank_sampah = 581,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "002",
@ -31,9 +28,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 889,
jumlah_rumah_nasabah = 934,
jumlah_bank_sampah = 889,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "003",
@ -41,9 +35,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 673,
jumlah_rumah_nasabah = 1378,
jumlah_bank_sampah = 673,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "004",
@ -51,9 +42,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 790,
jumlah_rumah_nasabah = 1094,
jumlah_bank_sampah = 790,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "005",
@ -61,9 +49,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 750,
jumlah_rumah_nasabah = 794,
jumlah_bank_sampah = 750,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "006",
@ -71,9 +56,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 780,
jumlah_rumah_nasabah = 1573,
jumlah_bank_sampah = 780,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "007",
@ -81,9 +63,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 552,
jumlah_rumah_nasabah = 1160,
jumlah_bank_sampah = 552,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "008",
@ -91,9 +70,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 582,
jumlah_rumah_nasabah = 1663,
jumlah_bank_sampah = 582,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "009",
@ -101,9 +77,6 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 935,
jumlah_rumah_nasabah = 730,
jumlah_bank_sampah = 935,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
new {
rw = "010",
@ -111,18 +84,46 @@ namespace BpsRwApp.Controllers
jumlah_rumah_memilah = 593,
jumlah_rumah_nasabah = 1046,
jumlah_bank_sampah = 593,
aksi = "<div class=\"flex gap-2\">" +
"<a href=\"#\" class=\"btn btn-ghost btn-square btn-xs\"><span class=\"icon icon-fill text-sm\">more_horiz</span></a>" +
"</div>",
},
};
var data = rows
.Select(row => new
{
row.rw,
row.kecamatan,
row.jumlah_rumah_memilah,
row.jumlah_rumah_nasabah,
row.jumlah_bank_sampah,
aksi = BuildActionButton(
row.rw,
row.kecamatan,
row.jumlah_rumah_memilah,
row.jumlah_rumah_nasabah,
row.jumlah_bank_sampah)
})
.ToArray();
var response = new
{
data = data
};
return Json(response);
static string BuildActionButton(
string rw,
string kecamatan,
int jumlahRumahMemilah,
int jumlahRumahNasabah,
int jumlahBankSampah)
{
return "<div class=\"flex gap-2\">" +
$"<button type=\"button\" class=\"btn bg-white rounded-full btn-xs btn-view-detail\" data-rw=\"{rw}\" data-kecamatan=\"{kecamatan}\" data-jumlah-rumah-memilah=\"{jumlahRumahMemilah}\" data-jumlah-rumah-nasabah=\"{jumlahRumahNasabah}\" data-jumlah-bank-sampah=\"{jumlahBankSampah}\">" +
"Detail" +
"</button>" +
"</div>";
}
}
}
}

111
Views/DataRw/Index.cshtml
View File

@ -42,6 +42,89 @@
</div>
</div>
<dialog id="rw-detail-modal" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="text-lg font-semibold mb-4">Detail RW</h3>
<div class="grid grid-cols-1 md:grid-cols-2 md:gap-4">
<div class="flex flex-col">
<span class="text-gray-500">Nama Ketua RW</span>
<span class="font-semibold">Ahmad Kurniawan</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">No. HP Ketua RW</span>
<span class="font-semibold">2260</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah KK</span>
<span class="font-semibold">341</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Rumah Memilah</span>
<span class="font-semibold" id="detail-jumlah-rumah-memilah">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah RT</span>
<span class="font-semibold">9</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Luas RW (m<sup>2</sup>)</span>
<span class="font-semibold">10</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Jiwa</span>
<span class="font-semibold">2260</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Timbulan Sampah Per Hari (Kg)</span>
<span class="font-semibold">2260</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Kota / Kabupaten</span>
<span class="font-semibold">Kota Adm. Jakarta Barat</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Kecamatan</span>
<span class="font-semibold" id="detail-kecamatan">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Kelurahan</span>
<span class="font-semibold">Grogol</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">RW</span>
<span class="font-semibold" id="detail-rw">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">No. SK RW</span>
<span class="font-semibold">SK-/1838/83293</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Rumah Nasabah</span>
<span class="font-semibold" id="detail-jumlah-rumah-nasabah">-</span>
</div>
<div class="flex flex-col">
<span class="text-gray-500">Jumlah Bank Sampah</span>
<span class="font-semibold" id="detail-jumlah-bank-sampah">-</span>
</div>
</div>
<div class="modal-action">
<form method="dialog">
<button class="btn rounded-full">
<span class="icon me-1">cancel</span>
Tutup
</button>
</form>
<button type="button" class="btn rounded-full btn-primary">
<span class="icon">print</span>
Cetak
</button>
</div>
</div>
<form method="dialog" class="modal-backdrop">
<button>Tutup</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>
@ -49,6 +132,15 @@
var table;
$(document).ready(function () {
const detailModal = document.getElementById('rw-detail-modal');
const detailElements = {
rw: document.getElementById('detail-rw'),
kecamatan: document.getElementById('detail-kecamatan'),
rumahMemilah: document.getElementById('detail-jumlah-rumah-memilah'),
rumahNasabah: document.getElementById('detail-jumlah-rumah-nasabah'),
bankSampah: document.getElementById('detail-jumlah-bank-sampah')
};
table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataRw")',
scrollX: true,
@ -66,5 +158,22 @@
{ data: 'aksi' },
]
});
$('#example tbody').on('click', '.btn-view-detail', function (event) {
event.preventDefault();
if (!detailModal || typeof detailModal.showModal !== 'function') {
return;
}
const dataset = this.dataset;
detailElements.rw.textContent = dataset.rw || '-';
detailElements.kecamatan.textContent = dataset.kecamatan || '-';
detailElements.rumahMemilah.textContent = dataset.jumlahRumahMemilah || '-';
detailElements.rumahNasabah.textContent = dataset.jumlahRumahNasabah || '-';
detailElements.bankSampah.textContent = dataset.jumlahBankSampah || '-';
detailModal.showModal();
});
});
</script>
</script>