<div class="table-filters">
<form name="filters">
<div class="select-wrap">
<select name="region" id="region">
<option value=""> По місту</option>
{% for key in dataRegions|keys %}
{% if geoS.regions[key] is defined and geoS.regions('ukr')[key] %}
<option value="{{ key }}" {{ filterData and filterData['region'] == key ? 'selected' }}>{{ geoS.regions('ukr')[key] }}</option>{% endif %}
{% endfor %}
</select>
</div>
<div class="select-wrap">
<select name="country" id="country">
<option value=""> По країні</option>
{% for key in dataCountries|keys %}
{% if geoS.countries[key] is defined and geoS.countries('ukr')[key] %}
<option value="{{ key }}" {{ filterData and filterData['country'] == key ? 'selected' }}>{{ geoS.countries('ukr')[key] }}</option>{% endif %}
{% endfor %}
</select>
</div>
<div class="select-wrap">
<select name="source" id="source">
<option value=""> По джерелу</option>
{% for source in sources %}
<option value="{{ source.id }}" {{ filterData and filterData['source'] == source.id ? 'selected' }}>{{ source.name }}</option>
{% endfor %}
</select>
</div>
<div onclick="addFilters()" class="btn-primar primary-action-btn filter-btn" style="display: none">
Фільтрувати
</div>
<div onclick="removeFilters()" class="clear-filter"></div>
</form>
</div>
<script>
$(document).ready(function () {
$('select').select2({
sorter: data => data.sort((a, b) => a.text.localeCompare(b.text)),
});
$('#region, #country, #source').on('select2:select', function (e) {
addFilters();
});
});
addFilters = function () {
$.ajax({
method: 'POST',
url: '/api/requests-filter',
data: $("form[name=filters]").serializeArray(),
}).done(function (data) {
window.location = window.location.pathname;
});
}
removeFilters = function () {
$.ajax({
method: 'DELETE',
url: '/api/requests-filter',
}).done(function (data) {
window.location = window.location.pathname;
});
}
</script>