UI: timezone displaying refactoring

ui-ngx/src/app/shared/components/time/timewindow-panel.component.html

@@ -20,13 +20,12 @@
                  (selectedTabChange)="onTimewindowTypeChange()" [(selectedIndex)]="timewindow.selectedTab">
     <mat-tab label="{{ 'timewindow.realtime' | translate }}">
       <div class="tb-flex column">
-        <section class="tb-form-panel stroked"
-                 *ngIf="isEdit || !(timewindow.hideInterval || (timewindow.hideLastInterval && timewindow.hideQuickInterval))">
+        <section class="tb-form-panel stroked" *ngIf="realtimeIntervalSelectionAvailable; else timezoneSelectionPanel">
           <div class="tb-flex space-between"
-               [ngClass]="{'align-end': realtimeTimewindowOptions.length > 1, 'align-center': realtimeTimewindowOptions.length <= 1 }">
+               [ngClass]="{'align-end': realtimeTypeSelectionAvailable, 'align-center': !realtimeTypeSelectionAvailable }">
             <div class="tb-flex column">
               <div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
-              <ng-container formGroupName="realtime" *ngIf="realtimeTimewindowOptions.length > 1">
+              <ng-container formGroupName="realtime" *ngIf="realtimeTypeSelectionAvailable">
                 <tb-toggle-select appearance="fill" [options]="realtimeTimewindowOptions" formControlName="realtimeType"
                                   style="max-width: 100%">
                 </tb-toggle-select>
@@ -61,24 +60,18 @@
             </ng-container>
           </ng-container>
         </section>
-        <section class="tb-form-panel stroked tb-flex row align-center space-between"
-                 *ngIf="!isEdit && (timewindow.hideInterval || (timewindow.hideLastInterval && timewindow.hideQuickInterval))">
-          <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
-          <ng-container *ngTemplateOutlet="timezoneSelection">
-          </ng-container>
-        </section>
         <ng-container *ngTemplateOutlet="aggregationConfig">
         </ng-container>
       </div>
     </mat-tab>
     <mat-tab label="{{ 'timewindow.history' | translate }}">
       <div class="tb-flex column">
-        <section class="tb-form-panel stroked" *ngIf="isEdit || !timewindow.hideInterval">
+        <section class="tb-form-panel stroked" *ngIf="historyIntervalSelectionAvailable; else timezoneSelectionPanel">
           <div class="tb-flex space-between"
-               [ngClass]="{'align-end': historyTimewindowOptions.length > 1, 'align-center': historyTimewindowOptions.length <= 1 }">
+               [ngClass]="{'align-end': historyTypeSelectionAvailable, 'align-center': !historyTypeSelectionAvailable }">
             <div class="tb-flex column">
               <div class="tb-form-panel-title">{{ 'timewindow.time-range' | translate }}</div>
-              <ng-container formGroupName="history" *ngIf="historyTimewindowOptions.length > 1">
+              <ng-container formGroupName="history" *ngIf="historyTypeSelectionAvailable">
                 <tb-toggle-select appearance="fill" [options]="historyTimewindowOptions" formControlName="historyType"
                                   style="max-width: 100%">
                 </tb-toggle-select>
@@ -122,12 +115,6 @@
             </ng-container>
           </ng-container>
         </section>
-        <section class="tb-form-panel stroked tb-flex row align-center space-between"
-                 *ngIf="!isEdit && timewindow.hideInterval">
-          <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
-          <ng-container *ngTemplateOutlet="timezoneSelection">
-          </ng-container>
-        </section>
         <ng-container *ngTemplateOutlet="aggregationConfig">
         </ng-container>
       </div>
@@ -196,6 +183,13 @@
       </section>
     </div>
   </ng-template>
+  <ng-template #timezoneSelectionPanel>
+    <section class="tb-form-panel stroked tb-flex row align-center space-between">
+      <div class="tb-form-panel-title">{{ 'timezone.timezone' | translate }}</div>
+      <ng-container *ngTemplateOutlet="timezoneSelection">
+      </ng-container>
+    </section>
+  </ng-template>
   <ng-template #timezoneSelection>
     <ng-container *ngIf="timezone && (isEdit || !timewindow.hideTimezone)">
       <tb-timezone asButton strokedButton noMargin

ui-ngx/src/app/shared/components/time/timewindow-panel.component.ts

@@ -102,6 +102,11 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
     }
   ];
 
+  realtimeTypeSelectionAvailable: boolean;
+  realtimeIntervalSelectionAvailable: boolean;
+  historyTypeSelectionAvailable: boolean;
+  historyIntervalSelectionAvailable: boolean;
+
   constructor(@Inject(TIMEWINDOW_PANEL_DATA) public data: TimewindowPanelData,
               public overlayRef: OverlayRef,
               protected store: Store<AppState>,
@@ -138,6 +143,12 @@ export class TimewindowPanelComponent extends PageComponent implements OnInit {
         value: this.realtimeTypes.INTERVAL
       });
     }
+
+    this.realtimeTypeSelectionAvailable = this.realtimeTimewindowOptions.length > 1;
+    this.historyTypeSelectionAvailable = this.historyTimewindowOptions.length > 1;
+    this.realtimeIntervalSelectionAvailable = this.isEdit || !(this.timewindow.hideInterval ||
+      (this.timewindow.hideLastInterval && this.timewindow.hideQuickInterval));
+    this.historyIntervalSelectionAvailable = this.isEdit || !this.timewindow.hideInterval;
   }
 
   ngOnInit(): void {