dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: Implement gateway widgets settings forms

Browse Source
This commit is contained in:
Igor Kulikov 2022-04-27 19:54:16 +03:00
parent ac0f367449
commit c47e17a21f
9 changed files with 349 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
application/src/main/data/json/system/widget_bundles/gateway_widgets.json
View File

File diff suppressed because one or more lines are too long

26
ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html Normal file
View File

@ -0,0 +1,26 @@
<!--
Copyright © 2016-2022 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]="gatewayConfigSingleDeviceWidgetSettingsForm" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.gateway-title</mat-label>
<input matInput formControlName="gatewayTitle">
</mat-form-field>
<mat-slide-toggle formControlName="readOnly" class="slide-block">
{{ 'widgets.gateway.read-only' | translate }}
</mat-slide-toggle>
</section>

54
ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts Normal file
View File

@ -0,0 +1,54 @@
///
/// Copyright © 2016-2022 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 { FormBuilder, FormGroup } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@Component({
selector: 'tb-gateway-config-single-device-widget-settings',
templateUrl: './gateway-config-single-device-widget-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class GatewayConfigSingleDeviceWidgetSettingsComponent extends WidgetSettingsComponent {
gatewayConfigSingleDeviceWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.gatewayConfigSingleDeviceWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
gatewayTitle: 'Gateway configuration (Single device)',
readOnly: false
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.gatewayConfigSingleDeviceWidgetSettingsForm = this.fb.group({
gatewayTitle: [settings.gatewayTitle, []],
readOnly: [settings.readOnly, []]
});
}
}

45
ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html Normal file
View File

@ -0,0 +1,45 @@
<!--
Copyright © 2016-2022 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]="gatewayConfigWidgetSettingsForm" fxLayout="column">
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gateway.general-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.widget-title</mat-label>
<input matInput formControlName="widgetTitle">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.default-archive-file-name</mat-label>
<input matInput formControlName="archiveFileName">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.device-type-for-new-gateway</mat-label>
<input matInput formControlName="gatewayType">
</mat-form-field>
</fieldset>
<fieldset class="fields-group">
<legend class="group-title" translate>widgets.gateway.messages-settings</legend>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.save-config-success-message</mat-label>
<input matInput formControlName="successfulSave">
</mat-form-field>
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.device-name-exists-message</mat-label>
<input matInput formControlName="gatewayNameExists">
</mat-form-field>
</fieldset>
</section>

60
ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts Normal file
View File

@ -0,0 +1,60 @@
///
/// Copyright © 2016-2022 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 { FormBuilder, FormGroup } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@Component({
selector: 'tb-gateway-config-widget-settings',
templateUrl: './gateway-config-widget-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class GatewayConfigWidgetSettingsComponent extends WidgetSettingsComponent {
gatewayConfigWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.gatewayConfigWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
widgetTitle: 'Gateway Configuration',
archiveFileName: 'gatewayConfiguration',
gatewayType: 'Gateway',
successfulSave: '',
gatewayNameExists: ''
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.gatewayConfigWidgetSettingsForm = this.fb.group({
widgetTitle: [settings.widgetTitle, []],
archiveFileName: [settings.archiveFileName, []],
gatewayType: [settings.gatewayType, []],
successfulSave: [settings.successfulSave, []],
gatewayNameExists: [settings.gatewayNameExists, []]
});
}
}

41
ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html Normal file
View File

@ -0,0 +1,41 @@
<!--
Copyright © 2016-2022 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]="gatewayEventsWidgetSettingsForm" fxLayout="column">
<mat-form-field fxFlex class="mat-block">
<mat-label translate>widgets.gateway.events-title</mat-label>
<input matInput formControlName="eventsTitle">
</mat-form-field>
<mat-form-field fxFlex class="mat-block" floatLabel="always">
<mat-label translate>widgets.gateway.events-filter</mat-label>
<mat-chip-list #chipList formControlName="eventsReg">
<mat-chip
*ngFor="let eventFilter of gatewayEventsWidgetSettingsForm.get('eventsReg').value"
[removable]="true"
(removed)="removeEventFilter(eventFilter)">
{{eventFilter}}
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
<input
placeholder="{{ 'widgets.gateway.event-key-contains' | translate }}"
[matChipInputSeparatorKeyCodes]="separatorKeysCodes"
[matChipInputFor]="chipList"
matChipInputAddOnBlur
(matChipInputTokenEnd)="addEventFilterFromInput($event)">
</mat-chip-list>
</mat-form-field>
</section>

82
ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts Normal file
View File

