Add spinner to observation events

network/static/css/app.css

@@ -154,10 +154,6 @@ footer {
     height:20px; width:20px; float:left;
 }
 
-.playpause {
-    margin-right: 20px;
-}
-
 .edit-profile-buttons {
     margin-right: 30px;
 }
@@ -167,10 +163,6 @@ footer {
     color: #888;
 }
 
-.calculation-result {
-    display: none;
-}
-
 .stage-notice {
     background-color: #D74545;
     color: white;
@@ -219,7 +211,7 @@ footer {
 }
 
 
-/* D3
+/* Observations
 ==================== */
 
 .axis path,
@@ -245,3 +237,16 @@ footer {
     -o-transform: translate(0px,30px); /* Opera */
     -moz-transform: translate(0px,30px); /* Firefox */
 }
+
+.playpause {
+    margin-right: 20px;
+}
+
+.graph-spinner {
+    width:50px;
+    margin: auto;
+}
+
+#spinner-data {
+    display: none;
+}

network/static/css/lib/spinner.css

@@ -0,0 +1,96 @@
+@-webkit-keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-moz-keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@-o-keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes three-quarters {
+    0% {
+        -webkit-transform: rotate(0deg);
+        -moz-transform: rotate(0deg);
+        -ms-transform: rotate(0deg);
+        -o-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+
+    100% {
+        -webkit-transform: rotate(360deg);
+        -moz-transform: rotate(360deg);
+        -ms-transform: rotate(360deg);
+        -o-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
+/* Styles for old versions of IE */
+.three-quarters {
+    font-family: sans-serif;
+    font-weight: 100;
+}
+
+/* :not(:required) hides this rule from IE9 and below */
+.three-quarters:not(:required) {
+    -webkit-animation: three-quarters 1250ms infinite linear;
+    -moz-animation: three-quarters 1250ms infinite linear;
+    -ms-animation: three-quarters 1250ms infinite linear;
+    -o-animation: three-quarters 1250ms infinite linear;
+    animation: three-quarters 1250ms infinite linear;
+    border: 8px solid purple;
+    border-right-color: transparent;
+    border-radius: 16px;
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    text-indent: -9999px;
+    width: 32px;
+    height: 32px;
+}

network/static/js/observation_new.js

@@ -27,13 +27,16 @@ $(function () {
 $( document ).ready( function(){
     $('#calculate-observation').click( function(){
         $('.calculation-result').show();
+        $('#timeline').empty();
         var satellite = $('#satellite-selection').val();
         var start_time = $('#datetimepicker-start input').val();
         var end_time = $('#datetimepicker-end input').val();
-
+        
         $.ajax({
-            url: '/prediction_windows/' + satellite + '/' + start_time + '/' + end_time + '/'
+            url: '/prediction_windows/' + satellite + '/' + start_time + '/' + end_time + '/',
+            beforeSend: function() { $('#spinner-data').show(); }
         }).done(function(data) {
+            $('#spinner-data').hide();
             if (data['error']) {
                 var error_msg = data['error'];
                 $('#timeline').empty();
@@ -53,13 +56,18 @@ $( document ).ready( function(){
                         $('#windows-data').append('<input type="hidden" name="'+dc+'-ending_time" value="'+n.end+'">');
                         $('#windows-data').append('<input type="hidden" name="'+dc+'-station" value="'+k.id+'">');
                         times.push({starting_time: starting_time, ending_time: ending_time})
-                        dc = dc +1;
+                        dc = dc + 1;
                     });
                     suggested_data.push({label : label, times : times});
                 });
 
                 $('#windows-data').append('<input type="hidden" name="total" value="'+dc+'">');
-                timeline_init(start_time, end_time, suggested_data);
+                if (dc > 0) {
+                    timeline_init(start_time, end_time, suggested_data);
+                } else {
+                    var error_msg = 'No Ground Station available for this observation window';
+                    $('#windows-data').html('<span class="text-danger">' + error_msg + '</span>');
+                }
             }
         });
     });

network/static/js/observation_view.js

@@ -31,9 +31,11 @@ $(document).ready(function() {
 
     // Waveform loading
     $('.observation-data').each(function( index ){
+        var wid = $(this).data('id');
         var wavesurfer = Object.create(WaveSurfer);
         var data_payload_url = $(this).data('payload');
-        var container_el = '#data-' + $(this).data('id');
+        var container_el = '#data-' + wid;
+        var loading = '#spinner-data-' + wid;
 
         wavesurfer.init({
           container: container_el,
@@ -41,10 +43,18 @@ $(document).ready(function() {
           progressColor: 'purple'
         });
 
+        wavesurfer.on('loading', function() {
+            $(loading).show();
+        });
+
         $(this).find('.playpause').click( function(){
             wavesurfer.playPause();
         });
 
         wavesurfer.load(data_payload_url);
+
+        wavesurfer.on('ready', function() {
+            $(loading).hide();
+        });
     });
 });

network/templates/base/observation_new.html

@@ -7,6 +7,7 @@
 
 {% block css %}
   <link href="{% static 'css/lib/bootstrap-datetimepicker.min.css' %}" rel="stylesheet">
+  <link rel="stylesheet" href="{% static 'css/lib/spinner.css' %}">
 {% endblock css %}
 
 {% block content %}
@@ -99,7 +100,11 @@
 <div class="row calculation-result">
   <div class="col-md-12">
     <h3>Calculated Timeline</h3>
-    <div id="timeline"></div>
+    <div class="graph-spinner">
+      <div class="three-quarters" id="spinner-data">loading...</div>
+    </div>
+    <div id="timeline">
+    </div>
     <div id="hoverRes">
       <div class="coloredDiv"></div>
       <div id="name"></div>

network/templates/base/observation_view.html

@@ -5,6 +5,10 @@
 
 {% block title %}Observation {{ observation.id }}{% endblock %}
 
+{% block css %}
+  <link rel="stylesheet" href="{% static 'css/lib/spinner.css' %}">
+{% endblock %}
+
 {% block content %}
   <h2 id="observation-info"
       data-start="{{ observation.start|date:"U"}}"
@@ -77,6 +81,9 @@
             </div>
             <div class="panel-body">
               {% if data.payload %}
+                <div class="graph-spinner">
+                  <div class="three-quarters" id="spinner-data-{{ data.id }}">loading...</div>
+                </div>
                 <div class="wave" id="data-{{ data.id }}"></div>
               {% else %}
                 <div class="notice">