Igor Kulikov
2 years ago
17 changed files with 898 additions and 44 deletions
File diff suppressed because one or more lines are too long
@ -0,0 +1,416 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
DataLayerColorProcessor, |
|||
DataLayerPatternProcessor, |
|||
MapDataLayerType, TbDataLayerItem, |
|||
TbMapDataLayer, |
|||
UnplacedMapDataItem |
|||
} from '@home/components/widget/lib/maps/data-layer/map-data-layer'; |
|||
import { |
|||
BaseMarkerShapeSettings, ClusterMarkerColorFunction, |
|||
DataLayerColorType, defaultBaseMarkersDataLayerSettings, defaultBaseTripsDataLayerSettings, |
|||
loadImageWithAspect, |
|||
MapStringFunction, MapType, |
|||
MarkerIconInfo, |
|||
MarkerIconSettings, |
|||
MarkerImageFunction, |
|||
MarkerImageInfo, |
|||
MarkerImageSettings, |
|||
MarkerImageType, |
|||
MarkerPositionFunction, MarkersDataLayerSettings, |
|||
MarkerShapeSettings, |
|||
MarkerType, |
|||
TbMapDatasource, |
|||
TripsDataLayerSettings |
|||
} from '@home/components/widget/lib/maps/models/map.models'; |
|||
import { forkJoin, Observable, of } from 'rxjs'; |
|||
import { FormattedData } from '@shared/models/widget.models'; |
|||
import { |
|||
createColorMarkerIconElement, |
|||
createColorMarkerShapeURI, |
|||
MarkerShape |
|||
} from '@home/components/widget/lib/maps/models/marker-shape.models'; |
|||
import tinycolor from 'tinycolor2'; |
|||
import { MatIconRegistry } from '@angular/material/icon'; |
|||
import { DomSanitizer } from '@angular/platform-browser'; |
|||
import { catchError, map, switchMap } from 'rxjs/operators'; |
|||
import L from 'leaflet'; |
|||
import { CompiledTbFunction } from '@shared/models/js-function.models'; |
|||
import { isDefined, isDefinedAndNotNull, parseTbFunction, safeExecuteTbFunction } from '@core/utils'; |
|||
import { ImagePipe } from '@shared/pipe/image.pipe'; |
|||
import { TbMap } from '@home/components/widget/lib/maps/map'; |
|||
import { DataKeyType } from '@shared/models/telemetry/telemetry.models'; |
|||
|
|||
abstract class TripMarkerIconProcessor<S> { |
|||
|
|||
static fromSettings(dataLayer: TbTripsDataLayer, |
|||
settings: TripsDataLayerSettings): TripMarkerIconProcessor<any> { |
|||
switch (settings.markerType) { |
|||
case MarkerType.shape: |
|||
return new ShapeTripMarkerIconProcessor(dataLayer, settings.markerShape); |
|||
case MarkerType.icon: |
|||
return new IconTripMarkerIconProcessor(dataLayer, settings.markerIcon); |
|||
case MarkerType.image: |
|||
return new ImageTripMarkerIconProcessor(dataLayer, settings.markerImage); |
|||
} |
|||
} |
|||
|
|||
protected constructor(protected dataLayer: TbTripsDataLayer, |
|||
protected settings: S) {} |
|||
|
|||
public abstract setup(): Observable<void>; |
|||
|
|||
public abstract createMarkerIcon(data: FormattedData<TbMapDatasource>, |
|||
dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo>; |
|||
|
|||
} |
|||
|
|||
abstract class BaseColorTripMarkerShapeProcessor<S extends BaseMarkerShapeSettings> extends TripMarkerIconProcessor<S> { |
|||
|
|||
private markerColorFunction: CompiledTbFunction<MapStringFunction>; |
|||
|
|||
protected constructor(protected dataLayer: TbTripsDataLayer, |
|||
protected settings: S) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
public setup(): Observable<void> { |
|||
const colorSettings = this.settings.color; |
|||
if (colorSettings.type === DataLayerColorType.function) { |
|||
return parseTbFunction<MapStringFunction>(this.dataLayer.getCtx().http, colorSettings.colorFunction, ['data', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.markerColorFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
return of(null); |
|||
} |
|||
} |
|||
|
|||
public createMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo> { |
|||
const colorSettings = this.settings.color; |
|||
let color: tinycolor.Instance; |
|||
if (colorSettings.type === DataLayerColorType.function) { |
|||
const functionColor = safeExecuteTbFunction(this.markerColorFunction, [data, dsData]); |
|||
if (isDefinedAndNotNull(functionColor)) { |
|||
color = tinycolor(functionColor); |
|||
} else { |
|||
color = tinycolor(colorSettings.color); |
|||
} |
|||
} else { |
|||
color = tinycolor(colorSettings.color); |
|||
} |
|||
return this.createMarkerShape(color, data.rotationAngle, this.settings.size); |
|||
} |
|||
|
|||
protected abstract createMarkerShape(color: tinycolor.Instance, rotationAngle: number, size: number): Observable<MarkerIconInfo>; |
|||
} |
|||
|
|||
class ShapeTripMarkerIconProcessor extends BaseColorTripMarkerShapeProcessor<MarkerShapeSettings> { |
|||
|
|||
constructor(protected dataLayer: TbTripsDataLayer, |
|||
protected settings: MarkerShapeSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
protected createMarkerShape(color: tinycolor.Instance, rotationAngle: number, size: number): Observable<MarkerIconInfo> { |
|||
return this.dataLayer.createColoredMarkerShape(this.settings.shape, color, rotationAngle, size); |
|||
} |
|||
|
|||
} |
|||
|
|||
class IconTripMarkerIconProcessor extends BaseColorTripMarkerShapeProcessor<MarkerIconSettings> { |
|||
|
|||
constructor(protected dataLayer: TbTripsDataLayer, |
|||
protected settings: MarkerIconSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
protected createMarkerShape(color: tinycolor.Instance, rotationAngle: number, size: number): Observable<MarkerIconInfo> { |
|||
return this.dataLayer.createColoredMarkerIcon(this.settings.icon, color, rotationAngle, size); |
|||
} |
|||
|
|||
} |
|||
|
|||
class ImageTripMarkerIconProcessor extends TripMarkerIconProcessor<MarkerImageSettings> { |
|||
|
|||
private markerImageFunction: CompiledTbFunction<MarkerImageFunction>; |
|||
|
|||
constructor(protected dataLayer: TbTripsDataLayer, |
|||
protected settings: MarkerImageSettings) { |
|||
super(dataLayer, settings); |
|||
} |
|||
|
|||
public setup(): Observable<void> { |
|||
if (this.settings.type === MarkerImageType.function) { |
|||
return parseTbFunction<MarkerImageFunction>(this.dataLayer.getCtx().http, this.settings.imageFunction, ['data', 'images', 'dsData']).pipe( |
|||
map((parsed) => { |
|||
this.markerImageFunction = parsed; |
|||
return null; |
|||
}) |
|||
); |
|||
} else { |
|||
return of(null); |
|||
} |
|||
} |
|||
|
|||
public createMarkerIcon(data: FormattedData<TbMapDatasource>, dsData: FormattedData<TbMapDatasource>[]): Observable<MarkerIconInfo> { |
|||
if (this.settings.type === MarkerImageType.function) { |
|||
const currentImage: MarkerImageInfo = safeExecuteTbFunction(this.markerImageFunction, [data, this.settings.images, dsData]); |
|||
return this.loadMarkerIconInfo(currentImage, data.rotationAngle); |
|||
} else { |
|||
const currentImage: MarkerImageInfo = { |
|||
url: this.settings.image, |
|||
size: this.settings.imageSize || 34 |
|||
}; |
|||
return this.loadMarkerIconInfo(currentImage, data.rotationAngle); |
|||
} |
|||
} |
|||
|
|||
private loadMarkerIconInfo(image: MarkerImageInfo, rotationAngle = 0): Observable<MarkerIconInfo> { |
|||
if (image && image.url) { |
|||
return loadImageWithAspect(this.dataLayer.getCtx().$injector.get(ImagePipe), image.url).pipe( |
|||
switchMap((aspectImage) => { |
|||
if (aspectImage?.aspect) { |
|||
let width: number; |
|||
let height: number; |
|||
if (aspectImage.aspect > 1) { |
|||
width = image.size; |
|||
height = image.size / aspectImage.aspect; |
|||
} else { |
|||
width = image.size * aspectImage.aspect; |
|||
height = image.size; |
|||
} |
|||
let iconAnchor = image.markerOffset; |
|||
let popupAnchor = image.tooltipOffset; |
|||
if (!iconAnchor) { |
|||
iconAnchor = [width * this.dataLayer.markerOffset[0], height * this.dataLayer.markerOffset[1]]; |
|||
} |
|||
if (!popupAnchor) { |
|||
popupAnchor = [width * this.dataLayer.tooltipOffset[0], height * this.dataLayer.tooltipOffset[1]]; |
|||
} |
|||
const style = `background-image: url(${aspectImage.url}); transform: rotate(${rotationAngle}deg); height: ${height}px; width: ${width}px;`; |
|||
const icon = L.divIcon({ |
|||
html: `<div style="${style}"></div>`, |
|||
className: 'tb-marker-div-icon', |
|||
iconSize: [width, height], |
|||
iconAnchor, |
|||
popupAnchor |
|||
}); |
|||
const iconInfo: MarkerIconInfo = { |
|||
size: [width, height], |
|||
icon |
|||
}; |
|||
return of(iconInfo); |
|||
} else { |
|||
return this.dataLayer.createDefaultMarkerIcon(rotationAngle); |
|||
} |
|||
}), |
|||
catchError(() => this.dataLayer.createDefaultMarkerIcon(rotationAngle)) |
|||
); |
|||
} else { |
|||
return this.dataLayer.createDefaultMarkerIcon(rotationAngle); |
|||
} |
|||
} |
|||
} |
|||
|
|||
export class TbTripsDataLayer extends TbMapDataLayer<TripsDataLayerSettings, TbTripsDataLayer> { |
|||
|
|||
public tripMarkerIconProcessor: TripMarkerIconProcessor<any>; |
|||
|
|||
public markerOffset: L.LatLngTuple; |
|||
public tooltipOffset: L.LatLngTuple; |
|||
|
|||
public pathStrokeColorProcessor: DataLayerColorProcessor; |
|||
public pointColorProcessor: DataLayerColorProcessor; |
|||
public pointTooltipProcessor: DataLayerPatternProcessor; |
|||
|
|||
private positionFunction: CompiledTbFunction<MarkerPositionFunction>; |
|||
|
|||
private rawTripsData: FormattedData<TbMapDatasource>[][]; |
|||
private latestTripsData: FormattedData<TbMapDatasource>[]; |
|||
|
|||
constructor(protected map: TbMap<any>, |
|||
inputSettings: TripsDataLayerSettings) { |
|||
super(map, inputSettings); |
|||
} |
|||
|
|||
public dataLayerType(): MapDataLayerType { |
|||
return MapDataLayerType.trip; |
|||
} |
|||
|
|||
public placeItem(item: UnplacedMapDataItem, layer: L.Layer): void { |
|||
throw new Error('Not implemented!'); |
|||
} |
|||
|
|||
protected setupDatasource(datasource: TbMapDatasource): TbMapDatasource { |
|||
datasource.dataKeys = [this.settings.xKey, this.settings.yKey]; |
|||
if (this.settings.additionalDataKeys?.length) { |
|||
const tsKeys = this.settings.additionalDataKeys.filter(key => key.type === DataKeyType.timeseries); |
|||
const latestKeys = this.settings.additionalDataKeys.filter(key => key.type !== DataKeyType.timeseries); |
|||
datasource.dataKeys.push(...tsKeys); |
|||
if (latestKeys.length) { |
|||
datasource.latestDataKeys = latestKeys; |
|||
} |
|||
} |
|||
return datasource; |
|||
} |
|||
|
|||
protected defaultBaseSettings(map: TbMap<any>): Partial<TripsDataLayerSettings> { |
|||
return defaultBaseTripsDataLayerSettings(map.type()); |
|||
} |
|||
|
|||
protected doSetup(): Observable<void> { |
|||
this.markerOffset = [ |
|||
isDefined(this.settings.markerOffsetX) ? this.settings.markerOffsetX : 0.5, |
|||
isDefined(this.settings.markerOffsetY) ? this.settings.markerOffsetY : 1, |
|||
]; |
|||
this.tooltipOffset = [ |
|||
isDefined(this.settings.tooltip?.offsetX) ? this.settings.tooltip?.offsetX : 0, |
|||
isDefined(this.settings.tooltip?.offsetY) ? this.settings.tooltip?.offsetY : -1, |
|||
]; |
|||
this.tripMarkerIconProcessor = TripMarkerIconProcessor.fromSettings(this, this.settings); |
|||
const setup$: Observable<void>[] = []; |
|||
if (this.map.type() === MapType.image) { |
|||
setup$.push( |
|||
parseTbFunction<MarkerPositionFunction>(this.getCtx().http, this.settings.positionFunction, ['origXPos', 'origYPos', 'data', 'dsData', 'aspect']).pipe( |
|||
map((parsed) => { |
|||
this.positionFunction = parsed; |
|||
return null; |
|||
}) |
|||
) |
|||
); |
|||
} |
|||
setup$.push(this.tripMarkerIconProcessor.setup()); |
|||
|
|||
if (this.settings.showPath) { |
|||
this.pathStrokeColorProcessor = new DataLayerColorProcessor(this, this.settings.pathStrokeColor); |
|||
setup$.push(this.pathStrokeColorProcessor.setup()); |
|||
} |
|||
|
|||
if (this.settings.showPoints) { |
|||
this.pointColorProcessor = new DataLayerColorProcessor(this, this.settings.pointColor); |
|||
setup$.push(this.pointColorProcessor.setup()); |
|||
if (this.settings.pointTooltip?.show) { |
|||
this.pointTooltipProcessor = new DataLayerPatternProcessor(this, this.settings.pointTooltip); |
|||
setup$.push(this.pointTooltipProcessor.setup()); |
|||
} |
|||
} |
|||
return forkJoin(setup$).pipe(map(() => null)); |
|||
} |
|||
|
|||
protected isValidLayerData(_layerData: FormattedData<TbMapDatasource>): boolean { |
|||
throw new Error('Not implemented!'); |
|||
} |
|||
|
|||
protected createLayerItem(_data: FormattedData<TbMapDatasource>, _dsData: FormattedData<TbMapDatasource>[]): TbDataLayerItem<TripsDataLayerSettings,TbTripsDataLayer> { |
|||
throw new Error('Not implemented!'); |
|||
} |
|||
|
|||
public updateData(_dsData: FormattedData<TbMapDatasource>[]) { |
|||
throw new Error('Not implemented!'); |
|||
} |
|||
|
|||
public prepareTripsData(tripsData: FormattedData<TbMapDatasource>[][], tripsLatestData: FormattedData<TbMapDatasource>[]): {minTime: number; maxTime: number} { |
|||
let minTime = Infinity; |
|||
let maxTime = -Infinity; |
|||
this.rawTripsData = |
|||
tripsData.filter(d => d[0].$datasource.mapDataIds.includes(this.mapDataId)).map( |
|||
item => this.clearIncorrectFirsLastDatapoint(item)).filter(arr => arr.length); |
|||
this.latestTripsData = tripsLatestData.filter(d => d.$datasource.mapDataIds.includes(this.mapDataId)); |
|||
this.rawTripsData.forEach((dataSource) => { |
|||
minTime = Math.min(dataSource[0].time, minTime); |
|||
maxTime = Math.max(dataSource[dataSource.length - 1].time, maxTime); |
|||
}); |
|||
|
|||
return {minTime, maxTime}; |
|||
} |
|||
|
|||
public updateTrips(minTime: number, maxTime: number) { |
|||
console.log(`Update trips: min(${minTime}), max(${maxTime})`); |
|||
} |
|||
|
|||
public updateTripsLatestData(tripsLatestData: FormattedData<TbMapDatasource>[]) { |
|||
this.latestTripsData = tripsLatestData.filter(d => d.$datasource.mapDataIds.includes(this.mapDataId)); |
|||
} |
|||
|
|||
private clearIncorrectFirsLastDatapoint(dataSource: FormattedData<TbMapDatasource>[]): FormattedData<TbMapDatasource>[] { |
|||
const firstHistoricalDataIndexCoordinate = dataSource.findIndex(this.findFirstHistoricalDataIndexCoordinate); |
|||
if (firstHistoricalDataIndexCoordinate === -1) { |
|||
return []; |
|||
} |
|||
let lastIndex = dataSource.length - 1; |
|||
for (lastIndex; lastIndex > 0; lastIndex--) { |
|||
if (this.findFirstHistoricalDataIndexCoordinate(dataSource[lastIndex])) { |
|||
lastIndex++; |
|||
break; |
|||
} |
|||
} |
|||
if (firstHistoricalDataIndexCoordinate > 0 || lastIndex < dataSource.length) { |
|||
return dataSource.slice(firstHistoricalDataIndexCoordinate, lastIndex); |
|||
} |
|||
return dataSource; |
|||
} |
|||
|
|||
private findFirstHistoricalDataIndexCoordinate = (item: FormattedData<TbMapDatasource>): boolean => { |
|||
return isDefined(item[this.settings.xKey.label]) && isDefined(item[this.settings.yKey.label]); |
|||
} |
|||
|
|||
public createDefaultMarkerIcon(rotationAngle = 0): Observable<MarkerIconInfo> { |
|||
const color = this.settings.markerShape?.color?.color || '#307FE5'; |
|||
return this.createColoredMarkerShape(MarkerShape.markerShape1, tinycolor(color), rotationAngle); |
|||
} |
|||
|
|||
public createColoredMarkerShape(shape: MarkerShape, color: tinycolor.Instance, rotationAngle = 0, size = 34): Observable<MarkerIconInfo> { |
|||
return createColorMarkerShapeURI(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), shape, color).pipe( |
|||
map((iconUrl) => { |
|||
const style = `background-image: url(${iconUrl}); transform: rotate(${rotationAngle}deg); height: ${size}px; width: ${size}px;`; |
|||
return { |
|||
size: [size, size], |
|||
icon: L.divIcon({ |
|||
html: `<div style="${style}"></div>`, |
|||
className: 'tb-marker-div-icon', |
|||
iconSize: [size, size], |
|||
iconAnchor: [size * this.markerOffset[0], size * this.markerOffset[1]], |
|||
popupAnchor: [size * this.tooltipOffset[0], size * this.tooltipOffset[1]] |
|||
}) |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
public createColoredMarkerIcon(icon: string, color: tinycolor.Instance, rotationAngle = 0, size = 34): Observable<MarkerIconInfo> { |
|||
return createColorMarkerIconElement(this.getCtx().$injector.get(MatIconRegistry), this.getCtx().$injector.get(DomSanitizer), icon, color).pipe( |
|||
map((element) => { |
|||
element.style.transform = `rotate(${rotationAngle}deg)`; |
|||
return { |
|||
size: [size, size], |
|||
icon: L.divIcon({ |
|||
html: element.outerHTML, |
|||
className: 'tb-marker-div-icon', |
|||
iconSize: [size, size], |
|||
iconAnchor: [size * this.markerOffset[0], size * this.markerOffset[1]], |
|||
popupAnchor: [size * this.tooltipOffset[0], size * this.tooltipOffset[1]] |
|||
}) |
|||
}; |
|||
}) |
|||
); |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,26 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2025 The Thingsboard Authors |
|||
|
|||
Licensed under the Apache License, Version 2.0 (the "License"); |
|||
you may not use this file except in compliance with the License. |
|||
You may obtain a copy of the License at |
|||
|
|||
http://www.apache.org/licenses/LICENSE-2.0 |
|||
|
|||
Unless required by applicable law or agreed to in writing, software |
|||
distributed under the License is distributed on an "AS IS" BASIS, |
|||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
See the License for the specific language governing permissions and |
|||
limitations under the License. |
|||
|
|||
--> |
|||
<div class="tb-map-timeline-panel"> |
|||
<mat-slider |
|||
[disabled]="disabled" |
|||
[min]="min" |
|||
[max]="max" |
|||
[step]="settings.timeStep"> |
|||
<input matSliderThumb [(ngModel)]="currentTime" (valueChange)="onTimeChange()"> |
|||
</mat-slider> |
|||
</div> |
|||
@ -0,0 +1,19 @@ |
|||
/** |
|||
* Copyright © 2016-2025 The Thingsboard Authors |
|||
* |
|||
* Licensed under the Apache License, Version 2.0 (the "License"); |
|||
* you may not use this file except in compliance with the License. |
|||
* You may obtain a copy of the License at |
|||
* |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Unless required by applicable law or agreed to in writing, software |
|||
* distributed under the License is distributed on an "AS IS" BASIS, |
|||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
|||
* See the License for the specific language governing permissions and |
|||
* limitations under the License. |
|||
*/ |
|||
.tb-map-timeline-panel { |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
///
|
|||
/// Copyright © 2016-2025 The Thingsboard Authors
|
|||
///
|
|||
/// Licensed under the Apache License, Version 2.0 (the "License");
|
|||
/// you may not use this file except in compliance with the License.
|
|||
/// You may obtain a copy of the License at
|
|||
///
|
|||
/// http://www.apache.org/licenses/LICENSE-2.0
|
|||
///
|
|||
/// Unless required by applicable law or agreed to in writing, software
|
|||
/// distributed under the License is distributed on an "AS IS" BASIS,
|
|||
/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|||
/// See the License for the specific language governing permissions and
|
|||
/// limitations under the License.
|
|||
///
|
|||
|
|||
import { |
|||
Component, |
|||
ElementRef, |
|||
EventEmitter, |
|||
Input, |
|||
OnDestroy, |
|||
OnInit, |
|||
Output, |
|||
ViewEncapsulation |
|||
} from '@angular/core'; |
|||
import { TripTimelineSettings } from '@home/components/widget/lib/maps/models/map.models'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-map-timeline-panel', |
|||
templateUrl: './map-timeline-panel.component.html', |
|||
styleUrls: ['./map-timeline-panel.component.scss'], |
|||
encapsulation: ViewEncapsulation.None |
|||
}) |
|||
export class MapTimelinePanelComponent implements OnInit, OnDestroy { |
|||
|
|||
@Input() |
|||
settings: TripTimelineSettings; |
|||
|
|||
@Input() |
|||
disabled = false; |
|||
|
|||
@Input() |
|||
min = 0; |
|||
|
|||
@Input() |
|||
max = 10000; |
|||
|
|||
@Output() |
|||
timeChanged = new EventEmitter<number>(); |
|||
|
|||
currentTime = 0; |
|||
|
|||
constructor(public element: ElementRef<HTMLElement>) { |
|||
} |
|||
|
|||
ngOnInit() { |
|||
} |
|||
|
|||
ngOnDestroy() { |
|||
} |
|||
|
|||
public onTimeChange() { |
|||
//this.updateValueText();
|
|||
this.timeChanged.next(this.currentTime); |
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue