Fix metric view

3 files changed, 53 insertions, 15 deletions

diff --git a/client/css/tag-view.styl b/client/css/tag-view.styl
index 8750647..fda3581 100644
--- a/client/css/tag-view.styl
+++ b/client/css/tag-view.styl
@@ -31,3 +31,15 @@
                     content: '(none)'
                 section
                     margin-bottom: 1em
+    .metric-bounds-edit
+        display: flex
+        margin-bottom: 2em
+        input[type=number]
+            flex: 2
+            margin-left: 0.5em
+            width: auto
+            min-width: 60px
+        label
+            flex 1
+        input[name=metric-min]
+            margin-right: 2em
diff --git a/client/html/tag_metric.tpl b/client/html/tag_metric.tpl
index b25ebff..16232b9 100644
--- a/client/html/tag_metric.tpl
+++ b/client/html/tag_metric.tpl
@@ -1,24 +1,28 @@
 <div class='tag-metric'>
     <form class='horizontal edit-metric'>
-        <%= ctx.makeNumericInput({
-            text: 'Minimum',
-            name: 'metric-min',
-            value: ctx.metricMin,
-            enabled: ctx.canEditMetricBounds,
-        }) %>
-        <%= ctx.makeNumericInput({
-            text: 'Maximum',
-            name: 'metric-max',
-            value: ctx.metricMax,
-            enabled: ctx.canEditMetricBounds,
-        }) %>
+        <div class='metric-bounds-edit'>
+            <%= ctx.makeNumericInput({
+                text: 'Minimum',
+                name: 'metric-min',
+                value: ctx.metricMin,
+                steps: 'any',
+                readonly: !ctx.canEditMetricBounds,
+            }) %>
+            <%= ctx.makeNumericInput({
+                text: 'Maximum',
+                name: 'metric-max',
+                value: ctx.metricMax,
+                steps: 'any',
+                readonly: !ctx.canEditMetricBounds,
+            }) %>
+        </div>
 
         <div class='buttons'>
             <% if (!ctx.tag.metric && ctx.canCreateMetric) { %>
-                <input type='submit' >Create metric</input>
+                <input type='submit' value='Create metric'/>
             <% } else if (ctx.tag.metric && ctx.canEditMetricBounds) { %>
-                <input type='submit' >Update metric</input>
+                <input type='submit' value='Update metric'/>
             <% } %>
         </div>
     </form>
-</div>
\ No newline at end of file
+</div>
diff --git a/client/js/views/tag_metric_view.js b/client/js/views/tag_metric_view.js
index 01f2607..1b3f31f 100644
--- a/client/js/views/tag_metric_view.js
+++ b/client/js/views/tag_metric_view.js
@@ -23,6 +23,8 @@ class TagMetricView extends events.EventTarget {
             ctx.metricMax = 10;
         }
 
+        views.replaceContent(this._hostNode, template(ctx));
+
         this._formNode.addEventListener('submit', e => this._evtSubmit(e));
     }
 
@@ -37,6 +39,26 @@ class TagMetricView extends events.EventTarget {
         }));
     }
 
+    clearMessages() {
+        views.clearMessages(this._hostNode);
+    }
+
+    enableForm() {
+        views.enableForm(this._formNode);
+    }
+
+    disableForm() {
+        views.disableForm(this._formNode);
+    }
+
+    showSuccess(message) {
+        views.showSuccess(this._hostNode, message);
+    }
+
+    showError(message) {
+        views.showError(this._hostNode, message);
+    }
+
     get _formNode() {
         return this._hostNode.querySelector('form');
     }