Play some accordion for Nicolas.

Goutte
1 parent d08bc6bc
Showing 1 changed file with 86 additions and 50 deletions Show diff stats
web/view/home.html.jinja2
@@ -62,38 +62,50 @@
  
   <div class="mdl-layout__drawer">
  
-    <span class="mdl-layout-title" title="Two years maximum.">{{ icon('calendar') }} Time Interval</span>
-
-    <form id="form_time_interval" action="#">
-      <div class="mdl-textfield mdl-js-textfield">
-      <input type="date" id="started_at" name="started_at" title="The date of the beginning of the interval to observe." class="mdl-textfield__input">
-      <input type="date" id="stopped_at" name="stopped_at" title="The date of the end of the interval to observe. (exclusive)" class="mdl-textfield__input">
-      </div>
-      <input type="submit" id="apply_new_interval" value="Load new interval" title="Two years maximum. This may take a while." class="mdl-button mdl-js-button mdl-js-ripple-effect">
-    </form>
+    <details open>
+      <summary>
+        <span class="mdl-layout-title" title="Two years maximum.">{{ icon('calendar') }} Time Interval</span>
+      </summary>
+
+      <form id="form_time_interval" action="#">
+        <div class="mdl-textfield mdl-js-textfield">
+          <input type="date" id="started_at" name="started_at" title="The date of the beginning of the interval to observe." class="mdl-textfield__input">
+          <input type="date" id="stopped_at" name="stopped_at" title="The date of the end of the interval to observe. (exclusive)" class="mdl-textfield__input">
+        </div>
+        <input type="submit" id="apply_new_interval" value="Load new interval" title="Two years maximum. This may take a while." class="mdl-button mdl-js-button mdl-js-ripple-effect">
+      </form>
+    </details>
  
     <hr class="clear">
  
-    <span class="mdl-layout-title">{{ icon('eercast') }} Planets</span>
+    <details open>
+      <summary>
+        <span class="mdl-layout-title">{{ icon('eercast') }} Planets</span>
+      </summary>
  
-    <section class="targets-filters">
-{% for target in planets %}
-      {{ target_button(target) }}
-{% endfor %}
-    </section>
+      <section class="targets-filters">
+        {% for target in planets %}
+          {{ target_button(target) }}
+        {% endfor %}
+      </section>
+    </details>
  
     <hr class="clear">
  
-    <span class="mdl-layout-title">{{ icon('rocket') }} Probes &amp; Comets</span>
-
-    <section class="targets-filters">
-{% for target in probes %}
-      {{ target_button(target) }}
-{% endfor %}
-{% for target in comets %}
-      {{ target_button(target) }}
-{% endfor %}
-    </section>
+    <details>
+      <summary>
+        <span class="mdl-layout-title">{{ icon('rocket') }} Probes &amp; Comets</span>
+      </summary>
+
+      <section class="targets-filters">
+        {% for target in probes %}
+          {{ target_button(target) }}
+        {% endfor %}
+        {% for target in comets %}
+          {{ target_button(target) }}
+        {% endfor %}
+      </section>
+    </details>
  
     <hr class="clear">
  
