daengdeni/lpj
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perbaikan basic data di form inspeksi tidak muncul

Browse Source
This commit is contained in:
majid76
2024-12-09 07:28:50 +07:00
parent b645682de8
commit 2d45e03095
10 changed files with 425 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

181
resources/views/surveyor/components/data-pembanding.blade.php
View File

@@ -74,11 +74,8 @@
<div class="flex flex-col gap-2">
<img id="uploadedImage2" class="max-w-[200px] hidden"
alt="Pembanding Image">
<input type="file"
name="foto_objek_pembanding[]"
class="file-input"
accept="image/*"
onchange="previewImage(this, 'uploadedImage2')">
<input type="file" name="foto_objek_pembanding[]" class="file-input"
accept="image/*" onchange="previewImage(this, 'uploadedImage2')">
</div>
</td>
</tr>
@@ -243,15 +240,14 @@
</select>
</td>
<td class="px-4 py-2">
<select id="province_code" name="province_code_pembanding[]"
<select id="province_code_pembanding" name="province_code_pembanding[]"
class="input w-full">
<option value="">Select Province</option>
@foreach ($provinces as $province)
<option value="{{ $province->code }}">
{{ $province->name }}
</option>
<option value="{{ $province->code }}"
{{ $selectedProvince == $province->code ? 'selected' : '' }}>
{{ $province->name }}
</option>
@endforeach
</select>
</td>
@@ -283,17 +279,11 @@
</select>
</td>
<td class="px-4 py-2">
<select id="city_code" name="city_code_pembanding[]"
<select id="city_code_pembanding" name="city_code_pembanding[]"
class="input w-full">
<option value="">Pilih Kota/Kabupaten</option>
@if (isset($cities))
@foreach ($cities as $city)
<option value="{{ $city->code }}">
{{ $city->name }}
</option>
@endforeach
@endif
</select>
</td>
</tr>
@@ -325,17 +315,11 @@
</td>
<td class="px-4 py-2">
<select id="district_code" name="district_code_pembanding[]"
<select id="district_code_pembanding" name="district_code_pembanding[]"
class="input w-full">
<option value="">Pilih Kecamatan</option>
@if (isset($districts))
@foreach ($districts as $district)
<option value="{{ $district->code }}">
{{ $district->name }}
</option>
@endforeach
@endif
</select>
</td>
</tr>
@@ -365,17 +349,11 @@
</select>
</td>
<td class="px-4 py-2">
<select id="village_code" name="village_code_pembanding[]"
<select id="village_code_pembanding" name="village_code_pembanding[]"
class="input w-full">
<option value="">Pilih Kecamatan</option>
@if (isset($villages))
@foreach ($villages as $village)
<option value="{{ $village->code }}">
{{ $village->name }}
</option>
@endforeach
@endif
</select>
</td>
</tr>
@@ -569,7 +547,7 @@
// Update IDs and names for the new cell
const inputs = newCell.querySelectorAll('input, select, textarea');
inputs.forEach(input => {
inputs.forEach((input, index) => {
if (input.type === 'file') {
const newImageId = `uploadedImage${columnCount + 1}`;
const preview = newCell.querySelector('img');
@@ -582,11 +560,20 @@
};
}
}
if (input.id) {
input.id = updateDynamicId(input.id, columnCount);
}
// Clear values
if (input.type !== 'file') {
input.value = '';
}
loadIdSelectAddres(input.id);
});
}
row.appendChild(newCell);
});
@@ -595,6 +582,10 @@
reinitializeEventListeners();
}
function updateDynamicId(currentId, columnCount) {
return `${currentId.split('_')[0]}_${'code_pembanding'}_${columnCount}`;
}
function removeColumn() {
if (columnCount > 1) {
const table = document.getElementById('dataTable');
@@ -740,6 +731,124 @@
}
});
}
function loadIdSelectAddres(inputs) {
const data = [
'province_code_pembanding',
'city_code_pembanding',
'district_code_pembanding',
'village_code_pembanding'
]
}
document.addEventListener('DOMContentLoaded', function() {
// Memuat data provinsi saat halaman dimuat
loadProvinces();
// Event listener untuk perubahan pada dropdown Province
document.getElementById('province_code_pembanding').addEventListener('change', function() {
const provinceId = this.value;
if (provinceId) {
getCity(provinceId); // Kirimkan provinceId ke fungsi getCity
} else {
resetDropdown('city_code_pembanding', 'Select City');
resetDropdown('district_code_pembanding', 'Select District');
resetDropdown('village_code_pembanding', 'Select Village');
}
});
// Event listener untuk perubahan pada dropdown City
document.getElementById('city_code_pembanding').addEventListener('change', function() {
const cityId = this.value;
if (cityId) {
getDistrict(cityId);
} else {
resetDropdown('district_code_pembanding', 'Select District');
resetDropdown('village_code_pembanding', 'Select Village');
}
});
// Event listener untuk perubahan pada dropdown District
document.getElementById('district_code_pembanding').addEventListener('change', function() {
const districtId = this.value;
if (districtId) {
getVillage(districtId);
} else {
resetDropdown('village_code_pembanding', 'Select Village');
}
});
});
function loadProvinces() {
const provinces =
@json($provinces); // Using Laravel's Blade templating to pass the provinces array to JS
const provinceDropdown = document.getElementById('province_code_pembanding');
provinceDropdown.innerHTML = '<option value="">Select Province</option>';
provinces.forEach(province => {
provinceDropdown.innerHTML += `<option value="${province.code}">${province.name}</option>`;
});
}
async function getCity(provinceId) {
try {
const response = await fetch(
`/locations/cities/province/${provinceId}`); // Assuming this is still your API
const data = await response.json();
const cityDropdown = document.getElementById('city_code_pembanding');
cityDropdown.innerHTML = '<option value="">Select City</option>';
data.forEach(city => {
cityDropdown.innerHTML += `<option value="${city.code}">${city.name}</option>`;
});
} catch (error) {
console.error('Error fetching cities:', error);
}
}
async function getDistrict(cityId) {
try {
const response = await fetch(`/locations/districts/city/${cityId}`);
const data = await response.json();
const districtDropdown = document.getElementById('district_code_pembanding');
districtDropdown.innerHTML = '<option value="">Select District</option>';
data.forEach(district => {
districtDropdown.innerHTML += `<option value="${district.code}">${district.name}</option>`;
});
} catch (error) {
console.error('Error fetching districts:', error);
}
}
async function getVillage(districtId) {
try {
const response = await fetch(`/locations/villages/district/${districtId}`);
const data = await response.json();
const villageDropdown = document.getElementById('village_code_pembanding');
villageDropdown.innerHTML = '<option value="">Select Village</option>';
data.forEach(village => {
villageDropdown.innerHTML += `<option value="${village.code}">${village.name}</option>`;
});
} catch (error) {
console.error('Error fetching villages:', error);
}
}
function resetDropdown(elementId, placeholder) {
const dropdown = document.getElementById(elementId);
dropdown.innerHTML = `<option value="">${placeholder}</option>`;
}
</script>
<style>