516 lines
32 KiB
PHP
516 lines
32 KiB
PHP
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
.table-container {
|
|
/* max-width: 100%;
|
|
overflow-x: auto; Agar bisa di-scroll ke samping jika tabel terlalu lebar
|
|
max-height: 400px; Tinggi maksimal tabel
|
|
overflow-y: auto; Scroll vertikal jika konten lebih tinggi
|
|
border: 1px solid #ccc; */
|
|
|
|
}
|
|
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 1200px;
|
|
}
|
|
|
|
th,
|
|
td {
|
|
border: 1px solid #ccc;
|
|
padding: 8px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #a6ddf0;
|
|
}
|
|
|
|
thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
background-color: #f4f4f4;
|
|
/* Warna latar belakang header */
|
|
z-index: 2;
|
|
}
|
|
|
|
.checkbox {
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<div class="table-container warp-text">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Komponen</th>
|
|
<th>Uraian</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<!-- Awal Tabel-->
|
|
<tr>
|
|
<td rowspan="">1</td>
|
|
<td rowspan="">Pengelolaan Sampah dan Limbah Padat</td>
|
|
<td>
|
|
<div class="input-group" style="padding: 10px">
|
|
<p>isi disini? </p>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked"
|
|
onclick="toggleSwitch()">
|
|
<label class="form-check-label" for="flexSwitchCheckChecked"
|
|
id="switchLabel">Tidak</label>
|
|
</div>
|
|
<script>
|
|
function toggleSwitch() {
|
|
var checkbox = document.getElementById("flexSwitchCheckChecked");
|
|
var label = document.getElementById("switchLabel");
|
|
var row = document.getElementById("limbah_padat");
|
|
|
|
if (checkbox.checked) {
|
|
label.textContent = "Ya";
|
|
row.style.display = "table-row"; // Menampilkan elemen
|
|
} else {
|
|
label.textContent = "Tidak";
|
|
row.style.display = "none"; // Menyembunyikan elemen
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
<div id='limbah_padat' style="display: none;">
|
|
<table>
|
|
<tr>
|
|
<th>Jenis Kegiatan</th>
|
|
<th>Jumlah</th>
|
|
<th>Satuan</th>
|
|
<th>Lama Kegiatan</th>
|
|
<th>Kondisi</th>
|
|
<th>Tingkat Pelaksanaan</th>
|
|
<th>Uraian/Bukti/Link Dokumen Pendukung</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Pengumpulan</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pewadahan</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pemilahan Sampah</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pengomposan</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Kegiatan 3R</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dikirim ke Tempat Pembuangan Akhir (TPA)</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dibuang Kelahan Kosong</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Dibakar</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Berjalan</option>
|
|
<option value="2">Berjalan dengan Beberapa Hambatan</option>
|
|
<option value="3">Berjalan dengan Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="8">
|
|
<p>Ada Kegiatan Lainnya </p>
|
|
<table id="add-rows" style="background: solid;">
|
|
<div class="card-header d-flex align-items-center">
|
|
<div>
|
|
<button id="addRow" class="btn btn-primary"
|
|
onclick="addTableRow()">Tambahkan</button>
|
|
<button id="deleteRow" class="btn btn-danger"
|
|
onclick="deleteTableRow()">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</table>
|
|
<script>
|
|
function addTableRow() {
|
|
var tableRef = document.getElementById('add-rows');
|
|
var newRow = tableRef.insertRow();
|
|
|
|
var newCell1 = newRow.insertCell(0);
|
|
var newCell2 = newRow.insertCell(1);
|
|
var newCell3 = newRow.insertCell(2);
|
|
var newCell4 = newRow.insertCell(3);
|
|
var newCell5 = newRow.insertCell(4);
|
|
var newCell6 = newRow.insertCell(5);
|
|
var newCell7 = newRow.insertCell(6);
|
|
var newCell8 = newRow.insertCell(7);
|
|
var newCell9 = newRow.insertCell(8);
|
|
|
|
newCell1.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Satuan">';
|
|
newCell2.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Jumlah">';
|
|
newCell3.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Penerima Manfaat (KK)">';
|
|
newCell4.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Jumlah Terdampak (KK)">';
|
|
newCell5.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Lama Kegiatan">';
|
|
newCell6.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Kondisi">';
|
|
newCell7.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Efektifitas">';
|
|
newCell8.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Uraian/Bukti/Link Dokumen Pendukung">';
|
|
}
|
|
|
|
function deleteTableRow() {
|
|
var tableRef = document.getElementById('add-rows');
|
|
if (tableRef.rows.length > 0) {
|
|
tableRef.deleteRow(tableRef.rows.length - 1);
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--akhir-->
|
|
<!-- Awal Tabel-->
|
|
<tr>
|
|
<td rowspan="2">2</td>
|
|
<td rowspan="2">Pengelolaan Limbah dan Pemanfaatan Limbah Cair</td>
|
|
<td>
|
|
<div class="input-group" style="padding: 10px">
|
|
<p>Apakah Lokasi Memiliki Pengelolahan/Pemanfaatan Gas Methan dari? </p>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckPengelolaanLimbah"
|
|
onclick="toggleSwitchPengelolaanLimbah()">
|
|
<label class="form-check-label" for="flexSwitchCheckPengelolaanLimbah"
|
|
id="switchLabelPengelolaanLimbah">Tidak</label>
|
|
</div>
|
|
<script>
|
|
function toggleSwitchPengelolaanLimbah() {
|
|
var checkbox = document.getElementById("flexSwitchCheckPengelolaanLimbah");
|
|
var label = document.getElementById("switchLabelPengelolaanLimbah");
|
|
var row = document.getElementById("limbah_cair");
|
|
|
|
if (checkbox.checked) {
|
|
label.textContent = "Ya";
|
|
row.style.display = "table-row"; // Menampilkan elemen
|
|
} else {
|
|
label.textContent = "Tidak";
|
|
row.style.display = "none"; // Menyembunyikan elemen
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
<div id='limbah_cair' style="display: none;">
|
|
<table>
|
|
<tr>
|
|
<th>Jenis Kegiatan</th>
|
|
<th>Jumlah KK Pelaksana</th>
|
|
<th>Jumlah Kegiatan</th>
|
|
<th>Satuan</th>
|
|
<th>Lama Kegiatan</th>
|
|
<th>Kondisi</th>
|
|
<th>Tingkat Pelaksanaan</th>
|
|
<th>Uraian/Bukti/Link Dokumen Pendukung</th>
|
|
</tr>
|
|
<tr>
|
|
<td>Tangki septic dilengkapi instalasi penangkap methan</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Rusak</option>
|
|
<option value="2">Cukup</option>
|
|
<option value="3">Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td>IPAL anaerob (Instalasi Pengolahan Air Limbah) dilengkapi penangkap dan pemanfaat/pembakar gas</td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Tidak Ada Data</option>
|
|
<option value="2">Kurang dari 2 Tahun</option>
|
|
<option value="3">2-4 Tahun</option>
|
|
<option value="4">Lebih dari 4 Tahun</option>
|
|
</select>
|
|
</td>
|
|
<td class="col-lg-2">
|
|
<select class="form-select form-select-sm mb-3" data-choices
|
|
data-choices-search-false name="" id="" onchange="">
|
|
<option value="">-- Pilih --</option>
|
|
<option value="1">Rusak</option>
|
|
<option value="2">Cukup</option>
|
|
<option value="3">Baik</option>
|
|
</select>
|
|
</td>
|
|
<td></td>
|
|
</tr>
|
|
<tr>
|
|
<td colspan="8">
|
|
<p>Ada Kegiatan Lainnya </p>
|
|
<table id="add-rows-limbah-cair" style="background: solid;">
|
|
<thead>
|
|
<th>Jenis Kegiatan</th>
|
|
<th>Jumlah KK Pelaksana</th>
|
|
<th>Jumlah Kegiatan</th>
|
|
<th>Satuan</th>
|
|
<th>Lama Kegiatan</th>
|
|
<th>Kondisi</th>
|
|
<th>Tingkat Pelaksanaan</th>
|
|
<th>Uraian/Bukti/Link Dokumen Pendukung</th>
|
|
</thead>
|
|
<div class="card-header d-flex align-items-center">
|
|
<div>
|
|
<button id="addRow" class="btn btn-primary"
|
|
onclick="addTableRowLimbahCair()">Tambahkan</button>
|
|
<button id="deleteRow" class="btn btn-danger"
|
|
onclick="deleteTableRowLimbahCair()">Hapus</button>
|
|
</div>
|
|
</div>
|
|
</table>
|
|
<script>
|
|
function addTableRowLimbahCair() {
|
|
var tableRef = document.getElementById('add-rows-limbah-cair');
|
|
var newRow = tableRef.insertRow();
|
|
|
|
var newCell1 = newRow.insertCell(0);
|
|
var newCell2 = newRow.insertCell(1);
|
|
var newCell3 = newRow.insertCell(2);
|
|
var newCell4 = newRow.insertCell(3);
|
|
var newCell5 = newRow.insertCell(4);
|
|
var newCell6 = newRow.insertCell(5);
|
|
var newCell7 = newRow.insertCell(6);
|
|
var newCell8 = newRow.insertCell(7);
|
|
var newCell9 = newRow.insertCell(8);
|
|
|
|
newCell1.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Jenis Kegiatan">';
|
|
newCell2.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Jumlah KK Pelaksana">';
|
|
newCell3.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Penerima Manfaat (KK)">';
|
|
newCell4.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Jumlah Terdampak (KK)">';
|
|
newCell5.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Lama Kegiatan">';
|
|
newCell6.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Kondisi">';
|
|
newCell7.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Efektifitas">';
|
|
newCell8.innerHTML = '<input type="text" class="form-control form-control-sm" placeholder="Uraian/Bukti/Link Dokumen Pendukung">';
|
|
}
|
|
|
|
function deleteTableRowLimbahCair() {
|
|
var tableRef = document.getElementById('add-rows-limbah-cair');
|
|
if (tableRef.rows.length > 0) {
|
|
tableRef.deleteRow(tableRef.rows.length - 1);
|
|
}
|
|
}
|
|
</script>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!--Akhir-->
|
|
</tbody>
|
|
</table>
|
|
</div>
|