Фильтр по тегам в списке каналов

This commit is contained in:
2025-05-13 12:27:52 +08:00
parent 52a1a8c731
commit ec1b00f215

View File

@@ -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="&#010;HTTP: {{ channel.status ?: '(неизвестно)' }}&#010;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
}
}