first

static/js/location-picker.js

@@ -0,0 +1,38 @@
+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);
+  }
+});