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

feat: create filter with tom select

main-dlh
Regiaaaaaa 2025-11-26 17:22:51 +07:00
parent 9aea3ac75d
commit 5b3c7eb55d
11 changed files with 400 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
Views/ChecklistHarian/Index.cshtml
View File

@ -70,27 +70,27 @@
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select id="kelurahanSelect" class="w-full"> <select id="kelurahanSelect" class="w-full">
<option value="">Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
<option value="Sukamaju">Kelurahan Sukamaju</option> <option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Kelurahan Sukadamai</option> <option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Kelurahan Mekarsari</option> <option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Kelurahan Harapan Jaya</option> <option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Kelurahan Cibinong</option> <option value="Cibinong">Cibinong</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset mt-4"> <fieldset class="fieldset mt-4">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select id="rwSelect" class="w-full"> <select id="rwSelect" class="w-full">
<option value="">Pilih RW</option> <option value="">Pilih RW</option>
<option value="01">RW 01</option> <option value="01">01</option>
<option value="02">RW 02</option> <option value="02">02</option>
<option value="03">RW 03</option> <option value="03">03</option>
<option value="04">RW 04</option> <option value="04">04</option>
<option value="05">RW 05</option> <option value="05">05</option>
<option value="06">RW 06</option> <option value="06">06</option>
<option value="07">RW 07</option> <option value="07">07</option>
<option value="08">RW 08</option> <option value="08">08</option>
<option value="09">RW 09</option> <option value="09">09</option>
<option value="10">RW 10</option> <option value="10">10</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset mt-4"> <fieldset class="fieldset mt-4">

45
Views/DataBankSampah/Index.cshtml
View File

@ -31,16 +31,31 @@
</div> </div>
<form action="#" method="get"> <form action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="filter-kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
</select> <option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="filter-rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
</select> <option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
<button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button> <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@ -76,10 +91,24 @@
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <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="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataBankSampah")', ajax: '@Url.Action("Table", "DataBankSampah")',
scrollX: true, scrollX: true,

45
Views/DataKecamatan/Index.cshtml
View File

@ -31,16 +31,31 @@
</div> </div>
<form action="#" method="get"> <form action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="filter-kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
</select> <option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="filter-rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
</select> <option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
<button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button> <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@ -75,10 +90,24 @@
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataKecamatan")', ajax: '@Url.Action("Table", "DataKecamatan")',
scrollX: true, scrollX: true,

52
Views/DataKecamatanRumahMemilah/Index.cshtml
View File

@ -32,20 +32,40 @@
<form action="#" method="get"> <form action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kecamatan</legend> <legend class="fieldset-legend">Kecamatan</legend>
<select class="select w-full"> <select id="kecamatanSelect" class="w-full">
<option disabled selected>Pilih Kecamatan</option> <option value="">Pilih Kecamatan</option>
<option value="Matraman">Matraman</option>
<option value="Pulogadung">Pulogadung</option>
<option value="Jatinegara">Jatinegara</option>
<option value="Kramat Jati">Kramat Jati</option>
<option value="Pasar Rebo">Pasar Rebo</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="kelurahanSelect" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
<option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="rwSelect" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select> </select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
@ -80,10 +100,30 @@
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <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="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#kecamatanSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kecamatan",
});
new TomSelect("#kelurahanSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#rwSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataKecamatanRumahMemilah")', ajax: '@Url.Action("Table", "DataKecamatanRumahMemilah")',
scrollX: true, scrollX: true,

45
Views/DataRt/Index.cshtml
View File

@ -31,16 +31,31 @@
</div> </div>
<form action="#" method="get"> <form action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="filter-kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
</select> <option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="filter-rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
</select> <option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
<button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button> <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@ -71,10 +86,24 @@
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <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="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataRt")', ajax: '@Url.Action("Table", "DataRt")',
scrollX: true, scrollX: true,

44
Views/DataRumahRumah/Index.cshtml
View File

