diff options
Diffstat (limited to 'client/js')
| -rw-r--r-- | client/js/controls/metric_header_control.js | 35 | ||||
| -rw-r--r-- | client/js/models/abstract_list.js | 4 | ||||
| -rw-r--r-- | client/js/tags.js | 3 | ||||
| -rw-r--r-- | client/js/views/posts_header_view.js | 30 |
4 files changed, 63 insertions, 9 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; diff --git a/client/js/models/abstract_list.js b/client/js/models/abstract_list.js index fb4dec8..31a0505 100644 --- a/client/js/models/abstract_list.js +++ b/client/js/models/abstract_list.js @@ -90,6 +90,10 @@ class AbstractList extends events.EventTarget { return this._list.filter(...args); } + includes(item) { + return this._list.includes(item); + } + [Symbol.iterator]() { return this._list[Symbol.iterator](); } diff --git a/client/js/tags.js b/client/js/tags.js index 956022e..c32ef43 100644 --- a/client/js/tags.js +++ b/client/js/tags.js @@ -17,6 +17,9 @@ function refreshCategoryColorMap() { _stylesheet.sheet.insertRule( `.${ruleName} { color: ${category.color}; border-color: ${category.color} }`, _stylesheet.sheet.cssRules.length); + _stylesheet.sheet.insertRule( + `.${ruleName}.selected { color: white; background-color: ${category.color} }`, + _stylesheet.sheet.cssRules.length); } }); } diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js index 8935939..86c6998 100644 --- a/client/js/views/posts_header_view.js +++ b/client/js/views/posts_header_view.js @@ -191,6 +191,9 @@ class PostsHeaderView extends events.EventTarget { if (this._metricsButtonHolderNode) { this._metricControl = new MetricHeaderControl(this._metricsBlockNode, ctx); + this._metricControl.addEventListener('submit', e => { + this._navigate(); + }); this._metricsOpenButtonNode.addEventListener( 'click', e => this._evtOpenMetricsBtnClick(e)); this._metricsCloseButtonNode.addEventListener( @@ -218,6 +221,9 @@ class PostsHeaderView extends events.EventTarget { } else if (ctx.parameters.relations && this._bulkAddRelationEditor) { this._openBulkEditor(this._bulkAddRelationEditor); } + if (ctx.parameters.metrics) { + this._toggleMetricsBlock(true); + } } get _formNode() { @@ -282,24 +288,28 @@ class PostsHeaderView extends events.EventTarget { _evtOpenBulkEditBtnClick(e) { e.preventDefault(); - this._bulkEditBtnHolderNode.classList.toggle('opened', true); - this._bulkEditBlockNode.classList.toggle('hidden', false); + this._toggleBulkEditBlock(true); this._navigate(); } _evtCloseBulkEditBtnClick(e) { e.preventDefault(); - this._bulkEditBtnHolderNode.classList.toggle('opened', false); + this._toggleBulkEditBlock(false); this._closeAndShowAllBulkEditors(); - this._bulkEditBlockNode.classList.toggle('hidden', true); this._navigate(); } _openBulkEditor(editor) { editor.toggleOpen(true); + this._toggleBulkEditBlock(true); this._hideBulkEditorsExcept(editor); } + _toggleBulkEditBlock(open) { + this._bulkEditBtnHolderNode.classList.toggle('opened', open); + this._bulkEditBlockNode.classList.toggle('hidden', !open); + } + _hideBulkEditorsExcept(editor) { for (let otherEditor of this._bulkEditors) { if (otherEditor !== editor) { @@ -318,18 +328,21 @@ class PostsHeaderView extends events.EventTarget { _evtOpenMetricsBtnClick(e) { e.preventDefault(); - this._metricsButtonHolderNode.classList.toggle('opened', true); - this._metricsBlockNode.classList.toggle('hidden', false); + this._toggleMetricsBlock(true); this._navigate(); } _evtCloseMetricsBtnClick(e) { e.preventDefault(); - this._metricsButtonHolderNode.classList.toggle('opened', false); - this._metricsBlockNode.classList.toggle('hidden', true); + this._toggleMetricsBlock(false); this._navigate(); } + _toggleMetricsBlock(open) { + this._metricsButtonHolderNode.classList.toggle('opened', open); + this._metricsBlockNode.classList.toggle('hidden', !open); + } + _evtSafetyButtonClick(e, url) { e.preventDefault(); e.target.classList.toggle('disabled'); @@ -366,6 +379,7 @@ class PostsHeaderView extends events.EventTarget { let parameters = { query: this._queryInputNode.value, cachenumber: this._ctx.parameters.cachenumber, + metrics: this._ctx.parameters.metrics, }; parameters.offset = parameters.query === this._ctx.parameters.query ? this._ctx.parameters.offset : 0; |