#49 recurring snapshots time localozation

src/app/app.routing.ts

@@ -1,7 +1,6 @@
 import { Routes } from '@angular/router';
 
 import { LoginComponent } from './auth/login.component';
-import { RecurringSnapshotsComponent } from './snapshot/recurring-snapshots/recurring-snapshots.component';
 import { LogoutComponent } from './auth/logout.component';
 import { EventListComponent } from './events/event-list.component';
 import { SgTemplateListComponent } from './security-group/sg-template-list/sg-template-list.component';

src/app/events/event-list.component.ts

@@ -5,8 +5,7 @@ import { Observable } from 'rxjs/Observable';
 
 import { FilterService } from '../shared';
 import { dateTimeFormat, formatIso } from '../shared/components/date-picker/dateUtils';
-import { LanguageService } from '../shared/services';
-import { TimeFormat } from '../shared/services/language.service';
+import { LanguageService, TimeFormats } from '../shared/services';
 import { Event } from './event.model';
 import { EventService } from './event.service';
 import { WithUnsubscribe } from '../utils/mixins/with-unsubscribe';
@@ -185,8 +184,8 @@ export class EventListComponent extends WithUnsubscribe() implements OnInit {
       timeZoneName: 'short'
     };
 
-    if (this.timeFormat !== TimeFormat.AUTO) {
-      options.hour12 = this.timeFormat === TimeFormats.hour24;
+    if (this.timeFormat !== TimeFormats.AUTO) {
+      options.hour12 = this.timeFormat === TimeFormats.hour12;
     }
     this.dateStringifyDateTimeFormat = new Intl.DateTimeFormat(this.locale, options);
   }

src/app/settings/settings.component.ts

@@ -3,8 +3,7 @@ import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
 import { TranslateService } from '@ngx-translate/core';
 
 import { Color, LanguageService, StyleService } from '../shared';
-import { AuthService, NotificationService } from '../shared/services';
-import { TimeFormat } from '../shared/services/language.service';
+import { AuthService, NotificationService, TimeFormats } from '../shared/services';
 import { UserService } from '../shared/services/user.service';
 import { WithUnsubscribe } from '../utils/mixins/with-unsubscribe';
 
