Adding satellite modal links everywhere

The satellite modal that was tested in the observation view works great! This commit adds the similar link everywhere else a satellite is listed in a table so we have a consistent UX. In the observation view there is only one satellite referenced, making the modal a 1:1 mapping. As there are multiple satellites in the table view we pull this modal in multiple times. To cut down on possible load times getting out of hand I'm limiting the number of rows you'll see in the home page and observations view. I don't quite feel this iterative import approach is the best. Feel free to decline this if there is a better way (.js it?)
2016-04-09 12:19:47 -04:00 · 2016-04-09 12:19:47 -04:00 · 2f23bba762
parent 6c6322599b
commit 2f23bba762
8 changed files with 91 additions and 22 deletions
--- a/network/base/urls.py
+++ b/network/base/urls.py
@ -26,4 +26,7 @@ base_urlpatterns = ([
    url(r'^stations/(?P<id>[0-9]+)/delete/$', views.station_delete, name='station_delete'),
    url(r'^stations/edit/$', views.station_edit, name='station_edit'),
    url(r'^stations_all/$', views.StationAllView.as_view({'get': 'list'}), name='stations_all'),
+
+    # Satellites
+    url(r'^satellites/(?P<id>[0-9]+)/$', views.satellite_view, name='satellite_view'),
 ], 'base')
--- a/network/base/views.py
+++ b/network/base/views.py
@ -67,7 +67,7 @@ def index(request):
        featured_station = None

    ctx = {
-        'latest_observations': observations.filter(end__lt=now()),
+        'latest_observations': observations.filter(end__lt=now()).order_by('-id')[:10],
        'scheduled_observations': observations.filter(end__gte=now()),
        'featured_station': featured_station,
        'mapbox_id': settings.MAPBOX_MAP_ID,
@ -118,14 +118,14 @@ def settings_site(request):

 def observations_list(request):
    """View to render Observations page."""
-    observations = Observation.objects.all()
+    observations = Observation.objects.order_by('-id')[:20]
    satellites = Satellite.objects.all()

    if request.method == 'GET':
        form = SatelliteFilterForm(request.GET)
        if form.is_valid():
            norad = form.cleaned_data['norad']
-            observations = observations.filter(satellite__norad_cat_id=norad)
+            observations = Observation.objects.filter(satellite__norad_cat_id=norad)
            return render(request, 'base/observations.html',
                          {'observations': observations, 'satellites': satellites, 'norad': int(norad)})

@ -432,6 +432,7 @@ def station_view(request, id):
                                        'debug': observer.next_pass(sat_ephem),
                                        'name': str(satellite.name),
                                        'id': str(satellite.id),
+                                        'norad_cat_id': str(satellite.norad_cat_id),
                                        'tr': tr,           # Rise time
                                        'azr': azimuth,     # Rise Azimuth
                                        'tt': tt,           # Max altitude time
@ -495,3 +496,23 @@ def station_delete(request, id):
    station.delete()
    messages.success(request, 'Ground Station deleted successfully.')
    return redirect(reverse('users:view_user', kwargs={'username': me}))
+
+
+def satellite_view(request, id):
+    try:
+        sat = get_object_or_404(Satellite, norad_cat_id=id)
+    except:
+        data = {
+            'error': 'Unable to find that satellite.'
+        }
+        return JsonResponse(data, safe=False)
+
+    data = {
+        'id': id,
+        'name': sat.name,
+        'names': sat.names,
+        'image': sat.image,
+    }
+
+    return JsonResponse(data, safe=False)
+
--- a/network/static/js/satellite.js
+++ b/network/static/js/satellite.js
@ -0,0 +1,27 @@
+$(document).ready(function() {
+    'use strict';
+
+    $('#SatelliteModal').on('show.bs.modal', function (event) {
+        var satlink = $(event.relatedTarget);
+        var modal = $(this);
+
+        $.ajax({
+            url: '/satellites/' + satlink.data('id') + '/'
+        })
+            .done(function( data ) {
+                modal.find('.satellite-title').text(data['name']);
+                modal.find('.satellite-names').text(data['names']);
+                modal.find('#SatelliteModalTitle').text(data['name']);
+                modal.find('.satellite-id').text("Norad ID " + satlink.data('id'));
+                modal.find('#db-link').attr('href', "https://db.satnogs.org/satellite/" + satlink.data('id'));
+                modal.find('#new-obs-link').attr('href', '/observations/new/?norad=' + satlink.data('id'));
+                modal.find('#old-obs-link').attr('href', '/observations/?norad=' + satlink.data('id'));
+                if (data['image']) {
+                    modal.find('.satellite-img-full').attr('src', data['image']);
+                } else {
+                    modal.find('.satellite-img-full').attr('src', "/static/img/sat.png");
+                }
+                
+            });
+    });
+});
--- a/network/templates/base/home.html
+++ b/network/templates/base/home.html
@ -131,7 +131,11 @@
                      </span>
                    </a>
                  </td>
-                  <td>{{ observation.satellite.name }}</td>
+                  <td>
+                    <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
+                      {{ observation.satellite.name }}
+                    </a>
+                  </td>
                  <td>{{ observation.transmitter.downlink_low|frq }}</td>
                  <td>{{ observation.transmitter.mode|default:"-" }}</td>
                  <td>
@ -168,7 +172,11 @@
                      </span>
                    </a>
                  </td>
-                  <td>{{ observation.satellite.name }}</td>
+                  <td>
+                    <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
+                      {{ observation.satellite.name }}
+                    </a>
+                  </td>
                  <td>{{ observation.transmitter.downlink_low|frq }}</td>
                  <td>{{ observation.transmitter.mode }}</td>
                  <td>{{ observation.start|date:"Y-m-d H:i:s" }}</br>{{ observation.end|date:"Y-m-d H:i:s" }}</td>
@ -225,9 +233,11 @@
      </div>
    </div>
  </div>
+  {% include 'includes/satellite.html' %}
 {% endblock content %}

 {% block javascript %}
  <script src="{% static 'js/lib/mapbox.js' %}"></script>
  <script src="{% static 'js/home.js' %}"></script>
+  <script src="{% static 'js/satellite.js' %}"></script>
 {% endblock %}
--- a/network/templates/base/observation_view.html
+++ b/network/templates/base/observation_view.html
@ -40,7 +40,7 @@
        <tbody>
            <tr>
              <td>
-                <a href="#" data-toggle="modal" data-target="#SatelliteModal">
+                <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
                  {{ observation.satellite.norad_cat_id }}  - {{ observation.satellite.name }}
                </a>
              </td>
@ -197,9 +197,7 @@
  {% include 'includes/utc.html' %}

  <!-- Satellite Modal -->
-  {% with satellite=observation.satellite %}
-    {% include 'includes/satellite.html' %}
-  {% endwith %}
+  {% include 'includes/satellite.html' %}

 {% endblock content %}

@ -210,4 +208,5 @@
  <script src="{% static 'js/lib/moment.min.js' %}"></script>
  <script src="{% static 'js/utc.js' %}"></script>
  <script src="{% static 'js/observation_view.js' %}"></script>
+  <script src="{% static 'js/satellite.js' %}"></script>
 {% endblock javascript %}
--- a/network/templates/base/observations.html
+++ b/network/templates/base/observations.html
@ -89,7 +89,11 @@
                  </span>
                </a>
              </td>
-              <td>{{ observation.satellite.name }}</td>
+              <td>
+                <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ observation.satellite.norad_cat_id }}">
+                  {{ observation.satellite.name }}
+                </a>
+              </td>
              <td>{{ observation.transmitter.downlink_low|frq }}</td>
              <td>{{ observation.transmitter.mode|default:"-" }}</td>
              <td>{{ observation.start|date:"Y-m-d H:i:s" }}</br>{{ observation.end|date:"Y-m-d H:i:s" }}</td>
