client: view metric values in read-only sidebar

7 files changed, 94 insertions, 7 deletions

diff --git a/client/css/post-main-view.styl b/client/css/post-main-view.styl
index 3a8dfe7..a3e970b 100644
--- a/client/css/post-main-view.styl
+++ b/client/css/post-main-view.styl
@@ -128,7 +128,7 @@
             margin: 0 0.3em 0.3em 0
             display: inline-block
 
-    .tags
+    .tags, .metrics
         margin-top: 2em
         h1
             margin-bottom: 0.5em
diff --git a/client/html/compact_post_metric_list_item.tpl b/client/html/compact_post_metric_list_item.tpl
index 82f9d83..75b5d81 100644
--- a/client/html/compact_post_metric_list_item.tpl
+++ b/client/html/compact_post_metric_list_item.tpl
@@ -6,7 +6,7 @@
                 }) %>"
           class="<%= ctx.makeCssName(ctx.tag.category, 'tag') %>"><!--
         --><i class='fas fa-angle-right tag-icon'></i><!--
-    --><%- ctx.postMetric.tagName %>:</a><!--
+        --><%- ctx.postMetric.tagName %>:</a><!--
     --><%= ctx.makeNumericInput({
            name: 'value',
            value: ctx.postMetric.value,
@@ -14,6 +14,16 @@
            min: ctx.tag.metric.min,
            max: ctx.tag.metric.max,
        }) %><!--
+--><% } else { %><!--
+    --><a href="<%- ctx.formatClientLink('tag', ctx.postMetric.tagName, 'metric') %>"
+          class="<%= ctx.makeCssName(ctx.tag.category, 'tag') %>"><!--
+        --><i class='fas fa-angle-right tag-icon'></i><!--
+    --></a><!--
+    --><a href="<%- ctx.formatClientLink('posts', {
+            query: 'metric-' + ctx.escapeColons(ctx.postMetric.tagName) +
+                ':' + ctx.postMetric.value
+            }) %>"
+          class="<%= ctx.makeCssName(ctx.tag.category, 'tag') %>"><!--
+        --><%- ctx.postMetric.tagName %>: <%- ctx.postMetric.value || 0 %></a><!--
 --><% } %><!--
 --></li>
-
diff --git a/client/html/compact_post_metric_range_list_item.tpl b/client/html/compact_post_metric_range_list_item.tpl
index e35e3bd..4768935 100644
--- a/client/html/compact_post_metric_range_list_item.tpl
+++ b/client/html/compact_post_metric_range_list_item.tpl
@@ -2,11 +2,11 @@
 --><% if (ctx.editMode) { %><!--
     --><a href="<%- ctx.formatClientLink('posts', {
                 query: 'metric-' + ctx.escapeColons(ctx.postMetricRange.tagName) +
-                    ':' + ctx.postMetricRange.high + '..' + ctx.postMetricRange.high
+                    ':' + ctx.postMetricRange.low + '..' + ctx.postMetricRange.high
                 }) %>"
           class="<%= ctx.makeCssName(ctx.tag.category, 'tag') %>"><!--
         --><i class='fas fa-arrows-alt-h tag-icon'></i><!--
-    --><%- ctx.postMetricRange.tagName %>:</a><!--
+        --><%- ctx.postMetricRange.tagName %>:</a><!--
     --><%= ctx.makeNumericInput({
            name: 'low',
            value: ctx.postMetricRange.low,
@@ -22,6 +22,18 @@
         min: ctx.tag.metric.min,
         max: ctx.tag.metric.max,
         }) %><!--
+--><% } else { %><!--
+    --><a href="<%- ctx.formatClientLink('tag', ctx.postMetricRange.tagName, 'metric') %>"
+          class="<%= ctx.makeCssName(ctx.tag.category, 'tag') %>"><!--
+        --><i class='fas fa-arrows-alt-h tag-icon'></i><!--
+    --></a><!--
+    --><a href="<%- ctx.formatClientLink('posts', {
+            query: 'metric-' + ctx.escapeColons(ctx.postMetricRange.tagName) +
+                ':' + ctx.postMetricRange.low + '..' + ctx.postMetricRange.high
+            }) %>"
+          class="<%= ctx.makeCssName(ctx.tag.category, 'tag') %>"><!--
+        --><%- ctx.postMetricRange.tagName %>:
+        <%- ctx.postMetricRange.low || 0 %> &mdash; <%- ctx.postMetricRange.high || 0 %><!--
+    --></a><!--
 --><% } %><!--
 --></li>
