import { Component , OnInit , Renderer2 } from '@angular/core' ; import { LogService } from '../../services/log.service' ; import { ActivatedRoute } from '@angular/router' ; import { CmdbLog } from '../../models/cmdb-log' ; import { RenderResult } from '../../models/cmdb-render' ; import { CmdbMode } from '../../modes.enum' ; import { FormGroup } from '@angular/forms' ; @ Component ( { selector : 'cmdb-object-log' , templateUrl : './object-log.component.html' , styleUrls : [ './object-log.component.scss' ] } ) export class ObjectLogComponent implements OnInit { private logID : number ; public log : CmdbLog ; public completeLogList : CmdbLog [ ] ; public mode : CmdbMode . View ; public renderForm : FormGroup ; public compareForm : FormGroup ; public renderResult : RenderResult ; public compareResult : RenderResult ; constructor ( private logService , private activateRoute , private render ) { this . renderForm = new FormGroup ( { } ) ; this . compareForm = new FormGroup ( { } ) ; this . activateRoute . params . subscribe ( ( params ) => { this . logID = params . publicID ; } ) ; } public ngOnInit ( ) { this . logService . getLog ( this . logID ) . subscribe ( ( log ) => { this . log = log ; this . renderResult = JSON . parse ( this . log . render_state ) ; } , ( error ) => { console . error ( error ) ; } , ( ) => { this . logService . getCorrespondingLogs ( this . logID ) . subscribe ( ( logs ) => { this . completeLogList = logs ; } ) ; } ) ; } public loadCompareRender ( logID ) { const selectedCompareLog = this . completeLogList . filter ( compareLog => compareLog . public_id == logID ) [ 0 ] ; if ( selectedCompareLog . render_state !== undefined ) { this . compareForm = new FormGroup ( { } ) ; this . compareResult = JSON . parse ( selectedCompareLog . render_state ) ; } this . markDifferences ( ) ; } private markDifferences ( ) { const changedInField = this . renderResult . fields . filter ( this . comparer ( this . compareResult . fields ) ) ; Object . keys ( this . renderForm . controls ) . forEach ( key => { const currentSelector = `input[name='${ key }']` ; document . querySelector ( currentSelector ) . classList . remove ( 'bg-success' ) ; document . querySelector ( currentSelector ) . classList . remove ( 'text-white' ) ; if ( changedInField . some ( ( item ) => item . name === key ) ) { document . querySelector ( currentSelector ) . classList . add ( 'bg-success' ) ; document . querySelector ( currentSelector ) . classList . add ( 'text-white' ) ; } } ) ; } private comparer ( otherArray ) { return ( current ) => { return otherArray . filter ( ( other ) => { return other . value === current . value && other . name === current . name ; } ) . length === 0 ; } ; } }