@ -104,8 +108,10 @@
      </table>
    </div>
  </div>
+  {% include 'includes/satellite.html' %}
 {% endblock content %}

 {% block javascript %}
  <script src="{% static 'js/observations.js' %}"></script>
+  <script src="{% static 'js/satellite.js' %}"></script>
 {% endblock javascript %}
--- a/network/templates/base/station_view.html
+++ b/network/templates/base/station_view.html
@ -174,7 +174,9 @@
        {% for nextpass in nextpasses %}
          <tr>
            <td>
-              {{ nextpass.name }}
+              <a href="#" data-toggle="modal" data-target="#SatelliteModal" data-id="{{ nextpass.norad_cat_id }}">
+                {{ nextpass.name }}
+              </a>
            </td>
            <td>
              {{ nextpass.tr }} UTC
@ -195,12 +197,14 @@
    <!-- Station Modal -->
    {% include 'includes/station_edit.html' %}
  {% endif %}
+  {% include 'includes/satellite.html' %}
 {% endblock content %}

 {% block javascript %}
  <script src="{% static 'js/lib/mapbox.js' %}"></script>
  <script src="{% static 'js/station_view.js' %}"></script>
  <script src="{% static 'js/gridsquare.js' %}"></script>
+  <script src="{% static 'js/satellite.js' %}"></script>

  <script type="text/javascript">
      (function() {
--- a/network/templates/includes/satellite.html
+++ b/network/templates/includes/satellite.html
@ -3,37 +3,36 @@
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
-        <h4 class="modal-title" id="SatelliteModalTitle">{{ satellite.name }}</h4>
+        <h4 class="modal-title" id="SatelliteModalTitle"></h4>
      </div>
        <div class="modal-body">
          <div class="row panel-body">
            <div class="col-md-4 panel-satellite">
              <div>
-                <img src="{{ satellite.get_image }}" alt="{{ satellite.name }}" class="satellite-img-full">
+                <img class="satellite-img-full">
              </div>
            </div>
            <div class="col-md-8">
              <div class="satellite-info">
-                <div class="satellite-title">
-                  {{ satellite.name }}
-                </div>
-                <div class="satellite-names">
-                  {{ satellite.names }}
-                </div>
+                <span class="satellite-title"></span>
+                <span class="satellite-names"></span>
+              </div>
+              <div class=satellite-info">
+                <span class="satellite-id"></span>
              </div>
              <ul class="list-unstyled">
                <li>
                  <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
-                  <a href="{% url 'base:observation_new' %}?norad={{ satellite.norad_cat_id }}">Schedule new Observation</a>
+                  <a href="/observations/new/" id="new-obs-link">Schedule new Observation</a>
                </li>
                <li>
                  <span class="glyphicon glyphicon-list-alt" aria-hidden="true"></span>
-                  <a href="{% url 'base:observations_list' %}?norad={{ satellite.norad_cat_id }}">Past Observations</a>
+                  <a href="/observations/" id="old-obs-link">Past Observations</a>
                </li>
                <li>&nbsp;</li>
                <li>
                  <span class="glyphicon glyphicon-new-window" aria-hidden="true"></span>
-                  <a href="https://db.satnogs.org/satellite/{{ satellite.norad_cat_id }}" target="_blank">DB Data</a>
+                  <a href="https://db.satnogs.org/" target="_blank" id="db-link">SatNOGS DB Entry & Data</a>
                </li>
              </ul>
            </div>