@ -119,17 +119,25 @@
<form id="form-filter" action="#" method="get"> <form id="form-filter" action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select id="filter-kelurahan" name="kelurahan" class="select w-full"> <select id="filter-kelurahan" name="kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
<option value="Cempaka Putih Barat">Cempaka Putih Barat</option> <option value="Duren Sawit">Duren Sawit</option>
<option value="Cempaka Putih Timur">Cempaka Putih Timur</option> <option value="Pondok Bambu">Pondok Bambu</option>
<option value="Rawamangun">Rawamangun</option>
<option value="Cengkareng Barat">Cengkareng Barat</option>
<option value="Kembangan Selatan">Kembangan Selatan</option>
<option value="Tanjung Duren Utara">Tanjung Duren Utara</option>
<option value="Sunter Jaya">Sunter Jaya</option>
<option value="Kelapa Gading Timur">Kelapa Gading Timur</option>
<option value="Pademangan Barat">Pademangan Barat</option>
<option value="Koja">Koja</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select id="filter-rw" name="rw" class="select w-full"> <select id="filter-rw" name="rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
<option value="01">01</option> <option value="01">01</option>
<option value="02">02</option> <option value="02">02</option>
<option value="03">03</option> <option value="03">03</option>
@ -138,8 +146,8 @@
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RT</legend> <legend class="fieldset-legend">RT</legend>
<select id="filter-rt" name="rt" class="select w-full"> <select id="filter-rt" name="rt" class="w-full">
<option disabled selected>Pilih RT</option> <option value="">Pilih RT</option>
<option value="001">001</option> <option value="001">001</option>
<option value="002">002</option> <option value="002">002</option>
<option value="003">003</option> <option value="003">003</option>
@ -181,11 +189,31 @@
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
new TomSelect("#filter-rt", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RT",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataRumahRumah")', ajax: '@Url.Action("Table", "DataRumahRumah")',
scrollX: true, scrollX: true,

22
Views/DataRumahRw/Index.cshtml
View File

@ -106,13 +106,13 @@
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RT</legend> <legend class="fieldset-legend">RT</legend>
<select class="select w-full"> <select id="rtSelect" class="w-full">
<option disabled selected>Pilih RT</option> <option value="">Pilih RT</option>
<option>001</option> <option value="001">001</option>
<option>002</option> <option value="002">002</option>
<option>003</option> <option value="003">003</option>
<option>004</option> <option value="004">004</option>
<option>005</option> <option value="005">005</option>
</select> </select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
@ -288,11 +288,19 @@
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#rtSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RT",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataRumahRw")', ajax: '@Url.Action("Table", "DataRumahRw")',
scrollX: true, scrollX: true,

45
Views/DataRw/Index.cshtml
View File

@ -33,16 +33,31 @@
</div> </div>
<form action="#" method="get"> <form action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="filter-kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
</select> <option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="filter-rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
</select> <option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
<button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button> <button type="button" class="btn" onclick="modal_filter.close()">Bersihkan</button>
@ -160,10 +175,24 @@
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <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="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
const detailModal = document.getElementById('rw-detail-modal'); const detailModal = document.getElementById('rw-detail-modal');
const detailElements = { const detailElements = {
rw: document.getElementById('detail-rw'), rw: document.getElementById('detail-rw'),

52
Views/DataVerifikasiChecklistHarian/Index.cshtml
View File

@ -38,20 +38,40 @@
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kecamatan</legend> <legend class="fieldset-legend">Kecamatan</legend>
<select class="select w-full"> <select id="filter-kecamatan" class="w-full">
<option disabled selected>Pilih Kecamatan</option> <option value="">Pilih Kecamatan</option>
<option value="Matraman">Matraman</option>
<option value="Pulogadung">Pulogadung</option>
<option value="Jatinegara">Jatinegara</option>
<option value="Kramat Jati">Kramat Jati</option>
<option value="Pasar Rebo">Pasar Rebo</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="filter-kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
<option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="filter-rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
@ -96,10 +116,30 @@
<script src="https://code.jquery.com/jquery-3.7.1.js"></script> <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="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kecamatan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kecamatan",
});
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "DataVerifikasiChecklistHarian")', ajax: '@Url.Action("Table", "DataVerifikasiChecklistHarian")',
scrollX: true, scrollX: true,

