client: ui to create exact value post metric

7 files changed, 130 insertions, 45 deletions

diff --git a/client/js/controls/metric_input_control.js b/client/js/controls/metric_input_control.js
deleted file mode 100644
index 03495e4..0000000
--- a/client/js/controls/metric_input_control.js
+++ /dev/null
@@ -1,37 +0,0 @@
-'use strict';
-
-const api = require('../api.js');
-const tags = require('../tags.js');
-const misc = require('../util/misc.js');
-const uri = require('../util/uri.js');
-const Tag = require('../models/tag.js');
-const TagList = require('../models/tag_list.js');
-const PostMetricList = require('../models/post_metric_list.js');
-const settings = require('../models/settings.js');
-const events = require('../events.js');
-const views = require('../util/views.js');
-
-const template = views.getTemplate('metric-input');
-
-class MetricInputControl extends events.EventTarget {
-    constructor(hostNode, tagList, postMetricList) {
-        super();
-        this.tags = tagList;
-        this.postMetrics = postMetricList;
-        this._hostNode = hostNode;
-
-        // dom
-        this._editAreaNode = template({
-            tags: this.tags,
-            postMetrics: this.postMetrics,
-            escapeColons: uri.escapeColons,
-        });
-
-        // show
-        this._hostNode.style.display = 'none';
-        this._hostNode.parentNode.insertBefore(
-            this._editAreaNode, hostNode.nextSibling);
-    }
-}
-
-module.exports = MetricInputControl;
diff --git a/client/js/controls/post_edit_sidebar_control.js b/client/js/controls/post_edit_sidebar_control.js
index add47f8..9c0cb7c 100644
--- a/client/js/controls/post_edit_sidebar_control.js
+++ b/client/js/controls/post_edit_sidebar_control.js
@@ -7,7 +7,7 @@ const views = require('../util/views.js');
 const Note = require('../models/note.js');
 const Point = require('../models/point.js');
 const TagInputControl = require('./tag_input_control.js');
-const MetricInputControl = require('./metric_input_control.js');
+const PostMetricInputControl = require('./post_metric_input_control.js');
 const ExpanderControl = require('../controls/expander_control.js');
 const FileDropperControl = require('../controls/file_dropper_control.js');
 