@@ -21,7 +20,7 @@ export class SettingsComponent extends WithUnsubscribe() implements OnInit {
   public language: string;
   public primaryColor: Color;
   public primaryColors: Array<Color>;
-  public timeFormat: string = TimeFormat.AUTO;
+  public timeFormat: string = TimeFormats.AUTO;
 
   public passwordUpdateForm: FormGroup;
 
@@ -43,9 +42,9 @@ export class SettingsComponent extends WithUnsubscribe() implements OnInit {
     { value: 1, text: 'MONDAY' }
   ];
 
-  public TimeFormat = TimeFormat;
+  public TimeFormat = TimeFormats;
   // TODO replace when TypeScript 2.4 string enums land
-  public timeFormats = Object.keys(TimeFormat);
+  public timeFormats = Object.keys(TimeFormats);
 
   constructor(
     private authService: AuthService,

src/app/shared/services/language.service.ts

@@ -8,9 +8,10 @@ import { DayOfWeek } from '../types/day-of-week';
 
 const DEFAULT_LANGUAGE = 'en';
 
-export const TimeFormat = {
-  '12h': '12h',
-  '24h': '24h',
+export type TimeFormat = 'hour12' | 'hour24' | 'auto';
+export const TimeFormats = {
+  'hour12': 'hour12' as TimeFormat,
+  'hour24': 'hour24' as TimeFormat,
   AUTO: 'auto'
 };
 
@@ -59,16 +60,17 @@ export class LanguageService {
     return this.userService.readTag('timeFormat')
       .map(timeFormat => {
         switch (timeFormat) {
-          case TimeFormat['12h']:
-          case TimeFormat['24h']:
+          case TimeFormats.hour12:
+          case TimeFormats.hour24:
             return timeFormat;
-          default: return TimeFormat.AUTO;
+          default:
+            return TimeFormats.AUTO;
         }
       });
   }
 
   public setTimeFormat(timeFormat: string): Observable<string> {
-    return (timeFormat === TimeFormat.AUTO
+    return (timeFormat === TimeFormats.AUTO
       ? this.userService.removeTag('timeFormat')
       : this.userService.writeTag('timeFormat', timeFormat)).mapTo(timeFormat);
   }

src/app/snapshot/recurring-snapshots/policy-editor/daily/daily-policy.component.html

@@ -1,4 +1,5 @@
 <cs-time-picker
   name="time"
   [(ngModel)]="policy"
+  [timeFormat]="timeFormat"
 ></cs-time-picker>

src/app/snapshot/recurring-snapshots/policy-editor/daily/daily-policy.component.ts

@@ -1,13 +1,11 @@
 import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
-import { TranslateService } from '@ngx-translate/core';
-import { Observable } from 'rxjs/Observable';
 import { DayPeriodName } from '../../day-period/day-period.component';
 import { Time } from '../../time-picker/time-picker.component';
+import { TimeFormat } from '../../../../shared/services';
 
 
 export type DailyPolicy = Time;
-export type TimeFormat = 12 | 24;
 
 @Component({
   selector: 'cs-daily-policy',
@@ -21,25 +19,11 @@ export type TimeFormat = 12 | 24;
   ]
 })
 export class DailyPolicyComponent implements ControlValueAccessor {
+  @Input() public timeFormat: TimeFormat;
   public _time: Time;
 
   public periods: Array<DayPeriodName>;
 
-  public hoursMinValue = 0;
-
-  constructor(private translateService: TranslateService) {}
-
-  public get timeFormat(): TimeFormat {
-    return 24; // todo
-  }
-
-  public get hoursErrorMessage(): Observable<string> {
-    return this.translateService.get('BETWEEN', {
-      lowerLimit: this.hoursMinValue,
-      upperLimit: this.hoursMaxValue
-    });
-  }
-
   @Input()
   public get policy(): DailyPolicy {
     return this._time;
@@ -50,10 +34,6 @@ export class DailyPolicyComponent implements ControlValueAccessor {
     this.propagateChange(this.policy);
   }
 
-  private get hoursMaxValue(): number {
-    return this.timeFormat - 1;
-  }
-
   public propagateChange: any = () => {};
 
   public registerOnChange(fn): void {

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.html

@@ -1,6 +1,7 @@
 <div class="flex-container">
   <cs-time-picker
     name="time"
+    [timeFormat]="timeFormat"
     [ngModel]="time"
     (ngModelChange)="updateTime($event)"
   ></cs-time-picker>

src/app/snapshot/recurring-snapshots/policy-editor/monthly/monthly-policy.component.ts

@@ -2,6 +2,7 @@ import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs/Observable';
+import { TimeFormat } from '../../../../shared/services';
 import { Time } from '../../time-picker/time-picker.component';
 import isEqual = require('lodash/isEqual');
 import range = require('lodash/range');
@@ -24,6 +25,7 @@ export interface MonthlyPolicy extends Time {
   ]
 })
 export class MonthlyPolicyComponent implements ControlValueAccessor {
+  @Input() public timeFormat: TimeFormat;
   public time: Time;
   public dayOfMonth = 1;
   public daysOfMonth: Array<number> = range(1, 29);

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.html

@@ -14,18 +14,21 @@
       name="dailyPolicy"
       *ngSwitchCase="Policies.Daily"
       [(ngModel)]="policy"
+      [timeFormat]="timeFormat"
     ></cs-daily-policy>
 
     <cs-weekly-policy
       name="weeklyPolicy"
       *ngSwitchCase="Policies.Weekly"
       [(ngModel)]="policy"
+      [timeFormat]="timeFormat"
     ></cs-weekly-policy>
 
     <cs-monthly-policy
       name="monthlyPolicy"
       *ngSwitchCase="Policies.Monthly"
       [(ngModel)]="policy"
+      [timeFormat]="timeFormat"
     ></cs-monthly-policy>
   </div>
 

src/app/snapshot/recurring-snapshots/policy-editor/policy-editor.component.ts

@@ -5,6 +5,7 @@ import { DailyPolicy } from './daily/daily-policy.component';
 import { HourlyPolicy } from './hourly/hourly-policy.component';
 import { MonthlyPolicy } from './monthly/monthly-policy.component';
 import { WeeklyPolicy } from './weekly/weekly-policy.component';
+import { TimeFormat } from '../../../shared/services';
 
 
 export type TimePolicy = HourlyPolicy & DailyPolicy & WeeklyPolicy & MonthlyPolicy;
@@ -23,6 +24,7 @@ export interface Policy<T> {
   styleUrls: ['policy-editor.component.scss']
 })
 export class PolicyEditorComponent {
+  @Input() public timeFormat: TimeFormat;
   @Input() policyMode: PolicyType;
   @Output() onPolicySave: EventEmitter<Policy<TimePolicy>>;
 

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.html

@@ -1,6 +1,7 @@
 <div class="flex-container">
   <cs-time-picker
     name="time"
+    [timeFormat]="timeFormat"
     [ngModel]="time"
     (ngModelChange)="updateTime($event)"
   ></cs-time-picker>

src/app/snapshot/recurring-snapshots/policy-editor/weekly/weekly-policy.component.ts

@@ -3,6 +3,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DayOfWeek } from '../../../../shared/types/day-of-week';
 import { Time } from '../../time-picker/time-picker.component';
 import isEqual = require('lodash/isEqual');
+import { TimeFormat } from '../../../../shared/services';
 
 
 export interface WeeklyPolicy extends Time {
@@ -22,6 +23,8 @@ export interface WeeklyPolicy extends Time {
   ]
 })
 export class WeeklyPolicyComponent implements ControlValueAccessor {
+  @Input() public timeFormat: TimeFormat;
+
   public time: Time;
   public dayOfWeek: DayOfWeek;
 

src/app/snapshot/recurring-snapshots/policy-list/policy-list.component.scss

@@ -1,3 +1,39 @@
 table {
   width: 100%;
+  box-sizing: border-box;
+}
+
+table td:nth-child(1),
+table th:nth-child(1) {
+  width: 110px;
+  max-width: 110px;
+}
+
+table td:nth-child(2),
+table th:nth-child(2) {
+  width: 190px;
+  max-width: 190px;
+}
+
+table td:nth-child(3),
+table th:nth-child(3) {
+  width: 180px;
+  max-width: 180px;
+}
+
+table td:nth-child(4),
+table th:nth-child(4) {
+  width: 100px;
+  max-width: 100px;
+}
+
+table td:nth-child(5),
+table th:nth-child(5) {
+  width: 75px;
+  max-width: 75px;
+}
+
+table td:nth-child(3) {
+  overflow: hidden;
+  text-overflow: ellipsis;
 }

src/app/snapshot/recurring-snapshots/policy-list/policy-list.component.ts

@@ -1,6 +1,7 @@
-import { Component, EventEmitter, Input, OnChanges, Output } from '@angular/core';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { Observable } from 'rxjs/Observable';
+import { TimeFormat, TimeFormats } from '../../../shared/services';
 import { DayOfWeek } from '../../../shared/types/day-of-week';
 import { DailyPolicy } from '../policy-editor/daily/daily-policy.component';
 import { HourlyPolicy } from '../policy-editor/hourly/hourly-policy.component';
@@ -9,6 +10,7 @@ import { Policy, TimePolicy } from '../policy-editor/policy-editor.component';
 import { WeeklyPolicy } from '../policy-editor/weekly/weekly-policy.component';
 import { PolicyType } from '../recurring-snapshots.component';
 import { Time } from '../time-picker/time-picker.component';
+import DateTimeFormat = Intl.DateTimeFormat;
 
 
 interface PolicyView {
@@ -27,23 +29,33 @@ interface PolicyView {
   templateUrl: 'policy-list.component.html',
   styleUrls: ['policy-list.component.scss']
 })
-export class PolicyListComponent implements OnChanges {
-  @Input() hourlyPolicy: Policy<HourlyPolicy>;
-  @Input() dailyPolicy: Policy<DailyPolicy>;
-  @Input() weeklyPolicy: Policy<WeeklyPolicy>;
-  @Input() monthlyPolicy: Policy<MonthlyPolicy>;
-  @Output() onPolicyDelete: EventEmitter<Policy<TimePolicy>>;
+export class PolicyListComponent implements OnInit, OnChanges {
+  @Input() public timeFormat: TimeFormat;
+  @Input() public hourlyPolicy: Policy<HourlyPolicy>;
+  @Input() public dailyPolicy: Policy<DailyPolicy>;
+  @Input() public weeklyPolicy: Policy<WeeklyPolicy>;
+  @Input() public monthlyPolicy: Policy<MonthlyPolicy>;
+  @Output() public onPolicyDelete: EventEmitter<Policy<TimePolicy>>;
 
   public policies: Array<PolicyView>;
+  public dateStringifyDateTimeFormat: DateTimeFormat;
 
   constructor(private translateService: TranslateService) {
     this.onPolicyDelete = new EventEmitter<Policy<TimePolicy>>();
   }
 
+  public ngOnInit(): void {
+    this.setDateTimeFormat();
+  }
+
   public ngOnChanges(): void {
     this.updatePolicies();
   }
 
+  private get locale(): string {
+    return this.translateService.currentLang;
+  }
+
   public deletePolicy(policy: Policy<TimePolicy>): void {
     this.onPolicyDelete.next(policy);
   }
@@ -128,6 +140,19 @@ export class PolicyListComponent implements OnChanges {
       });
   }
 
+  private setDateTimeFormat(): void {
+    const options: Intl.DateTimeFormatOptions = {
+      hour: 'numeric',
+      minute: 'numeric'
+    };
+
+    if (this.timeFormat === TimeFormats.hour12 || this.timeFormat === TimeFormats.AUTO) {
+      options.hour12 = true;
+    }
+
+    this.dateStringifyDateTimeFormat = new Intl.DateTimeFormat(this.locale, options);
+  }
+
   private pad(value: any): string {
     return +value < 10 ? `0${+value}` : `${+value}`;
   }

src/app/snapshot/recurring-snapshots/recurring-snapshots.component.html

@@ -16,6 +16,7 @@ <h3 class="mdl-dialog__title">
 
   <div class="editor">
     <cs-policy-editor
+      [timeFormat]="timeFormat | async"
       [policyMode]="policyMode"
       (onPolicySave)="addPolicy($event)"
     ></cs-policy-editor>
@@ -26,6 +27,7 @@ <h3 class="mdl-dialog__title">
     class="list"
   >
     <cs-policy-list
+      [timeFormat]="timeFormat | async"
       [hourlyPolicy]="hourlyPolicy"
       [dailyPolicy]="dailyPolicy"
       [weeklyPolicy]="weeklyPolicy"