Igor Kulikov
2 years ago
committed by
GitHub
GitHub
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.customize-map-item-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