From 098f42040bd4b5a3b6d72d4cbc45296cd582c783 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 17 Mar 2021 19:41:52 +0200
Subject: [PATCH] UI: Added show timezone Abbr in timewindow component

---
 .../app/shared/components/time/timewindow.component.html | 2 +-
 .../app/shared/components/time/timewindow.component.scss | 4 ++++
 .../app/shared/components/time/timewindow.component.ts   | 9 ++++++++-
 ui-ngx/src/app/shared/models/time/time.models.ts         | 5 ++++-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.html b/ui-ngx/src/app/shared/components/time/timewindow.component.html
index ca94da4394..4f9855ed3e 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.html
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.html
@@ -34,7 +34,7 @@
         (click)="openEditMode()"
         matTooltip="{{ 'timewindow.edit' | translate }}"
         [matTooltipPosition]="tooltipPosition">
-    {{innerValue?.displayValue}}
+    {{innerValue?.displayValue}} <span [fxShow]="innerValue?.displayTimezoneAbbr !== ''">| <span class="timezone-abbr">{{innerValue.displayTimezoneAbbr}}</span></span>
   </span>
   <button *ngIf="direction === 'right'" [disabled]="timewindowDisabled" mat-icon-button class="tb-mat-32"
           type="button"
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.scss b/ui-ngx/src/app/shared/components/time/timewindow.component.scss
index 2c55741e8d..bac1f63853 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.scss
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.scss
@@ -27,5 +27,9 @@
       pointer-events: all;
       cursor: pointer;
     }
+
+    .timezone-abbr {
+      font-weight: 500;
+    }
   }
 }
diff --git a/ui-ngx/src/app/shared/components/time/timewindow.component.ts b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
index 6046cb5efa..0169feaae7 100644
--- a/ui-ngx/src/app/shared/components/time/timewindow.component.ts
+++ b/ui-ngx/src/app/shared/components/time/timewindow.component.ts
@@ -31,6 +31,7 @@ import { TranslateService } from '@ngx-translate/core';
 import { MillisecondsToTimeStringPipe } from '@shared/pipe/milliseconds-to-time-string.pipe';
 import {
   cloneSelectedTimewindow,
+  getTimezoneInfo,
   HistoryWindowType,
   initModelFromDefaultTimewindow,
   QuickTimeIntervalTranslationMap,
@@ -51,7 +52,7 @@ import { BreakpointObserver } from '@angular/cdk/layout';
 import { WINDOW } from '@core/services/window.service';
 import { TimeService } from '@core/services/time.service';
 import { TooltipPosition } from '@angular/material/tooltip';
-import { deepClone } from '@core/utils';
+import { deepClone, isDefinedAndNotNull } from '@core/utils';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 // @dynamic
@@ -306,6 +307,12 @@ export class TimewindowComponent implements OnInit, OnDestroy, ControlValueAcces
         this.innerValue.displayValue += this.translate.instant('timewindow.period', {startTime: startString, endTime: endString});
       }
     }
+    if (isDefinedAndNotNull(this.innerValue.timezone) && this.innerValue.timezone !== '') {
+      this.innerValue.displayValue += ' ';
+      this.innerValue.displayTimezoneAbbr = getTimezoneInfo(this.innerValue.timezone).abbr;
+    } else {
+      this.innerValue.displayTimezoneAbbr = '';
+    }
   }
 
   hideLabel() {
diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts
index a555590350..b4a83992ed 100644
--- a/ui-ngx/src/app/shared/models/time/time.models.ts
+++ b/ui-ngx/src/app/shared/models/time/time.models.ts
@@ -92,6 +92,7 @@ export interface Aggregation {
 
 export interface Timewindow {
   displayValue?: string;
+  displayTimezoneAbbr?: string;
   hideInterval?: boolean;
   hideAggregation?: boolean;
   hideAggInterval?: boolean;
@@ -731,6 +732,7 @@ export interface TimezoneInfo {
   name: string;
   offset: string;
   nOffset: number;
+  abbr: string;
 }
 
 let timezones: TimezoneInfo[] = null;
@@ -744,7 +746,8 @@ export function getTimezones(): TimezoneInfo[] {
         id: zoneName,
         name: zoneName.replace(/_/g, ' '),
         offset: `UTC${tz.format('Z')}`,
-        nOffset: tz.utcOffset()
+        nOffset: tz.utcOffset(),
+        abbr: tz.zoneAbbr()
       };
     });
   }