UI: Add time format for timeseries table

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.html

@@ -36,6 +36,19 @@
     <mat-slide-toggle class="mat-slide"  formControlName="showMilliseconds">
       {{ 'widgets.table.display-milliseconds' | translate }}
     </mat-slide-toggle>
+    <div class="tb-form-row space-between column-xs">
+      <div translate>widgets.table.time-format</div>
+      <mat-form-field appearance="outline" subscriptSizing="dynamic">
+        <mat-select formControlName="timeFormat">
+          <mat-option [value]="'12h'">
+            {{ 'widgets.table.time-format-12h' | translate }}
+          </mat-option>
+          <mat-option [value]="'24h'">
+            {{ 'widgets.table.time-format-24h' | translate }}
+          </mat-option>
+        </mat-select>
+      </mat-form-field>
+    </div>
     <mat-slide-toggle class="mat-slide"  formControlName="enableStickyAction">
       {{ 'widgets.table.enable-sticky-action' | translate }}
     </mat-slide-toggle>

ui-ngx/src/app/modules/home/components/widget/lib/settings/cards/timeseries-table-widget-settings.component.ts

@@ -48,6 +48,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       reserveSpaceForHiddenAction: 'true',
       showTimestamp: true,
       showMilliseconds: false,
+      timeFormat: '24h',
       displayPagination: true,
       useEntityLabel: false,
       defaultPageSize: 10,
@@ -68,6 +69,7 @@ export class TimeseriesTableWidgetSettingsComponent extends WidgetSettingsCompon
       reserveSpaceForHiddenAction: [settings.reserveSpaceForHiddenAction, []],
       showTimestamp: [settings.showTimestamp, []],
       showMilliseconds: [settings.showMilliseconds, []],
+      timeFormat: [settings.timeFormat, []],
       displayPagination: [settings.displayPagination, []],
       useEntityLabel: [settings.useEntityLabel, []],
       defaultPageSize: [settings.defaultPageSize, [Validators.min(1)]],

ui-ngx/src/app/modules/home/components/widget/lib/timeseries-table-widget.component.ts

@@ -99,6 +99,7 @@ export interface TimeseriesTableWidgetSettings extends TableWidgetSettings {
   showTimestamp: boolean;
   showMilliseconds: boolean;
   hideEmptyLines: boolean;
+  timeFormat: '12h' | '24h';
 }
 
 interface TimeseriesWidgetLatestDataKeySettings extends TableWidgetDataKeySettings {
@@ -320,7 +321,8 @@ export class TimeseriesTableWidgetComponent extends PageComponent implements OnI
     this.hideEmptyLines = isDefined(this.settings.hideEmptyLines) ? this.settings.hideEmptyLines : false;
     this.useEntityLabel = isDefined(this.widgetConfig.settings.useEntityLabel) ? this.widgetConfig.settings.useEntityLabel : false;
     this.showTimestamp = this.settings.showTimestamp !== false;
-    this.dateFormatFilter = (this.settings.showMilliseconds !== true) ? 'yyyy-MM-dd HH:mm:ss' :  'yyyy-MM-dd HH:mm:ss.SSS';
+    const timeFormat: '12h' | '24h' = isDefined(this.settings.timeFormat) ? this.settings.timeFormat : '24h';
+    this.dateFormatFilter = `yyyy-MM-dd ${timeFormat === '24h' ? 'HH' : 'hh'}:mm:ss${this.settings.showMilliseconds ? '.SSS' : ''}`;
 
     this.rowStylesInfo = getRowStyleInfo(this.settings, 'rowData, ctx');
 

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -6318,7 +6318,10 @@
             "timeseries-column-error": "At least one timeseries column should be specified",
             "alarm-column-error": "At least one alarm column should be specified",
             "table-tabs": "Table tabs",
-            "show-cell-actions-menu-mobile": "Show cell actions dropdown menu in mobile mode"
+            "show-cell-actions-menu-mobile": "Show cell actions dropdown menu in mobile mode",
+            "time-format": "Time format",
+            "time-format-12h": "12H",
+            "time-format-24h": "24H"
         },
         "wind-speed-direction": {
             "layout": "Layout",