-
diff --git a/client/html/post_readonly_sidebar.tpl b/client/html/post_readonly_sidebar.tpl
index d182048..9f6c530 100644
--- a/client/html/post_readonly_sidebar.tpl
+++ b/client/html/post_readonly_sidebar.tpl
@@ -108,4 +108,11 @@
             </p>
         <% } %>
     </nav>
+
+    <% if (ctx.post.metrics.length + ctx.post.metricRanges.length) { %>
+        <nav class='metrics'>
+            <h1>Metrics (<%- ctx.post.metrics.length + ctx.post.metricRanges.length %>)</h1>
+            <ul class='compact-post-metrics'></ul>
+        </nav>
+    <% } %>
 </div>
diff --git a/client/js/controls/post_metric_input_control.js b/client/js/controls/post_metric_input_control.js
index f40c257..f507468 100644
--- a/client/js/controls/post_metric_input_control.js
+++ b/client/js/controls/post_metric_input_control.js
@@ -21,7 +21,6 @@ class PostMetricInputControl extends events.EventTarget {
         const editAreaNode = mainTemplate({
             tags: this._post.tags,
             postMetrics: this._post.metrics,
-            escapeColons: uri.escapeColons,
         });
         this._editAreaNode = editAreaNode;
         this._metricListNode = editAreaNode.querySelector('ul.compact-unset-metrics');
diff --git a/client/js/controls/post_metric_list_control.js b/client/js/controls/post_metric_list_control.js
new file mode 100644
index 0000000..b179b12
--- /dev/null
+++ b/client/js/controls/post_metric_list_control.js
@@ -0,0 +1,51 @@
+'use strict';
+
+const events = require('../events.js');
+const views = require('../util/views.js');
+
+const postMetricNodeTemplate = views.getTemplate('compact-post-metric-list-item');
+const postMetricRangeNodeTemplate = views.getTemplate('compact-post-metric-range-list-item');
+
+class PostMetricListControl extends events.EventTarget {
+    constructor(listNode, post) {
+        super();
+        this._post = post;
+        this._listNode = listNode;
+
+        this._refreshContent();
+    }
+
+    _refreshContent() {
+        this._listNode.innerHTML = '';
+        for (let pm of this._post.metrics) {
+            const postMetricNode = this._createPostMetricNode(pm);
+            this._listNode.appendChild(postMetricNode);
+        }
+        for (let pmr of this._post.metricRanges) {
+            const postMetricRangeNode = this._createPostMetricRangeNode(pmr);
+            this._listNode.appendChild(postMetricRangeNode);
+        }
+    }
+
+    _createPostMetricNode(pm) {
+        const tag = this._post.tags.findByName(pm.tagName);
+        const node = postMetricNodeTemplate({
+            editMode: false,
+            postMetric: pm,
+            tag: tag,
+        });
+        return node;
+    }
+
+    _createPostMetricRangeNode(pmr) {
+        const tag = this._post.tags.findByName(pmr.tagName);
+        const node = postMetricRangeNodeTemplate({
+            editMode: false,
+            postMetricRange: pmr,
+            tag: tag,
+        });
+        return node;
+    }
+}
+
+module.exports = PostMetricListControl;
diff --git a/client/js/controls/post_readonly_sidebar_control.js b/client/js/controls/post_readonly_sidebar_control.js
index 65c922d..4b7e3bf 100644
--- a/client/js/controls/post_readonly_sidebar_control.js
+++ b/client/js/controls/post_readonly_sidebar_control.js
@@ -4,6 +4,7 @@ const api = require('../api.js');
 const events = require('../events.js');
 const views = require('../util/views.js');
 const uri = require('../util/uri.js');
+const PostMetricListControl = require('./post_metric_list_control.js');
 
 const template = views.getTemplate('post-readonly-sidebar');
 const scoreTemplate = views.getTemplate('score');
@@ -32,6 +33,9 @@ class PostReadonlySidebarControl extends events.EventTarget {
         this._installScore();
         this._installFitButtons();
         this._syncFitButton();
+        if (this._metricsListNode) {
+            this._metricsControl = new PostMetricListControl(this._metricsListNode, this._post);
+        }
     }
 
     get _scoreContainerNode() {
@@ -74,6 +78,10 @@ class PostReadonlySidebarControl extends events.EventTarget {
         return this._hostNode.querySelector('.fit-height');
     }
 
+    get _metricsListNode() {
+        return this._hostNode.querySelector('ul.compact-post-metrics');
+    }
+
     _installFitButtons() {
         this._fitBothButtonNode.addEventListener(
             'click', this._eventZoomProxy(