56
Views/LaporanRw/Index.cshtml
View File

@ -44,26 +44,48 @@
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kecamatan</legend> <legend class="fieldset-legend">Kecamatan</legend>
<select class="select w-full"> <select id="filter-kecamatan" class="w-full">
<option disabled selected>Pilih Kecamatan</option> <option value="">Pilih Kecamatan</option>
<option value="Matraman">Matraman</option>
<option value="Pulogadung">Pulogadung</option>
<option value="Jatinegara">Jatinegara</option>
<option value="Kramat Jati">Kramat Jati</option>
<option value="Pasar Rebo">Pasar Rebo</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="filter-kelurahan" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
<option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="filter-rw" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Status</legend> <legend class="fieldset-legend">Status</legend>
<select class="select w-full"> <select id="filter-status" class="select w-full">
<option disabled selected>Pilih Status</option> <option disabled selected>Pilih Status</option>
<option value="verifikasi">Verifikasi</option>
<option value="belum">Belum Verifikasi</option>
</select> </select>
</fieldset> </fieldset>
</p> </p>
@ -153,10 +175,30 @@
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#filter-kecamatan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kecamatan",
});
new TomSelect("#filter-kelurahan", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#filter-rw", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "LaporanRw")', ajax: '@Url.Action("Table", "LaporanRw")',
scrollX: true, scrollX: true,

50
Views/RumahMemilah/Index.cshtml
View File

@ -32,20 +32,38 @@
<form action="#" method="get"> <form action="#" method="get">
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kecamatan</legend> <legend class="fieldset-legend">Kecamatan</legend>
<select class="select w-full"> <select id="kecamatanSelect" class="w-full">
<option disabled selected>Pilih Kecamatan</option> <option value="">Pilih Kecamatan</option>
<option value="Kecamatan1">Cakung</option>
<option value="Kecamatan2">Pasar Rebo</option>
<option value="Kecamatan3">Ciracas</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">Kelurahan</legend> <legend class="fieldset-legend">Kelurahan</legend>
<select class="select w-full"> <select id="kelurahanSelect" class="w-full">
<option disabled selected>Pilih Kelurahan</option> <option value="">Pilih Kelurahan</option>
<option value="Sukamaju">Sukamaju</option>
<option value="Sukadamai">Sukadamai</option>
<option value="Mekarsari">Mekarsari</option>
<option value="HarapanJaya">Harapan Jaya</option>
<option value="Cibinong">Cibinong</option>
</select> </select>
</fieldset> </fieldset>
<fieldset class="fieldset max-w-sm"> <fieldset class="fieldset max-w-sm">
<legend class="fieldset-legend">RW</legend> <legend class="fieldset-legend">RW</legend>
<select class="select w-full"> <select id="rwSelect" class="w-full">
<option disabled selected>Pilih RW</option> <option value="">Pilih RW</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
</select> </select>
</fieldset> </fieldset>
<div class="modal-action"> <div class="modal-action">
@ -81,10 +99,30 @@
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script> <script src="https://cdn.datatables.net/2.3.4/js/dataTables.js"></script>
<script src="/plugins/datatables/dataTables.tailwindcss.js"></script> <script src="/plugins/datatables/dataTables.tailwindcss.js"></script>
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script type="text/javascript"> <script type="text/javascript">
var table; var table;
$(document).ready(function () { $(document).ready(function () {
new TomSelect("#kecamatanSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kecamatan",
});
new TomSelect("#kelurahanSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih Kelurahan",
});
new TomSelect("#rwSelect", {
closeAfterSelect: true,
maxItems: 1,
placeholder: "Pilih RW",
});
table = new DataTable('#example', { table = new DataTable('#example', {
ajax: '@Url.Action("Table", "RumahMemilah")', ajax: '@Url.Action("Table", "RumahMemilah")',
scrollX: true, scrollX: true,