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

views/details.twig

@@ -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', 'tag', 'chtags']}
-                {data: ['online', 'group']}
             ],
         };
 
@@ -379,29 +394,46 @@
         function resetSearch() {
             list.search('')
             document.getElementById('search-field').value = ''
-            const elementById = document.getElementById('chfAll');
+            document.getElementById('chfAll').checked = true
-            elementById.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(
+                    list.filter(item => {
-                        item => (item.values().group === groupHash || groupHash === 'all')
+                        const isOnline = item.values().online === '1'
-                            && 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(
+                    list.filter(item => {
-                        item => (item.values().group === groupHash || groupHash === 'all')
+                        const isOffline = item.values().online === '0'
-                            && 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
             }
         }