39 lines
2.7 KiB
JavaScript
39 lines
2.7 KiB
JavaScript
document.querySelectorAll('[data-location-picker]').forEach(async picker=>{
|
|
const province=picker.querySelector('[data-province-input]');
|
|
const city=picker.querySelector('[data-city-input]');
|
|
const provinceList=picker.querySelector('[data-province-options]')||(province?.matches('select')?province:null);
|
|
const cityList=picker.querySelector('[data-city-options]')||(city?.matches('select')?city:null);
|
|
const hint=picker.querySelector('[data-location-hint]');
|
|
if(!province||!city||!provinceList||!cityList)return;
|
|
|
|
const normalize=value=>(value||'').trim().replace(/ي/g,'ی').replace(/ك/g,'ک');
|
|
const setHint=(text,error=false)=>{if(!hint)return;hint.textContent=text;hint.classList.toggle('is-error',error)};
|
|
const fill=(list,values,placeholder='')=>{
|
|
const selected=normalize(list.value);
|
|
const options=values.map(value=>{const option=document.createElement('option');option.value=value;option.textContent=value;return option});
|
|
if(list.matches('select')){const empty=document.createElement('option');empty.value='';empty.textContent=placeholder;options.unshift(empty)}
|
|
list.replaceChildren(...options);
|
|
if(values.includes(selected))list.value=selected;
|
|
};
|
|
try{
|
|
const response=await fetch(picker.dataset.locationsUrl,{cache:'force-cache'});
|
|
if(!response.ok)throw new Error('location data unavailable');
|
|
const rows=await response.json();
|
|
const locations=new Map(rows.map(row=>[normalize(row.province),row.cities]));
|
|
fill(provinceList,rows.map(row=>row.province),'انتخاب استان');
|
|
const syncCities=(clearInvalid=false)=>{
|
|
const cities=locations.get(normalize(province.value))||[];
|
|
fill(cityList,cities,'انتخاب شهر');
|
|
city.disabled=!cities.length;
|
|
if(clearInvalid&&city.value&&!cities.includes(normalize(city.value)))city.value='';
|
|
setHint(cities.length?`${cities.length.toLocaleString('fa-IR')} شهر برای این استان در دسترس است.`:'برای نمایش شهرها، یک استان معتبر انتخاب کنید.',Boolean(province.value&&!cities.length));
|
|
};
|
|
province.addEventListener('input',()=>syncCities(true));
|
|
province.addEventListener('change',()=>syncCities(true));
|
|
city.addEventListener('change',()=>{const cities=locations.get(normalize(province.value))||[];setHint(!city.value||cities.includes(normalize(city.value))?'موقعیت انتخابی برای همین تیکت استفاده میشود.':'شهر را از فهرست همین استان انتخاب کنید.',Boolean(city.value&&!cities.includes(normalize(city.value))))});
|
|
syncCities(false);
|
|
}catch(error){
|
|
province.disabled=true;city.disabled=true;setHint('فهرست شهرها بارگذاری نشد؛ صفحه را دوباره باز کنید.',true);
|
|
}
|
|
});
|