简柏林 / thingskit · Commits

Commit ed725c4aa2c1326557075d0d3cfb3e528725c3e3

Authored by Vladyslav_Prykhodko
1 parent 45fc8fed

UI: Add validation format topic

Inline Side-by-side
Showing 3 changed files with 63 additions and 45 deletions
... ... @@ -19,46 +19,60 @@
19 19 <section formGroupName="configuration">
20 20 <fieldset class="fields-group">
21 21 <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend>
22   - <h6 class="mat-body" translate>device-profile.support-level-wildcards</h6>
23   - <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
24   - <mat-form-field fxFlex>
25   - <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
26   - <input matInput required
27   - formControlName="deviceTelemetryTopic"
28   - type="text">
29   - <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('required')">
30   - {{ 'device-profile.telemetry-topic-filter-required' | translate}}
31   - </mat-error>
32   - </mat-form-field>
33   - <mat-form-field fxFlex>
34   - <mat-label translate>device-profile.rpc-request-topic-filter</mat-label>
35   - <input matInput required
36   - formControlName="deviceRpcRequestTopic"
37   - type="text">
38   - <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('required')">
39   - {{ 'device-profile.rpc-request-topic-filter-required' | translate}}
40   - </mat-error>
41   - </mat-form-field>
42   - </div>
43   - <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
44   - <mat-form-field fxFlex>
45   - <mat-label translate>device-profile.attributes-topic-filter</mat-label>
46   - <input matInput required
47   - formControlName="deviceAttributesTopic"
48   - type="text">
49   - <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('required')">
50   - {{ 'device-profile.attributes-topic-filter-required' | translate}}
51   - </mat-error>
52   - </mat-form-field>
53   - <mat-form-field fxFlex>
54   - <mat-label translate>device-profile.rpc-response-topic-filter</mat-label>
55   - <input matInput required
56   - formControlName="deviceRpcResponseTopic"
57   - type="text">
58   - <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('required')">
59   - {{ 'device-profile.rpc-response-topic-filter-required' | translate}}
60   - </mat-error>
61   - </mat-form-field>
  22 + <h6 class="mat-body" innerHTML="{{ 'device-profile.support-level-wildcards' | translate }}"></h6>
  23 + <div fxLayoutGap="8px" fxLayout="column">
  24 + <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
  25 + <mat-form-field fxFlex>
  26 + <mat-label translate>device-profile.telemetry-topic-filter</mat-label>
  27 + <input matInput required
  28 + formControlName="deviceTelemetryTopic"
  29 + type="text">
  30 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('required')">
  31 + {{ 'device-profile.telemetry-topic-filter-required' | translate}}
  32 + </mat-error>
  33 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceTelemetryTopic').hasError('pattern')">
  34 + {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
  35 + </mat-error>
  36 + </mat-form-field>
  37 + <mat-form-field fxFlex>
  38 + <mat-label translate>device-profile.rpc-request-topic-filter</mat-label>
  39 + <input matInput required
  40 + formControlName="deviceRpcRequestTopic"
  41 + type="text">
  42 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('required')">
  43 + {{ 'device-profile.rpc-request-topic-filter-required' | translate}}
  44 + </mat-error>
  45 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcRequestTopic').hasError('pattern')">
  46 + {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
  47 + </mat-error>
  48 + </mat-form-field>
  49 + </div>
  50 + <div fxLayout="row" fxLayoutGap="8px" fxLayout.xs="column">
  51 + <mat-form-field fxFlex>
  52 + <mat-label translate>device-profile.attributes-topic-filter</mat-label>
  53 + <input matInput required
  54 + formControlName="deviceAttributesTopic"
  55 + type="text">
  56 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('required')">
  57 + {{ 'device-profile.attributes-topic-filter-required' | translate}}
  58 + </mat-error>
  59 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceAttributesTopic').hasError('pattern')">
  60 + {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
  61 + </mat-error>
  62 + </mat-form-field>
  63 + <mat-form-field fxFlex>
  64 + <mat-label translate>device-profile.rpc-response-topic-filter</mat-label>
  65 + <input matInput required
  66 + formControlName="deviceRpcResponseTopic"
  67 + type="text">
  68 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('required')">
  69 + {{ 'device-profile.rpc-response-topic-filter-required' | translate}}
  70 + </mat-error>
  71 + <mat-error *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('configuration.deviceRpcResponseTopic').hasError('pattern')">
  72 + {{ 'device-profile.not-valid-pattern-topic-filter' | translate}}
  73 + </mat-error>
  74 + </mat-form-field>
  75 + </div>
62 76 </div>
63 77 </fieldset>
64 78 </section>
... ...
... ... @@ -40,6 +40,9 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
40 40 mqttDeviceProfileTransportConfigurationFormGroup: FormGroup;
41 41
42 42 private requiredValue: boolean;
  43 +
  44 + private MQTTTopicPattern = new RegExp('^((?![#+]).)*$|^(.*[^#]\/|^)#$|^(.*\/|^)\+(\/.*|$)$');
  45 +
43 46 get required(): boolean {
44 47 return this.requiredValue;
45 48 }
... ... @@ -67,10 +70,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
67 70 ngOnInit() {
68 71 this.mqttDeviceProfileTransportConfigurationFormGroup = this.fb.group({
69 72 configuration: this.fb.group({
70   - deviceAttributesTopic: [null, Validators.required],
71   - deviceTelemetryTopic: [null, Validators.required],
72   - deviceRpcRequestTopic: [null, Validators.required],
73   - deviceRpcResponseTopic: [null, Validators.required]
  73 + deviceAttributesTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]],
  74 + deviceTelemetryTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]],
  75 + deviceRpcRequestTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]],
  76 + deviceRpcResponseTopic: [null, [Validators.required, Validators.pattern(this.MQTTTopicPattern)]]
74 77 })
75 78 });
76 79 this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
... ...
... ... @@ -799,7 +799,8 @@
799 799 "attributes-topic-filter": "Attributes topic filter",
800 800 "attributes-topic-filter-required": "Attributes topic filter is required.",
801 801 "rpc-response-topic-filter": "RPC response topic filter",
802   - "rpc-response-topic-filter-required": "RPC response topic filter is required."
  802 + "rpc-response-topic-filter-required": "RPC response topic filter is required.",
  803 + "not-valid-pattern-topic-filter": "Not valid pattern topic filter"
803 804 },
804 805 "dialog": {
805 806 "close": "Close dialog"
... ...