Фильтр по тегам в списке каналов
This commit is contained in:
@@ -172,7 +172,7 @@
|
||||
<div class="modal-dialog ">
|
||||
<div class="modal-content bg-dark">
|
||||
<div class="modal-header">
|
||||
<h1 class="modal-title fs-5">QR-код со ссылкой на плейлист</h1>
|
||||
<h1 class="modal-title fs-5">QR-код со ссылкой на плейлист {{ playlist.code }}</h1>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body text-center">
|
||||
@@ -274,6 +274,21 @@
|
||||
<ion-icon name="close-outline"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="my-3">
|
||||
{% for tag in playlist.tags %}
|
||||
<input type="checkbox"
|
||||
class="btn-check"
|
||||
id="btn-tag-{{ tag }}"
|
||||
data-tag="{{ tag }}"
|
||||
autocomplete="off"
|
||||
onclick="updateFilter()"
|
||||
>
|
||||
<label class="badge btn btn-sm btn-outline-secondary rounded-pill"
|
||||
for="btn-tag-{{ tag }}"
|
||||
>#{{ tag }}</label>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -285,6 +300,7 @@
|
||||
data-id="{{ channel.id }}"
|
||||
data-group="{{ channel.groupId ?? 'all' }}"
|
||||
data-online="{{ channel.isOnline ? 1 : 0 }}"
|
||||
data-chtags="{{ channel.tags|join('|') }}"
|
||||
title="
HTTP: {{ channel.status ?: '(неизвестно)' }}
Error: {{ channel.error ?: '(нет)' }}"
|
||||
>
|
||||
<td class="chindex">{{ loop.index }}</td>
|
||||
@@ -352,8 +368,7 @@
|
||||
const options = {
|
||||
valueNames: [
|
||||
'chname',
|
||||
'chtag',
|
||||
{data: ['online', 'group']}
|
||||
{data: ['online', 'group', 'tag', 'chtags']}
|
||||
],
|
||||
};
|
||||
|
||||
@@ -379,29 +394,46 @@
|
||||
function resetSearch() {
|
||||
list.search('')
|
||||
document.getElementById('search-field').value = ''
|
||||
const elementById = document.getElementById('chfAll');
|
||||
elementById.checked = true
|
||||
document.getElementById('chfAll').checked = true
|
||||
document.querySelectorAll('input[id*="btn-tag-"]:checked').forEach(tag => tag.checked = false)
|
||||
updateFilter()
|
||||
}
|
||||
|
||||
function updateFilter() {
|
||||
const groupHash = document.getElementById('groupSelector')?.value ?? 'all';
|
||||
const tagsElements = document.querySelectorAll('input[id*="btn-tag-"]:checked')
|
||||
const tagsSelected = []
|
||||
tagsElements.forEach(tag => tagsSelected.push(tag.attributes['data-tag'].value));
|
||||
const activeType = document.querySelector('input[name="chFilter"]:checked').id;
|
||||
switch (activeType) {
|
||||
case 'chfAll':
|
||||
list.filter(item => item.values().group === groupHash || groupHash === 'all')
|
||||
list.filter(item => {
|
||||
const chTags = item.values().chtags.split('|');
|
||||
const isGroupValid = item.values().group === groupHash || groupHash === 'all';
|
||||
const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
|
||||
const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
|
||||
return isGroupValid && hasValidTags;
|
||||
})
|
||||
break
|
||||
case 'chfOnline':
|
||||
list.filter(
|
||||
item => (item.values().group === groupHash || groupHash === 'all')
|
||||
&& item.values().online === '1'
|
||||
)
|
||||
list.filter(item => {
|
||||
const isOnline = item.values().online === '1'
|
||||
const chTags = item.values().chtags.split('|');
|
||||
const isGroupValid = item.values().group === groupHash || groupHash === 'all';
|
||||
const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
|
||||
const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
|
||||
return isGroupValid && isOnline && hasValidTags
|
||||
})
|
||||
break
|
||||
case 'chfOffline':
|
||||
list.filter(
|
||||
item => (item.values().group === groupHash || groupHash === 'all')
|
||||
&& item.values().online === '0'
|
||||
)
|
||||
list.filter(item => {
|
||||
const isOffline = item.values().online === '0'
|
||||
const chTags = item.values().chtags.split('|');
|
||||
const isGroupValid = item.values().group === groupHash || groupHash === 'all';
|
||||
const tagsIntersection = tagsSelected.filter(tagSelected => chTags.includes(tagSelected));
|
||||
const hasValidTags = tagsIntersection.length > 0 || tagsSelected.length === 0;
|
||||
return isGroupValid && isOffline && hasValidTags
|
||||
})
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user