From 7f6517dda7e7c6b0e3d068c363247bae674901ee Mon Sep 17 00:00:00 2001 From: Yuri Dimas Date: Tue, 18 Nov 2025 12:41:15 +0700 Subject: [PATCH] style: add button detail on menu rw --- Controllers/DataRwController.cs | 63 +++++++++--------- Views/DataRw/Index.cshtml | 111 +++++++++++++++++++++++++++++++- 2 files changed, 142 insertions(+), 32 deletions(-) diff --git a/Controllers/DataRwController.cs b/Controllers/DataRwController.cs index 2531899..2db32d9 100644 --- a/Controllers/DataRwController.cs +++ b/Controllers/DataRwController.cs @@ -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 = "
" + - "more_horiz" + - "
", }, new { rw = "002", @@ -31,9 +28,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 889, jumlah_rumah_nasabah = 934, jumlah_bank_sampah = 889, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "003", @@ -41,9 +35,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 673, jumlah_rumah_nasabah = 1378, jumlah_bank_sampah = 673, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "004", @@ -51,9 +42,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 790, jumlah_rumah_nasabah = 1094, jumlah_bank_sampah = 790, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "005", @@ -61,9 +49,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 750, jumlah_rumah_nasabah = 794, jumlah_bank_sampah = 750, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "006", @@ -71,9 +56,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 780, jumlah_rumah_nasabah = 1573, jumlah_bank_sampah = 780, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "007", @@ -81,9 +63,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 552, jumlah_rumah_nasabah = 1160, jumlah_bank_sampah = 552, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "008", @@ -91,9 +70,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 582, jumlah_rumah_nasabah = 1663, jumlah_bank_sampah = 582, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "009", @@ -101,9 +77,6 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 935, jumlah_rumah_nasabah = 730, jumlah_bank_sampah = 935, - aksi = "
" + - "more_horiz" + - "
", }, new { rw = "010", @@ -111,18 +84,46 @@ namespace BpsRwApp.Controllers jumlah_rumah_memilah = 593, jumlah_rumah_nasabah = 1046, jumlah_bank_sampah = 593, - aksi = "
" + - "more_horiz" + - "
", }, }; + 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 "
" + + $"" + + "
"; + } } } } diff --git a/Views/DataRw/Index.cshtml b/Views/DataRw/Index.cshtml index edc8ad1..7f1ab14 100644 --- a/Views/DataRw/Index.cshtml +++ b/Views/DataRw/Index.cshtml @@ -42,6 +42,89 @@ + +
+

Detail RW

+
+
+ Nama Ketua RW + Ahmad Kurniawan +
+
+ No. HP Ketua RW + 2260 +
+
+ Jumlah KK + 341 +
+
+ Jumlah Rumah Memilah + - +
+
+ Jumlah RT + 9 +
+
+ Luas RW (m2) + 10 +
+
+ Jumlah Jiwa + 2260 +
+
+ Jumlah Timbulan Sampah Per Hari (Kg) + 2260 +
+
+ Kota / Kabupaten + Kota Adm. Jakarta Barat +
+
+ Kecamatan + - +
+
+ Kelurahan + Grogol +
+
+ RW + - +
+
+ No. SK RW + SK-/1838/83293 +
+
+ Jumlah Rumah Nasabah + - +
+
+ Jumlah Bank Sampah + - +
+
+
+
+ +
+ +
+
+
+ +
+ + @@ -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(); + }); }); - + \ No newline at end of file