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