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