#323 implement date time formatter service

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

@@ -4,14 +4,15 @@
       <cs-date-picker
         [okLabel]="'OK' | translate"
         [locale]="locale"
-        [firstDayOfWeek]="firstDayOfWeek"
-        [DateTimeFormat]="dateTimeFormat"
+        [firstDayOfWeek]="languageService.firstDayOfWeek.getValue()"
+        [DateTimeFormat]="dateTimeFormatterService.dateTimeFormat"
         [cancelLabel]="'CANCEL' | translate"
         [(ngModel)]="date"
         (change)="getEvents({ reload: true })"
       ></cs-date-picker>
 
       <md-select
+        class="level-selector"
         [(ngModel)]="selectedLevels"
         (change)="getEvents()"
         multiple="true"

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

@@ -70,3 +70,7 @@ md-select {
 /deep/ .mdl-layout__content {
   display: flex;
 }
+
+md-select {
+  width: 170px;
+}

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

@@ -9,6 +9,7 @@ import { Event } from './event.model';
 import { EventService } from './event.service';
 import { DateTimeFormatterService } from '../shared/services/date-time-formatter.service';
 import moment = require('moment');
+import { LanguageService } from '../shared/services/language.service';
 
 
 @Component({
@@ -32,10 +33,11 @@ export class EventListComponent implements OnInit {
   public eventTypes: Array<string>;
   public levels = ['INFO', 'WARN', 'ERROR'];
 
-
   private filtersKey = 'eventListFilters';
 
   constructor(
+    public dateTimeFormatterService: DateTimeFormatterService,
+    public languageService: LanguageService,
     private dateService: DateTimeFormatterService,
     private eventService: EventService,
     private filterService: FilterService,
@@ -48,7 +50,7 @@ export class EventListComponent implements OnInit {
     this.translate.get(['DESCRIPTION', 'LEVEL', 'TYPE', 'TIME'])
       .subscribe(translations => this.initTableModel(translations));
     this.initFilters();
-
+    this.getEvents({ reload: true });
   }
 
   public get locale(): string {

src/app/settings/settings.component.ts

@@ -127,7 +127,7 @@ export class SettingsComponent extends WithUnsubscribe() implements OnInit {
   public firstDayOfWeekChange(change: MdSelectChange): void {
     this.firstDayOfWeek = change.value;
     this.updatingFirstDayOfWeek = true;
-    this.userService.writeTag('firstDayOfWeek', '' + change.value)
+    this.languageService.setFirstDayOfWeek(change.value)
       .finally(() => this.updatingFirstDayOfWeek = false)
       .subscribe();
   }

src/app/shared/services/date-time-formatter.service.ts

@@ -1,33 +1,20 @@
 import { Injectable } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
-import { LanguageService, TimeFormats } from './language.service';
+import { LanguageService, TimeFormat } from './language.service';
 import { dateTimeFormat as enDateTimeFormat } from '../../shared/components/date-picker/dateUtils';
 
 
 @Injectable()
 export class DateTimeFormatterService {
   public formatter: any;
-  public timeFormat: string;
 
   constructor(
     private languageService: LanguageService,
     private translateService: TranslateService
   ) {
-    this.setDateTimeFormat();
-    this.translateService.onLangChange
-      .subscribe(() => this.setDateTimeFormat());
-
-    this.languageService.onTimeFormatChange
-      .subscribe(timeFormat => {
-        this.timeFormat = timeFormat;
-        this.setDateTimeFormat();
-
-        // this.getEvents({ reload: true });
-      });
-
-    this.translateService.onLangChange
-      .subscribe(() => this.setDateTimeFormat());
-
+    this.initializeFormatter();
+    this.subscribeToLanguageUpdates();
+    this.subscribeToTimeFormatUpdates();
   }
 
   public get dateTimeFormat(): any {
@@ -40,29 +27,54 @@ export class DateTimeFormatterService {
     }
   }
 
-  private get formatterOptions(): any {
+  public stringifyDate(date: Date): string {
+    if (this.formatter) {
+      return this.formatter.format(date);
+    }
+
+    return '';
+  }
+
+  private updateFormatter(timeFormat: any): void {
+    this.formatter = new Intl.DateTimeFormat(
+      this.translateService.currentLang,
+      this.getFormatterOptions(timeFormat)
+    );
+  }
+
+  private getFormatterOptions(timeFormat: any): any {
     const options: Intl.DateTimeFormatOptions = {
       hour: 'numeric',
       minute: 'numeric',
       second: 'numeric',
       timeZoneName: 'short'
     };
 
-    if (this.timeFormat !== TimeFormats.AUTO) {
-      options.hour12 = this.timeFormat === TimeFormats['12h'];
+    if (timeFormat !== TimeFormat.AUTO) {
+      options.hour12 = timeFormat === TimeFormat['12h'];
     }
 
     return options;
   }
 
-  public stringifyDate(date: Date): string {
-    return this.formatter.format(date);
+  private initializeFormatter(): void {
+    this.languageService.getTimeFormat()
+      .subscribe(timeFormat => {
+        this.updateFormatter(timeFormat);
+      });
   }
 
-  private setDateTimeFormat(): void {
-    this.formatter = new Intl.DateTimeFormat(
-      this.translateService.currentLang,
-      this.formatterOptions
-    );
+  private subscribeToLanguageUpdates(): void {
+    this.translateService.onLangChange
+      .subscribe(() => {
+        this.updateFormatter(this.languageService.timeFormat.getValue());
+      });
+  }
+
+  private subscribeToTimeFormatUpdates(): void {
+    this.languageService.timeFormat
+      .subscribe(timeFormat => {
+        this.updateFormatter(timeFormat);
+      });
   }
 }

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

@@ -16,13 +16,17 @@ export const TimeFormat = {
 
 @Injectable()
 export class LanguageService {
-  public onTimeFormatChange = new BehaviorSubject<string>(TimeFormat.AUTO);
+  public firstDayOfWeek = new BehaviorSubject<number>(undefined);
+  public timeFormat = new BehaviorSubject<string>(undefined);
 
   constructor(
     private storage: StorageService,
     private translate: TranslateService,
     private userService: UserService
-  ) {}
+  ) {
+    this.initializeFirstDayOfWeek();
+    this.initializeTimeFormat();
+  }
 
   public getLanguage(): Observable<string> {
     return this.userService.readTag('lang').map(lang => {
@@ -57,14 +61,21 @@ export class LanguageService {
       });
   }
 
+  public setFirstDayOfWeek(day: number): Observable<number> {
+    return this.userService.writeTag('firstDayOfWeek', '' + day)
+      .mapTo(day)
+      .do(_ => this.firstDayOfWeek.next(day))
+  }
+
   public getTimeFormat(): Observable<string> {
     return this.userService.readTag('timeFormat')
       .map(timeFormat => {
         switch (timeFormat) {
           case TimeFormat['12h']:
           case TimeFormat['24h']:
             return timeFormat;
-          default: return TimeFormat.AUTO;
+          default:
+            return TimeFormat.AUTO;
         }
       });
   }
@@ -76,7 +87,7 @@ export class LanguageService {
         : this.userService.writeTag('timeFormat', timeFormat)
     )
       .map(() => timeFormat)
-      .do(_ => this.onTimeFormatChange.next(_));
+      .do(_ => this.timeFormat.next(_));
   }
 
   private get defaultLanguage(): string {
@@ -86,4 +97,16 @@ export class LanguageService {
     }
     return DEFAULT_LANGUAGE;
   }
+
+  private initializeFirstDayOfWeek(): void {
+    this.getFirstDayOfWeek().subscribe(firstDayOfWeek => {
+      this.firstDayOfWeek.next(firstDayOfWeek);
+    });
+  }
+
+  private initializeTimeFormat(): void {
+    this.getTimeFormat().subscribe(timeFormat => {
+      this.timeFormat.next(timeFormat);
+    });
+  }
 }