@ -0,0 +1,82 @@
///
/// Copyright © 2016-2022 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 { FormBuilder, FormGroup } from '@angular/forms';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
import { MatChipInputEvent } from '@angular/material/chips';
import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
@Component({
selector: 'tb-gateway-events-widget-settings',
templateUrl: './gateway-events-widget-settings.component.html',
styleUrls: ['./../widget-settings.scss']
})
export class GatewayEventsWidgetSettingsComponent extends WidgetSettingsComponent {
separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
gatewayEventsWidgetSettingsForm: FormGroup;
constructor(protected store: Store<AppState>,
private fb: FormBuilder) {
super(store);
}
protected settingsForm(): FormGroup {
return this.gatewayEventsWidgetSettingsForm;
}
protected defaultSettings(): WidgetSettings {
return {
eventsTitle: 'Gateway events form title',
eventsReg: []
};
}
protected onSettingsSet(settings: WidgetSettings) {
this.gatewayEventsWidgetSettingsForm = this.fb.group({
eventsTitle: [settings.eventsTitle, []],
eventsReg: [settings.eventsReg, []]
});
}
removeEventFilter(eventFilter: string) {
const eventsFilter: string[] = this.gatewayEventsWidgetSettingsForm.get('eventsReg').value;
const index = eventsFilter.indexOf(eventFilter);
if (index > -1) {
eventsFilter.splice(index, 1);
this.gatewayEventsWidgetSettingsForm.get('eventsReg').setValue(eventsFilter);
this.gatewayEventsWidgetSettingsForm.get('eventsReg').markAsDirty();
}
}
addEventFilterFromInput(event: MatChipInputEvent) {
const value = event.value;
if ((value || '').trim()) {
const eventsFilter: string[] = this.gatewayEventsWidgetSettingsForm.get('eventsReg').value;
const index = eventsFilter.indexOf(value);
if (index === -1) {
eventsFilter.push(value);
this.gatewayEventsWidgetSettingsForm.get('eventsReg').setValue(eventsFilter);
this.gatewayEventsWidgetSettingsForm.get('eventsReg').markAsDirty();
}
event.chipInput.clear();
}
}
}

24
ui-ngx/src/app/modules/home/components/widget/lib/settings/widget-settings.module.ts
View File

@ -147,6 +147,15 @@ import {
import {
EdgeQuickOverviewWidgetSettingsComponent
} from '@home/components/widget/lib/settings/cards/edge-quick-overview-widget-settings.component';
import {
GatewayConfigWidgetSettingsComponent
} from '@home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component';
import {
GatewayConfigSingleDeviceWidgetSettingsComponent
} from '@home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component';
import {
GatewayEventsWidgetSettingsComponent
} from '@home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component';
@NgModule({
declarations: [
@ -201,7 +210,10 @@ import {
RpcTerminalWidgetSettingsComponent,
RpcShellWidgetSettingsComponent,
DateRangeNavigatorWidgetSettingsComponent,
EdgeQuickOverviewWidgetSettingsComponent
EdgeQuickOverviewWidgetSettingsComponent,
GatewayConfigWidgetSettingsComponent,
GatewayConfigSingleDeviceWidgetSettingsComponent,
GatewayEventsWidgetSettingsComponent
],
imports: [
CommonModule,
@ -260,7 +272,10 @@ import {
RpcTerminalWidgetSettingsComponent,
RpcShellWidgetSettingsComponent,
DateRangeNavigatorWidgetSettingsComponent,
EdgeQuickOverviewWidgetSettingsComponent
EdgeQuickOverviewWidgetSettingsComponent,
GatewayConfigWidgetSettingsComponent,
GatewayConfigSingleDeviceWidgetSettingsComponent,
GatewayEventsWidgetSettingsComponent
]
})
export class WidgetSettingsModule {
@ -305,5 +320,8 @@ export const widgetSettingsComponentsMap: {[key: string]: Type<IWidgetSettingsCo
'tb-rpc-terminal-widget-settings': RpcTerminalWidgetSettingsComponent,
'tb-rpc-shell-widget-settings': RpcShellWidgetSettingsComponent,
'tb-date-range-navigator-widget-settings': DateRangeNavigatorWidgetSettingsComponent,
'tb-edge-quick-overview-widget-settings': EdgeQuickOverviewWidgetSettingsComponent
'tb-edge-quick-overview-widget-settings': EdgeQuickOverviewWidgetSettingsComponent,
'tb-gateway-config-widget-settings': GatewayConfigWidgetSettingsComponent,
'tb-gateway-config-single-device-widget-settings': GatewayConfigSingleDeviceWidgetSettingsComponent,
'tb-gateway-events-widget-settings': GatewayEventsWidgetSettingsComponent
};

14
ui-ngx/src/assets/locale/locale.constant-en_US.json
View File

@ -3394,6 +3394,20 @@
"edge": {
"display-default-title": "Display default title"
},
"gateway": {
"general-settings": "General settings",
"widget-title": "Widget title",
"default-archive-file-name": "Default archive file name",
"device-type-for-new-gateway": "Device type for new gateway",
"messages-settings": "Messages settings",
"save-config-success-message": "Text message about successfully saved gateway configuration",
"device-name-exists-message": "Text message when device with entered name is already exists",
"gateway-title": "Gateway form",
"read-only": "Read only",
"events-title": "Gateway events form title",
"events-filter": "Events filter",
"event-key-contains": "Event key contains..."
},
"gauge": {
"default-color": "Default color",
"radial-gauge-settings": "Radial gauge settings",