feat(dataBankSampah): add Detail Page
Kevin Hendrawan
parent
a44a39565e
commit
2390b41bc5
|
|
@ -10,6 +10,11 @@ namespace BankSampahApp.Controllers.Main
|
|||
return View("~/Views/Main/DataBankSampah/Index.cshtml");
|
||||
}
|
||||
|
||||
public IActionResult Detail()
|
||||
{
|
||||
return View("~/Views/Main/DataBankSampah/Detail.cshtml");
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult Table()
|
||||
{
|
||||
|
|
@ -25,7 +30,7 @@ namespace BankSampahApp.Controllers.Main
|
|||
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"javascript:void(0)\" class=\"btn btn-circle btn-success text-white btn-sm\"><i class=\"ph ph-check\"></i></a>" +
|
||||
"<a href=\"/Main/Profil/Index\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"/Main/DataBankSampah/Detail\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||
"</div>",
|
||||
},
|
||||
|
|
@ -39,7 +44,7 @@ namespace BankSampahApp.Controllers.Main
|
|||
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"javascript:void(0)\" class=\"btn btn-circle btn-success text-white btn-sm\"><i class=\"ph ph-check\"></i></a>" +
|
||||
"<a href=\"/Main/Profil/Index\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"/Main/DataBankSampah/Detail\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||
"</div>",
|
||||
},
|
||||
|
|
@ -53,7 +58,7 @@ namespace BankSampahApp.Controllers.Main
|
|||
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"javascript:void(0)\" class=\"btn btn-circle btn-success text-white btn-sm\"><i class=\"ph ph-check\"></i></a>" +
|
||||
"<a href=\"/Main/Profil/Index\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"/Main/DataBankSampah/Detail\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||
"</div>",
|
||||
},
|
||||
|
|
@ -67,7 +72,7 @@ namespace BankSampahApp.Controllers.Main
|
|||
status= "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"javascript:void(0)\" class=\"btn btn-circle btn-success text-white btn-sm\"><i class=\"ph ph-check\"></i></a>" +
|
||||
"<a href=\"/Main/Profil/Index\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"/Main/DataBankSampah/Detail\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||
"</div>",
|
||||
},
|
||||
|
|
@ -81,7 +86,7 @@ namespace BankSampahApp.Controllers.Main
|
|||
status= "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"javascript:void(0)\" class=\"btn btn-circle btn-success text-white btn-sm\"><i class=\"ph ph-check\"></i></a>" +
|
||||
"<a href=\"/Main/Profil/Index\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"/Main/DataBankSampah/Detail\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||
"</div>",
|
||||
},
|
||||
|
|
@ -95,7 +100,7 @@ namespace BankSampahApp.Controllers.Main
|
|||
status= "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
aksi = "<div class=\"flex gap-2\">" +
|
||||
"<a href=\"javascript:void(0)\" class=\"btn btn-circle btn-success text-white btn-sm\"><i class=\"ph ph-check\"></i></a>" +
|
||||
"<a href=\"/Main/Profil/Index\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"/Main/DataBankSampah/Detail\" class=\"btn btn-circle btn-info text-white btn-sm\"><i class=\"ph ph-eye\"></i></a>" +
|
||||
"<a href=\"#\" class=\"btn btn-circle btn-error text-white btn-sm\"><i class=\"ph ph-trash\"></i></a>" +
|
||||
"</div>",
|
||||
},
|
||||
|
|
@ -108,5 +113,97 @@ namespace BankSampahApp.Controllers.Main
|
|||
|
||||
return Json(response);
|
||||
}
|
||||
|
||||
[HttpGet]
|
||||
public IActionResult TableNasabah(){
|
||||
var data = new[]{
|
||||
new {
|
||||
nama = "Kevin Hendrawan",
|
||||
no_ktp = "1234567890xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-05",
|
||||
status="<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Aldo Pratama",
|
||||
no_ktp = "9876543210xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-06",
|
||||
status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Aldo Pratama",
|
||||
no_ktp = "9876543210xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-06",
|
||||
status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Budi Santoso",
|
||||
no_ktp = "1122334455xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-07",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Citra Anggraini",
|
||||
no_ktp = "2233445566xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-08",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Dewi Lestari",
|
||||
no_ktp = "3344556677xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-09",
|
||||
status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Eko Prakoso",
|
||||
no_ktp = "4455667788xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-10",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Farah Azzahra",
|
||||
no_ktp = "5566778899xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-11",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Gilang Saputra",
|
||||
no_ktp = "6677889900xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-12",
|
||||
status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Hana Kartika",
|
||||
no_ktp = "7788990011xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-13",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Irwan Syahputra",
|
||||
no_ktp = "8899001122xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-14",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Joko Prabowo",
|
||||
no_ktp = "9900112233xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-15",
|
||||
status = "<div class=\"badge badge-error badge-soft rounded-full\">Belum Disetujui</div>",
|
||||
},
|
||||
new {
|
||||
nama = "Kirana Wulandari",
|
||||
no_ktp = "1011121314xxxxxx",
|
||||
tgl_pendaftaran = "2025-06-16",
|
||||
status = "<div class=\"badge badge-success badge-soft rounded-full\">Disetujui</div>",
|
||||
},
|
||||
};
|
||||
|
||||
var response = new
|
||||
{
|
||||
data = data
|
||||
};
|
||||
|
||||
return Json(response);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,416 @@
|
|||
@{
|
||||
ViewData["Title"] = "Detail Data Bank Sampah";
|
||||
}
|
||||
|
||||
@section Styles {
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
<style>
|
||||
#map-display {
|
||||
height: 400px;
|
||||
width: 100%;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
</style>
|
||||
}
|
||||
|
||||
<div class="flex flex-col gap-2 md:flex-row md:justify-between md:gap-0">
|
||||
<div class="prose">
|
||||
<span class="text-xl font-semibold text-black">
|
||||
Detail Data Bank Sampah
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-6"></div>
|
||||
|
||||
<div class="flex flex-col items-center justify-between gap-4 rounded bg-white p-6 md:flex-row">
|
||||
<div class="flex w-full flex-col items-center gap-4 md:flex-row">
|
||||
<figure>
|
||||
<img src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
|
||||
alt="Shoes"
|
||||
width="80"
|
||||
height="80"
|
||||
class="h-20 w-20 rounded bg-contain bg-center object-cover" />
|
||||
</figure>
|
||||
<div class="flex flex-col items-center md:items-start">
|
||||
<h2 class="font-semibold">Jakarta Timur</h2>
|
||||
<p>Bank Sampah Induk</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="badge badge-soft badge-success">
|
||||
Status Aktif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-6"></div>
|
||||
<div class="flex flex-wrap gap-2 mt-3 mb-3">
|
||||
<button type="button" class="py-3 btn btn-sm bg-bank-sampah-primary-500 rounded-full text-white transition tab-btn">Details</button>
|
||||
<button class="py-3 btn btn-sm rounded-full bg-white transition tab-btn">
|
||||
Aktivitas
|
||||
</button>
|
||||
<button class="py-3 btn btn-sm rounded-full bg-white transition tab-btn">
|
||||
Nasabah
|
||||
</button>
|
||||
<button class="py-3 btn btn-sm rounded-full bg-white transition tab-btn">
|
||||
Jenis & Harga Sampah
|
||||
</button>
|
||||
</div>
|
||||
<div class="card bg-white">
|
||||
<div class="card-body">
|
||||
<div class="w-full tab-panel overflow-x-auto" id="details">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h2 class="card-title">
|
||||
Informasi Biodata
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Nama Bank Sampah</span>
|
||||
<span class="text-sm">Jakarta Timur</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Kategori Bank Sampah</span>
|
||||
<span class="text-sm">Warga</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Email</span>
|
||||
<span class="text-sm">banksampahjaktim@gmail.com</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">SK Penetapan</span>
|
||||
<span class="text-sm">127.12.1222.1111</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Penangung Jawab</span>
|
||||
<span class="text-sm">Ikhdan Maulana</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">No. HP Penanggung Jawab</span>
|
||||
<span class="text-sm">089556728383</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Jumlah Pengurus</span>
|
||||
<span class="text-sm">67</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Badan Hukum</span>
|
||||
<span class="text-sm">PT</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Luas Lahan m<sup>2</sup></span>
|
||||
<span class="text-sm">6128</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Status Lahan</span>
|
||||
<span class="text-sm">Pribadi</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Tahun Berdiri</span>
|
||||
<span class="text-sm">2021</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">SK Penetapan PT</span>
|
||||
<span class="text-sm">12.340-327832.38.12</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Provinsi</span>
|
||||
<span class="text-sm">DKI Jakarta</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Kota</span>
|
||||
<span class="text-sm">Kota Adm Jakarta Timur</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Kecamatan</span>
|
||||
<span class="text-sm">Pasarejo</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Kelurahan</span>
|
||||
<span class="text-sm">Pasar Minggu</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Alamat</span>
|
||||
<span class="text-sm">Jalan Raya Pasar Minggu No. 45 Jakarta Timur, DKI Jakarta</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">RT</span>
|
||||
<span class="text-sm">02</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">RW</span>
|
||||
<span class="text-sm">02</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Kode Pos</span>
|
||||
<span class="text-sm">61374</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="grid grid-cols-1 space-y-2 md:grid-cols-4">
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Latitude</span>
|
||||
<span class="text-sm" id="latitude-value">-6.2088</span>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs text-gray-500">Longitude</span>
|
||||
<span class="text-sm" id="longitude-value">106.8456</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="divider"></div>
|
||||
|
||||
<!-- Map Display -->
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-gray-700 mb-3">
|
||||
<i class="ph ph-map-pin me-2"></i>
|
||||
Lokasi di Peta
|
||||
</h3>
|
||||
<div id="map-display" class="rounded-lg border border-gray-300"></div>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
<i class="ph ph-info me-1"></i>
|
||||
Peta menampilkan lokasi Bank Sampah
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
<div class="w-full tab-panel hidden" id="aktivitas">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h2 class="card-title">
|
||||
Aktivitas
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="space-y-2 w-full overflow-x-auto">
|
||||
<table class="table-zebra table" id="exampleAktivitas">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-[5%]">No</th>
|
||||
<th class="w-[95%]">Nama Aktivitas</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full tab-panel hidden" id="nasabah">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h2 class="card-title">
|
||||
Nasabah
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="space-y-2 w-full overflow-x-auto">
|
||||
<table class="table-zebra table" id="exampleNasabah">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-[5%]">No</th>
|
||||
<th class="w-[30%]">Nama Nasabah</th>
|
||||
<th class="w-[25%]">No KTP</th>
|
||||
<th class="w-[20%]">Tanggal Pendaftaran</th>
|
||||
<th class="w-[20%]">Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-full tab-panel hidden" id="jenis_harga">
|
||||
<div class="flex flex-row items-center justify-between">
|
||||
<h2 class="card-title">
|
||||
Jenis & Harga
|
||||
</h2>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<div class="space-y-2 w-full overflow-x-auto">
|
||||
<table class="table-zebra table" id="exampleJenisHarga">
|
||||
<!-- head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Kategori Sampah</th>
|
||||
<th>Sub Kategori Sampah</th>
|
||||
<th>Harga</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Plastik</td>
|
||||
<td>Botol Plastik</td>
|
||||
<td>Rp 3.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Plastik</td>
|
||||
<td>Kresek</td>
|
||||
<td>Rp 1.500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>Kertas</td>
|
||||
<td>Kertas HVS</td>
|
||||
<td>Rp 2.500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>Kertas</td>
|
||||
<td>Karton</td>
|
||||
<td>Rp 1.800</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>Logam</td>
|
||||
<td>Kaleng</td>
|
||||
<td>Rp 4.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>Logam</td>
|
||||
<td>Besi</td>
|
||||
<td>Rp 5.500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7</td>
|
||||
<td>Kaca</td>
|
||||
<td>Botol Kaca</td>
|
||||
<td>Rp 2.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8</td>
|
||||
<td>Kaca</td>
|
||||
<td>Pecahan Kaca</td>
|
||||
<td>Rp 1.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9</td>
|
||||
<td>Organik</td>
|
||||
<td>Sisa Makanan</td>
|
||||
<td>Rp 500</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10</td>
|
||||
<td>Organik</td>
|
||||
<td>Daun Kering</td>
|
||||
<td>Rp 700</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11</td>
|
||||
<td>Elektronik</td>
|
||||
<td>Kabel Bekas</td>
|
||||
<td>Rp 6.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12</td>
|
||||
<td>Elektronik</td>
|
||||
<td>Peralatan Kecil</td>
|
||||
<td>Rp 8.000</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script>
|
||||
// Get coordinates from data
|
||||
const lat = parseFloat(document.getElementById('latitude-value').textContent);
|
||||
const lng = parseFloat(document.getElementById('longitude-value').textContent);
|
||||
var tableAktivitas;
|
||||
var tableNasabah;
|
||||
var tableJenisHarga;
|
||||
|
||||
// Initialize map
|
||||
const mapDisplay = L.map('map-display').setView([lat, lng], 15);
|
||||
|
||||
// Add tile layer
|
||||
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
||||
attribution: '© OpenStreetMap contributors',
|
||||
maxZoom: 18,
|
||||
minZoom: 4
|
||||
}).addTo(mapDisplay);
|
||||
|
||||
// Add marker (non-draggable for view mode)
|
||||
const marker = L.marker([lat, lng]).addTo(mapDisplay);
|
||||
marker.bindPopup(`
|
||||
<div style="text-align: center;">
|
||||
<strong>Lokasi Bank Sampah</strong><br>
|
||||
<small>${lat.toFixed(8)}, ${lng.toFixed(8)}</small>
|
||||
</div>
|
||||
`).openPopup();
|
||||
|
||||
tableAktivitas = new DataTable('#exampleAktivitas', {
|
||||
ajax: '/Master/Aktivitas/Table',
|
||||
scrollX: true,
|
||||
autoWidth: true,
|
||||
initComplete: function () {
|
||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||
},
|
||||
columns: [
|
||||
{ data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
|
||||
{ data: 'nama' },
|
||||
]
|
||||
});
|
||||
tableNasabah = new DataTable('#exampleNasabah', {
|
||||
ajax: '/Main/DataBankSampah/TableNasabah',
|
||||
scrollX: true,
|
||||
autoWidth: true,
|
||||
initComplete: function () {
|
||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||
},
|
||||
columns: [
|
||||
{ data: null, render: (d, t, r, m) => m.row + 1, orderable: false, searchable: false },
|
||||
{ data: 'nama' },
|
||||
{ data: 'no_ktp' },
|
||||
{ data: 'tgl_pendaftaran' },
|
||||
{ data: 'status' },
|
||||
]
|
||||
});
|
||||
|
||||
tableJenisHarga = new DataTable('#exampleJenisHarga')
|
||||
</script>
|
||||
|
||||
<script>
|
||||
$(document).ready(function () {
|
||||
$('.tab-btn').on('click', function () {
|
||||
$('.tab-btn').removeClass('active')
|
||||
.removeClass('bg-bank-sampah-primary-500 text-white')
|
||||
.addClass('bg-white text-black');
|
||||
|
||||
// set active to clicked
|
||||
$(this).addClass('active')
|
||||
.removeClass('bg-white text-black')
|
||||
.addClass('bg-bank-sampah-primary-500 text-white');
|
||||
|
||||
// Show matching panel
|
||||
const index = $('.tab-btn').index(this);
|
||||
$('.tab-panel').addClass('hidden').eq(index).removeClass('hidden');
|
||||
});
|
||||
});
|
||||
</script>
|
||||
}
|
||||
Loading…
Reference in New Issue