From 10b672918b3648d0727b53b6a0df0abf8edbbb34 Mon Sep 17 00:00:00 2001 From: majid Date: Tue, 10 Dec 2024 07:22:23 +0700 Subject: [PATCH] perbaikan alamat data pembanding --- .../components/data-pembanding.blade.php | 238 +++++++++++------- 1 file changed, 152 insertions(+), 86 deletions(-) diff --git a/resources/views/surveyor/components/data-pembanding.blade.php b/resources/views/surveyor/components/data-pembanding.blade.php index ae5587a..1df31d4 100644 --- a/resources/views/surveyor/components/data-pembanding.blade.php +++ b/resources/views/surveyor/components/data-pembanding.blade.php @@ -241,12 +241,10 @@ @@ -280,10 +278,8 @@ @@ -316,10 +312,8 @@ @@ -351,9 +345,7 @@ @@ -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 = ''; + // 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 += ``; - }); + // 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 = ''; + // Pilih dropdown berdasarkan index + const cityDropdown = columnIndex === 1 ? + document.getElementById('city_code_pembanding') : + document.getElementById(`city_code_pembanding_${columnIndex}`); - data.forEach(city => { - cityDropdown.innerHTML += ``; - }); + if (cityDropdown) { + cityDropdown.innerHTML = ''; + data.forEach(city => { + cityDropdown.innerHTML += ``; + }); + } } 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 = ''; + const districtDropdown = columnIndex === 1 ? + document.getElementById('district_code_pembanding') : + document.getElementById(`district_code_pembanding_${columnIndex}`); - data.forEach(district => { - districtDropdown.innerHTML += ``; - }); + if (districtDropdown) { + districtDropdown.innerHTML = ''; + data.forEach(district => { + districtDropdown.innerHTML += + ``; + }); + } } 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 = ''; + const villageDropdown = columnIndex === 1 ? + document.getElementById('village_code_pembanding') : + document.getElementById(`village_code_pembanding_${columnIndex}`); - data.forEach(village => { - villageDropdown.innerHTML += ``; - }); + if (villageDropdown) { + villageDropdown.innerHTML = ''; + data.forEach(village => { + villageDropdown.innerHTML += ``; + }); + } } catch (error) { console.error('Error fetching villages:', error); } } + function resetDropdown(elementId, placeholder) { const dropdown = document.getElementById(elementId); dropdown.innerHTML = ``;