Fix the date field in the attribute editor

.eslintrc.yaml

@@ -24,3 +24,4 @@ globals:
     inject: false
     jsts: false
     moment: false
+    DateFormatter: false

.gitignore

@@ -1,6 +1,7 @@
 *.pyc
 .*.swp
-.transifexrc
+/.transifexrc
+/package-lock.json
 /.build
 /node_modules
 /dist

Makefile

@@ -48,6 +48,7 @@ GMF_APPS_LIBS_JS_FILES += \
 	node_modules/moment/moment.js \
 	node_modules/url-polyfill/url-polyfill.js \
 	third-party/jquery-ui/jquery-ui.js \
+	node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js \
 	$(CLOSURE_LIBRARY_PATH)/closure/goog/transpile.js
 else
 GMF_APPS_LIBS_JS_FILES += \
@@ -71,7 +72,8 @@ GMF_APPS_LIBS_JS_FILES += \
 	node_modules/jsts/dist/jsts.min.js \
 	node_modules/moment/min/moment.min.js \
 	node_modules/url-polyfill/url-polyfill.min.js \
-	third-party/jquery-ui/jquery-ui.min.js
+	third-party/jquery-ui/jquery-ui.min.js \
+	node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.min.js
 endif
 
 BUILD_EXAMPLES_CHECK_TIMESTAMP_FILES := $(patsubst examples/%.html,.build/%.check.timestamp,$(EXAMPLES_HTML_FILES)) \

buildtools/mako_build.json

@@ -67,6 +67,8 @@ _ngeo_folder = '' if ngeo_folder is UNDEFINED else ngeo_folder
       "${_ngeo_folder}externs/jsts.js",
       "${_ngeo_folder}externs/moment.js",
       "${_ngeo_folder}externs/geo-admin-api.js",
+      "${_ngeo_folder}externs/php-date-formatter.js",
+      "${_ngeo_folder}externs/datetimepicker.js",
       ".build/externs/angular-1.6.js",
       ".build/externs/angular-1.6-q_templated.js",
       ".build/externs/angular-1.6-http-promise_templated.js",

contribs/gmf/apps/desktop/index.html

@@ -294,6 +294,7 @@
     <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCYnqxEQA5sz13sWSgMr97ejzvUeGP8gz4"></script>
     <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../../third-party/jquery-ui/jquery-ui.js"></script>
+    <script src="../../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
     <script src="../../../../node_modules/angular/angular.js"></script>
     <script src="../../../../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../../../../node_modules/angular-sanitize/angular-sanitize.js"></script>

contribs/gmf/apps/desktop_alt/index.html

@@ -339,6 +339,7 @@
     <script src="https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyCYnqxEQA5sz13sWSgMr97ejzvUeGP8gz4"></script>
     <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../../third-party/jquery-ui/jquery-ui.js"></script>
+    <script src="../../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
     <script src="../../../../node_modules/angular/angular.js"></script>
     <script src="../../../../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../../../../node_modules/angular-sanitize/angular-sanitize.js"></script>

contribs/gmf/apps/mobile/index.html

@@ -160,6 +160,7 @@
     </nav>
     <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../../third-party/jquery-ui/jquery-ui.js"></script>
+    <script src="../../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
     <script src="../../../../node_modules/angular/angular.js"></script>
     <script src="../../../../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../../../../node_modules/angular-sanitize/angular-sanitize.js"></script>

contribs/gmf/apps/mobile_alt/index.html

@@ -160,6 +160,7 @@
     </nav>
     <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../../third-party/jquery-ui/jquery-ui.js"></script>
+    <script src="../../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
     <script src="../../../../node_modules/angular/angular.js"></script>
     <script src="../../../../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../../../../node_modules/angular-sanitize/angular-sanitize.js"></script>

contribs/gmf/apps/oeedit/index.html

@@ -171,6 +171,7 @@
     </footer>
     <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../../third-party/jquery-ui/jquery-ui.js"></script>
+    <script src="../../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
     <script src="../../../../node_modules/angular/angular.js"></script>
     <script src="../../../../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../../../../node_modules/angular-sanitize/angular-sanitize.js"></script>

contribs/gmf/apps/oeview/index.html

@@ -128,6 +128,7 @@
     </footer>
     <script src="../../../../node_modules/jquery/dist/jquery.js"></script>
     <script src="../../../../third-party/jquery-ui/jquery-ui.js"></script>
+    <script src="../../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.full.js"></script>
     <script src="../../../../node_modules/angular/angular.js"></script>
     <script src="../../../../node_modules/angular-animate/angular-animate.js"></script>
     <script src="../../../../node_modules/angular-sanitize/angular-sanitize.js"></script>

contribs/gmf/less/base.less

@@ -5,6 +5,7 @@
 @import (inline) '../css/reset.css';
 @import '../../../node_modules/bootstrap/less/bootstrap.less';
 @import (inline) '../../../third-party/jquery-ui/jquery-ui.css';
+@import (inline) '../../../node_modules/jquery-datetimepicker/build/jquery.datetimepicker.min.css';
 
 @import 'vars.less';
 

