From 4db7034608de9f955e2c9f42517fdd6747db2097 Mon Sep 17 00:00:00 2001
From: Michael Jumper <mike.jumper@guac-dev.org>
Date: Mon, 10 Aug 2015 11:10:17 -0700
Subject: [PATCH] GUAC-1213: Use HTML5 date/time input types.

---
 .../form/controllers/dateFieldController.js   | 35 +++++++++++++++++--
 .../form/controllers/timeFieldController.js   | 35 +++++++++++++++++--
 .../webapp/app/form/templates/dateField.html  |  6 +++-
 .../webapp/app/form/templates/timeField.html  |  6 +++-
 4 files changed, 74 insertions(+), 8 deletions(-)

diff --git a/guacamole/src/main/webapp/app/form/controllers/dateFieldController.js b/guacamole/src/main/webapp/app/form/controllers/dateFieldController.js
index cc73ac36e..1fc4eb8e0 100644
--- a/guacamole/src/main/webapp/app/form/controllers/dateFieldController.js
+++ b/guacamole/src/main/webapp/app/form/controllers/dateFieldController.js
@@ -24,9 +24,38 @@
 /**
  * Controller for date fields.
  */
-angular.module('form').controller('dateFieldController', ['$scope',
-    function dateFieldController($scope) {
+angular.module('form').controller('dateFieldController', ['$scope', '$injector',
+    function dateFieldController($scope, $injector) {
 
-    /* STUB */
+    // Required services
+    var $filter = $injector.get('$filter');
+
+    /**
+     * Options which dictate the behavior of the input field model, as defined
+     * by https://docs.angularjs.org/api/ng/directive/ngModelOptions
+     *
+     * @type Object.<String, String>
+     */
+    $scope.modelOptions = {
+
+        /**
+         * The time zone to use when reading/writing the Date object of the
+         * model.
+         *
+         * @type String
+         */
+        timezone : 'UTC'
+
+    };
+
+    // Update typed value when model is changed
+    $scope.$watch('model', function modelChanged(model) {
+        $scope.typedValue = (model ? new Date(model + 'T00:00Z') : null);
+    });
+
+    // Update string value in model when typed value is changed
+    $scope.$watch('typedValue', function typedValueChanged(typedValue) {
+        $scope.model = (typedValue ? $filter('date')(typedValue, 'yyyy-MM-dd', 'UTC') : '');
+    });
 
 }]);
diff --git a/guacamole/src/main/webapp/app/form/controllers/timeFieldController.js b/guacamole/src/main/webapp/app/form/controllers/timeFieldController.js
index 6cc4eb824..92b48d945 100644
--- a/guacamole/src/main/webapp/app/form/controllers/timeFieldController.js
+++ b/guacamole/src/main/webapp/app/form/controllers/timeFieldController.js
@@ -24,9 +24,38 @@
 /**
  * Controller for time fields.
  */
-angular.module('form').controller('timeFieldController', ['$scope',
-    function timeFieldController($scope) {
+angular.module('form').controller('timeFieldController', ['$scope', '$injector',
+    function timeFieldController($scope, $injector) {
 
-    /* STUB */
+    // Required services
+    var $filter = $injector.get('$filter');
+
+    /**
+     * Options which dictate the behavior of the input field model, as defined
+     * by https://docs.angularjs.org/api/ng/directive/ngModelOptions
+     *
+     * @type Object.<String, String>
+     */
+    $scope.modelOptions = {
+
+        /**
+         * The time zone to use when reading/writing the Date object of the
+         * model.
+         *
+         * @type String
+         */
+        timezone : 'UTC'
+
+    };
+
+    // Update typed value when model is changed
+    $scope.$watch('model', function modelChanged(model) {
+        $scope.typedValue = (model ? new Date('1970-01-01T' + model + 'Z') : null);
+    });
+
+    // Update string value in model when typed value is changed
+    $scope.$watch('typedValue', function typedValueChanged(typedValue) {
+        $scope.model = (typedValue ? $filter('date')(typedValue, 'HH:mm:ss', 'UTC') : '');
+    });
 
 }]);
diff --git a/guacamole/src/main/webapp/app/form/templates/dateField.html b/guacamole/src/main/webapp/app/form/templates/dateField.html
index 09d9267db..fabaadfc5 100644
--- a/guacamole/src/main/webapp/app/form/templates/dateField.html
+++ b/guacamole/src/main/webapp/app/form/templates/dateField.html
@@ -1,3 +1,7 @@
 <div class="date-field">
-    <input type="text" ng-model="model" autocorrect="off" autocapitalize="off"/>
+    <input type="date"
+           ng-model="typedValue"
+           ng-model-options="modelOptions"
+           autocorrect="off"
+           autocapitalize="off"/>
 </div>
diff --git a/guacamole/src/main/webapp/app/form/templates/timeField.html b/guacamole/src/main/webapp/app/form/templates/timeField.html
index 0ecc1fbee..70783b3f3 100644
--- a/guacamole/src/main/webapp/app/form/templates/timeField.html
+++ b/guacamole/src/main/webapp/app/form/templates/timeField.html
@@ -1,3 +1,7 @@
 <div class="time-field">
-    <input type="text" ng-model="model" autocorrect="off" autocapitalize="off"/>
+    <input type="time"
+           ng-model="typedValue"
+           ng-model-options="modelOptions"
+           autocorrect="off"
+           autocapitalize="off"/>
 </div>