782 lines
50 KiB
PHP
782 lines
50 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="2">1</td>
|
|
<td rowspan="2">Penggunaan energi baru terbarukan dan konservasi energi</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="flexSwitchCheckKonversiEnergi"
|
|
onclick="toggleSwitchKonversiEnergi()">
|
|
<label class="form-check-label" for="flexSwitchCheckKonversiEnergi"
|
|
id="flexSwitchCheckKonversiEnergi">Tidak</label>
|
|
</div>
|
|
<script>
|
|
function toggleSwitchKonversiEnergi() {
|
|
var checkbox = document.getElementById("flexSwitchCheckKonversiEnergi");
|
|
var label = document.getElementById("flexSwitchCheckKonversiEnergi");
|
|
var row = document.getElementById("konversi_energi");
|
|
|
|
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='konversi_energi' 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>Pemanfaatan gas methan untuk biogas</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>Pemanfaatan energi surya (Solar Cell) untuk sumber energi</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>Pemanfaatan tenaga angin untuk sumber energi</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;">
|
|
|
|
<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>
|
|
<tr>
|
|
<td>
|
|
<div class="input-group" style="padding: 10px">
|
|
<p>Apakah Lokasi Memiliki Potensi Pengembangan Mikrohidro? </p>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckMikrohidro"
|
|
onclick="toggleSwitchMikrohidro()">
|
|
<label class="form-check-label" for="flexSwitchCheckMikrohidro"
|
|
id="flexSwitchCheckmikrohidro">Tidak</label>
|
|
</div>
|
|
<script>
|
|
function toggleSwitchMikrohidro() {
|
|
var checkbox = document.getElementById("flexSwitchCheckMikrohidro");
|
|
var label = document.getElementById("flexSwitchCheckMikrohidro");
|
|
var row = document.getElementById("mikrohidro");
|
|
|
|
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='mikrohidro' 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>Pemanfaatan air untuk sumber energi (mikrohidro)</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>Pemanfaatan energi surya (Solar Cell) untuk sumber energi</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>Pemanfaatan tenaga angin untuk sumber energi</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;">
|
|
|
|
<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-->
|
|
<!-- Awal Tabel-->
|
|
<tr>
|
|
<td rowspan="">2</td>
|
|
<td rowspan="">Penggunaan sumber energi non-EBT</td>
|
|
<td>
|
|
<div class="input-group" style="padding: 10px">
|
|
<p>Penggunaan sumber energi non-EBT? </p>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckNonEbt"
|
|
onclick="toggleSwitchNonEbt()">
|
|
<label class="form-check-label" for="flexSwitchCheckNonEbt"
|
|
id="switchLabelNonEbt">Tidak</label>
|
|
</div>
|
|
<script>
|
|
function toggleSwitchNonEbt() {
|
|
var checkbox = document.getElementById("flexSwitchCheckNonEbt");
|
|
var label = document.getElementById("switchLabelNonEbt");
|
|
var row = document.getElementById("sumber_energi_non_ebt");
|
|
|
|
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='sumber_energi_non_ebt' 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>Penggunaan Minyak Tanah</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>Penggunaan LPG</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>Penggunaan Briket Gambut</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>Penggunaan Arang Kayu</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>Penggunaan Tungku Hemat Kayu Bakar, Biji, dan Sekam</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;">
|
|
<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-->
|
|
<!-- Awal Tabel-->
|
|
<tr>
|
|
<td rowspan="2">3</td>
|
|
<td rowspan="2">Penghemat Energi</td>
|
|
<td>
|
|
<div class="input-group" style="padding: 10px">
|
|
<p>Penghemat Energi? </p>
|
|
<div class="form-check form-switch">
|
|
<input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckPenghematEnergi"
|
|
onclick="toggleSwitchPenghematEnergi()">
|
|
<label class="form-check-label" for="flexSwitchCheckPenghematEnergi"
|
|
id="switchLabelPenghematEnergi">Tidak</label>
|
|
</div>
|
|
<script>
|
|
function toggleSwitchPenghematEnergi() {
|
|
var checkbox = document.getElementById("flexSwitchCheckPenghematEnergi");
|
|
var label = document.getElementById("switchLabelPenghematEnergi");
|
|
var row = document.getElementById("pengehmat_energi");
|
|
|
|
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='pengehmat_energi' 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>Penggunaan lampu hemat energi</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>Peningkatan pencahayaan alami rumah tangga</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;">
|
|
<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>
|