Merge pull request #112 from satnogs/ui-fixes

Ui fixes

.env-dist

@@ -10,3 +10,7 @@ ALLOWED_HOSTS=
 
 # Database
 DATABASE_URL=sqlite:///db.sqlite3
+
+# Mapbox
+MAPBOX_TOKEN=
+MAPBOX_MAP_ID=

CONTRIBUTING.md

@@ -1 +1,5 @@
+# Contributing to SatNOGS Network
+
+Thank you for your interest in contributing to SatNOGS!
+
 Please read the `Contribution Guidelines` in [satnogs-network documentation](http://docs.satnogs.org/network/contribute.html).

README.md

@@ -1,6 +1,7 @@
 # SatNOGS Network
 
-SatNOGS Network is a Django based application, implementing a global scheduling and monitoring network for ground station operations.
+SatNOGS Network is a web application, implementing a global scheduling and monitoring network for ground station operations.
+
 It features multiple observers to multiple intrumentation functionality and manages observation jobs and results.
 
 ## Install and Contribute
@@ -9,4 +10,6 @@ See the [documentation](http://docs.satnogs.org/network/).
 
 ## License
 
-[MPL-2.0](LICENSE)
+© 2014-2015 [Libre Space Foundation](http://librespacefoundation.org).
+
+Licensed under the [MPL-2.0](LICENSE).

network/base/views.py

@@ -1,6 +1,7 @@
 import ephem
 from datetime import datetime, timedelta
 
+from django.conf import settings
 from django.contrib import messages
 from django.views.decorators.http import require_POST
 from django.shortcuts import get_object_or_404, render, redirect
@@ -22,7 +23,9 @@ def index(request):
     ctx = {
         'latest_observations': observations.filter(end__lt=now()),
         'scheduled_observations': observations.filter(end__gte=now()),
-        'featured_station': featured_station
+        'featured_station': featured_station,
+        'mapbox_id': settings.MAPBOX_MAP_ID,
+        'mapbox_token': settings.MAPBOX_TOKEN
     }
 
     return render(request, 'base/home.html', ctx)
@@ -146,7 +149,9 @@ def station_view(request, id):
     antennas = Antenna.objects.all()
 
     return render(request, 'base/station_view.html',
-                  {'station': station, 'form': form, 'antennas': antennas})
+                  {'station': station, 'form': form, 'antennas': antennas,
+                   'mapbox_id': settings.MAPBOX_MAP_ID,
+                   'mapbox_token': settings.MAPBOX_TOKEN})
 
 
 @require_POST

network/settings/base.py

@@ -161,3 +161,8 @@ DATABASES = {'default': dj_database_url.parse(DATABASE_URL)}
 REST_FRAMEWORK = {
     'DEFAULT_FILTER_BACKENDS': ('rest_framework.filters.DjangoFilterBackend',)
 }
+
+# Mapbox API
+MAPBOX_GEOCODE_URL = 'https://api.tiles.mapbox.com/v4/geocode/mapbox.places/'
+MAPBOX_MAP_ID = getenv('MAPBOX_MAP_ID', '')
+MAPBOX_TOKEN = getenv('MAPBOX_TOKEN', '')

network/static/css/app.css

@@ -59,6 +59,10 @@ body {
     font-family:'ClearSans';
 }
 
+a:hover {
+    text-decoration: none;
+}
+
 .alert-debug {
     color: black;
     background-color: white;
@@ -98,6 +102,14 @@ body {
     margin-right: 5px;
 }
 
+footer {
+    margin-bottom: 10px;
+}
+
+.footer-options {
+    padding: 10px;
+}
+
 #main-navbar {
     margin-top: 2%;
 }

network/static/js/home.js

@@ -1,9 +1,16 @@
-L.mapbox.accessToken = 'pk.eyJ1IjoicGllcnJvcyIsImEiOiJhTVZyWmE4In0.kl2j9fi24LDXfB3MNdN76w';
-var map = L.mapbox.map('map', 'pierros.jbf6la1j',{
-    zoomControl: false
-}).setView([40, 0], 3);
-
 $(document).ready(function() {
+    'use strict';
+
+    var mapboxid = $('div#map').data('mapboxid');
+    var mapboxtoken = $('div#map').data('mapboxtoken');
+
+    L.mapbox.accessToken = mapboxtoken;
+    L.mapbox.config.FORCE_HTTPS = true;
+    var map = L.mapbox.map('map', mapboxid, {
+        zoomControl: false
+    }).setView([40, 0], 3);
+    var LocLayer = L.mapbox.featureLayer().addTo(map);
+
     $('#successful a.toggle').click(function (e) {
         e.preventDefault()
         $(this).tab('show')

network/static/js/station_view.js

@@ -3,8 +3,14 @@ $(document).ready(function() {
     var station_info = $('#station-info').data();
 
     // Init the map
-    L.mapbox.accessToken = 'pk.eyJ1IjoicGllcnJvcyIsImEiOiJhTVZyWmE4In0.kl2j9fi24LDXfB3MNdN76w';
-    var map = L.mapbox.map('map-station', 'pierros.jbf6la1j',{
+    'use strict';
+
+    var mapboxid = $('div#map-station').data('mapboxid');
+    var mapboxtoken = $('div#map-station').data('mapboxtoken');
+
+    L.mapbox.accessToken = mapboxtoken;
+    L.mapbox.config.FORCE_HTTPS = true;
+    var map = L.mapbox.map('map-station', mapboxid,{
         zoomControl: false
     }).setView([station_info.lat, station_info.lng], 6);
 

network/templates/base.html

@@ -70,9 +70,18 @@
     <div class="container">
 
       {% if messages %}
-          {% for message in messages %}
-              <div class="alert {% if message.tags %}alert-{{ message.tags }}"{% endif %}>{{ message }}</div>
-          {% endfor %}
+        <div class="row messages">
+          <div class="col-md-12">
+            {% for notification in messages %}
+              <div class="alert alert-{{ notification.tags }}" role="alert">
+                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
+                  <span aria-hidden="true">&times;</span>
+                </button>
+                {{ notification.message }}
+              </div>
+            {% endfor %}
+          </div>
+        </div>
       {% endif %}
 
       {% block content %}{% endblock content %}
@@ -84,11 +93,19 @@
     <footer>
       <div class="container">
         <hr>
-        <p class="pull-right">
+        <div class="row">
+        <div class="col-md-6">
+          <span class="glyphicon glyphicon-copyright-mark" aria-hidden="true"></span> 2014<script>document.write("-"+new Date().getFullYear());</script>
+          <a href="http://librespacefoundation.org/" target="_blank">Libre Space Foundation</a>.<br>
+          <span class="glyphicon glyphicon-cloud" aria-hidden="true"></span>
+          Observation data are freely distributed under the
+          <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">CC BY-SA</a> license.
+        </div>
+        <div class="col-md-6 text-right footer-options">
           <a href="https://github.com/satnogs/satnogs-network">Contribute</a> |
-          <a href="#">Back to top</a>
-        </p>
-        <p>&copy; 2014 SatNOGS Team &middot;</p>
+          <a href="#top">Back to top</a>
+        </div>
+      </div>
       </div>
     </footer>
 

network/templates/base/about.html

@@ -6,18 +6,26 @@
   <div class="row">
     <div class="col-md-12">
       <h1>About</h1>
-      SatNOGS network is under active development and not fully
-      operational for Ground Station operators yet. Meanwhile you can join us by:
-      <h3>Building a ground station</h3>
+      SatNOGS network is a global management interface to facilitate multiple ground station
+      operations remotely. An observer is able to take advantage of the full network of
+      SatNOGS ground stations around the world.
+      <h3>Observations</h3>
+      The network is open to anyone. Any observer is able to utilize all available Ground Stations
+      and communicate with Satellites. All observations results are public
+      and all data are distributed freely under the
+      <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Atribution-Share Alike</a> license.
+      <h3>Ground Stations</h3>
       Whether you own satellite ground station equipment or you want
       to build one you can head to
       <a href="https://satnogs.org" target="_blank">SatNOGS Project site</a>
       to get up to date documentation and info on how to build a SatNOGS ground station (still under development).
       <h3>Coding</h3>
-      Fluent in Python and/or JS? We need you to help with satnogs-network Django application. Visit
-      <a href="https://github.com/satnogs/satnogs-network/issues" target="_blank">our Github issues page</a> to
-      start filling issues or code fixes for existing ones. Detailed contribution and development documentation
-      is also availble <a href="https://github.com/satnogs/satnogs-network" target="_blank">here</a>.
+      Fluent in Python and/or JS? We need you to help with satnogs-network web application. Take a look to our
+      <a href="https://github.com/satnogs/satnogs-network/issues" target="_blank">source code</a> or visit
+      our <a href="https://github.com/satnogs/satnogs-network/issues" target="_blank">issues tracker</a>
+      to start filling bugs, feature requests or code fixes for existing ones.
+      Detailed contribution and development documentation is also availble at
+      <a href="http://docs.satnogs.org" target="_blank">docs.satnogs.org</a>.
     </div>
   </div>
 {% endblock content %}

network/templates/base/home.html

@@ -10,13 +10,12 @@
 {% endblock css %}
 
 {% block prenav-content %}
-  <div id="map"></div>
+  <div id="map" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}"></div>
 {% endblock prenav-content %}
 
 {% block content %}
   <div class="row" id="call2action">
-    {% if request.user.is_authenticated %}
-    {% else %}
+    {% if not request.user.is_authenticated %}
       <div class="col-md-8 col-md-offset-2 panel panel-default">
         <h3 class="text-center">
           Ground stations swarm control, at your fingertips.
@@ -72,6 +71,7 @@
                 {% endfor %}
               </span>
             </div>
+            <!--
             <div class="gs-front-line">
               <span class="label label-info">Success Rate</span>
               <span class="gs-front-data">
@@ -85,12 +85,12 @@
                 </div>
               </span>
             </div>
+            -->
           </div>
         </div>
       </div>
     </div>
     <div class="col-md-8">
-      <!-- Nav tabs -->
       <ul class="nav nav-tabs" role="tablist">
         <li class="active">
           <a href="#successful" class="toggle" role="tab" data-toggle="tab">Latest Observations</a>
@@ -99,7 +99,6 @@
           <a href="#scheduled" class="toggle" role="tab" data-toggle="tab">Scheduled Observations</a>
         </li>
       </ul>
-      <!-- Tab panes -->
       <div class="tab-content">
         <div class="tab-pane active" id="successful">
           <table class="table table-hover">
@@ -129,7 +128,10 @@
                   <td>{{ observation.satellite.name }}</td>
                   <td>{% frq observation.transponder.downlink_low %}</td>
                   <td>{{ observation.transponder.mode }}</td>
-                  <td>{{ observation.start|date:"Y-m-d H:i:s" }}</br>{{ observation.end|date:"Y-m-d H:i:s" }}</td>
+                  <td>
+                    {{ observation.start|date:"Y-m-d H:i:s" }}<br>
+                    {{ observation.end|date:"Y-m-d H:i:s" }}
+                  </td>
                   <td>
                     <a href="{% url 'users:view_user' username=observation.author.username %}">
                       {{ observation.author.get_full_name }}
@@ -186,18 +188,26 @@
           <h4 class="modal-title" id="myModalLabel">Join SatNGOS Network</h4>
         </div>
         <div class="modal-body">
-          SatNOGS network is under active development and not fully
-          operational for Ground Station operators yet. Meanwhile you can join us by:
-          <h3>Building a ground station</h3>
+          SatNOGS network is a global management interface to facilitate multiple ground station
+          operations remotely. An observer is able to take advantage of the full network of
+          SatNOGS ground stations around the world.
+          <h3>Observations</h3>
+          The network is open to anyone. Any observer is able to utilize all available Ground Stations
+          and communicate with Satellites. All observations results are public
+          and all data are distributed freely under the
+          <a href="https://creativecommons.org/licenses/by-sa/4.0/" target="_blank">Creative Commons Atribution-Share Alike</a> license.
+          <h3>Ground Stations</h3>
           Whether you own satellite ground station equipment or you want
           to build one you can head to
           <a href="https://satnogs.org" target="_blank">SatNOGS Project site</a>
           to get up to date documentation and info on how to build a SatNOGS ground station (still under development).
           <h3>Coding</h3>
-          Fluent in Python and/or JS? We need you to help with satnogs-network Django application. Visit
-          <a href="https://github.com/satnogs/satnogs-network/issues" target="_blank">our Github issues page</a> to
-          start filling issues or code fixes for existing ones. Detailed contribution and development documentation
-          is also availble <a href="https://github.com/satnogs/satnogs-network" target="_blank">here</a>.
+          Fluent in Python and/or JS? We need you to help with satnogs-network web application. Take a look to our
+          <a href="https://github.com/satnogs/satnogs-network/issues" target="_blank">source code</a> or visit
+          our <a href="https://github.com/satnogs/satnogs-network/issues" target="_blank">issues tracker</a>
+          to start filling bugs, feature requests or code fixes for existing ones.
+          Detailed contribution and development documentation is also availble at
+          <a href="http://docs.satnogs.org" target="_blank">docs.satnogs.org</a>.
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

network/templates/base/station_view.html

@@ -18,10 +18,8 @@
      {{ station.id }} - {{ station.name }}
     {% if request.user == station.owner %}
       <button class="btn btn-primary pull-right" data-toggle="modal" data-target="#StationModal">Edit Ground Station</button>
-      <!-- Station Modal -->
-      {% include 'includes/station_edit.html' %}
     {% endif %}
-  </h2
+  </h2>
 
   <div class="row">
     <div class="col-md-4">
@@ -85,9 +83,14 @@
 
   <div class="row">
     <div class="col-md-12">
-      <div id="map-station"></div>
+      <div id="map-station" data-mapboxid="{{ mapbox_id }}" data-mapboxtoken="{{ mapbox_token }}"></div>
     </div>
   </div>
+
+  {% if request.user == station.owner %}
+    <!-- Station Modal -->
+    {% include 'includes/station_edit.html' %}
+  {% endif %}
 {% endblock content %}
 
 {% block javascript %}

network/templates/base/stations.html

@@ -27,12 +27,21 @@
             <tr>
               <td>
                 <a href="{% url 'base:station_view' id=station.id %}">
-                  <span class="label label-default">
+                  <span class="label
+                               {% if station.online %}
+                                 label-success
+                               {% else %}
+                                 label-danger
+                               {% endif %}">
                     {{ station.id }}
                   </span>
                 </a>
               </td>
-              <td>{{ station.name }}</td>
+              <td>
+                <a href="{% url 'base:station_view' id=station.id %}">
+                  {{ station.name }}
+                </a>
+              </td>
               {% if station.location %}
                 <td title="{{ station.lat|floatformat:-3 }}, {{ station.lng|floatformat:-3 }}">
                   {{ station.location }}
@@ -48,7 +57,7 @@
               </td>
               <td>
                 <a href="{% url 'users:view_user' username=station.owner.username %}">
-                  {{ station.owner.get_full_name }}
+                  {{ station.owner.displayname }}
                 </a>
               </td>
             </tr>

network/templates/users/user_detail.html

@@ -8,7 +8,7 @@
 {% block content %}
   <div class="row">
     <div class="col-sm-12">
-      <h2>{% avatar user 50 %} {{ user.get_full_name }} ({{ user.username }})
+      <h2>{% avatar user 50 %} {{ user.displayname }}
         {% if user == request.user %}
           <div class="pull-right edit-profile-buttons">
             <a class="btn btn-primary" href="{% url 'users:update_user' %}">My Info</a>
@@ -43,13 +43,28 @@
               <tr>
                 <td>
                   <a href="{% url 'base:station_view' id=station.id %}">
-                    <span class="label label-default">
+                    <span class="label
+                                 {% if station.online %}
+                                   label-success
+                                 {% else %}
+                                   label-danger
+                                 {% endif %}">
                       {{ station.id }}
                     </span>
                   </a>
                 </td>
-                <td>{{ station.name }}</td>
-                <td>{{ station.lat }}, {{ station.lng }}</td>
+                <td>
+                  <a href="{% url 'base:station_view' id=station.id %}">
+                    {{ station.name }}
+                  </a>
+                </td>
+                {% if station.location %}
+                  <td title="{{ station.lat|floatformat:-3 }}, {{ station.lng|floatformat:-3 }}">
+                    {{ station.location }}
+                  </td>
+                {% else %}
+                  <td>{{ station.lat|floatformat:-3 }}, {{ station.lng|floatformat:-3 }}</td>
+                {% endif %}
                 <td>{{ station.alt}} m</td>
                 <td>
                   {% for antenna in station.antenna.all %}

network/users/models.py

@@ -18,6 +18,13 @@ class User(AbstractUser):
 
     bio = models.TextField(default='', validators=[MaxLengthValidator(1000)])
 
+    @property
+    def displayname(self):
+        if self.get_full_name():
+            return self.get_full_name()
+        else:
+            return self.username
+
     def __unicode__(self):
         return self.username