UI: Implement gateway widgets settings forms

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.html

@@ -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>

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-single-device-widget-settings.component.ts

@@ -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, []]
+    });
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.html

@@ -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>

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-config-widget-settings.component.ts

@@ -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, []]
+    });
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.html

@@ -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>

ui-ngx/src/app/modules/home/components/widget/lib/settings/gateway/gateway-events-widget-settings.component.ts

@@ -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();
+    }
+  }
+}

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

@@ -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
 };

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -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",