From e41a23b701a40fdb2cbcebb3719dfa9f738048e4 Mon Sep 17 00:00:00 2001
From: Eric P <ericpp@gmail.com>
Date: Sun, 22 Dec 2024 12:55:49 -0600
Subject: [PATCH] Add clear filter button

---
 webroot/html/home.html    |  5 +++--
 webroot/html/sent.html    |  5 +++--
 webroot/html/streams.html |  5 +++--
 webroot/script/helipad.js | 18 ++++++++++++++++++
 webroot/style/default.css |  4 ++++
 5 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/webroot/html/home.html b/webroot/html/home.html
index 543d4a4..182ccf1 100644
--- a/webroot/html/home.html
+++ b/webroot/html/home.html
@@ -63,14 +63,15 @@ <h5 class="titleHeader">
     </div>
     <div class="messaging">
         <div class="inbox_msg">
-            <div id="inbox-filters" style="display: flex; justify-content: space-between" class="d-none">
+            <div id="inbox-filters" style="display: flex; align-items: center;" class="d-none">
                 <div id="filter-podcasts" class="dropdown">
-                    <button class="btn btn-sm btn-outline-dark text-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
+                    <button class="btn btn-outline-dark text-light dropdown-toggle py-1" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
                         Filter by podcast
                     </button>
                     <div class="dropdown-menu" style="font-size: .875rem;">
                     </div>
                 </div>
+                <a href="#" class="clear-filters d-none">❌</a>
             </div>
             <div class="mesgs">
                 <div class="msg_history"></div>
diff --git a/webroot/html/sent.html b/webroot/html/sent.html
index a1a183a..b6f57a7 100644
--- a/webroot/html/sent.html
+++ b/webroot/html/sent.html
@@ -63,14 +63,15 @@ <h5 class="titleHeader">
     </div>
     <div class="messaging">
         <div class="inbox_msg">
-            <div id="inbox-filters" style="display: flex; justify-content: space-between" class="d-none">
+            <div id="inbox-filters" style="display: flex; align-items: center;" class="d-none">
                 <div id="filter-podcasts" class="dropdown">
-                    <button class="btn btn-sm btn-outline-dark text-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
+                    <button class="btn btn-outline-dark text-light dropdown-toggle py-1" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
                         Filter by podcast
                     </button>
                     <div class="dropdown-menu" style="font-size: .875rem;">
                     </div>
                 </div>
+                <a href="#" class="clear-filters d-none">❌</a>
             </div>
             <div class="mesgs">
                 <div class="msg_history"></div>
diff --git a/webroot/html/streams.html b/webroot/html/streams.html
index be88aaa..ab0b5e8 100644
--- a/webroot/html/streams.html
+++ b/webroot/html/streams.html
@@ -63,14 +63,15 @@ <h5 class="titleHeader">
     </div>
     <div class="messaging">
         <div class="inbox_msg">
-            <div id="inbox-filters" style="display: flex; justify-content: space-between" class="d-none">
+            <div id="inbox-filters" style="display: flex; align-items: center;" class="d-none">
                 <div id="filter-podcasts" class="dropdown">
-                    <button class="btn btn-sm btn-outline-dark text-light dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
+                    <button class="btn btn-outline-dark text-light dropdown-toggle py-1" type="button" data-toggle="dropdown" aria-expanded="false" style="border: .2rem transparent;">
                         Filter by podcast
                     </button>
                     <div class="dropdown-menu" style="font-size: .875rem;">
                     </div>
                 </div>
+                <a href="#" class="clear-filters d-none">❌</a>
             </div>
             <div class="mesgs">
                 <div class="msg_history"></div>
diff --git a/webroot/script/helipad.js b/webroot/script/helipad.js
index bc81433..b11b801 100644
--- a/webroot/script/helipad.js
+++ b/webroot/script/helipad.js
@@ -949,6 +949,7 @@ $(document).ready(function () {
             $('#filter-podcasts button').text(`Filtering by `).append($('<b>').text(filters.podcast));
             $('#inbox-filters').removeClass('d-none')
             $('.filter a').addClass('text-danger')
+            $('.clear-filters').removeClass('d-none')
         }
 
         $('.filter a').click((ev) => {
@@ -984,12 +985,29 @@ $(document).ready(function () {
                     $('.filter a').removeClass('text-danger')
                 }
 
+                $('.clear-filters').toggleClass('d-none', filters.podcast === null);
+
                 inbox.empty();
                 $dropdown.empty();
                 getBoosts(currentInvoiceIndex, 100, true, true, false);
                 sessionStorage.setItem(config.filterName, JSON.stringify(filters));
             });
         });
+
+        $('.clear-filters').on('click', async (ev) => {
+            filters.podcast = null;
+
+            $('.filter a').removeClass('text-danger')
+            $('#filter-podcasts button').text(`Filter by podcast`);
+            $('.clear-filters').addClass('d-none');
+            $('#inbox-filters').toggleClass('d-none');
+
+            inbox.empty();
+            $('#filter-podcasts .dropdown-menu').empty();
+
+            getBoosts(currentInvoiceIndex, 100, true, true, false);
+            sessionStorage.setItem(config.filterName, JSON.stringify(filters));
+        });
     }
 
     //Build the UI with the page loads
diff --git a/webroot/style/default.css b/webroot/style/default.css
index 417b780..1373d0c 100644
--- a/webroot/style/default.css
+++ b/webroot/style/default.css
@@ -401,6 +401,10 @@ ul.navButtons li a[aria-selected="true"] {
     display: none;
 }
 
+a.clear-filters:hover {
+    opacity: 0.7;
+}
+
 .spinner {
     width: 1em;
     height: 1em;