From de97b55bc330568ca68a50a252cccbb240480f9c Mon Sep 17 00:00:00 2001
From: Étienne Loks <etienne.loks@iggdrasil.net>
Date: Thu, 4 Nov 2021 11:56:09 +0100
Subject: Syndication - stats UI

---
 .../templates/blocks/DataTables-stats-detail.html  | 79 ++++++++++++++++++++
 .../templates/blocks/DataTables-stats.html         | 85 +++-------------------
 ishtar_common/templates/blocks/DataTables.html     | 16 ++++
 3 files changed, 104 insertions(+), 76 deletions(-)
 create mode 100644 ishtar_common/templates/blocks/DataTables-stats-detail.html

(limited to 'ishtar_common/templates')

diff --git a/ishtar_common/templates/blocks/DataTables-stats-detail.html b/ishtar_common/templates/blocks/DataTables-stats-detail.html
new file mode 100644
index 000000000..9dcb04ae4
--- /dev/null
+++ b/ishtar_common/templates/blocks/DataTables-stats-detail.html
@@ -0,0 +1,79 @@
+{% load i18n %}
+<div class="sources sources-{{extra}}">
+    <div id="charts-{{stats_name}}-{{extra}}">
+        <div id="chart-{{stats_name}}-{{extra}}-wrapper" class="chart-wrapper">
+            <div id="chart-{{stats_name}}-{{extra}}" class="chart-content"></div>
+            <div class="resize-handler"></div>
+        </div>
+        <hr/>
+        <p class='alert alert-info' id="stats-zoom-help-{{stats_name}}-{{extra}}" style="z-index:-1">
+            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+            {% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}
+        </p>
+        <div class='form chart-img-form'>
+            <div class="text-center">
+                <button id="chart-img-display-{{stats_name}}-{{extra}}"
+                        type='button' class='btn btn-secondary'>
+                    {% trans "Display as an image" %}
+                </button>
+            </div>
+            <br>
+            <div id="chart-img-{{stats_name}}-{{extra}}" class='chart-img'>
+                <div class="card">
+                    <div id="img-{{stats_name}}-{{extra}}"
+                            class="card-img-top text-center ml-3 mt-3"></div>
+                    <div class="card-body">
+                        <div class='alert alert-info'>
+                            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+                            {% trans 'Right-click on this image to save it.' %}
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="stats-table-{{stats_name}}-{{extra}}">
+        <div id="stats-table-content-{{stats_name}}-{{extra}}"></div>
+        <hr>
+        <div class="text-center">
+            <a id="stats-table-csv-{{stats_name}}-{{extra}}" href="#"
+                    type='button' class='btn btn-secondary'>
+                {% trans "Export as CSV" %}
+            </a>
+        </div>
+    </div>
+    <div id="stats-empty-{{stats_name}}-{{extra}}">
+        <p class="alert alert-info" >
+            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+            {% trans "No data" %}
+        </p>
+    </div>
+    <div id="stats-error-{{stats_name}}-{{extra}}">
+        <div class="alert alert-info">
+            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
+            {% trans "Too many values for the selected modalities, graph cannot be displayed. You can: " %}
+            <ul>
+                <li>{% trans 'Select "table" type.'%}</li>
+                <li>{% trans 'Refine the search to limit the results.'%}</li>
+            </ul>
+        </div>
+    </div>
+</div>
+
+<script language="javascript" type="text/javascript">
+jQuery(document).ready(function(){
+        $("#chart-{{stats_name}}-wrapper-{{extra}}").resizable({
+            handleSelector: ".resize-handler",
+            onDragStart: function (e, $el, opt) {
+                $("#chart-{{stats_name}}-{{extra}}-wrapper").addClass('chart-resize');
+                $("#chart-{{stats_name}}-{{extra}}").hide();
+            },
+            onDragEnd: function (e, $el, opt) {
+                $("#chart-{{stats_name}}-{{extra}}-wrapper").removeClass('chart-resize');
+                $("#chart-{{stats_name}}-{{extra}}").show();
+                stats_current_graph.replot( { resetAxes: true } );
+            }
+        });
+    }
+);
+</script>
diff --git a/ishtar_common/templates/blocks/DataTables-stats.html b/ishtar_common/templates/blocks/DataTables-stats.html
index 342051d19..aae2bb91f 100644
--- a/ishtar_common/templates/blocks/DataTables-stats.html
+++ b/ishtar_common/templates/blocks/DataTables-stats.html
@@ -36,80 +36,13 @@
         </p>
     </div>
     <hr/>
-    <div id="charts-{{name}}">
-        <div id="chart-{{name}}-wrapper" class="chart-wrapper">
-            <div id="chart-{{name}}" class="chart-content"></div>
-            <div class="resize-handler"></div>
-        </div>
-        <hr/>
-        <p class='alert alert-info' id="stats-zoom-help-{{name}}" style="z-index:-1">
-            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            {% trans 'Draw rectangle on the graph to zoom. Double-click to reinitialize.' %}
-        </p>
-        <div class='form chart-img-form'>
-            <div class="text-center">
-                <button id="chart-img-display-{{name}}"
-                        type='button' class='btn btn-secondary'>
-                    {% trans "Display as an image" %}
-                </button>
-            </div>
-            <br>
-            <div id="chart-img-{{name}}" class='chart-img'>
-                <div class="card">
-                    <div id="img-{{name}}"
-                            class="card-img-top text-center ml-3 mt-3"></div>
-                    <div class="card-body">
-                        <div class='alert alert-info'>
-                            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-                            {% trans 'Right-click on this image to save it.' %}
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-    <div id="stats-table-{{name}}">
-        <div id="stats-table-content-{{name}}"></div>
-        <hr>
-        <div class="text-center">
-            <a id="stats-table-csv-{{name}}" href="#"
-                    type='button' class='btn btn-secondary'>
-                {% trans "Export as CSV" %}
-            </a>
-        </div>
-    </div>
-    <div id="stats-empty-{{name}}">
-        <p class="alert alert-info" >
-            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            {% trans "No data" %}
-        </p>
-    </div>
-    <div id="stats-error-{{name}}">
-        <div class="alert alert-info">
-            <i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;
-            {% trans "Too many values for the selected modalities, graph cannot be displayed. You can: " %}
-            <ul>
-                <li>{% trans 'Select "table" type.'%}</li>
-                <li>{% trans 'Refine the search to limit the results.'%}</li>
-            </ul>
-        </div>
-    </div>
-</div>
 
-<script language="javascript" type="text/javascript">
-jQuery(document).ready(function(){
-        $("#chart-{{name}}-wrapper").resizable({
-            handleSelector: ".resize-handler",
-            onDragStart: function (e, $el, opt) {
-                $("#chart-{{name}}-wrapper").addClass('chart-resize');
-                $("#chart-{{name}}").hide();
-            },
-            onDragEnd: function (e, $el, opt) {
-                $("#chart-{{name}}-wrapper").removeClass('chart-resize');
-                $("#chart-{{name}}").show();
-                stats_current_graph.replot( { resetAxes: true } );
-            }
-        });
-    }
-);
-</script>
\ No newline at end of file
+    {% with stats_name=name %}{% with extra="default" %}
+    {% include "blocks/DataTables-stats-detail.html" %}
+    {% endwith %}{% endwith %}
+    {% if external_sources %}{% for source_id, source_label, source_url in external_sources %}
+    {% with stats_name=name %}{% with extra=source_id %}
+    {% include "blocks/DataTables-stats-detail.html" %}
+    {% endwith %}{% endwith %}
+    {% endfor %}{% endif %}
+</div>
diff --git a/ishtar_common/templates/blocks/DataTables.html b/ishtar_common/templates/blocks/DataTables.html
index 3d1b817a8..199cd3af2 100644
--- a/ishtar_common/templates/blocks/DataTables.html
+++ b/ishtar_common/templates/blocks/DataTables.html
@@ -94,7 +94,21 @@ map_submit_search = function(){
     return _map_submit_search(query_vars, "{{name}}", "{{source}}");
 };
 {% endif %}
+
+extra_list = [
+ "default"{% for source_id, source_label, source_url in external_sources %},
+"{{source_id}}"{% endfor %}
+];
+
+sources = [
+ "{{source}}"{% for source_id, source_label, source_url in external_sources %},
+ "{{source_url}}"{% endfor %}
+];
+
 stats_submit_search = function(){
+    {% if external_sources %}{% for source_id, source_label, source_url in external_sources %}
+    _stats_submit_search(query_vars, "{{name}}", "{{source_url}}", "{{source_id}}");
+    {% endfor %}{% endif %}
     return _stats_submit_search(query_vars, "{{name}}", "{{source}}");
 };
 
@@ -157,6 +171,7 @@ jQuery(document).ready(function(){
     function(){
         $(".sources").hide();
         $(".sources-default").show();
+        redraw_plots("{{name}}", "default");
     }
   );
   {% for source_id, source_label, source_url in external_sources %}
@@ -164,6 +179,7 @@ jQuery(document).ready(function(){
     function(){
         $(".sources").hide();
         $(".sources-{{source_id}}").show();
+        redraw_plots("{{name}}", "{{source_id}}");
     }
   );
   {% endfor %}
-- 
cgit v1.2.3