Vladyslav_Prykhodko
2 years ago
9 changed files with 285 additions and 13 deletions
@ -0,0 +1,82 @@ |
|||
<!-- |
|||
|
|||
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-form-panel stroked" [formGroup]="tooltipsForm"> |
|||
<mat-expansion-panel class="tb-settings"> |
|||
<mat-expansion-panel-header>{{ 'widget-action.map-item-tooltip.tooltips' | translate }}</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
@switch (mapItemType) { |
|||
@case (MapItemType.marker) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.place-marker</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.placeMarker | translate }}" formControlName="placeMarker"> |
|||
</mat-form-field> |
|||
</div> |
|||
} |
|||
@case (MapItemType.rectangle) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.start-draw-rectangle</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.startRect | translate }}" formControlName="startRect"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.finish-draw-rectangle</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.finishRect | translate }}" formControlName="finishRect"> |
|||
</mat-form-field> |
|||
</div> |
|||
} |
|||
@case (MapItemType.polygon) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.start-draw-polygon</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.firstVertex | translate }}" formControlName="firstVertex"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.continue-draw-polygon</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.continueLine | translate }}" formControlName="continueLine"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.finish-draw-polygon</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.finishPoly | translate }}" formControlName="finishPoly"> |
|||
</mat-form-field> |
|||
</div> |
|||
} |
|||
@case (MapItemType.circle) { |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.start-draw-circle</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.startCircle | translate }}" formControlName="startCircle"> |
|||
</mat-form-field> |
|||
</div> |
|||
<div class="tb-form-row"> |
|||
<div class="fixed-title-width" translate>widget-action.map-item-tooltip.finish-draw-circle</div> |
|||
<mat-form-field class="flex-1" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput placeholder="{{ mapItemTooltipsDefaultTranslate.finishCircle | translate }}" formControlName="finishCircle"> |
|||
</mat-form-field> |
|||
</div> |
|||
} |
|||
} |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</div> |
|||
@ -0,0 +1,123 @@ |
|||
///
|
|||
/// 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, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core'; |
|||
import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR } from '@angular/forms'; |
|||
import { MapItemTooltips, MapItemType, mapItemTooltipsTranslation } from '@shared/models/widget.models'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { deepTrim, isEqual } from '@core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-map-item-tooltips', |
|||
templateUrl: './map-item-tooltips.component.html', |
|||
providers: [ |
|||
{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => MapItemTooltipsComponent), |
|||
multi: true |
|||
} |
|||
] |
|||
}) |
|||
export class MapItemTooltipsComponent implements ControlValueAccessor, OnChanges { |
|||
|
|||
@Input({required: true}) |
|||
mapItemType: MapItemType; |
|||
|
|||
tooltipsForm: FormGroup; |
|||
MapItemType = MapItemType; |
|||
readonly mapItemTooltipsDefaultTranslate = mapItemTooltipsTranslation; |
|||
|
|||
private modelValue: MapItemTooltips; |
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fd: FormBuilder) { |
|||
this.tooltipsForm = this.fd.group({ |
|||
placeMarker: [''], |
|||
firstVertex: [''], |
|||
continueLine: [''], |
|||
finishPoly: [''], |
|||
startRect: [''], |
|||
finishRect: [''], |
|||
startCircle: [''], |
|||
finishCircle: [''] |
|||
}); |
|||
|
|||
this.tooltipsForm.valueChanges.pipe( |
|||
takeUntilDestroyed() |
|||
).subscribe(this.updatedModel.bind(this)); |
|||
} |
|||
|
|||
ngOnChanges(changes: SimpleChanges) { |
|||
if (changes.mapItemType) { |
|||
const mapItemTypeChanges = changes.mapItemType; |
|||
if (!mapItemTypeChanges.firstChange && mapItemTypeChanges.currentValue !== mapItemTypeChanges.previousValue) { |
|||
this.updatedValidators(true); |
|||
} |
|||
} |
|||
} |
|||
|
|||
registerOnChange(fn: any) { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any) { |
|||
} |
|||
|
|||
setDisabledState(isDisabled: boolean) { |
|||
if (isDisabled) { |
|||
this.tooltipsForm.disable({emitEvent: false}); |
|||
} else { |
|||
this.tooltipsForm.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
writeValue(obj: MapItemTooltips) { |
|||
this.modelValue = obj; |
|||
this.tooltipsForm.patchValue(obj, {emitEvent: false}); |
|||
this.updatedValidators(); |
|||
} |
|||
|
|||
private updatedValidators(emitNewValue = false) { |
|||
this.tooltipsForm.disable({emitEvent: false}); |
|||
switch (this.mapItemType) { |
|||
case MapItemType.marker: |
|||
this.tooltipsForm.get('placeMarker').enable({emitEvent: false}); |
|||
break; |
|||
case MapItemType.rectangle: |
|||
this.tooltipsForm.get('startRect').enable({emitEvent: false}); |
|||
this.tooltipsForm.get('finishRect').enable({emitEvent: false}); |
|||
break; |
|||
case MapItemType.polygon: |
|||
this.tooltipsForm.get('firstVertex').enable({emitEvent: false}); |
|||
this.tooltipsForm.get('continueLine').enable({emitEvent: false}); |
|||
this.tooltipsForm.get('finishPoly').enable({emitEvent: false}); |
|||
break; |
|||
case MapItemType.circle: |
|||
this.tooltipsForm.get('startCircle').enable({emitEvent: false}); |
|||
this.tooltipsForm.get('finishCircle').enable({emitEvent: false}); |
|||
break; |
|||
} |
|||
this.tooltipsForm.updateValueAndValidity({emitEvent: emitNewValue}) |
|||
} |
|||
|
|||
private updatedModel(value: MapItemTooltips) { |
|||
const currentValue = Object.fromEntries(Object.entries(deepTrim(value)).filter(([_, v]) => v != '')); |
|||
if (!isEqual(currentValue, this.modelValue)) { |
|||
this.modelValue = currentValue; |
|||
this.propagateChange(currentValue); |
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue