Igor Kulikov
2 years ago
committed by
GitHub
GitHub
30 changed files with 855 additions and 151 deletions
@ -0,0 +1,47 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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 [formGroup]="mapActionButton" class="tb-form-table-row"> |
|||
<mat-form-field class="tb-inline-field tb-label-field min-w-32" style="flex: 1 1 40%" appearance="outline" subscriptSizing="dynamic"> |
|||
<input matInput formControlName="label" placeholder="{{ 'widget-config.set' | translate }}"> |
|||
<mat-icon matSuffix |
|||
matTooltipPosition="above" |
|||
matTooltipClass="tb-error-tooltip" |
|||
matTooltip="{{ 'widgets.maps.map-action.button-requires' | translate }}" |
|||
*ngIf="mapActionButton.hasError('invalidButtonConfig')" |
|||
class="tb-error"> |
|||
warning |
|||
</mat-icon> |
|||
</mat-form-field> |
|||
<tb-material-icon-select formControlName="icon" asBoxInput iconClearButton [color]="this.mapActionButton.get('color').value"></tb-material-icon-select> |
|||
<tb-color-input formControlName="color" asBoxInput required></tb-color-input> |
|||
<tb-widget-action-settings class="min-w-32" style="flex: 1 1 60%" |
|||
formControlName="action" |
|||
panelTitle="{{ 'widgets.maps.map-action.map-action-button' | translate }}" |
|||
[widgetType]="widgetType.latest" |
|||
[additionalWidgetActionTypes]="additionalWidgetActionTypes"> |
|||
</tb-widget-action-settings> |
|||
<div class="tb-form-table-row-cell-buttons w-10 min-w-10"> |
|||
<button type="button" |
|||
mat-icon-button |
|||
(click)="buttonRemoved.emit()" |
|||
matTooltip="{{ 'widgets.maps.map-action.remove-action-button' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>delete</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
@ -0,0 +1,100 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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, EventEmitter, forwardRef, Output } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
FormGroup, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator |
|||
} from '@angular/forms'; |
|||
import { MapActionButtonSettings } from '@home/components/widget/lib/maps/models/map.models'; |
|||
import { WidgetAction, WidgetActionType, widgetType } from '@shared/models/widget.models'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
import { isEmptyStr } from '@core/utils'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-map-action-button-row', |
|||
templateUrl: 'map-action-button-row.component.html', |
|||
providers: [{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => MapActionButtonRowComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => MapActionButtonRowComponent), |
|||
multi: true |
|||
}] |
|||
}) |
|||
export class MapActionButtonRowComponent implements ControlValueAccessor, Validator { |
|||
|
|||
@Output() |
|||
buttonRemoved = new EventEmitter(); |
|||
|
|||
mapActionButton = this.fb.group({ |
|||
label: [''], |
|||
icon: [''], |
|||
color: [''], |
|||
action: this.fb.control<WidgetAction>(null) |
|||
}, {validators: this.validateButtonConfig()}); |
|||
|
|||
additionalWidgetActionTypes = [WidgetActionType.placeMapItem]; |
|||
readonly widgetType = widgetType; |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fb: FormBuilder) { |
|||
this.mapActionButton.valueChanges.pipe( |
|||
takeUntilDestroyed() |
|||
).subscribe(value => this.propagateChange(value)) |
|||
} |
|||
|
|||
registerOnChange(fn: any) { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any): void { } |
|||
|
|||
setDisabledState(isDisabled: boolean) { |
|||
if (isDisabled) { |
|||
this.mapActionButton.disable({emitEvent: false}); |
|||
} else { |
|||
this.mapActionButton.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.mapActionButton.valid ? null : { |
|||
mapButtonAction: false |
|||
}; |
|||
} |
|||
|
|||
writeValue(value: MapActionButtonSettings) { |
|||
this.mapActionButton.patchValue(value, {emitEvent: false}); |
|||
} |
|||
|
|||
private validateButtonConfig() { |
|||
return (c: FormGroup) => { |
|||
return !c.value.icon && isEmptyStr(c.value.label) ? { |
|||
invalidButtonConfig: true |
|||
} : null; |
|||
}; |
|||
} |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
<!-- |
|||
|
|||
Copyright © 2016-2024 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. |
|||
|
|||
--> |
|||
<section class="tb-form-panel"> |
|||
<mat-expansion-panel class="tb-settings" expanded> |
|||
<mat-expansion-panel-header> |
|||
{{ 'widgets.maps.map-action.map-action-buttons' | translate }} |
|||
</mat-expansion-panel-header> |
|||
<ng-template matExpansionPanelContent> |
|||
<div class="tb-form-table overflow-y-auto"> |
|||
<div class="tb-form-table-header no-padding-right"> |
|||
<div class="tb-form-table-header-cell min-w-32" style="flex: 1 1 40%" translate>widgets.maps.map-action.label</div> |
|||
<div class="tb-form-table-header-cell w-10 min-w-10" translate>widgets.maps.map-action.icon</div> |
|||
<div class="tb-form-table-header-cell w-10 min-w-10" translate>widgets.maps.map-action.color</div> |
|||
<div class="tb-form-table-header-cell min-w-32" style="flex: 1 1 60%" translate>widgets.maps.map-action.action</div> |
|||
<div class="tb-form-table-header-cell w-20 min-w-20 xs:w-10 xs:min-w-10"></div> |
|||
</div> |
|||
<div class="tb-form-table-body" cdkDropList cdkDropListOrientation="vertical" |
|||
[cdkDropListDisabled]="!dragEnabled" |
|||
(cdkDropListDropped)="buttonDrop($event)"> |
|||
@for (mapAction of mapActionButtonsForm.controls; track mapAction) { |
|||
<div cdkDrag [cdkDragDisabled]="!dragEnabled" class="tb-draggable-form-table-row"> |
|||
<tb-map-action-button-row class="flex-1" |
|||
[formControl]="mapAction" |
|||
(buttonRemoved)="removeButton($event)"> |
|||
</tb-map-action-button-row> |
|||
<div class="tb-form-table-row-cell-buttons"> |
|||
<button class="xs:!hidden" |
|||
[class.tb-hidden]="!dragEnabled" |
|||
mat-icon-button |
|||
type="button" |
|||
cdkDragHandle |
|||
matTooltip="{{ 'action.drag' | translate }}" |
|||
matTooltipPosition="above"> |
|||
<mat-icon>drag_indicator</mat-icon> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
} @empty { |
|||
<span class="tb-prompt flex items-center justify-center">{{ 'widgets.maps.map-action.no-action-buttons-configured' | translate }}</span> |
|||
} |
|||
</div> |
|||
</div> |
|||
<button type="button" mat-stroked-button color="primary" class="max-w-fit" (click)="addButton()"> |
|||
{{ 'widgets.maps.map-action.add-button' | translate }} |
|||
</button> |
|||
</ng-template> |
|||
</mat-expansion-panel> |
|||
</section> |
|||
@ -0,0 +1,107 @@ |
|||
///
|
|||
/// Copyright © 2016-2024 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 } from '@angular/core'; |
|||
import { |
|||
ControlValueAccessor, |
|||
FormBuilder, |
|||
NG_VALIDATORS, |
|||
NG_VALUE_ACCESSOR, |
|||
ValidationErrors, |
|||
Validator |
|||
} from '@angular/forms'; |
|||
import { |
|||
defaultMapActionButtonSettings, |
|||
MapActionButtonSettings |
|||
} from '@home/components/widget/lib/maps/models/map.models'; |
|||
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
|||
import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; |
|||
|
|||
@Component({ |
|||
selector: 'tb-map-action-button-settings', |
|||
templateUrl: './map-action-buttons-settings.component.html', |
|||
providers: [{ |
|||
provide: NG_VALUE_ACCESSOR, |
|||
useExisting: forwardRef(() => MapActionButtonsSettingsComponent), |
|||
multi: true |
|||
}, |
|||
{ |
|||
provide: NG_VALIDATORS, |
|||
useExisting: forwardRef(() => MapActionButtonsSettingsComponent), |
|||
multi: true |
|||
}] |
|||
}) |
|||
export class MapActionButtonsSettingsComponent implements ControlValueAccessor, Validator { |
|||
|
|||
mapActionButtonsForm = this.fb.array<MapActionButtonSettings>([]); |
|||
|
|||
private propagateChange = (_val: any) => {}; |
|||
|
|||
constructor(private fb: FormBuilder) { |
|||
this.mapActionButtonsForm.valueChanges.pipe( |
|||
takeUntilDestroyed() |
|||
).subscribe(value => this.propagateChange(value)); |
|||
} |
|||
|
|||
registerOnChange(fn: any): void { |
|||
this.propagateChange = fn; |
|||
} |
|||
|
|||
registerOnTouched(_fn: any): void { } |
|||
|
|||
setDisabledState(isDisabled: boolean): void { |
|||
if (isDisabled) { |
|||
this.mapActionButtonsForm.disable({emitEvent: false}); |
|||
} else { |
|||
this.mapActionButtonsForm.enable({emitEvent: false}); |
|||
} |
|||
} |
|||
|
|||
validate(): ValidationErrors | null { |
|||
return this.mapActionButtonsForm.valid ? null : { |
|||
mapActionButtons: false |
|||
}; |
|||
} |
|||
|
|||
writeValue(buttons: MapActionButtonSettings[] = []) { |
|||
if (buttons?.length === this.mapActionButtonsForm.length) { |
|||
this.mapActionButtonsForm.patchValue(buttons, {emitEvent: false}); |
|||
} else { |
|||
this.mapActionButtonsForm.clear({emitEvent: false}); |
|||
buttons.forEach( |
|||
button => this.mapActionButtonsForm.push(this.fb.control(button), {emitEvent: false}) |
|||
); |
|||
} |
|||
} |
|||
|
|||
get dragEnabled(): boolean { |
|||
return this.mapActionButtonsForm.length > 1; |
|||
} |
|||
|
|||
buttonDrop(event: CdkDragDrop<string[]>) { |
|||
const actionButton = this.mapActionButtonsForm.at(event.previousIndex); |
|||
this.mapActionButtonsForm.removeAt(event.previousIndex, {emitEvent: false}); |
|||
this.mapActionButtonsForm.insert(event.currentIndex, actionButton); |
|||
} |
|||
|
|||
addButton() { |
|||
this.mapActionButtonsForm.push(this.fb.control(defaultMapActionButtonSettings)); |
|||
} |
|||
|
|||
removeButton(index: number) { |
|||
this.mapActionButtonsForm.removeAt(index); |
|||
} |
|||
} |
|||
Loading…
Reference in new issue