Support 12 hour format in web

6 files changed, 48 insertions, 10 deletions

diff --git a/web/app/AttributeFormatter.js b/web/app/AttributeFormatter.js
index 1cbc1cfc0..3432ca1e0 100644
--- a/web/app/AttributeFormatter.js
+++ b/web/app/AttributeFormatter.js
@@ -40,7 +40,11 @@ Ext.define('Traccar.AttributeFormatter', {
         } else if (typeof value === 'boolean') {
             return value ? Ext.Msg.buttonText.yes : Ext.Msg.buttonText.no;
         } else if (value instanceof Date) {
-            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);
+            }
         }
         return value;
     },
diff --git a/web/app/Style.js b/web/app/Style.js
index f4868aec3..309a3937e 100644
--- a/web/app/Style.js
+++ b/web/app/Style.js
@@ -22,8 +22,10 @@ Ext.define('Traccar.Style', {
     windowWidth: 640,
     windowHeight: 480,
 
-    dateTimeFormat: 'Y-m-d H:i:s',
-    timeFormat: 'H:i',
+    dateTimeFormat24: 'Y-m-d H:i:s',
+    dateTimeFormat12: 'Y-m-d g:i:s a',
+    timeFormat24: 'H:i',
+    timeFormat12: 'g:i a',
     dateFormat: 'Y-m-d',
     weekStartDay: 1,
 
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,