module Sfx { export class DoubleSliderDirective implements ng . IDirective { public restrict = "E" ; public replace = true ; public templateUrl = "partials/double-slider-directive.html" ; public scope = { startDate : "=" , endDate : "=" , } ; public link ( $scope , element , attributes ) { const forceUpdate = ( ) => { _ . defer ( function ( ) { $scope . $apply ( ) ; } ) ; } ; $scope . $watchGroup ( [ "startDate" , "endDate" ] , ( ) => { if ( $scope . startDate && $scope . endDate ) { if ( ! $scope . slider ) { $scope . slider = noUiSlider . create ( element [ 0 ] , { format : { to : num => { const date = new Date ( num ) ; return date . toLocaleString ( "en-us" ) ; } , from : Number } , tooltips : true , connect : true , range : { min : TimeUtils . AddDays ( new Date ( ) , - 30 ) . getTime ( ) , max : new Date ( ) . getTime ( ) , } , step : 60 * 1000 , start : [ new Date ( $scope . startDate ) . getTime ( ) , new Date ( $scope . endDate ) . getTime ( ) ] } ) ; $scope . slider . on ( "set" , ( data ) => { const end = new Date ( data [ 1 ] ) ; const start = new Date ( data [ 0 ] ) ; if ( $scope . endDate . toUTCString ( ) !== end . toUTCString ( ) ) { $scope . endDate = end ; forceUpdate ( ) ; } if ( $scope . startDate . toUTCString ( ) !== start . toUTCString ( ) ) { $scope . startDate = start ; forceUpdate ( ) ; } } ) ; } $scope . slider . set ( [ new Date ( $scope . startDate ) . getTime ( ) , new Date ( $scope . endDate ) . getTime ( ) ] ) ; } } ) ; } } }