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

perbaikan alamat data pembanding

Browse Source
This commit is contained in:
majid
2024-12-10 07:22:23 +07:00
parent 95b57b78f6
commit 10b672918b
1 changed files with 152 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -241,12 +241,10 @@
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="province_code_pembanding" name="province_code_pembanding[]" <select id="province_code_pembanding" name="province_code_pembanding[]"
class="input w-full"> onchange="handleProvinceChange(this)" class="input w-full">
<option value="">Select Province</option> <option value="">Pilih Provinsi</option>
@foreach ($provinces as $province) @foreach ($provinces as $province)
<option value="{{ $province->code }}" <option value="{{ $province->code }}">{{ $province->name }}
{{ $selectedProvince == $province->code ? 'selected' : '' }}>
{{ $province->name }}
</option> </option>
@endforeach @endforeach
</select> </select>
@@ -280,10 +278,8 @@
</td> </td>
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="city_code_pembanding" name="city_code_pembanding[]" <select id="city_code_pembanding" name="city_code_pembanding[]"
class="input w-full"> onchange="handleCityChange(this)" class="input w-full">
<option value="">Pilih Kota/Kabupaten</option> <option value="">Pilih Kota/Kabupaten</option>
</select> </select>
</td> </td>
</tr> </tr>
@@ -316,10 +312,8 @@
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="district_code_pembanding" name="district_code_pembanding[]" <select id="district_code_pembanding" name="district_code_pembanding[]"
class="input w-full"> onchange="handleDistrictChange(this)" class="input w-full">
<option value="">Pilih Kecamatan</option> <option value="">Pilih Kecamatan</option>
</select> </select>
</td> </td>
</tr> </tr>
@@ -351,9 +345,7 @@
<td class="px-4 py-2"> <td class="px-4 py-2">
<select id="village_code_pembanding" name="village_code_pembanding[]" <select id="village_code_pembanding" name="village_code_pembanding[]"
class="input w-full"> class="input w-full">
<option value="">Pilih Desa/Kelurahan</option>
<option value="">Pilih Kecamatan</option>
</select> </select>
</td> </td>
</tr> </tr>
@@ -539,7 +531,6 @@
const newCell = document.createElement('td'); const newCell = document.createElement('td');
newCell.className = 'px-4 py-2'; newCell.className = 'px-4 py-2';
// Clone the last input cell
const lastInputCell = row.querySelector('td:last-child'); const lastInputCell = row.querySelector('td:last-child');
if (lastInputCell) { if (lastInputCell) {
const clonedContent = lastInputCell.innerHTML; const clonedContent = lastInputCell.innerHTML;
@@ -547,7 +538,7 @@
// Update IDs and names for the new cell // Update IDs and names for the new cell
const inputs = newCell.querySelectorAll('input, select, textarea'); const inputs = newCell.querySelectorAll('input, select, textarea');
inputs.forEach((input, index) => { inputs.forEach((input) => {
if (input.type === 'file') { if (input.type === 'file') {
const newImageId = `uploadedImage${columnCount + 1}`; const newImageId = `uploadedImage${columnCount + 1}`;
const preview = newCell.querySelector('img'); const preview = newCell.querySelector('img');
@@ -561,19 +552,29 @@
} }
} }
if (input.id) { // Menangani select alamat
input.id = updateDynamicId(input.id, columnCount); if (input.tagName === 'SELECT') {
const oldId = input.id;
const newId = `${oldId}_${columnCount}`;
input.id = newId;
// Menambahkan event listener untuk select alamat
if (oldId.includes('city')) {
input.onchange = function() {
handleCityChange(this);
};
} else if (oldId.includes('district')) {
input.onchange = function() {
handleDistrictChange(this);
};
}
} }
// Clear values // Clear values
if (input.type !== 'file') { if (input.type !== 'file') {
input.value = ''; input.value = '';
} }
loadIdSelectAddres(input.id);
}); });
} }
row.appendChild(newCell); row.appendChild(newCell);
}); });
@@ -582,6 +583,7 @@
reinitializeEventListeners(); reinitializeEventListeners();
} }
function updateDynamicId(currentId, columnCount) { function updateDynamicId(currentId, columnCount) {
return `${currentId.split('_')[0]}_${'code_pembanding'}_${columnCount}`; return `${currentId.split('_')[0]}_${'code_pembanding'}_${columnCount}`;
} }
@@ -739,112 +741,176 @@
'district_code_pembanding', 'district_code_pembanding',
'village_code_pembanding' 'village_code_pembanding'
] ]
} }
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
// Memuat data provinsi saat halaman dimuat // Inisialisasi event listener untuk data pembanding pertama
loadProvinces(); initializeFirstPembandingListeners();
// Event listener untuk perubahan pada dropdown Province try {
document.getElementById('province_code_pembanding').addEventListener('change', function() { const inspectionData = {!! isset($inspectionData) ? json_encode($inspectionData) : 'null' !!};
const provinceId = this.value; const comparisons = {!! isset($comparisons) ? json_encode($comparisons) : 'null' !!};
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 if (comparisons) {
document.getElementById('city_code_pembanding').addEventListener('change', function() { comparisons.data_pembanding.forEach((comparison, index) => {
const cityId = this.value; if (index > 0) {
if (cityId) { addColumn();
getDistrict(cityId); }
} else { fillPembandingData(comparison, index);
resetDropdown('district_code_pembanding', 'Select District'); });
resetDropdown('village_code_pembanding', 'Select Village');
} }
});
// Event listener untuk perubahan pada dropdown District updateRemoveButtonVisibility();
document.getElementById('district_code_pembanding').addEventListener('change', function() { initializeEventListeners();
const districtId = this.value; } catch (error) {
if (districtId) { console.error('Error initializing form:', error);
getVillage(districtId); }
} else {
resetDropdown('village_code_pembanding', 'Select Village');
}
});
}); });
function loadProvinces() { function initializeFirstPembandingListeners() {
const provinces = // Event listener untuk province pembanding pertama
@json($provinces); // Using Laravel's Blade templating to pass the provinces array to JS const firstProvinceSelect = document.getElementById('province_code_pembanding');
if (firstProvinceSelect) {
firstProvinceSelect.addEventListener('change', function() {
const provinceId = this.value;
if (provinceId) {
getCity(provinceId, 1);
}
});
}
const provinceDropdown = document.getElementById('province_code_pembanding'); // Event listener untuk city pembanding pertama
provinceDropdown.innerHTML = '<option value="">Select Province</option>'; const firstCitySelect = document.getElementById('city_code_pembanding');
if (firstCitySelect) {
firstCitySelect.addEventListener('change', function() {
const cityId = this.value;
if (cityId) {
getDistrict(cityId, 1);
}
});
}
provinces.forEach(province => { // Event listener untuk district pembanding pertama
provinceDropdown.innerHTML += `<option value="${province.code}">${province.name}</option>`; const firstDistrictSelect = document.getElementById('district_code_pembanding');
}); if (firstDistrictSelect) {
firstDistrictSelect.addEventListener('change', function() {
const districtId = this.value;
if (districtId) {
getVillage(districtId, 1);
}
});
}
} }
async function getCity(provinceId) { function handleProvinceChange(provinceSelect) {
const provinceId = provinceSelect.value;
let columnIndex;
// Cek apakah ini pembanding pertama atau tambahan
if (provinceSelect.id === 'province_code_pembanding') {
columnIndex = 1;
} else {
columnIndex = provinceSelect.id.split('_').pop();
}
if (provinceId) {
getCity(provinceId, columnIndex);
}
}
function handleCityChange(citySelect) {
const cityId = citySelect.value;
let columnIndex;
if (citySelect.id === 'city_code_pembanding') {
columnIndex = 1;
} else {
columnIndex = citySelect.id.split('_').pop();
}
if (cityId) {
getDistrict(cityId, columnIndex);
}
}
function handleDistrictChange(districtSelect) {
const districtId = districtSelect.value;
let columnIndex;
if (districtSelect.id === 'district_code_pembanding') {
columnIndex = 1;
} else {
columnIndex = districtSelect.id.split('_').pop();
}
if (districtId) {
getVillage(districtId, columnIndex);
}
}
async function getCity(provinceId, columnIndex) {
try { try {
const response = await fetch( const response = await fetch(`/locations/cities/province/${provinceId}`);
`/locations/cities/province/${provinceId}`); // Assuming this is still your API
const data = await response.json(); const data = await response.json();
const cityDropdown = document.getElementById('city_code_pembanding'); // Pilih dropdown berdasarkan index
cityDropdown.innerHTML = '<option value="">Select City</option>'; const cityDropdown = columnIndex === 1 ?
document.getElementById('city_code_pembanding') :
document.getElementById(`city_code_pembanding_${columnIndex}`);
data.forEach(city => { if (cityDropdown) {
cityDropdown.innerHTML += `<option value="${city.code}">${city.name}</option>`; cityDropdown.innerHTML = '<option value="">Pilih Kota/Kabupaten</option>';
}); data.forEach(city => {
cityDropdown.innerHTML += `<option value="${city.code}">${city.name}</option>`;
});
}
} catch (error) { } catch (error) {
console.error('Error fetching cities:', error); console.error('Error fetching cities:', error);
} }
} }
async function getDistrict(cityId) { async function getDistrict(cityId, columnIndex) {
try { try {
const response = await fetch(`/locations/districts/city/${cityId}`); const response = await fetch(`/locations/districts/city/${cityId}`);
const data = await response.json(); const data = await response.json();
const districtDropdown = document.getElementById('district_code_pembanding'); const districtDropdown = columnIndex === 1 ?
districtDropdown.innerHTML = '<option value="">Select District</option>'; document.getElementById('district_code_pembanding') :
document.getElementById(`district_code_pembanding_${columnIndex}`);
data.forEach(district => { if (districtDropdown) {
districtDropdown.innerHTML += `<option value="${district.code}">${district.name}</option>`; districtDropdown.innerHTML = '<option value="">Pilih Kecamatan</option>';
}); data.forEach(district => {
districtDropdown.innerHTML +=
`<option value="${district.code}">${district.name}</option>`;
});
}
} catch (error) { } catch (error) {
console.error('Error fetching districts:', error); console.error('Error fetching districts:', error);
} }
} }
async function getVillage(districtId) { async function getVillage(districtId, columnIndex) {
try { try {
const response = await fetch(`/locations/villages/district/${districtId}`); const response = await fetch(`/locations/villages/district/${districtId}`);
const data = await response.json(); const data = await response.json();
const villageDropdown = document.getElementById('village_code_pembanding'); const villageDropdown = columnIndex === 1 ?
villageDropdown.innerHTML = '<option value="">Select Village</option>'; document.getElementById('village_code_pembanding') :
document.getElementById(`village_code_pembanding_${columnIndex}`);
data.forEach(village => { if (villageDropdown) {
villageDropdown.innerHTML += `<option value="${village.code}">${village.name}</option>`; villageDropdown.innerHTML = '<option value="">Pilih Desa/Kelurahan</option>';
}); data.forEach(village => {
villageDropdown.innerHTML += `<option value="${village.code}">${village.name}</option>`;
});
}
} catch (error) { } catch (error) {
console.error('Error fetching villages:', error); console.error('Error fetching villages:', error);
} }
} }
function resetDropdown(elementId, placeholder) { function resetDropdown(elementId, placeholder) {
const dropdown = document.getElementById(elementId); const dropdown = document.getElementById(elementId);
dropdown.innerHTML = `<option value="">${placeholder}</option>`; dropdown.innerHTML = `<option value="">${placeholder}</option>`;