feat: add tooltip info
parent
04f88fcdcc
commit
ba3a6b5b82
|
|
@ -38,19 +38,87 @@
|
||||||
value="@DateTime.Now.ToString("yyyy-MM")" />
|
value="@DateTime.Now.ToString("yyyy-MM")" />
|
||||||
</div>
|
</div>
|
||||||
<div class="overflow-x-auto">
|
<div class="overflow-x-auto">
|
||||||
<table class="table-zebra table" id="tableRapot">
|
<table class="table table-zebra w-full" id="tableRapot">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th class="w-[5%]">No</th>
|
<th class="w-[5%]">No</th>
|
||||||
<th class="w-[25%]">Nama</th>
|
<th class="w-[20%]">Nama</th>
|
||||||
<th class="w-[15%]">Checklist</th>
|
|
||||||
<th class="w-[15%]">Berat Sampah</th>
|
<!-- CHECKLIST -->
|
||||||
<th class="w-[10%]">Foto</th>
|
<th class="w-[15%]">
|
||||||
<th class="w-[15%]">Rumah Aktif Memilah</th>
|
<div class="flex items-center gap-2">
|
||||||
<th class="w-[15%]">Status</th>
|
<span>Checklist</span>
|
||||||
|
<div class="tooltip tooltip-top"
|
||||||
|
data-tip="0 = Merah
|
||||||
|
Checklist < 15 = Kuning
|
||||||
|
Checklist > 15 = Hijau">
|
||||||
|
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
|
||||||
|
info
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<!-- BERAT SAMPAH -->
|
||||||
|
<th class="w-[15%]">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span>Berat Sampah</span>
|
||||||
|
<div class="tooltip tooltip-top"
|
||||||
|
data-tip="0 Merah">
|
||||||
|
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
|
||||||
|
info
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<!-- FOTO -->
|
||||||
|
<th class="w-[10%]">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span>Foto</span>
|
||||||
|
<div class="tooltip tooltip-top"
|
||||||
|
data-tip="0 Merah">
|
||||||
|
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
|
||||||
|
info
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<!-- RUMAH AKTIF MEMILAH -->
|
||||||
|
<th class="w-[20%]">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span>Rumah Aktif Memilah</span>
|
||||||
|
<div class="tooltip tooltip-top"
|
||||||
|
data-tip="
|
||||||
|
0 Merah
|
||||||
|
< 10 Kuning
|
||||||
|
>= 10 Hijau">
|
||||||
|
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
|
||||||
|
info
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
|
|
||||||
|
<!-- STATUS -->
|
||||||
|
<th class="w-[15%]">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<span>Status</span>
|
||||||
|
<div class="tooltip tooltip-top"
|
||||||
|
data-tip="Sangat Baik = Semua Hijau
|
||||||
|
Baik = 3 Hijau
|
||||||
|
Cukup Baik = 2 Hijau
|
||||||
|
Kurang Baik = 1 Hijau
|
||||||
|
Tidak Baik = Semua Merah">
|
||||||
|
<span class="icon icon-fill cursor-pointer text-gray-400 hover:text-gray-600">
|
||||||
|
info
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody></tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -107,7 +175,6 @@
|
||||||
$(document).ready(function () {
|
$(document).ready(function () {
|
||||||
tableRapot = new DataTable('#tableRapot', {
|
tableRapot = new DataTable('#tableRapot', {
|
||||||
ajax: '@Url.Action("TableRapot", "DataPendampingRw")',
|
ajax: '@Url.Action("TableRapot", "DataPendampingRw")',
|
||||||
scrollX: true,
|
|
||||||
initComplete: function () {
|
initComplete: function () {
|
||||||
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
$('div.dt-scroll-body thead').css('visibility', 'collapse');
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue