client: re-open bulk edit and metrics blocks when returning to post list.

+ select metrics on click; + improve header style

1 files changed, 34 insertions, 1 deletions

diff --git a/client/js/controls/metric_header_control.js b/client/js/controls/metric_header_control.js
index 428ba40..7bc03a3 100644
--- a/client/js/controls/metric_header_control.js
+++ b/client/js/controls/metric_header_control.js
@@ -13,6 +13,7 @@ class MetricHeaderControl extends events.EventTarget {
         super();
         this._ctx = ctx;
         this._hostNode = hostNode;
+        this._selectedMetrics = new MetricList();
 
         this._headerNode = mainTemplate(ctx);
         this._metricListNode = this._headerNode.querySelector('ul.metric-list');
@@ -22,16 +23,48 @@ class MetricHeaderControl extends events.EventTarget {
 
         MetricList.loadAll().then(response => {
             this._metrics = response.results;
+            this._addSelectedMetrics(ctx.parameters.metrics);
             this._installMetrics(response.results);
         });
     }
 
+    _addSelectedMetrics(metricsStr) {
+        let selectedNames = (metricsStr || '').split(' ');
+        for (let metric of [...this._metrics]) {
+            if (selectedNames.includes(metric.tag.names[0])) {
+                this._selectedMetrics.add(metric);
+            }
+        }
+    }
+
     _installMetrics(metrics) {
         for (let metric of metrics) {
-            const node = metricItemTemplate({metric: metric, ctx: this._ctx});
+            const node = metricItemTemplate(Object.assign({},
+                {
+                    metric: metric,
+                    selected: this._selectedMetrics.includes(metric),
+                },
+                this._ctx));
+            node.addEventListener('click', e => this._evtMetricClicked(e, node, metric));
             this._metricListNode.appendChild(node);
         }
     }
+
+    _evtMetricClicked(e, node, metric) {
+        e.preventDefault();
+        node.classList.toggle('selected');
+        node.querySelector('a').classList.toggle('selected');
+        if (this._selectedMetrics.includes(metric)) {
+            this._selectedMetrics.remove(metric);
+        } else {
+            this._selectedMetrics.add(metric);
+        }
+        this._ctx.parameters = Object.assign({}, this._ctx.parameters, {
+                metrics: this._selectedMetrics
+                    .map(metric => metric.tag.names[0]).join(' ')
+            });
+        this.dispatchEvent(new CustomEvent('submit'));
+    }
 }
 
 module.exports = MetricHeaderControl;