import * as moment from 'moment' ; import 'moment-timezone' ; import { Component , OnDestroy , OnInit } from '@angular/core' ; import { AbstractControl , FormControl , FormGroup , Validators } from '@angular/forms' ; import { DateSettingsService } from '../services/date-settings.service' ; import { takeUntil } from 'rxjs/operators' ; import { ReplaySubject } from 'rxjs' ; import { ToastService } from '../../layout/toast/toast.service' ; @ Component ( { selector : 'cmdb-date-settings' , templateUrl : './date-settings.component.html' , styleUrls : [ './date-settings.component.scss' ] } ) export class DateSettingsComponent implements OnInit , OnDestroy { private private subscriber : ReplaySubject < void > = new ReplaySubject < void > ( ) ; /**
     * All time zones of MomentTimezone
     */ public tzNames : string [ ] = moment . tz . names ( ) ; /**
     * Example view for date format with selected settings
     */ public displayTzF : string ; /**
     * ISO 8601 date formats
     */ public formats : any [ ] = [ { id : 'short' , format : 'YYYY-MM-DD' , view : '2013-07-16' } , { id : 'medium' , format : 'YYYY-MM-DDTHH' , view : '2013-07-16T19' } , { id : 'mediumZ' , format : 'YYYY-MM-DDTHHZ' , view : '2013-07-16T19Z' } , { id : 'long' , format : 'YYYY-MM-DDTHH:mm' , view : '2013-07-16T19:23' } , { id : 'longZ' , format : 'YYYY-MM-DDTHH:mmZ' , view : '2013-07-16T19:23Z' } , { id : 'full' , format : 'YYYY-MM-DDTHH:mm:ss' , view : '2013-07-16T19:23:51Z' } , { id : 'fullZ' , format : 'YYYY-MM-DDTHH:mm:ssZ' , view : '2013-07-16T19:23:51Z' } ] ; /**
     * FromGroup Regional Settings
     */ public regionalForm : FormGroup ; constructor ( private dateSettingsService , private toast ) { this . regionalForm = new FormGroup ( { date_format : new FormControl ( 'YYYY-MM-DD' , Validators . required ) , timezone : new FormControl ( moment . tz . guess ( true ) ) , } ) ; } ngOnInit ( ) { this . dateSettingsService . getDateSettings ( ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( dateSettings ) => { this . regionalForm . patchValue ( dateSettings ) ; } ) ; this . regionalForm . valueChanges . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( ) => { this . updateFormatView ( ) ; } ) ; this . updateFormatView ( ) ; } /**
     * return controller from formGroup by name
     */ public getController ( name ) { return this . regionalForm . get ( name ) ; } /**
     * return current format value from formGroup
     */ public get format ( ) : string { return this . regionalForm . get ( 'date_format' ) . value ; } /**
     * return current timezone value from formGroup
     */ public get timezone ( ) : string { return this . regionalForm . get ( 'timezone' ) . value ; } /**
     * Update example view for date format with selected settings
     */ public updateFormatView ( ) { this . displayTzF = moment . tz ( moment ( ) , this . timezone ) . format ( this . format ) ; } param timezone public utcToDeviceString ( timezone ) { const utc = moment . tz ( moment ( ) , timezone ) . format ( '( UTC Z )' ) ; return timezone + ' ' + utc ; } public onSave ( ) { if ( this . regionalForm . valid ) { this . dateSettingsService . postDateSettings ( this . regionalForm . getRawValue ( ) ) . pipe ( takeUntil ( this . subscriber ) ) . subscribe ( ( ) => { this . toast . success ( 'Date Settings config was updated!' ) ; } ) ; } } public ngOnDestroy ( ) { this . subscriber . next ( ) ; this . subscriber . complete ( ) ; } }