Igor Kulikov
2 years ago
22 changed files with 766 additions and 122 deletions
@ -0,0 +1,48 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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]="behaviorRowFormGroup" class="tb-form-table-row tb-scada-symbol-metadata-behavior-row"> |
||||
|
<mat-form-field class="tb-inline-field tb-id-field" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input #idInput required matInput formControlName="id" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="tb-inline-field tb-name-field" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<input required matInput formControlName="name" placeholder="{{ 'widget-config.set' | translate }}"> |
||||
|
</mat-form-field> |
||||
|
<mat-form-field class="tb-inline-field tb-type-field fixed-height" appearance="outline" subscriptSizing="dynamic"> |
||||
|
<mat-select formControlName="type"> |
||||
|
<mat-option *ngFor="let type of iotSvgBehaviorTypes" [value]="type"> |
||||
|
{{ iotSvgBehaviorTypeTranslations.get(type) | translate }} |
||||
|
</mat-option> |
||||
|
</mat-select> |
||||
|
</mat-form-field> |
||||
|
<div class="tb-form-table-row-cell-buttons"> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
(click)="editBehavior()" |
||||
|
matTooltip="{{ 'scada.behavior.behavior-settings' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>settings</mat-icon> |
||||
|
</button> |
||||
|
<button type="button" |
||||
|
mat-icon-button |
||||
|
(click)="behaviorRemoved.emit()" |
||||
|
matTooltip="{{ 'scada.behavior.remove-behavior' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>delete</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
@ -0,0 +1,26 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
.tb-scada-symbol-metadata-behavior-row { |
||||
|
.tb-id-field { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
.tb-name-field { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
.tb-type-field { |
||||
|
flex: 1 1 20%; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,172 @@ |
|||||
|
///
|
||||
|
/// 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 { |
||||
|
ChangeDetectorRef, |
||||
|
Component, |
||||
|
ElementRef, |
||||
|
EventEmitter, |
||||
|
forwardRef, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
Output, |
||||
|
ViewChild, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormGroup, |
||||
|
ValidationErrors |
||||
|
} from '@angular/forms'; |
||||
|
import { MatDialog } from '@angular/material/dialog'; |
||||
|
import { |
||||
|
IotSvgBehavior, |
||||
|
IotSvgBehaviorAction, |
||||
|
IotSvgBehaviorType, |
||||
|
iotSvgBehaviorTypes, |
||||
|
iotSvgBehaviorTypeTranslations, |
||||
|
IotSvgBehaviorValue |
||||
|
} from '@home/components/widget/lib/svg/iot-svg.models'; |
||||
|
|
||||
|
export const behaviorValid = (behavior: IotSvgBehavior): boolean => { |
||||
|
if (!behavior.id || !behavior.name || !behavior.type) { |
||||
|
return false; |
||||
|
} |
||||
|
switch (behavior.type) { |
||||
|
case IotSvgBehaviorType.value: |
||||
|
const valueBehavior = behavior as IotSvgBehaviorValue; |
||||
|
if (!valueBehavior.valueType) { |
||||
|
return false; |
||||
|
} |
||||
|
break; |
||||
|
case IotSvgBehaviorType.action: |
||||
|
const actionBehavior = behavior as IotSvgBehaviorAction; |
||||
|
if (!actionBehavior.valueToDataType) { |
||||
|
return false; |
||||
|
} |
||||
|
break; |
||||
|
case IotSvgBehaviorType.widgetAction: |
||||
|
break; |
||||
|
} |
||||
|
return true; |
||||
|
}; |
||||
|
|
||||
|
export const behaviorValidator = (control: AbstractControl): ValidationErrors | null => { |
||||
|
const behavior: IotSvgBehavior = control.value; |
||||
|
if (!behaviorValid(behavior)) { |
||||
|
return { |
||||
|
behavior: true |
||||
|
}; |
||||
|
} |
||||
|
return null; |
||||
|
}; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-scada-symbol-metadata-behavior-row', |
||||
|
templateUrl: './scada-symbol-behavior-row.component.html', |
||||
|
styleUrls: ['./scada-symbol-behavior-row.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => ScadaSymbolBehaviorRowComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class ScadaSymbolBehaviorRowComponent implements ControlValueAccessor, OnInit { |
||||
|
|
||||
|
@ViewChild('idInput') |
||||
|
idInput: ElementRef<HTMLInputElement>; |
||||
|
|
||||
|
iotSvgBehaviorTypes = iotSvgBehaviorTypes; |
||||
|
iotSvgBehaviorTypeTranslations = iotSvgBehaviorTypeTranslations; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
@Output() |
||||
|
behaviorRemoved = new EventEmitter(); |
||||
|
|
||||
|
behaviorRowFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
modelValue: IotSvgBehavior; |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder, |
||||
|
private dialog: MatDialog, |
||||
|
private cd: ChangeDetectorRef) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.behaviorRowFormGroup = this.fb.group({ |
||||
|
id: [null, []], |
||||
|
name: [null, []], |
||||
|
type: [null, []] |
||||
|
}); |
||||
|
this.behaviorRowFormGroup.valueChanges.subscribe( |
||||
|
() => this.updateModel() |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.behaviorRowFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.behaviorRowFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: IotSvgBehavior): void { |
||||
|
this.modelValue = value; |
||||
|
this.behaviorRowFormGroup.patchValue( |
||||
|
{ |
||||
|
id: value?.id, |
||||
|
name: value?.name, |
||||
|
type: value?.type |
||||
|
}, {emitEvent: false} |
||||
|
); |
||||
|
this.cd.markForCheck(); |
||||
|
} |
||||
|
|
||||
|
editBehavior() { |
||||
|
|
||||
|
} |
||||
|
|
||||
|
focus() { |
||||
|
this.idInput.nativeElement.scrollIntoView(); |
||||
|
this.idInput.nativeElement.focus(); |
||||
|
} |
||||
|
|
||||
|
private updateModel() { |
||||
|
const value: IotSvgBehavior = this.behaviorRowFormGroup.value; |
||||
|
this.modelValue = {...this.modelValue, ...value}; |
||||
|
this.propagateChange(this.modelValue); |
||||
|
} |
||||
|
|
||||
|
} |
||||
@ -0,0 +1,60 @@ |
|||||
|
<!-- |
||||
|
|
||||
|
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 class="tb-form-panel tb-scada-symbol-behaviors"> |
||||
|
<div class="tb-form-table"> |
||||
|
<div class="tb-form-table-header no-padding-right"> |
||||
|
<div class="tb-form-table-header-cell tb-id-header" translate>scada.behavior.id</div> |
||||
|
<div class="tb-form-table-header-cell tb-name-header" translate>scada.behavior.name</div> |
||||
|
<div class="tb-form-table-header-cell tb-type-header" translate>scada.behavior.type</div> |
||||
|
<div class="tb-form-table-header-cell tb-actions-header"></div> |
||||
|
</div> |
||||
|
<div *ngIf="behaviorsFormArray().controls.length; else noBehaviors" class="tb-form-table-body tb-drop-list" |
||||
|
cdkDropList cdkDropListOrientation="vertical" |
||||
|
[cdkDropListDisabled]="!dragEnabled" |
||||
|
(cdkDropListDropped)="behaviorDrop($event)"> |
||||
|
<div cdkDrag [cdkDragDisabled]="!dragEnabled" |
||||
|
class="tb-draggable-form-table-row" |
||||
|
*ngFor="let behaviorControl of behaviorsFormArray().controls; trackBy: trackByBehavior; let $index = index;"> |
||||
|
<tb-scada-symbol-metadata-behavior-row fxFlex |
||||
|
[formControl]="behaviorControl" |
||||
|
(behaviorRemoved)="removeBehavior($index)"> |
||||
|
</tb-scada-symbol-metadata-behavior-row> |
||||
|
<div class="tb-form-table-row-cell-buttons"> |
||||
|
<button mat-icon-button |
||||
|
type="button" |
||||
|
cdkDragHandle |
||||
|
[ngClass]="{'tb-hidden': !dragEnabled}" |
||||
|
matTooltip="{{ 'action.drag' | translate }}" |
||||
|
matTooltipPosition="above"> |
||||
|
<mat-icon>drag_indicator</mat-icon> |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div> |
||||
|
<button type="button" mat-stroked-button color="primary" (click)="addBehavior()"> |
||||
|
{{ 'scada.behavior.add-behavior' | translate }} |
||||
|
</button> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<ng-template #noBehaviors> |
||||
|
<span fxLayoutAlign="center center" |
||||
|
class="tb-prompt">{{ 'scada.behavior.no-behaviors' | translate }}</span> |
||||
|
</ng-template> |
||||
@ -0,0 +1,43 @@ |
|||||
|
/** |
||||
|
* 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. |
||||
|
*/ |
||||
|
.tb-scada-symbol-behaviors { |
||||
|
flex: 1; |
||||
|
margin: 12px; |
||||
|
.tb-form-table-header-cell { |
||||
|
&.tb-id-header { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
&.tb-name-header { |
||||
|
flex: 1 1 40%; |
||||
|
} |
||||
|
&.tb-type-header { |
||||
|
flex: 1 1 20%; |
||||
|
} |
||||
|
&.tb-actions-header { |
||||
|
width: 120px; |
||||
|
min-width: 120px; |
||||
|
} |
||||
|
} |
||||
|
.tb-form-table { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
.tb-form-table-body { |
||||
|
overflow: auto; |
||||
|
tb-scada-symbol-metadata-behavior-row { |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,177 @@ |
|||||
|
///
|
||||
|
/// 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, |
||||
|
HostBinding, |
||||
|
Input, |
||||
|
OnInit, |
||||
|
QueryList, |
||||
|
ViewChildren, |
||||
|
ViewEncapsulation |
||||
|
} from '@angular/core'; |
||||
|
import { |
||||
|
AbstractControl, |
||||
|
ControlValueAccessor, |
||||
|
NG_VALIDATORS, |
||||
|
NG_VALUE_ACCESSOR, |
||||
|
UntypedFormArray, |
||||
|
UntypedFormBuilder, |
||||
|
UntypedFormControl, |
||||
|
UntypedFormGroup, |
||||
|
Validator |
||||
|
} from '@angular/forms'; |
||||
|
import { IotSvgBehavior, IotSvgBehaviorType } from '@home/components/widget/lib/svg/iot-svg.models'; |
||||
|
import { ValueType } from '@shared/models/constants'; |
||||
|
import { CdkDragDrop } from '@angular/cdk/drag-drop'; |
||||
|
import { |
||||
|
behaviorValid, |
||||
|
behaviorValidator, |
||||
|
ScadaSymbolBehaviorRowComponent |
||||
|
} from '@home/pages/scada-symbol/metadata-components/scada-symbol-behavior-row.component'; |
||||
|
|
||||
|
@Component({ |
||||
|
selector: 'tb-scada-symbol-metadata-behaviors', |
||||
|
templateUrl: './scada-symbol-behaviors.component.html', |
||||
|
styleUrls: ['./scada-symbol-behaviors.component.scss'], |
||||
|
providers: [ |
||||
|
{ |
||||
|
provide: NG_VALUE_ACCESSOR, |
||||
|
useExisting: forwardRef(() => ScadaSymbolBehaviorsComponent), |
||||
|
multi: true |
||||
|
}, |
||||
|
{ |
||||
|
provide: NG_VALIDATORS, |
||||
|
useExisting: forwardRef(() => ScadaSymbolBehaviorsComponent), |
||||
|
multi: true |
||||
|
} |
||||
|
], |
||||
|
encapsulation: ViewEncapsulation.None |
||||
|
}) |
||||
|
export class ScadaSymbolBehaviorsComponent implements ControlValueAccessor, OnInit, Validator { |
||||
|
|
||||
|
@HostBinding('style.display') styleDisplay = 'flex'; |
||||
|
@HostBinding('style.overflow') styleOverflow = 'hidden'; |
||||
|
|
||||
|
@ViewChildren(ScadaSymbolBehaviorRowComponent) |
||||
|
behaviorRows: QueryList<ScadaSymbolBehaviorRowComponent>; |
||||
|
|
||||
|
@Input() |
||||
|
disabled: boolean; |
||||
|
|
||||
|
behaviorsFormGroup: UntypedFormGroup; |
||||
|
|
||||
|
get dragEnabled(): boolean { |
||||
|
return this.behaviorsFormArray().controls.length > 1; |
||||
|
} |
||||
|
|
||||
|
private propagateChange = (_val: any) => {}; |
||||
|
|
||||
|
constructor(private fb: UntypedFormBuilder) { |
||||
|
} |
||||
|
|
||||
|
ngOnInit() { |
||||
|
this.behaviorsFormGroup = this.fb.group({ |
||||
|
behaviors: this.fb.array([]) |
||||
|
}); |
||||
|
this.behaviorsFormGroup.valueChanges.subscribe( |
||||
|
() => { |
||||
|
let behaviors: IotSvgBehavior[] = this.behaviorsFormGroup.get('behaviors').value; |
||||
|
if (behaviors) { |
||||
|
behaviors = behaviors.filter(b => behaviorValid(b)); |
||||
|
} |
||||
|
this.propagateChange(behaviors); |
||||
|
} |
||||
|
); |
||||
|
} |
||||
|
|
||||
|
registerOnChange(fn: any): void { |
||||
|
this.propagateChange = fn; |
||||
|
} |
||||
|
|
||||
|
registerOnTouched(fn: any): void { |
||||
|
} |
||||
|
|
||||
|
setDisabledState(isDisabled: boolean): void { |
||||
|
this.disabled = isDisabled; |
||||
|
if (isDisabled) { |
||||
|
this.behaviorsFormGroup.disable({emitEvent: false}); |
||||
|
} else { |
||||
|
this.behaviorsFormGroup.enable({emitEvent: false}); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
writeValue(value: IotSvgBehavior[] | undefined): void { |
||||
|
const behaviors= value || []; |
||||
|
this.behaviorsFormGroup.setControl('behaviors', this.prepareBehaviorsFormArray(behaviors), {emitEvent: false}); |
||||
|
} |
||||
|
|
||||
|
public validate(c: UntypedFormControl) { |
||||
|
const valid = this.behaviorsFormGroup.valid; |
||||
|
return valid ? null : { |
||||
|
behaviors: { |
||||
|
valid: false, |
||||
|
}, |
||||
|
}; |
||||
|
} |
||||
|
|
||||
|
behaviorDrop(event: CdkDragDrop<string[]>) { |
||||
|
const behaviorsArray = this.behaviorsFormGroup.get('behaviors') as UntypedFormArray; |
||||
|
const behavior = behaviorsArray.at(event.previousIndex); |
||||
|
behaviorsArray.removeAt(event.previousIndex); |
||||
|
behaviorsArray.insert(event.currentIndex, behavior); |
||||
|
} |
||||
|
|
||||
|
behaviorsFormArray(): UntypedFormArray { |
||||
|
return this.behaviorsFormGroup.get('behaviors') as UntypedFormArray; |
||||
|
} |
||||
|
|
||||
|
trackByBehavior(index: number, behaviorControl: AbstractControl): any { |
||||
|
return behaviorControl; |
||||
|
} |
||||
|
|
||||
|
removeBehavior(index: number, emitEvent = true) { |
||||
|
(this.behaviorsFormGroup.get('behaviors') as UntypedFormArray).removeAt(index, {emitEvent}); |
||||
|
} |
||||
|
|
||||
|
addBehavior() { |
||||
|
const behavior: IotSvgBehavior = { |
||||
|
id: '', |
||||
|
name: '', |
||||
|
type: IotSvgBehaviorType.value, |
||||
|
valueType: ValueType.BOOLEAN, |
||||
|
defaultValue: false |
||||
|
}; |
||||
|
const behaviorsArray = this.behaviorsFormGroup.get('behaviors') as UntypedFormArray; |
||||
|
const behaviorControl = this.fb.control(behavior, [behaviorValidator]); |
||||
|
behaviorsArray.push(behaviorControl); |
||||
|
setTimeout(() => { |
||||
|
const behaviorRow = this.behaviorRows.get(this.behaviorRows.length-1); |
||||
|
behaviorRow.focus(); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
private prepareBehaviorsFormArray(behaviors: IotSvgBehavior[] | undefined): UntypedFormArray { |
||||
|
const behaviorsControls: Array<AbstractControl> = []; |
||||
|
if (behaviors) { |
||||
|
behaviors.forEach((behavior) => { |
||||
|
behaviorsControls.push(this.fb.control(behavior, [behaviorValidator])); |
||||
|
}); |
||||
|
} |
||||
|
return this.fb.array(behaviorsControls); |
||||
|
} |
||||
|
} |
||||
|
Before Width: | Height: | Size: 18 KiB After Width: | Height: | Size: 18 KiB |
Loading…
Reference in new issue