Artem Halushko
7 years ago
15 changed files with 328 additions and 80 deletions
@ -0,0 +1,2 @@ |
|||
<div class="map" #map ></div> |
|||
<tb-history-selector [settings]="ctx.settings"></tb-history-selector> |
|||
@ -0,0 +1,6 @@ |
|||
|
|||
|
|||
.map{ |
|||
width: 100%; |
|||
height: calc(100% - 100px); |
|||
} |
|||
@ -0,0 +1,32 @@ |
|||
import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core'; |
|||
import { MapWidgetController } from '../lib/maps/map-widget2'; |
|||
import { MapProviders } from '../lib/maps/map-models'; |
|||
import { parseArray } from '@app/core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'trip-animation', |
|||
templateUrl: './trip-animation.component.html', |
|||
styleUrls: ['./trip-animation.component.scss'] |
|||
}) |
|||
export class TripAnimationComponent implements OnInit, AfterViewInit { |
|||
|
|||
@Input() ctx; |
|||
|
|||
@ViewChild('map') mapContainer; |
|||
|
|||
mapWidget: MapWidgetController; |
|||
historicalData |
|||
|
|||
constructor() { } |
|||
|
|||
ngOnInit(): void { |
|||
console.log(this.ctx); |
|||
this.historicalData = parseArray(this.ctx.data); |
|||
console.log("TripAnimationComponent -> ngOnInit -> this.historicalData",this.ctx.data, this.historicalData) |
|||
} |
|||
|
|||
ngAfterViewInit() { |
|||
this.mapWidget = new MapWidgetController(MapProviders.openstreet, false, this.ctx, this.mapContainer.nativeElement); |
|||
this.mapWidget.data |
|||
} |
|||
} |
|||
@ -0,0 +1,39 @@ |
|||
<div class="trip-animation-control-panel"> |
|||
<div> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Start" ng-click="moveStart()"> |
|||
<mat-icon class="material-icons" ng-style="{'color': staticSettings.buttonColor}">fast_rewind</mat-icon> |
|||
</button> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Previous" ng-click="movePrev()"> |
|||
<mat-icon class="material-icons" ng-style="{'color': staticSettings.buttonColor}">skip_previous</mat-icon> |
|||
</button> |
|||
<!-- <mat-slider ng-model="index" [min]="minTimeIndex" [max]="maxTimeIndex" (change)="recalculateTrips()"> |
|||
</mat-slider>--> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Next" ng-click="moveNext()"> |
|||
<mat-icon class="material-icons" ng-style="{'color': staticSettings.buttonColor}">skip_next</mat-icon> |
|||
</button> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="End" ng-click="moveEnd()"> |
|||
<mat-icon class="material-icons" ng-style="{'color': staticSettings.buttonColor}">fast_forward</mat-icon> |
|||
</button> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Play" ng-click="playMove(true)" |
|||
ng-disabled="isPlaying"> |
|||
<mat-icon class="material-icons" |
|||
ng-style="{'color': isPlaying ? staticSettings.disabledButtonColor : staticSettings.buttonColor}"> |
|||
play_circle_outline |
|||
</mat-icon> |
|||
</button> |
|||
<!-- <mat-select ng-model="speed" aria-label="Speed selector"> |
|||
<mat-option ng-value="speed" flex="1" ng-repeat="speed in speeds track by $index">{{ speed}} |
|||
</mat-option> |
|||
</mat-select>--> |
|||
<button mat-icon-button class="mat-icon-button" aria-label="Stop playing" ng-click="stopPlay()" |
|||
ng-disabled="!isPlaying"> |
|||
<mat-icon class="material-icons" |
|||
ng-style="{'color': isPlaying ? staticSettings.buttonColor : staticSettings.disabledButtonColor}"> |
|||
pause_circle_outline |
|||
</mat-icon> |
|||
</button> |
|||
</div> |
|||
<div class="panel-timer"> |
|||
<span *ngIf="animationTime">{{ animationTime | date:'medium'}}</span> |
|||
<span *ngIf="!animationTime">{{ "widget.no-data-found" | translate}}</span> |
|||
</div> |
|||
@ -0,0 +1,137 @@ |
|||
/** |
|||
* Copyright © 2016-2020 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. |
|||
*/ |
|||
.trip-animation-widget { |
|||
|
|||
position: relative; |
|||
width: 100%; |
|||
height: 100%; |
|||
font-size: 16px; |
|||
line-height: 24px; |
|||
|
|||
.trip-animation-label-container { |
|||
height: 24px; |
|||
} |
|||
|
|||
.trip-animation-container { |
|||
position: relative; |
|||
z-index: 1; |
|||
flex: 1; |
|||
width: 100%; |
|||
|
|||
#trip-animation-map { |
|||
z-index: 1; |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
.pointsLayerMarkerIcon { |
|||
border-radius: 50%; |
|||
} |
|||
} |
|||
|
|||
.trip-animation-info-panel { |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
z-index: 2; |
|||
pointer-events: none; |
|||
|
|||
.md-button { |
|||
top: 0; |
|||
left: 0; |
|||
width: 32px; |
|||
min-width: 32px; |
|||
height: 32px; |
|||
min-height: 32px; |
|||
padding: 0 0 2px; |
|||
margin: 2px; |
|||
line-height: 24px; |
|||
|
|||
ng-md-icon { |
|||
width: 24px; |
|||
height: 24px; |
|||
|
|||
svg { |
|||
width: inherit; |
|||
height: inherit; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.trip-animation-tooltip { |
|||
position: absolute; |
|||
top: 38px; |
|||
right: 0; |
|||
z-index: 2; |
|||
padding: 10px; |
|||
background-color: #fff; |
|||
transition: .3s ease-in-out; |
|||
|
|||
&-hidden { |
|||
transform: translateX(110%); |
|||
} |
|||
} |
|||
} |
|||
|
|||
.trip-animation-control-panel { |
|||
position: relative; |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
padding-bottom: 16px; |
|||
padding-left: 10px; |
|||
|
|||
md-slider-container { |
|||
md-slider { |
|||
min-width: 80px; |
|||
} |
|||
|
|||
button.md-button.md-icon-button { |
|||
width: 44px; |
|||
min-width: 44px; |
|||
height: 44px; |
|||
min-height: 44px; |
|||
margin: 0; |
|||
line-height: 28px; |
|||
|
|||
md-icon { |
|||
width: 28px; |
|||
height: 28px; |
|||
font-size: 28px; |
|||
|
|||
svg { |
|||
width: inherit; |
|||
height: inherit; |
|||
} |
|||
} |
|||
} |
|||
|
|||
md-select { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
.panel-timer { |
|||
max-width: none; |
|||
padding-right: 250px; |
|||
padding-left: 90px; |
|||
margin-top: -20px; |
|||
font-size: 12px; |
|||
font-weight: 500; |
|||
text-align: center; |
|||
} |
|||
} |
|||
} |
|||
|
|||
@ -0,0 +1,22 @@ |
|||
import { Component, OnInit, Input } from '@angular/core'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-history-selector', |
|||
templateUrl: './history-selector.component.html', |
|||
styleUrls: ['./history-selector.component.scss'] |
|||
}) |
|||
export class HistorySelectorComponent implements OnInit { |
|||
|
|||
@Input() settings |
|||
|
|||
animationTime |
|||
|
|||
|
|||
constructor() { } |
|||
|
|||
ngOnInit(): void { |
|||
console.log(this.settings); |
|||
|
|||
} |
|||
|
|||
} |
|||
Loading…
Reference in new issue