简柏林 / 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,46 +19,60 @@
19 <section formGroupName="configuration"> 19 <section formGroupName="configuration">
20 <fieldset class="fields-group"> 20 <fieldset class="fields-group">
21 <legend class="group-title" translate>device-profile.mqtt-device-topic-filters</legend> 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 </div> 76 </div>
63 </fieldset> 77 </fieldset>
64 </section> 78 </section>
@@ -40,6 +40,9 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control @@ -40,6 +40,9 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
40 mqttDeviceProfileTransportConfigurationFormGroup: FormGroup; 40 mqttDeviceProfileTransportConfigurationFormGroup: FormGroup;
41 41
42 private requiredValue: boolean; 42 private requiredValue: boolean;
  43 +
  44 + private MQTTTopicPattern = new RegExp('^((?![#+]).)*$|^(.*[^#]\/|^)#$|^(.*\/|^)\+(\/.*|$)$');
  45 +
43 get required(): boolean { 46 get required(): boolean {
44 return this.requiredValue; 47 return this.requiredValue;
45 } 48 }
@@ -67,10 +70,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control @@ -67,10 +70,10 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
67 ngOnInit() { 70 ngOnInit() {
68 this.mqttDeviceProfileTransportConfigurationFormGroup = this.fb.group({ 71 this.mqttDeviceProfileTransportConfigurationFormGroup = this.fb.group({
69 configuration: this.fb.group({ 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 this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => { 79 this.mqttDeviceProfileTransportConfigurationFormGroup.valueChanges.subscribe(() => {
@@ -799,7 +799,8 @@ @@ -799,7 +799,8 @@
799 "attributes-topic-filter": "Attributes topic filter", 799 "attributes-topic-filter": "Attributes topic filter",
800 "attributes-topic-filter-required": "Attributes topic filter is required.", 800 "attributes-topic-filter-required": "Attributes topic filter is required.",
801 "rpc-response-topic-filter": "RPC response topic filter", 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 "dialog": { 805 "dialog": {
805 "close": "Close dialog" 806 "close": "Close dialog"