@@ -113,27 +125,36 @@
 {##}
 {#    <hr class="clear">#}
  
-    <span class="mdl-layout-title">{{ icon('flask') }} Parameters</span>
+    <details>
+      <summary>
+        <span class="mdl-layout-title">{{ icon('flask') }} Parameters</span>
+      </summary>
  
-    <nav id="parameters" class="mdl-navigation">
-{% for p in parameters %}
-      <a class="mdl-navigation__link parameter{{ ' active' if p.active }}" data-ts-slug="{{ p.slug }}" href="#" title="{{ p.title }} ({{ p.units }})">{{ p.name }}</a>
-{% endfor %}
-    </nav>
+      <nav id="parameters" class="mdl-navigation">
+        {% for p in parameters %}
+          <a class="mdl-navigation__link parameter{{ ' active' if p.active }}" data-ts-slug="{{ p.slug }}" href="#" title="{{ p.title }} ({{ p.units }})">{{ p.name }}</a>
+        {% endfor %}
+      </nav>
+    </details>
  
-    <hr class="clear">
  
-    <span class="mdl-layout-title">{{ icon('area-chart') }} Layers</span>
+    <hr class="clear">
  
-    <section class="section-drawer">
-{% for layer in config.layers %}
-      <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
-        <input type="checkbox" disabled id="option-layer-{{ layer.slug }}" class="mdl-radio__button" name="layer_slug" value="{{ layer.slug }}" {{ 'checked' if layer.slug == layer_slug }}>
-        <span class="mdl-radio__label">{{ layer.name }}</span>
-      </label>
-      <br />
-{% endfor %}
-    </section>
+    <details>
+      <summary>
+        <span class="mdl-layout-title">{{ icon('area-chart') }} Layers</span>
+      </summary>
+
+      <section class="section-drawer">
+        {% for layer in config.layers %}
+          <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="option-layer-{{ layer.slug }}" title="{{ layer.desc }}">
+            <input type="checkbox" disabled id="option-layer-{{ layer.slug }}" class="mdl-radio__button" name="layer_slug" value="{{ layer.slug }}" {{ 'checked' if layer.slug == layer_slug }}>
+            <span class="mdl-radio__label">{{ layer.name }}</span>
+          </label>
+          <br />
+        {% endfor %}
+      </section>
+    </details>
  
     <div class="mdl-layout-spacer"></div>
  
@@ -166,12 +187,13 @@
           </button>
           <button id="samp"
                   class="samp mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
-                  title="Send the data to a connected SAMP hub.">
+                  title="Send the data to a connected SAMP hub, such as TOPCAT.">
             SAMP
           </button>
           <button id="email_alert"
-                  class="mdl-button mdl-button--raised mdl-button--primary mdl-button--disabled"
-                  title="Set an alert to receive an email when the data validates pre-defined conditions.">
+                  class="mdl-button mdl-button--raised mdl-button--primary"
+                  title="Set an alert to receive an email when the data validates pre-defined conditions."
+                  data-href="http://alerts-psws.irap.omp.eu/tao">
             Alert
           </button>
         </div>
@@ -192,11 +214,19 @@
  
 {% block styles %}
   <style>
-    .mdl-layout__drawer > .mdl-layout-title {
-      padding-left: 30px;
+    .mdl-layout__drawer hr {
+      margin: 0.5em 0;
+    }
+    .mdl-layout__drawer .mdl-layout-title {
       line-height: 42px;
+      display: inline-block;
     }
-    .mdl-layout__drawer > .mdl-layout-title:first-of-type {
+    .mdl-layout__drawer > details > summary {
+      padding-left: 15px;
+      cursor: pointer;
+      outline: none;
+    }
+    .mdl-layout__drawer .mdl-layout-title:first-of-type {
       line-height: 60px;
     }
  
@@ -714,12 +744,18 @@ jQuery().ready(function($){
     sw.orbits.resize(true);
     return false;
   });
+  $('#email_alert').on("click", function(e){
+    console.info("Setting an alert…");
+    var href = $(this).attr("data-href");
+    window.open(href);
+    return false;
+  });
  
 });
 </script>
  
 {#### SAMP ###################################################################}
-<script type="text/javascript">
+<script type="application/javascript">
   jQuery().ready(function ($) {
     // Flag to know when a hub is connected or not
     var isConnected = false;
@@ -739,7 +775,7 @@ jQuery().ready(function($){
  
     // Update the document about the presence of any SAMP hub every 10 sec.
     var connector = new samp.Connector("Sender");
-    connector.onHubAvailability(onHubAvailability, 10000);
+    connector.onHubAvailability(onHubAvailability, 5000);
     window.onunload = function () {
       connector.unregister();
     };