enable time_input submit with enter

asmuth · Nov 19, 2014 · dbee815 · dbee815
1 parent 7d121ab
commit dbee815
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 5 deletions.
diff --git a/fnordmetric-webui/fnordmetric-webui-datepicker.js b/fnordmetric-webui/fnordmetric-webui-datepicker.js
@@ -32,10 +32,10 @@ FnordMetric.util.timeInput = function(selectedTimestamp, elem, callback) {
     separator.innerHTML = ":";
 
     var hour_input = document.createElement("input");
-    hour_input.placeholder = selectedHours;
+    hour_input.value = selectedHours;
 
     var minute_input = document.createElement("input");
-    minute_input.placeholder = selectedMinutes;
+    minute_input.value = selectedMinutes;
 
   function render() {
     input_container.appendChild(hour_input);
@@ -45,14 +45,15 @@ FnordMetric.util.timeInput = function(selectedTimestamp, elem, callback) {
 
     hour_input.addEventListener('focus', function(e) {
       e.preventDefault();
-      FnordMetric.util.validatedTimeInput(this, "hour", callback);
+      FnordMetric.util.validatedTimeInput(this, "hours", callback);
     }, false);
 
     minute_input.addEventListener('focus', function(e) {
       e.preventDefault();
-      FnordMetric.util.validatedTimeInput(this, "minute", callback);
+      FnordMetric.util.validatedTimeInput(this, "minutes", callback);
     }, false);
 
+
   }
 
   function getValues() {

diff --git a/fnordmetric-webui/fnordmetric-webui-util.js b/fnordmetric-webui/fnordmetric-webui-util.js
@@ -557,9 +557,27 @@ FnordMetric.util.isNavKey = function(keycode) {
     keycode == 46);
 }
 
-FnordMetric.util.validatedTimeInput = function(time_input) {
+FnordMetric.util.validatedTimeInput = function(time_input,type, callback) {
   time_input.maxLength = "2";
+  var classname = time_input.className;
   time_input.addEventListener('keypress', function(e) {
+    if (e.keyCode == 13) {
+      var value = parseInt(time_input.value, 10);
+      if (type == "minutes") {
+        if (value > 59) {
+          this.className += " highlighted";
+          return;
+        }
+      } else {
+        if (value > 23) {
+          this.className += " highlighted";
+          return;
+        }
+      }
+      this.className = classname;
+      callback();
+      return;
+    }
     if (!FnordMetric.util.isNavKey(e.keyCode) &&
       !FnordMetric.util.isNumKey(e.keyCode)) {
       e.preventDefault();

diff --git a/fnordmetric-webui/fnordmetric-webui.css b/fnordmetric-webui/fnordmetric-webui.css
@@ -243,6 +243,7 @@ input {
   font-size: 14px;
 }
 
+
 .viewport {
   min-width: 900px;
   margin-top: 49px;
@@ -1159,6 +1160,12 @@ h1.page_header em {
   color: #545758;
 }
 
+.metric_preview_controls .group input.highlighted {
+  border: 1px solid rgba(230, 126, 34,1.0);
+  background: rgba(230, 126, 34,0.1);
+}
+
+
 .metric_preview_controls .group select {
   -webkit-appearance: menulist-button;
   height: 30px;