🛠️ style.css -> Added hover color for bulk-select links

🛠️ signals.html -> Added bulk-select buttons for various form fields

Author: BrainIsDead

src/assets/css/style.css

@@ -1240,3 +1240,8 @@ h6 {
 .clickable-table-cell:hover {
   cursor: pointer;
 }
+
+.bulk-select > a:nth-child(1):hover,
+.bulk-select > a:nth-child(2):hover {
+  color: #0d6efd;
+}

src/templates/signals/signals.html

@@ -18,7 +18,8 @@ <h5 class="card-title">Search</h5>
                         </div>
                         <div class="card-body">
                             <label for="id_pathogen" class="form-label">
-                                Pathogen <a href="#" data-bs-toggle="modal" data-bs-target="#pathogen_modal">
+                                Pathogen
+                                <a href="#" data-bs-toggle="modal" data-bs-target="#pathogen_modal">
                                     <i class="bi bi-info-circle"></i>
                                 </a>
                             </label>
@@ -42,6 +43,7 @@ <h5 class="modal-title">Pathogen</h5>
                                 </div>
                             </div>
                             {{ form.pathogen|as_crispy_field }}
+
                         </div>
                         <div class="card-body">
                             <label for="id_active" class="form-label">
@@ -97,6 +99,10 @@ <h5 class="modal-title">Available Geography</h5>
                                     </div>
                                 </div>
                             </div>
+                            <div class="d-flex justify-content-evenly bulk-select">
+                                <a role="button">All</a>
+                                <a role="button">Clear</a>
+                            </div>
                             {{ form.available_geography|as_crispy_field }}
                         </div>
                         <div class="card-body">
@@ -125,6 +131,10 @@ <h5 class="modal-title">Signal Type</h5>
                                     </div>
                                 </div>
                             </div>
+                            <div class="d-flex justify-content-evenly bulk-select">
+                                <a role="button">All</a>
+                                <a role="button">Clear</a>
+                            </div>
                             {{ form.signal_type|as_crispy_field }}
                         </div>
                         <div class="card-body">
@@ -153,6 +163,10 @@ <h5 class="modal-title">Category</h5>
                                     </div>
                                 </div>
                             </div>
+                            <div class="d-flex justify-content-evenly bulk-select">
+                                <a role="button">All</a>
+                                <a role="button">Clear</a>
+                            </div>
                             {{ form.category|as_crispy_field }}
                         </div>
                         <div class="card-body">
@@ -181,6 +195,10 @@ <h5 class="modal-title">Format Type</h5>
                                     </div>
                                 </div>
                             </div>
+                            <div class="d-flex justify-content-evenly bulk-select">
+                                <a role="button">All</a>
+                                <a role="button">Clear</a>
+                            </div>
                             {{ form.format_type|as_crispy_field }}
                         </div>
                         <div class="card-body">
@@ -209,6 +227,10 @@ <h5 class="modal-title">Source</h5>
                                     </div>
                                 </div>
                             </div>
+                            <div class="d-flex justify-content-evenly bulk-select">
+                                <a role="button">All</a>
+                                <a role="button">Clear</a>
+                            </div>
                             {{ form.source|as_crispy_field }}
                         </div>
                         <div class="card-body">
@@ -285,9 +307,28 @@ <h5 class="modal-title">Time Label</h5>
 </form>
 
 <script>
+
+    // Add an event listener to the 'order_by' select element
     document.getElementById('id_order_by').addEventListener('change', function() {
         document.getElementById('filters-form').submit();
     });
+
+
+    // Add an event listener to each 'bulk-select' element
+    let bulkSelectDivs = document.querySelectorAll('.bulk-select');
+    bulkSelectDivs.forEach(div => {
+        div.addEventListener('click', function(event) {
+            let form = this.nextElementSibling;
+            let checkboxes = form.querySelectorAll('input[type="checkbox"]');
+
+            if (event.target.innerText === 'All') {
+                checkboxes.forEach(checkbox => checkbox.checked = true);
+            } else if (event.target.innerText === 'Clear') {
+                checkboxes.forEach(checkbox => checkbox.checked = false);
+            }
+        });
+    });
+
 </script>
 
 {% endblock %}