Maksym Dudnik
3 years ago
12 changed files with 20 additions and 257 deletions
@ -1,30 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2023 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="action-buttons-container" [style]="{'align-content': settings.alignment}"> |
|
||||
<button mat-button [color]="settings.buttonsClass" |
|
||||
*ngFor="let action of ctx.actionsApi.getActionDescriptors('actionButtonClick')" |
|
||||
[ngClass]="{ |
|
||||
'mat-mdc-button mat-mdc-raised-button': settings.buttonsType === 'raised', |
|
||||
'mdc-button--outlined mat-mdc-outlined-button': settings.buttonsType === 'stroked', |
|
||||
'mat-mdc-unelevated-button': settings.buttonsType === 'flat', |
|
||||
'mat-mdc-menu-item mdc-list-item': settings.buttonsType === 'menu' |
|
||||
}" |
|
||||
(click)="actionButtonClick($event, action)" |
|
||||
>{{action.displayName}} |
|
||||
</button> |
|
||||
</div> |
|
||||
@ -1,34 +0,0 @@ |
|||||
/** |
|
||||
* Copyright © 2016-2023 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%; |
|
||||
|
|
||||
.action-buttons-container { |
|
||||
display: flex; |
|
||||
flex-wrap: wrap; |
|
||||
flex-direction: row; |
|
||||
height: 100%; |
|
||||
width: 100%; |
|
||||
|
|
||||
button { |
|
||||
flex-grow: 1; |
|
||||
margin: 10px; |
|
||||
min-width: 150px; |
|
||||
height: auto; |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
@ -1,61 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2023 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, Input, OnInit } from '@angular/core'; |
|
||||
import { WidgetContext } from '@home/models/widget-component.models'; |
|
||||
import { Store } from '@ngrx/store'; |
|
||||
import { AppState } from '@core/core.state'; |
|
||||
import { WidgetActionDescriptor } from '@shared/models/widget.models'; |
|
||||
import { PageComponent } from '@shared/components/page.component'; |
|
||||
import { ThemePalette } from '@angular/material/core'; |
|
||||
|
|
||||
|
|
||||
interface ActionButtonsWidgetSettings { |
|
||||
buttonsType: string, |
|
||||
buttonsClass: ThemePalette, |
|
||||
alignment: string |
|
||||
} |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-action-buttons-widget', |
|
||||
templateUrl: './action-buttons.component.html', |
|
||||
styleUrls: ['./action-buttons.component.scss'] |
|
||||
}) |
|
||||
export class ActionButtonsComponent implements OnInit { |
|
||||
|
|
||||
@Input() |
|
||||
ctx: WidgetContext; |
|
||||
|
|
||||
settings: ActionButtonsWidgetSettings; |
|
||||
|
|
||||
constructor() { |
|
||||
} |
|
||||
|
|
||||
ngOnInit(): void { |
|
||||
this.settings = this.ctx.settings; |
|
||||
} |
|
||||
|
|
||||
actionButtonClick($event: MouseEvent, actionDescriptor: WidgetActionDescriptor) { |
|
||||
let entityId, entityName, entityLabel; |
|
||||
if (this.ctx.datasources) { |
|
||||
entityId = this.ctx.datasources[0].entity.id; |
|
||||
entityName = this.ctx.datasources[0].entityName; |
|
||||
entityLabel = this.ctx.datasources[0].entityLabel; |
|
||||
} |
|
||||
this.ctx.actionsApi.handleWidgetAction($event, actionDescriptor, entityId, entityName, null, entityLabel); |
|
||||
} |
|
||||
|
|
||||
} |
|
||||
@ -1,43 +0,0 @@ |
|||||
<!-- |
|
||||
|
|
||||
Copyright © 2016-2023 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-widget-settings" [formGroup]="ActionButtonsSettingsForm" fxLayout="column"> |
|
||||
<mat-form-field fxFlex class="mat-block"> |
|
||||
<mat-label translate>widgets.action-buttons.button-type</mat-label> |
|
||||
<mat-select required formControlName="buttonsType"> |
|
||||
<mat-option *ngFor="let type of buttonTypes" [value]="type"> |
|
||||
{{type}} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field fxFlex class="mat-block"> |
|
||||
<mat-label translate>widgets.action-buttons.button-class</mat-label> |
|
||||
<mat-select required formControlName="buttonsClass"> |
|
||||
<mat-option *ngFor="let class of buttonClasses" [value]="class"> |
|
||||
{{class}} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
<mat-form-field fxFlex class="mat-block"> |
|
||||
<mat-label translate>widgets.action-buttons.alignment</mat-label> |
|
||||
<mat-select required formControlName="alignment"> |
|
||||
<mat-option *ngFor="let type of alignment" [value]="type"> |
|
||||
{{type}} |
|
||||
</mat-option> |
|
||||
</mat-select> |
|
||||
</mat-form-field> |
|
||||
</section> |
|
||||
@ -1,62 +0,0 @@ |
|||||
///
|
|
||||
/// Copyright © 2016-2023 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 } from '@angular/core'; |
|
||||
import { WidgetSettings, WidgetSettingsComponent } from '@shared/models/widget.models'; |
|
||||
import { UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms'; |
|
||||
import { Store } from '@ngrx/store'; |
|
||||
import { AppState } from '@core/core.state'; |
|
||||
|
|
||||
@Component({ |
|
||||
selector: 'tb-action-buttons-widget-settings', |
|
||||
templateUrl: './action-buttons-widget-settings.component.html', |
|
||||
styleUrls: ['./../widget-settings.scss'] |
|
||||
}) |
|
||||
export class ActionButtonsWidgetSettingsComponent extends WidgetSettingsComponent { |
|
||||
|
|
||||
ActionButtonsSettingsForm: UntypedFormGroup; |
|
||||
|
|
||||
buttonTypes = ['basic', 'raised', 'stroked', 'flat']; |
|
||||
|
|
||||
buttonClasses = ['basic', 'primary', 'accent', 'warn']; |
|
||||
|
|
||||
alignment = ['center', 'start', 'end', 'normal', 'baseline', 'space-between', 'space-around', 'stretch']; |
|
||||
|
|
||||
constructor(protected store: Store<AppState>, |
|
||||
private fb: UntypedFormBuilder) { |
|
||||
super(store); |
|
||||
} |
|
||||
|
|
||||
protected settingsForm(): UntypedFormGroup { |
|
||||
return this.ActionButtonsSettingsForm; |
|
||||
} |
|
||||
|
|
||||
protected defaultSettings(): WidgetSettings { |
|
||||
return { |
|
||||
buttonsType: 'basic', |
|
||||
buttonsClass: 'basic', |
|
||||
alignment: 'center' |
|
||||
}; |
|
||||
} |
|
||||
|
|
||||
protected onSettingsSet(settings: WidgetSettings) { |
|
||||
this.ActionButtonsSettingsForm = this.fb.group({ |
|
||||
buttonsType: [settings.buttonsType, []], |
|
||||
buttonsClass: [settings.buttonsClass, []], |
|
||||
alignment: [settings.alignment, []] |
|
||||
}); |
|
||||
} |
|
||||
} |
|
||||
Loading…
Reference in new issue