ArtemDzhereleiko
5 years ago
4 changed files with 0 additions and 199 deletions
@ -1,60 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2021 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. |
|
||||
|
|
||||
--> |
|
||||
<form [formGroup]="legendConfigForm"> |
|
||||
<fieldset [disabled]="(isLoading$ | async)"> |
|
||||
<div class="mat-content" style="height: 100%;"> |
|
||||
<div class="mat-padding"> |
|
||||
<section fxLayout="column"> |
|
||||
<mat-form-field> |
|
||||
<mat-label translate>legend.direction</mat-label> |
|
||||
<mat-select matInput formControlName="direction" style="min-width: 150px;"> |
|
||||
<mat-option *ngFor="let direction of legendDirections" [value]="direction"> |
|
||||
{{ legendDirectionTranslations.get(legendDirection[direction]) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field> |
|
||||
<mat-label translate>legend.position</mat-label> |
|
||||
<mat-select matInput formControlName="position" style="min-width: 150px;"> |
|
||||
<mat-option *ngFor="let pos of legendPositions" [value]="pos" |
|
||||
[disabled]="legendConfigForm.get('direction').value === legendDirection.row && |
|
||||
(pos === legendPosition.left || pos === legendPosition.right)"> |
|
||||
{{ legendPositionTranslations.get(legendPosition[pos]) | translate }} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-checkbox formControlName="sortDataKeys"> |
|
||||
{{ 'legend.sort-legend' | translate }} |
|
||||
</mat-checkbox> |
|
||||
<mat-checkbox formControlName="showMin"> |
|
||||
{{ 'legend.show-min' | translate }} |
|
||||
</mat-checkbox> |
|
||||
<mat-checkbox formControlName="showMax"> |
|
||||
{{ 'legend.show-max' | translate }} |
|
||||
</mat-checkbox> |
|
||||
<mat-checkbox formControlName="showAvg"> |
|
||||
{{ 'legend.show-avg' | translate }} |
|
||||
</mat-checkbox> |
|
||||
<mat-checkbox formControlName="showTotal"> |
|
||||
{{ 'legend.show-total' | translate }} |
|
||||
</mat-checkbox> |
|
||||
</section> |
|
||||
</div> |
|
||||
</div> |
|
||||
</fieldset> |
|
||||
</form> |
|
||||
@ -1,32 +0,0 @@ |
|||||
/** |
|
||||
* Copyright © 2016-2021 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. |
|
||||
*/ |
|
||||
:host { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
form, |
|
||||
fieldset { |
|
||||
height: 100%; |
|
||||
} |
|
||||
|
|
||||
.mat-content { |
|
||||
overflow: hidden; |
|
||||
background-color: #fff; |
|
||||
} |
|
||||
|
|
||||
.mat-padding { |
|
||||
padding: 16px; |
|
||||
} |
|
||||
} |
|
||||
@ -1,105 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2021 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, Inject, InjectionToken, OnInit, ViewContainerRef } from '@angular/core'; |
|
||||
import { OverlayRef } from '@angular/cdk/overlay'; |
|
||||
import { PageComponent } from '@shared/components/page.component'; |
|
||||
import { Store } from '@ngrx/store'; |
|
||||
import { AppState } from '@core/core.state'; |
|
||||
import { FormBuilder, FormGroup } from '@angular/forms'; |
|
||||
import { |
|
||||
LegendConfig, |
|
||||
LegendDirection, |
|
||||
legendDirectionTranslationMap, |
|
||||
LegendPosition, |
|
||||
legendPositionTranslationMap |
|
||||
} from '@shared/models/widget.models'; |
|
||||
|
|
||||
export const LEGEND_CONFIG_PANEL_DATA = new InjectionToken<any>('LegendConfigPanelData'); |
|
||||
|
|
||||
export interface LegendConfigPanelData { |
|
||||
legendConfig: LegendConfig; |
|
||||
legendConfigUpdated: (legendConfig: LegendConfig) => void; |
|
||||
} |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-legend-config-panel', |
|
||||
templateUrl: './legend-config-panel.component.html', |
|
||||
styleUrls: ['./legend-config-panel.component.scss'] |
|
||||
}) |
|
||||
export class LegendConfigPanelComponent extends PageComponent implements OnInit { |
|
||||
|
|
||||
legendConfigForm: FormGroup; |
|
||||
|
|
||||
legendDirection = LegendDirection; |
|
||||
|
|
||||
legendDirections = Object.keys(LegendDirection); |
|
||||
|
|
||||
legendDirectionTranslations = legendDirectionTranslationMap; |
|
||||
|
|
||||
legendPosition = LegendPosition; |
|
||||
|
|
||||
legendPositions = Object.keys(LegendPosition); |
|
||||
|
|
||||
legendPositionTranslations = legendPositionTranslationMap; |
|
||||
|
|
||||
constructor(@Inject(LEGEND_CONFIG_PANEL_DATA) public data: LegendConfigPanelData, |
|
||||
public overlayRef: OverlayRef, |
|
||||
protected store: Store<AppState>, |
|
||||
public fb: FormBuilder, |
|
||||
public viewContainerRef: ViewContainerRef) { |
|
||||
super(store); |
|
||||
} |
|
||||
|
|
||||
ngOnInit(): void { |
|
||||
this.legendConfigForm = this.fb.group({ |
|
||||
direction: [this.data.legendConfig.direction, []], |
|
||||
position: [this.data.legendConfig.position, []], |
|
||||
sortDataKeys: [this.data.legendConfig.sortDataKeys, []], |
|
||||
showMin: [this.data.legendConfig.showMin, []], |
|
||||
showMax: [this.data.legendConfig.showMax, []], |
|
||||
showAvg: [this.data.legendConfig.showAvg, []], |
|
||||
showTotal: [this.data.legendConfig.showTotal, []] |
|
||||
}); |
|
||||
this.legendConfigForm.get('direction').valueChanges.subscribe((direction: LegendDirection) => { |
|
||||
this.onDirectionChanged(direction); |
|
||||
}); |
|
||||
this.onDirectionChanged(this.data.legendConfig.direction); |
|
||||
this.legendConfigForm.valueChanges.subscribe(() => { |
|
||||
this.update(); |
|
||||
}); |
|
||||
} |
|
||||
|
|
||||
private onDirectionChanged(direction: LegendDirection) { |
|
||||
if (direction === LegendDirection.row) { |
|
||||
let position: LegendPosition = this.legendConfigForm.get('position').value; |
|
||||
if (position !== LegendPosition.bottom && position !== LegendPosition.top) { |
|
||||
position = LegendPosition.bottom; |
|
||||
} |
|
||||
this.legendConfigForm.patchValue( |
|
||||
{ |
|
||||
position |
|
||||
}, {emitEvent: false} |
|
||||
); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
update() { |
|
||||
const newLegendConfig: LegendConfig = this.legendConfigForm.value; |
|
||||
this.data.legendConfigUpdated(newLegendConfig); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
Loading…
Reference in new issue