Add the time interval html inputs.

Goutte
1 parent 2c0e1515
Showing 3 changed files with 19 additions and 11 deletions Show diff stats
web/static/js/swapp.js
web/static/js/swapp.ls
web/view/home.html.jinja2
@@ -148,7 +148,7 @@
       return active_targets.forEach(function(target){
         var targetButton;
         console.info("Loading CSV data of " + target.name + "…");
-        targetButton = $(".orbiters_filters .target." + target.slug);
+        targetButton = $(".targets-filters .target." + target.slug);
         targetButton.addClass('loading');
         return this$.loadData(target.slug, started_at, stopped_at).then(function(data){
           console.info("Loaded CSV data of " + target.name + ".");
@@ -148,7 +148,7 @@ https://gitlab.irap.omp.eu/CDPP/SPACEWEATHERONLINE
     active_targets = [@targets[k] for k of @targets when @targets[k].active]
     active_targets.forEach((target) ~>
       console.info "Loading CSV data of #{target.name}…"
-      targetButton = $(".orbiters_filters .target.#{target.slug}")
+      targetButton = $(".targets-filters .target.#{target.slug}")
       targetButton.addClass('loading')
       @loadData(target.slug, started_at, stopped_at).then(
         (data) ~>
@@ -2,6 +2,9 @@
 {% set menu_section = 'home' %}
 {% block title %}Home{% endblock %}
  
+{# This is the main template file, along with the layout. #}
+{# The engine is Jinja2, close to Twig (yet not as good) #}
+
 {% block content %}
  
 {% macro target_button(target) -%}
@@ -27,9 +30,14 @@
 <div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer">
  
   <div class="mdl-layout__drawer">
+    <span class="mdl-layout-title">Time Interval</span>
+    <input type="date" id="started_at" name="started_at" title="The date of the beginning of the interval to observe.">
+    <input type="date" id="stopped_at" name="stopped_at" title="The date of the end of the interval to observe. (inclusive)">
+    <input type="submit" id="apply_new_interval" value="Load new interval" title="This may take a while if you request a bigger interval.">
+
     <span class="mdl-layout-title">Planets</span>
  
-    <section class="orbiters_filters">
+    <section class="targets-filters">
 {% for target in planets %}
       {{ target_button(target) }}
 {% endfor %}
@@ -40,7 +48,7 @@
  
     <span class="mdl-layout-title">Probes &amp; Comets</span>
  
-    <section class="orbiters_filters">
+    <section class="targets-filters">
 {% for target in probes %}
       {{ target_button(target) }}
 {% endfor %}
@@ -242,24 +250,24 @@
       stroke-width: 1px;
       stroke-dasharray: 5px;
     }
-    .orbiters_filters {
+    .targets-filters {
       padding-left: 17px;
     }
-    .orbiters_filters .target {
+    .targets-filters .target {
       float: left;
       cursor: pointer;
     }
-    .orbiters_filters .target:not(.active) {
+    .targets-filters .target:not(.active) {
       -webkit-filter: grayscale(100%);
          -moz-filter: grayscale(100%);
            -o-filter: grayscale(100%);
           -ms-filter: grayscale(100%);
               filter: grayscale(100%);
     }
-    .orbiters_filters .target.locked {
+    .targets-filters .target.locked {
       cursor: not-allowed;
     }
-    .orbiters_filters .target.loading {
+    .targets-filters .target.loading {
 {#        margin: 20px;#}
 {#        width: 100px;#}
 {#        height: 100px;#}
@@ -387,7 +395,7 @@ jQuery().ready(function($){
   };
   var isLastTargetEnabled = function(target_slug) {
     var s = 0;
-    $(".orbiters_filters .target:not(.locked)").each(function(i,p) {
+    $(".targets-filters .target:not(.locked)").each(function(i,p) {
       if ($(p).hasClass('active') && ! $(p).hasClass('loading')) s++;
     });
     return s < 2;
@@ -404,7 +412,7 @@ jQuery().ready(function($){
     }
     return false;
   });
-  $(".orbiters_filters .target:not(.locked)").on("click", function(e){
+  $(".targets-filters .target:not(.locked)").on("click", function(e){
     if ($(this).hasClass('loading')) return false;
     var switch_on = ! $(this).hasClass('active');
     var target_slug = $(this).attr('data-target-slug');