contribs/gmf/src/directives/editfeature.js

@@ -563,11 +563,36 @@ gmf.EditfeatureController.prototype.$onInit = function() {
  * @export
  */
 gmf.EditfeatureController.prototype.save = function() {
-  const feature = this.feature;
+  goog.asserts.assert(this.attributes);
+
+  const feature = this.feature.clone();
+  feature.setId(this.feature.getId());
   const id = this.featureId;
 
   this.pending = true;
 
+  const dateFormatter = new DateFormatter();
+  for (const attribute of this.attributes) {
+    if (attribute.format) {
+      if (this.feature.get(attribute.name)) {
+        const value = dateFormatter.parseDate(this.feature.get(attribute.name), attribute.format);
+        let jsonFormat = 'Y-m-d\\TH:i:s';
+        if (attribute.type === 'date') {
+          jsonFormat = 'Y-m-d';
+        } else if (attribute.type === 'time') {
+          jsonFormat = 'H:i:s';
+        } else if (attribute.type === 'datetime') {
+          // Time zone correction
+          value.setMinutes(value.getMinutes() + value.getTimezoneOffset());
+        }
+        feature.set(attribute.name, dateFormatter.formatDate(value, jsonFormat));
+      } else {
+        // Shouldn't be set to an empty string
+        feature.set(attribute.name, null);
+      }
+    }
+  }
+
   const promise = id ?
     this.gmfEditFeature_.updateFeature(
       this.editableNode_.id,
@@ -716,12 +741,24 @@ gmf.EditfeatureController.prototype.handleEditFeature_ = function(resp) {
 
 
 /**
- * @param {Array.<ngeox.Attribute>} attributes Attributes.
+ * @param {!Array.<ngeox.Attribute>} attributes Attributes.
  * @private
  */
 gmf.EditfeatureController.prototype.setAttributes_ = function(attributes) {
   // Set attributes
   this.attributes = attributes;
+  for (const attribute of attributes) {
+    if (attribute.type == 'date') {
+      attribute.format = 'Y-m-d';
+      attribute.mask = '9999-19-39';
+    } else if (attribute.type == 'time') {
+      attribute.format = 'H:i';
+      attribute.mask = '29:59';
+    } else if (attribute.type == 'datetime') {
+      attribute.format = 'Y-m-d H:i';
+      attribute.mask = '9999-19-39 29:59';
+    }
+  }
 
   // Get geom type from attributes and set
   const geomAttr = ngeo.format.XSDAttribute.getGeometryAttribute(
@@ -738,9 +775,36 @@ gmf.EditfeatureController.prototype.setAttributes_ = function(attributes) {
  * @private
  */
 gmf.EditfeatureController.prototype.handleFeatureAdd_ = function(evt) {
+  this.feature = null;
   this.timeout_(() => {
+    goog.asserts.assert(this.attributes);
     const feature = evt.element;
     goog.asserts.assertInstanceof(feature, ol.Feature);
+    const dateFormatter = new DateFormatter();
+    for (const attribute of this.attributes) {
+      if (attribute.format) {
+        if (feature.get(attribute.name)) {
+          let value;
+          if (attribute.type === 'datetime') {
+            value = new Date(feature.get(attribute.name));
+            // Time zone correction
+            value.setMinutes(value.getMinutes() - value.getTimezoneOffset());
+          } else {
+            let jsonFormat = '';
+            if (attribute.type === 'date') {
+              jsonFormat = 'Y-m-d';
+            } else if (attribute.type === 'time') {
+              jsonFormat = 'H:i:s';
+            }
+            value = dateFormatter.parseDate(feature.get(attribute.name), jsonFormat);
+          }
+          feature.set(attribute.name, dateFormatter.formatDate(value, attribute.format));
+        } else {
+          // Shouldn't be set to an empty string
+          feature.set(attribute.name, null);
+        }
+      }
+    }
     this.feature = feature;
     this.createActive = false;
     if (!feature.getId()) {

externs/datetimepicker.js

@@ -0,0 +1,9 @@
+/**
+ * @param {Object.<string,*>} options
+ */
+jQuery.datetimepicker = function(options) {};
+
+/**
+ * @param {string} lang
+ */
+jQuery.datetimepicker.setLocale = function(lang) {};

externs/php-date-formatter.js

@@ -0,0 +1,18 @@
+/**
+ * @constructor
+ */
+var DateFormatter = function() {};
+
+/**
+ * @param {!Date} date
+ * @param {string} format
+ * @return {string}
+ */
+DateFormatter.prototype.formatDate = function(date, format) {};
+
+/**
+ * @param {string} date
+ * @param {string} format
+ * @return {!Date}
+ */
+DateFormatter.prototype.parseDate = function(date, format) {};

options/ngeox.js

@@ -86,7 +86,21 @@ ngeox.Attribute.prototype.type;
 
 
 /**
- * The options to use when creating a filter uwing the `ngeo.RuleHelper`
+ * The format used in the date, time and datetime type.
+ * @type {string|undefined}
+ */
+ngeox.Attribute.prototype.format;
+
+
+/**
+ * The mask used in the date, time and datetime type.
+ * @type {string|undefined}
+ */
+ngeox.Attribute.prototype.mask;
+
+
+/**
+ * The options to use when creating a filter using the `ngeo.RuleHelper`
  * service.
  *
  * @typedef {{

package.json

@@ -47,6 +47,7 @@
     "gaze": "1.1.2",
     "jasmine-core": "2.7.0",
     "jquery": "3.2.1",
+    "jquery-datetimepicker": "2.5.16",
     "jsdoc": "3.5.5",
     "jsdom": "9.12.0",
     "jsts": "1.4.0",

src/directives/attributes.js

@@ -3,6 +3,9 @@ goog.provide('ngeo.attributesComponent');
 goog.require('ol.ObjectEventType');
 goog.require('ngeo');
 goog.require('ngeo.EventHelper');
+/** @suppress {extraRequire} */
+goog.require('ngeo.datetimepickerDirective');
+
 
 /**
  * Component used to render the attributes of a feature into a form.
@@ -42,15 +45,14 @@ ngeo.module.component('ngeoAttributes', ngeo.attributesComponent);
 /**
  * @param {!angular.Scope} $scope Angular scope.
  * @param {!ngeo.EventHelper} ngeoEventHelper Ngeo event helper service
- * @param {!angularGettext.Catalog} gettextCatalog service.
  * @constructor
  * @private
  * @struct
  * @ngInject
  * @ngdoc controller
  * @ngname ngeoAttributesController
  */
-ngeo.AttributesController = function($scope, ngeoEventHelper, gettextCatalog) {
+ngeo.AttributesController = function($scope, ngeoEventHelper) {
 
   /**
    * The list of attributes to create the form with.
@@ -93,23 +95,6 @@ ngeo.AttributesController = function($scope, ngeoEventHelper, gettextCatalog) {
    */
   this.ngeoEventHelper_ = ngeoEventHelper;
 
-  /**
-   * The gettext catalog
-   * @type {!angularGettext.Catalog}
-   * @private
-   */
-  this.gettextCatalog_ = gettextCatalog;
-
-  /**
-   * Datepicker options
-   * @type {Object}
-   * @export
-   */
-  this.dateOptions = {
-    'changeMonth': true,
-    'changeYear': true
-  };
-
   /**
    * While changes happen from the form (from the template), they are applied
    * to the feature inner properties. The 'propertychange' event registered
@@ -142,9 +127,6 @@ ngeo.AttributesController.prototype.$onInit = function() {
     ),
     true
   );
-
-  const lang = this.gettextCatalog_.getCurrentLanguage();
-  $['datepicker']['setDefaults']($['datepicker']['regional'][lang]);
 };
 
 

src/directives/datetimepicker.js

@@ -0,0 +1,79 @@
+goog.provide('ngeo.datetimepickerDirective');
+
+goog.require('ngeo');
+
+// Don't forget to add module dependencies
+
+
+/**
+ * A directive used to display a date or time picker
+ *
+ * Example:
+ *
+ *      <input ngeo-datetimepicker
+ *          ngeo-datetimepicker-options="{timepicker: false}"
+ *
+ * @htmlAttribute {Object} ngeo-datetimepicker-options The options.
+ *
+ * @return {angular.Directive} The directive specs.
+ * @ngdoc directive
+ * @ngname ngeoDatetimepicker
+ */
+ngeo.datetimepickerDirective = function() {
+  return {
+    restrict: 'A',
+    controller: ngeo.DatetimepickerController,
+    bindToController: true,
+    scope: {
+      'options': '<ngeoDatetimepickerOptions'
+    }
+  };
+};
+
+ngeo.module.directive('ngeoDatetimepicker', ngeo.datetimepickerDirective);
+
+
+/**
+ * @param {!jQuery} $element Element.
+ * @param {!angularGettext.Catalog} gettextCatalog service.
+ * @constructor
+ * @private
+ * @struct
+ * @ngInject
+ * @ngdoc controller
+ * @ngname ngeoDatetimepickerController
+ */
+ngeo.DatetimepickerController = function($element, gettextCatalog) {
+  /**
+   * @const {!jQuery}
+   * @private
+   */
+  this.element_ = $element;
+
+  /**
+   * The gettext catalog
+   * @type {!angularGettext.Catalog}
+   * @private
+   */
+  this.gettextCatalog_ = gettextCatalog;
+
+  /**
+   * The options
+   * @type {Object|String}
+   * @private
+   */
+  this.options;
+};
+
+
+/**
+ * Initialize the directive.
+ */
+ngeo.DatetimepickerController.prototype.$onInit = function() {
+  const lang = this.gettextCatalog_.getCurrentLanguage();
+  $.datetimepicker.setLocale(lang);
+  if (typeof this.options === 'string') {
+    this.options = angular.fromJson(this.options);
+  }
+  this.element_.datetimepicker(this.options);
+};