1 files changed, 85 insertions, 0 deletions
diff --git a/client/js/controls/metric_header_control.js b/client/js/controls/metric_header_control.js
new file mode 100644
index 0000000..6a70b5b
--- /dev/null
+++ b/client/js/controls/metric_header_control.js
@@ -0,0 +1,85 @@
+'use strict';
+
+const events = require('../events.js');
+const misc = require('../util/misc.js');
+const views = require('../util/views.js');
+const MetricList = require('../models/metric_list.js');
+
+const mainTemplate = views.getTemplate('metric-header');
+const metricItemTemplate = views.getTemplate('metric-header-item');
+
+class MetricHeaderControl extends events.EventTarget {
+    constructor(hostNode, ctx) {
+        super();
+        this._ctx = ctx;
+        this._hostNode = hostNode;
+        this._selectedMetrics = new MetricList();
+
+        this._headerNode = mainTemplate(ctx);
+        this._metricListNode = this._headerNode.querySelector('ul.metric-list');
+
+        this._hostNode.insertBefore(
+            this._headerNode, this._hostNode.nextSibling);
+
+        MetricList.loadAll().then(response => {
+            this._ctx.allMetrics = response.results;
+            this._addSelectedMetrics(ctx.parameters.metrics);
+            this._installMetrics(response.results);
+            this._refreshStartSortingButton();
+        });
+    }
+
+    _addSelectedMetrics(metricsStr) {
+        let selectedNames = (metricsStr || '').split(' ');
+        for (let metric of [...this._ctx.allMetrics]) {
+            if (selectedNames.includes(metric.tag.names[0])) {
+                this._selectedMetrics.add(metric);
+            }
+        }
+    }
+
+    _installMetrics(metrics) {
+        for (let metric of metrics) {
+            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(m => m.tag.names[0]).join(' '),
+        });
+        this._refreshStartSortingButton();
+        this.dispatchEvent(new CustomEvent('submit'));
+    }
+
+    _refreshStartSortingButton() {
+        let btn = this._hostNode.querySelector('a.sorting');
+        btn.hidden = !this._selectedMetrics.length;
+        btn.setAttribute('href', views.getMetricSorterUrl('random', this._ctx.parameters));
+    }
+
+    refreshQuery(query) {
+        this._ctx.parameters.query = query;
+        this._refreshStartSortingButton();
+    }
+}
+
+module.exports = MetricHeaderControl;