Support 12 hour format in web

4 files changed, 39 insertions, 7 deletions

diff --git a/web/app/view/CustomTimeField.js b/web/app/view/CustomTimeField.js
new file mode 100644
index 000000000..1bd8c7307
--- /dev/null
+++ b/web/app/view/CustomTimeField.js
@@ -0,0 +1,29 @@
+/*
+ * Copyright 2016 Anton Tananaev (anton.tananaev@gmail.com)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+Ext.define('Traccar.view.CustomTimeField', {
+    extend: 'Ext.form.field.Time',
+    xtype: 'customTimeField',
+
+    constructor: function (config) {
+        if (Traccar.app.getPreference('twelveHourFormat', false)) {
+            config.format = Traccar.Style.timeFormat12;
+        } else {
+            config.format = Traccar.Style.timeFormat24;
+        }
+        this.callParent(arguments);
+    }
+});
diff --git a/web/app/view/Devices.js b/web/app/view/Devices.js
index 2e9509609..b464ed561 100644
--- a/web/app/view/Devices.js
+++ b/web/app/view/Devices.js
@@ -114,7 +114,11 @@ Ext.define('Traccar.view.Devices', {
                         metaData.tdCls = 'status-color-unknown';
                         break;
                 }
-                return Ext.Date.format(value, Traccar.Style.dateTimeFormat);
+                if (Traccar.app.getPreference('twelveHourFormat', false)) {
+                    return Ext.Date.format(value, Traccar.Style.dateTimeFormat12);
+                } else {
+                    return Ext.Date.format(value, Traccar.Style.dateTimeFormat24);
+                }
             }
         }
     }]
diff --git a/web/app/view/MapController.js b/web/app/view/MapController.js
index 918f81390..b8b7290b8 100644
--- a/web/app/view/MapController.js
+++ b/web/app/view/MapController.js
@@ -170,7 +170,7 @@ Ext.define('Traccar.view.MapController', {
             style = this.getReportMarker();
             style.getImage().setRotation(position.get('course') * Math.PI / 180);
             /*style.getText().setText(
-                Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat));*/
+                Ext.Date.format(position.get('fixTime'), Traccar.Style.dateTimeFormat24));*/
 
             marker.setStyle(style);
 
diff --git a/web/app/view/Report.js b/web/app/view/Report.js
index 91ccba917..4261b9040 100644
--- a/web/app/view/Report.js
+++ b/web/app/view/Report.js
@@ -19,7 +19,8 @@ Ext.define('Traccar.view.Report', {
     xtype: 'reportView',
 
     requires: [
-        'Traccar.view.ReportController'
+        'Traccar.view.ReportController',
+        'Traccar.view.CustomTimeField'
     ],
 
     controller: 'report',
@@ -48,10 +49,9 @@ Ext.define('Traccar.view.Report', {
         format: Traccar.Style.dateFormat,
         value: new Date(new Date().getTime() - 30 * 60 * 1000)
     }, {
-        xtype: 'timefield',
+        xtype: 'customTimeField',
         reference: 'fromTimeField',
         maxWidth: Traccar.Style.reportTime,
-        format: Traccar.Style.timeFormat,
         value: new Date(new Date().getTime() - 30 * 60 * 1000)
     }, '-', {
         xtype: 'tbtext',
@@ -63,10 +63,9 @@ Ext.define('Traccar.view.Report', {
         format: Traccar.Style.dateFormat,
         value: new Date()
     }, {
-        xtype: 'timefield',
+        xtype: 'customTimeField',
         reference: 'toTimeField',
         maxWidth: Traccar.Style.reportTime,
-        format: Traccar.Style.timeFormat,
         value: new Date()
     }, '-', {
         text: Strings.reportShow,