From ec1b00f2152b845bcd4429a384da2f182e44b53b Mon Sep 17 00:00:00 2001
From: AnthonyAxenov <anthonyaxenov@gmail.com>
Date: Tue, 13 May 2025 12:27:52 +0800
Subject: [PATCH] =?UTF-8?q?=D0=A4=D0=B8=D0=BB=D1=8C=D1=82=D1=80=20=D0=BF?=
 =?UTF-8?q?=D0=BE=20=D1=82=D0=B5=D0=B3=D0=B0=D0=BC=20=D0=B2=20=D1=81=D0=BF?=
 =?UTF-8?q?=D0=B8=D1=81=D0=BA=D0=B5=20=D0=BA=D0=B0=D0=BD=D0=B0=D0=BB=D0=BE?=
 =?UTF-8?q?=D0=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 views/details.twig | 60 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/views/details.twig b/views/details.twig
index 32c7e0b..6746d83 100644
--- a/views/details.twig
+++ b/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']}
+                {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
             }
         }