update form

This commit is contained in:
majid
2024-11-27 09:08:04 +07:00
parent 107b1ca590
commit b7a60abd3e
11 changed files with 893 additions and 535 deletions

View File

@@ -9,20 +9,27 @@
<div class="flex flex-wrap items-baseline w-full">
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2">
<label class="form-label flex items-center gap-3 text-nowrap">
<input type="radio" onclick="toggleTidakSesuai('luas_tanah_bagunan', 'luas_tanah_bagunan_tidak_sesuai')" class="radio" name="luas_tanah_bagunan" value="sesuai"
{{ old('luas_tanah_bagunan', $forminspeksi['luas_tanah_bagunan'] ?? '') == 'sesuai' ? 'checked' : '' }}>
<input type="radio"
onclick="toggleFieldVisibility('luas_tanah_bagunan', 'luas_tanah_bagunan_tidak_sesuai', ['tidak sesuai'])"
class="radio" name="luas_tanah_bagunan" value="sesuai"
{{ old('luas_tanah_bagunan', $forminspeksi['bangunan']['luas_tanah_bagunan'] ?? '') == 'sesuai' ? 'checked' : '' }}>
<span class="ml-2">Sesuai</span>
</label>
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input type="radio" class="radio" name="luas_tanah_bagunan" onclick="toggleTidakSesuai('luas_tanah_bagunan', 'luas_tanah_bagunan_tidak_sesuai')" value="tidak sesuai"
{{ old('luas_tanah_bagunan', $forminspeksi['luas_tanah_bagunan'] ?? '') == 'tidak sesuai' ? 'checked' : '' }}>
<input type="radio" class="radio" name="luas_tanah_bagunan"
onclick="toggleFieldVisibility('luas_tanah_bagunan', 'luas_tanah_bagunan_tidak_sesuai', ['tidak sesuai'])"
value="tidak sesuai"
{{ old('luas_tanah_bagunan', $forminspeksi['bangunan']['luas_tanah_bagunan'] ?? '') == 'tidak sesuai' ? 'checked' : '' }}>
<span class="ml-2">Tidak Sesuai</span>
</label>
<input type="text" name="luas_tanah_bagunan_tidak_sesuai" id="luas_tanah_bagunan_tidak_sesuai"
class="input w-full" placeholder="Masukan Luas Bangunan Tidak Sesuai..."
value="{{ old('luas_tanah_bagunan_tidak_sesuai', $forminspeksi['luas_tanah_bagunan_tidak_sesuai'] ?? '') }}"
style="{{ old('luas_tanah_bagunan_bagunan', $forminspeksi['luas_tanah_bagunan_bagunan'] ?? '') == 'tidak sesuai' ? '' : 'display: none;' }}">
<div id="luas_tanah_bagunan_tidak_sesuai" class="flex items-baseline gap-2"
style="{{ old('luas_tanah_bagunan_bagunan', $forminspeksi['bangunan']['luas_tanah_bagunan_bagunan'] ?? '') == 'tidak sesuai' ? '' : 'display: none;' }}">
<input type="text" name="luas_tanah_bagunan_tidak_sesuai" class="input w-full"
placeholder="Masukan Luas Bangunan Tidak Sesuai..."
value="{{ old('luas_tanah_bagunan_tidak_sesuai', $forminspeksi['bangunan']['luas_tanah_bagunan_tidak_sesuai'] ?? '') }}">
<button type="button" class="btn btn-md btn-primary">Save</button>
</div>
</div>
<em id="error-luas_tanah_bagunan" class="alert text-danger text-sm"></em>
</div>
@@ -39,7 +46,7 @@
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="jenis_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ old('jenis_bangunan') == $item->name || isset($forminspeksi['jenis_bangunan']) == $item->name ? 'checked' : '' }} />
{{ old('jenis_bangunan') == $item->name || isset($forminspeksi['bangunan']['jenis_bangunan']) == $item->name ? 'checked' : '' }} />
{{ $item->name }}
</label>
@if (strcasecmp($item->name, 'lainnya') == 0)
@@ -72,7 +79,7 @@
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="kondisi_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['bangunan']['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
@if (strcasecmp($item->name, 'lainnya') == 0)
@@ -80,12 +87,12 @@
<label class="form-label flex items-center gap-2.5 text-nowrap">
<input class="checkbox" name="kondisi_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ in_array($item->name, old('kondisi_bangunan', $forminspeksi['bangunan']['kondisi_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
<input type="text" name="kondisi_bangunan_lainnya" class="input mt-2"
id="bentukTanahInput" placeholder="Masukkan Kondisi Bangunan..."
value="{{ old('kondisi_bangunan_lainnya', $forminspeksi['kondisi_bangunan_lainnya'] ?? '') }}">
value="{{ old('kondisi_bangunan_lainnya', $forminspeksi['bangunan']['kondisi_bangunan_lainnya'] ?? '') }}">
</div>
@endif
@endforeach
@@ -106,12 +113,12 @@
<label class="form-label max-w-56 gap-2.5" style="width: 500px">
<input class="checkbox" name="sifat_bangunan[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('sifat_bangunan', $forminspeksi['sifat_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ in_array($item->name, old('sifat_bangunan', $forminspeksi['bangunan']['sifat_bangunan'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
<input type="text" name="sifat_bangunan_input[]" class="input w-full"
id="sifat_bangunan" placeholder="Masukkan {{ $item->name }}..."
value="{{ old('sifat_bangunan_input.' . $loop->index, $forminspeksi['sifat_bangunan_input'][$loop->index] ?? '') }}">
value="{{ old('sifat_bangunan_input.' . $loop->index, $forminspeksi['bangunan']['sifat_bangunan_input'][$loop->index] ?? '') }}">
</div>
@endforeach
@endif
@@ -125,8 +132,9 @@
<div class="flex items-stretch flex-wrap lg:flex-nowrap gap-2.5">
<label class="form-label max-w-56">Spek Bangunan</label>
<div class="flex flex-wrap items-baseline w-full" id="spek-bangunan-container">
<div class="spek-bangunan w-full gap-4">
<div class="spek-bangunan w-full gap-4 mt-5">
<input type="hidden" name="nama_bagunan[]" value="Bangunan">
<label class="building-label form-label">Bangunan 1</label>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 mt-2 w-full">
@if (@isset($spekKategoriBagunan))
@foreach ($spekKategoriBagunan as $item)
@@ -155,14 +163,14 @@
@endforeach
@endif
</div>
<button type="button"
class="mt-2 btn btn-danger btn-outline btn-xs remove-btn" style="display: none;">Hapus</button>
<button type="button" class="mt-2 btn btn-danger btn-outline btn-xs delete-button"
style="display: none;">Hapus</button>
</div>
</div>
</div>
<div class="flex justify-end">
<button class="btn btn-xs btn-primary" type="button" onclick="addClonableItem('spek-bangunan-container', 'spek-bangunan')">
<button class="btn btn-xs btn-primary" type="button" id="addBagunan">
tambah bangunan
<i class="ki-filled ki-plus"></i>
</button>
@@ -181,12 +189,12 @@
<label class="form-label max-w-56 gap-2.5" style="width: 500px">
<input class="checkbox" name="sarana_pelengkap[]" type="checkbox"
value="{{ $item->name }}"
{{ in_array($item->name, old('sarana_pelengkap', $forminspeksi['sarana_pelengkap'] ?? [])) ? 'checked' : '' }} />
{{ in_array($item->name, old('sarana_pelengkap', $forminspeksi['bangunan']['sarana_pelengkap'] ?? [])) ? 'checked' : '' }} />
{{ $item->name }}
</label>
<input type="text" name="sarana_pelengkap_input[]" class="input w-full"
id="bentukTanahInput" placeholder="Masukkan {{ $item->name }}..."
value="{{ old('sarana_pelengkap_input.' . $loop->index, $forminspeksi['sarana_pelengkap_input'][$loop->index] ?? '') }}">
value="{{ old('sarana_pelengkap_input.' . $loop->index, $forminspeksi['bangunan']['sarana_pelengkap_input'][$loop->index] ?? '') }}">
</div>
@endforeach
@endif
@@ -197,13 +205,15 @@
</div>
</div>
</div>
@push('scripts')
<script>
const spekBangunanContainer = document.getElementById('spek-bangunan-container');
function updateDeleteButtonsVisibility() {
const allDeleteButtons = spekBangunanContainer.querySelectorAll('.delete-button');
// Only show the delete buttons if there are more than one form
allDeleteButtons.forEach(button => {
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
button.style.display = 'inline-block';
@@ -213,12 +223,26 @@
});
}
function updateBuildingLabels() {
const allSpekBangunan = spekBangunanContainer.querySelectorAll('.spek-bangunan');
allSpekBangunan.forEach((div, index) => {
const label = div.querySelector('.building-label');
if (label) {
label.textContent = `Bangunan ${index + 1}`;
}
});
}
document.getElementById('addBagunan').addEventListener('click', function() {
const newDiv = spekBangunanContainer.querySelector('.spek-bangunan').cloneNode(true);
// Clear the selected values of the cloned input fields
newDiv.querySelectorAll('select').forEach(select => {
select.value = '';
console.log('Building label');
// Clear the selected values and input fields of the cloned input fields
newDiv.querySelectorAll('select, input').forEach(input => {
if (input.type === 'checkbox' || input.type === 'radio') {
input.checked = false;
} else {
input.value = '';
}
});
// Append the cloned div to the container
@@ -228,14 +252,21 @@
newDiv.querySelector('.delete-button').addEventListener('click', function() {
spekBangunanContainer.removeChild(newDiv);
updateDeleteButtonsVisibility();
updateBuildingLabels(); // Update the labels after removing
console.log('Building label');
});
// Update delete buttons visibility
// Update delete buttons visibility and labels
updateDeleteButtonsVisibility();
updateBuildingLabels();
console.log('Building label');
});
// Initial delete button visibility
updateDeleteButtonsVisibility();
// Initial setup: Ensure "Bangunan 1" is labeled
document.addEventListener('DOMContentLoaded', () => {
updateDeleteButtonsVisibility();
updateBuildingLabels(); // Ensure the first label is set
});
// Add delete functionality to the initial form
spekBangunanContainer.querySelectorAll('.delete-button').forEach(button => {
@@ -246,6 +277,7 @@
if (spekBangunanContainer.querySelectorAll('.spek-bangunan').length > 1) {
spekBangunan.remove();
updateDeleteButtonsVisibility();
updateBuildingLabels(); // Update the labels after removing
}
});
});