Hide invalid transmitters by default

Closes https://gitlab.com/librespacefoundation/satnogs/satnogs-db/-/issues/411

Signed-off-by: George Sfoungaris <sfou@libre.space>

db/base/models.py

@@ -278,6 +278,15 @@ class Satellite(models.Model):
         transmitters = Transmitter.objects.filter(satellite=self.id).exclude(status='invalid')
         return transmitters
 
+    @property
+    def invalid_transmitters(self):
+        """Returns invalid transmitters for this Satellite
+
+        :returns: the invalid transmitters for this Satellite
+        """
+        transmitters = Transmitter.objects.filter(satellite=self.id).filter(status='invalid')
+        return transmitters
+
     @property
     def transmitter_suggestion_count(self):
         """Returns number of pending transmitter suggestions for this Satellite

db/base/views.py

@@ -95,11 +95,11 @@ def transmitters_list(request):
     """
     transmitters = Transmitter.objects.filter(
         satellite__associated_satellite__isnull=True, satellite__satellite_entry__approved=True
-    ).exclude(
-        status='invalid'
     ).select_related('satellite', 'satellite__satellite_entry', 'satellite__satellite_identifier')
 
-    return render(request, 'base/transmitters.html', {'transmitters': transmitters})
+    return render(request, 'base/transmitters.html', {
+        'transmitters': transmitters,
+    })
 
 
 def robots(request):

db/static/css/app.css

@@ -680,3 +680,56 @@ a.skip-main:focus, a.skip-main:active {
 .transmitters-chart .bar:hover {
     stroke: var(--color-text);
 }
+
+.transmitters-separator {
+    display: flex;
+    align-items: center;
+    text-align: center;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+}
+
+.transmitters-separator::before,
+.transmitters-separator::after {
+    content: '';
+    flex: 1;
+    border-bottom: 1px solid #dee2e6;
+}
+
+.transmitters-separator:not(:empty)::before {
+    margin-right: .25em;
+}
+
+.transmitters-separator:not(:empty)::after {
+    margin-left: .25em;
+}
+
+.transmitters-separator > div {
+    margin-left: .75rem;
+    margin-right: .75rem;
+}
+
+.custom-control-input-themed:focus ~ .custom-control-label::before {
+    border-color: var(--satnogs-color-primary);
+    box-shadow: 0 0 0 0.2rem rgba(var(--satnogs-color-primary), 0.25);
+}
+
+.custom-control-input-themed:checked ~ .custom-control-label::before {
+    border-color: var(--satnogs-color-primary);
+    background-color: var(--satnogs-color-primary);
+}
+
+.custom-control-input-themed:focus:not(:checked) ~ .custom-control-label::before {
+    border-color: var(--satnogs-color-text);
+}
+
+.custom-control-input-themed:not(:disabled):active ~ .custom-control-label::before {
+    background-color: var(--satnogs-color-background);
+    border-color: var(--satnogs-color-dark);
+}
+
+.custom-control-label {
+    font-weight: normal;
+    margin-top: auto;
+    margin-bottom: auto;
+}

db/static/js/satellite.js

@@ -254,4 +254,11 @@ $(document).ready(function () {
         const hash = $(this).attr('href');
         $('#tabs a[href="' + hash + '"]').tab('show');
     });
+
+    // Show/hide invalid transmitters
+    let invalidTransmittersDiv = $('#invalidTransmitters');
+    invalidTransmittersDiv.hide();
+    $('#showInvalidCheckbox').on('click', function() {
+        invalidTransmittersDiv.fadeToggle('fast', 'linear');
+    });
 });

db/static/js/transmitters-invalid-toggle.js

@@ -0,0 +1,5 @@
+$(document).ready(function() {
+    $('#toggleInvalidTransmitters').show();
+});
+
+

db/static/js/transmitters.js

@@ -20,6 +20,23 @@ function format_freq(frequency_string) {
 }
 /* eslint-enable no-unused-vars */
 
+// A toggle to show/hide invalid transmitters
+const toggle_html = '\
+  <div class="ml-3 custom-control custom-switch custom-control-inline">\
+    <input class="custom-control-input custom-control-input-themed" type="checkbox" role="switch" id="toggleInvalidTransmitters" >\
+    <label class="custom-control-label" for="toggleInvalidTransmitters">Show invalid transmitters</label>\
+  </div>';
+
+// Custom filtering function to show/hide invalid transmitters
+$.fn.dataTable.ext.search.push(function (settings, data) {
+    const toggle = $('#toggleInvalidTransmitters');
+    if(!toggle.length || toggle.is(':checked')) {
+        return true;
+    } else {
+        return data[13] !== 'invalid';
+    }
+});
+
 /* eslint new-cap: "off" */
 $(document).ready(function() {
 
@@ -35,7 +52,7 @@ $(document).ready(function() {
         $(this).html(format_freq(to_format));
     });
 
-    $('#transmitters').DataTable( {
+    const table = $('#transmitters').DataTable( {
         // the dom field controls the layout and visibility of datatable items
         // and is not intuitive at all. Without layout we have dom: 'Bftrilp' 
         // https://datatables.net/reference/option/dom
@@ -72,6 +89,16 @@ $(document).ready(function() {
         pageLength: 25
     } );
 
+    // .dt-buttons is the columns dropdown
+    $('.dt-buttons').append(toggle_html);
+    let invalidTransmitterToggle = $('#toggleInvalidTransmitters');
+    invalidTransmitterToggle.hide();
+    
+    // Event listener to redraw the table if invalid transmitter visibility is toggled
+    invalidTransmitterToggle.on('click', function() {
+        table.draw();
+    });
+
     // Handle deep linking of tabbed panes
     let url = location.href.replace(/\/$/, '');
     history.replaceState(null, null, url);

db/templates/base/satellite.html

@@ -387,6 +387,21 @@
           </div>
         {% endfor %}
       </div>
+      {% if satellite.invalid_transmitters %}
+      <div class="transmitters-separator">
+        <div class="custom-control custom-switch custom-control-inline">
+          <input class="custom-control-input custom-control-input-themed" type="checkbox" role="switch" id="showInvalidCheckbox" >
+          <label class="custom-control-label" for="showInvalidCheckbox">Show invalid transmitters</label>
+        </div>
+      </div>
+      <div class="card-deck" id="invalidTransmitters">
+      {% for transmitter in satellite.invalid_transmitters %}
+        <div class="col-sm-12 col-md-6 col-xl-4 my-2">
+          {% include 'includes/cards/transmitter_card.html' with satellite_entry=satellite.satellite_entry transmitter=transmitter %}
+        </div>
+      {% endfor %}
+      </div>
+      {% endif %}
     </div>
 
     <!-- Data panel -->

db/templates/base/transmitters.html

@@ -42,7 +42,6 @@
 
     <!-- List panel -->
     <div class="tab-pane fade show active mx-1" id="list" role="tabpanel" aria-labelledby="list-tab">
-
       <table id="transmitters" class="table table-sm display responsive table-striped" width="100%">
         <thead>
           <tr>
@@ -123,4 +122,5 @@
 <script src="{% static 'js/datatables-natural.js' %}"></script>
 <script src="{% static 'js/transmitters-chart.js' %}"></script>
 <script src="{% static 'js/transmitters.js' %}"></script>
+<script src="{% static 'js/transmitters-invalid-toggle.js' %}"></script>
 {% endblock %}