@@ -82,8 +82,8 @@ class PostEditSidebarControl extends events.EventTarget {
         }
 
         if (this._metricInputNode) {
-            this._metricControl = new MetricInputControl(
-                this._metricInputNode, post.tags, post.metrics);
+            this._metricControl = new PostMetricInputControl(
+                this._metricInputNode, post);
         }
 
         if (this._contentInputNode) {
diff --git a/client/js/controls/post_metric_input_control.js b/client/js/controls/post_metric_input_control.js
new file mode 100644
index 0000000..6fe2f29
--- /dev/null
+++ b/client/js/controls/post_metric_input_control.js
@@ -0,0 +1,103 @@
+'use strict';
+
+const api = require('../api.js');
+const tags = require('../tags.js');
+const misc = require('../util/misc.js');
+const uri = require('../util/uri.js');
+const Tag = require('../models/tag.js');
+const TagList = require('../models/tag_list.js');
+const PostMetric = require('../models/post_metric.js');
+const PostMetricList = require('../models/post_metric_list.js');
+const settings = require('../models/settings.js');
+const events = require('../events.js');
+const views = require('../util/views.js');
+
+const mainTemplate = views.getTemplate('post-metric-input');
+const metricNodeTemplate = views.getTemplate('compact-metric-list-item');
+const postMetricNodeTemplate = views.getTemplate('compact-post-metric-list-item');
+
+class PostMetricInputControl extends events.EventTarget {
+    constructor(hostNode, post) {
+        super();
+        this._post = post;
+        this._hostNode = hostNode;
+
+        // dom
+        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');
+        this._separatorNode = editAreaNode.querySelector('hr.separator');
+        this._postMetricListNode = editAreaNode.querySelector('ul.compact-post-metrics');
+
+        // show
+        this._hostNode.style.display = 'none';
+        this._hostNode.parentNode.insertBefore(
+            this._editAreaNode, hostNode.nextSibling);
+
+        // add existing metrics and post metrics:
+        this._refreshContent();
+    }
+
+    _refreshContent() {
+        this._metricListNode.innerHTML = '';
+        for (let tag of this._post.tags.filterMetrics()) {
+            const metricNode = this._createMetricNode(tag);
+            this._metricListNode.appendChild(metricNode);
+        }
+        this._separatorNode.style.display =
+            this._post.tags.filterMetrics().length && this._post.metrics.length
+                ? 'block' : 'none';
+        this._postMetricListNode.innerHTML = '';
+        for (let pm of this._post.metrics) {
+            const postMetricNode = this._createPostMetricNode(pm);
+            this._postMetricListNode.appendChild(postMetricNode);
+        }
+    }
+
+    _createMetricNode(tag) {
+        const node = metricNodeTemplate({
+            editMode: true,
+            tag: tag,
+        });
+        const createExactNode = node.querySelector('a.create-exact');
+        if (this._post.metrics.hasTagName(tag.names[0])) {
+            createExactNode.style.display = 'none';
+        } else {
+            createExactNode.addEventListener('click', e => {
+                e.preventDefault();
+                this.createPostMetric(tag);
+            });
+        }
+        const createRangeNode = node.querySelector('a.create-range');
+        createRangeNode.addEventListener('click', e => {
+            e.preventDefault();
+            this.createPostMetricRange(tag);
+        });
+        return node;
+    }
+
+    _createPostMetricNode(pm) {
+        const tag = this._post.tags.findByName(pm.tagName);
+        const node = postMetricNodeTemplate({
+            editMode: true,
+            postMetric: pm,
+            tag: tag,
+        });
+        return node;
+    }
+
+    createPostMetric(tag) {
+        this._post.metrics.add(PostMetric.create(this._post.id, tag));
+        this._refreshContent();
+    }
+
+    createPostMetricRange(tag) {
+        //TODO
+    }
+}
+
+module.exports = PostMetricInputControl;
diff --git a/client/js/models/post_metric.js b/client/js/models/post_metric.js
index dfc2585..dd06957 100644
--- a/client/js/models/post_metric.js
+++ b/client/js/models/post_metric.js
@@ -8,9 +8,11 @@ class PostMetric extends events.EventTarget {
         this._updateFromResponse({});
     }
 
-    static create(postId) {
+    static create(postId, tag) {
         const metric = new PostMetric();
         metric._postId = postId;
+        metric._tagName = tag.names[0];
+        metric._value = tag.metric.min;
         return metric;
     }
 
diff --git a/client/js/models/post_metric_list.js b/client/js/models/post_metric_list.js
index 44f39f4..5e2c838 100644
--- a/client/js/models/post_metric_list.js
+++ b/client/js/models/post_metric_list.js
@@ -4,6 +4,18 @@ const AbstractList = require('./abstract_list.js');
 const PostMetric = require('./post_metric.js');
 
 class PostMetricList extends AbstractList {
+    findByTagName(testName) {
+        for (let postMetric of this._list) {
+            if (postMetric.tagName.toLowerCase() === testName.toLowerCase()) {
+                return postMetric;
+            }
+        }
+        return null;
+    }
+
+    hasTagName(testName) {
+        return !!this.findByTagName(testName);
+    }
 }
 
 PostMetricList._itemClass = PostMetric;
diff --git a/client/js/models/tag_list.js b/client/js/models/tag_list.js
index 804d7ba..1478f8b 100644
--- a/client/js/models/tag_list.js
+++ b/client/js/models/tag_list.js
@@ -23,15 +23,19 @@ class TagList extends AbstractList {
             });
     }
 
-    isTaggedWith(testName) {
+    findByName(testName) {
         for (let tag of this._list) {
             for (let tagName of tag.names) {
                 if (tagName.toLowerCase() === testName.toLowerCase()) {
-                    return true;
+                    return tag;
                 }
             }
         }
-        return false;
+        return null;
+    }
+
+    isTaggedWith(testName) {
+        return !!this.findByName(testName);
     }
 
     addByName(tagName, addImplications) {
diff --git a/client/js/util/views.js b/client/js/util/views.js
index 9f238b1..ee4c209 100644
--- a/client/js/util/views.js
+++ b/client/js/util/views.js
@@ -406,7 +406,8 @@ function getTemplate(templatePath) {
             makeElement:       makeElement,
             makeCssName:       misc.makeCssName,
             makeNumericInput:  makeNumericInput,
-            formatClientLink:  uri.formatClientLink
+            formatClientLink:  uri.formatClientLink,
+            escapeColons:      uri.escapeColons,
         });
         return htmlToDom(templateFactory(ctx));
     };