Skip to content

Commit 550cd9c

Browse files
fcv-iteratorItfcv-iteratorIt
authored
Changed mqtt datatarget topic placeholder + added tooltip (#145)
* Fixed routing of gateway list + fixed memory leak by unsubscribing properly from gateway fetches * Fixed routing errors in gateway list * Changed mqtt datatarget topic placeholder + added tooltip * Added additional text changes from Product Owner * Reverted erroneous text update
1 parent e96a976 commit 550cd9c

File tree

2 files changed

+81
-70
lines changed

2 files changed

+81
-70
lines changed

‎src/app/applications/datatarget/mqtt-edit/mqtt-edit.component.html‎

Lines changed: 75 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -14,79 +14,89 @@
1414
<div class="form-group mt-3 col-12">
1515
<label class="form-label" for="name">{{'QUESTION.GIVE-DATATARGET-NAME' | translate}}</label>*
1616
<input type="text" class="form-control" id="name" name="name"
17-
[placeholder]="'QUESTION.GIVE-DATATARGET-NAME-PLACEHOLDER' | translate" maxlength="50" required
18-
[(ngModel)]="datatarget.name"
19-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('name'), 'is-valid' : formFailedSubmit && !errorFields.includes('name')}">
17+
[placeholder]="'QUESTION.GIVE-DATATARGET-NAME-PLACEHOLDER' | translate" maxlength="50" required
18+
[(ngModel)]="datatarget.name"
19+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('name'), 'is-valid' : formFailedSubmit && !errorFields.includes('name')}">
2020
</div>
2121
</div>
2222

2323
<div class="row mb-2">
2424
<div class="form-group mt-3 col-12">
2525
<label class="form-label" for="url">{{'QUESTION.DATATARGET.MQTT.GIVE-URL' | translate}}</label>*
2626
<input type="text" class="form-control" id="url" name="url"
27-
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-URL-PLACEHOLDER' | translate" required
28-
[(ngModel)]="datatarget.url"
29-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('url'), 'is-valid' : formFailedSubmit && !errorFields.includes('url')}">
27+
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-URL-PLACEHOLDER' | translate" required
28+
[(ngModel)]="datatarget.url"
29+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('url'), 'is-valid' : formFailedSubmit && !errorFields.includes('url')}">
3030
</div>
3131
</div>
3232

3333
<div class="row mb-2">
3434
<div class="form-group mt-3 col-12">
3535
<label class="form-label" for="mqtt-port">{{'QUESTION.DATATARGET.MQTT.GIVE-PORT' | translate}}</label>*
3636
<input type="number" class="form-control" id="mqtt-port" name="mqtt-port" [required]="true"
37-
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-PORT-PLACEHOLDER' | translate" [(ngModel)]="datatarget.mqttPort"
38-
step="1" min="1025" max="65535"
39-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttPort'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttPort')}">
37+
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-PORT-PLACEHOLDER' | translate"
38+
[(ngModel)]="datatarget.mqttPort"
39+
step="1" min="1025" max="65535"
40+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttPort'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttPort')}">
4041
</div>
4142
</div>
4243

4344
<div class="row mb-2">
4445
<div class="form-group mt-3 col-12">
4546
<label class="form-label" for="mqtt-qos">{{'QUESTION.DATATARGET.MQTT.GIVE-QOS' | translate}}</label>*
4647
<fa-icon [icon]="faQuestionCircle" class="form-info-icon"
47-
[matTooltip]="'QUESTION.DATATARGET.MQTT.GIVE-QOS-INFO' | translate" matTooltipPosition="above"
48-
matTooltipShowDelay="600" matTooltipHideDelay="2000"></fa-icon>
48+
[matTooltip]="'QUESTION.DATATARGET.MQTT.GIVE-QOS-INFO' | translate" matTooltipPosition="above"
49+
matTooltipShowDelay="600" matTooltipHideDelay="2000"></fa-icon>
4950
<input type="number" class="form-control" id="mqtt-qos" name="mqtt-qos" [required]="true"
50-
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-QOS-PLACEHOLDER' | translate" [(ngModel)]="datatarget.mqttQos"
51-
step="1" min="0" max="2"
52-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttQos'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttQos')}">
51+
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-QOS-PLACEHOLDER' | translate"
52+
[(ngModel)]="datatarget.mqttQos"
53+
step="1" min="0" max="2"
54+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttQos'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttQos')}">
5355
</div>
5456
</div>
5557

5658
<div class="row mb-2">
5759
<div class="form-group mt-3 col-12">
5860
<label class="form-label" for="mqtt-topic">{{'QUESTION.DATATARGET.MQTT.GIVE-TOPIC' | translate}}</label>*
61+
<fa-icon
62+
[icon]="faQuestionCircle"
63+
class="form-info-icon"
64+
[matTooltip]="'QUESTION.DATATARGET.MQTT.GIVE-TOPIC-INFO' | translate"
65+
matTooltipPosition="above"
66+
matTooltipShowDelay="600"
67+
matTooltipHideDelay="2000"
68+
></fa-icon>
5969
<input type="text" class="form-control" id="mqtt-topic" name="mqtt-topic"
60-
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-TOPIC-PLACEHOLDER' | translate" required
61-
[(ngModel)]="datatarget.mqttTopic"
62-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttTopic'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttTopic')}">
70+
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-TOPIC-PLACEHOLDER' | translate" required
71+
[(ngModel)]="datatarget.mqttTopic"
72+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttTopic'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttTopic')}">
6373
</div>
6474
</div>
6575

6676
<div class="row mb-2">
6777
<div class="form-group mt-3 col-12">
6878
<label class="form-label" for="mqttUsername">{{'QUESTION.DATATARGET.MQTT.GIVE-USERNAME' | translate}}</label>*
6979
<input type="text" class="form-control" id="mqttUsername" name="mqttUsername" [required]="true"
70-
[(ngModel)]="datatarget.mqttUsername"
71-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttUsername'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttUsername')}">
80+
[(ngModel)]="datatarget.mqttUsername"
81+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttUsername'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttUsername')}">
7282
</div>
7383
</div>
7484

7585
<div class="row mb-2">
7686
<div class="form-group mt-3 col-12">
7787
<label class="form-label" for="mqttPassword">{{'QUESTION.DATATARGET.MQTT.GIVE-PASSWORD' | translate}}</label>*
7888
<input type="password" class="form-control" id="mqttPassword" name="mqttPassword" [required]="true"
79-
[(ngModel)]="datatarget.mqttPassword"
80-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttPassword'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttPassword')}">
89+
[(ngModel)]="datatarget.mqttPassword"
90+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttPassword'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttPassword')}">
8191
</div>
8292
</div>
8393

8494
<div class="row mb-2">
8595
<div class="form-group mt-3 col-12">
8696
<label class="form-label" for="timeout">{{'QUESTION.GIVE-DATATARGET-TIMEOUT' | translate}}</label>*
8797
<input type="number" class="form-control" id="timeout" name="timeout" required [(ngModel)]="datatarget.timeout"
88-
step="1" min="0" max="100000" maxlength="7"
89-
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('timeout'), 'is-valid' : formFailedSubmit && !errorFields.includes('timeout')}">
98+
step="1" min="0" max="100000" maxlength="7"
99+
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('timeout'), 'is-valid' : formFailedSubmit && !errorFields.includes('timeout')}">
90100
</div>
91101
</div>
92102

@@ -99,49 +109,49 @@ <h6> {{'QUESTION.DATATARGET.RELATIONS' | translate}} </h6>
99109
<ng-container *ngIf="devices && payloadDecoders && payloadDeviceDatatarget?.length > 0">
100110
<table class="table table-striped table-bordered">
101111
<tbody>
102-
<tr *ngFor="let element of payloadDeviceDatatarget; let i = index;" [attr.data-index]="i">
103-
<td>
104-
<div class="row">
105-
<mat-form-field appearance="fill">
106-
<mat-label>{{'QUESTION.DATATARGET.SELECT-DEVICES' | translate}}</mat-label>
107-
<mat-select multiple name="devices" [(value)]="element.iotDeviceIds">
108-
<mat-option disabled="disabled" class="filter-option">
109-
<button mat-raised-button class="mat-primary fill text-sm" (click)="selectAllDevices(i)">
110-
{{'QUESTION.DATATARGET.SELECTALLDEVICES' | translate}}
111-
</button>
112-
<button mat-raised-button class="mat-primary fill text-sm" (click)="deselectAllDevices(i)">
113-
{{'QUESTION.DATATARGET.DESELECTALLDEVICES' | translate}}
114-
</button>
115-
</mat-option>
116-
<mat-option *ngFor="let device of devices" [value]="device.id">{{device.name}}</mat-option>
117-
</mat-select>
118-
</mat-form-field>
112+
<tr *ngFor="let element of payloadDeviceDatatarget; let i = index;" [attr.data-index]="i">
113+
<td>
114+
<div class="row">
115+
<mat-form-field appearance="fill">
116+
<mat-label>{{'QUESTION.DATATARGET.SELECT-DEVICES' | translate}}</mat-label>
117+
<mat-select multiple name="devices" [(value)]="element.iotDeviceIds">
118+
<mat-option disabled="disabled" class="filter-option">
119+
<button mat-raised-button class="mat-primary fill text-sm" (click)="selectAllDevices(i)">
120+
{{'QUESTION.DATATARGET.SELECTALLDEVICES' | translate}}
121+
</button>
122+
<button mat-raised-button class="mat-primary fill text-sm" (click)="deselectAllDevices(i)">
123+
{{'QUESTION.DATATARGET.DESELECTALLDEVICES' | translate}}
124+
</button>
125+
</mat-option>
126+
<mat-option *ngFor="let device of devices" [value]="device.id">{{device.name}}</mat-option>
127+
</mat-select>
128+
</mat-form-field>
129+
</div>
130+
</td>
131+
<td>
132+
<div class="row">
133+
<mat-form-field appearance="fill">
134+
<mat-label>{{'QUESTION.DATATARGET.SELECT-PAYLOADDECODER' | translate}}</mat-label>
135+
<mat-select matNativeControl name="payloadDecoderId" [(value)]="element.payloadDecoderId">
136+
<mat-option [value]="0">
137+
{{'QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED' | translate}}
138+
</mat-option>
139+
<mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
140+
{{payloadDecoder.name}}
141+
</mat-option>
142+
</mat-select>
143+
</mat-form-field>
144+
</div>
145+
</td>
146+
<td>
147+
<a (click)="openDeleteDialog(i)">
148+
<div class="text-center m-2">
149+
<fa-icon [icon]="faTimesCircle"></fa-icon>
150+
<p>{{'DATATARGET.DELETE' | translate}}</p>
119151
</div>
120-
</td>
121-
<td>
122-
<div class="row">
123-
<mat-form-field appearance="fill">
124-
<mat-label>{{'QUESTION.DATATARGET.SELECT-PAYLOADDECODER' | translate}}</mat-label>
125-
<mat-select matNativeControl name="payloadDecoderId" [(value)]="element.payloadDecoderId">
126-
<mat-option [value]="0">
127-
{{'QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED' | translate}}
128-
</mat-option>
129-
<mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
130-
{{payloadDecoder.name}}
131-
</mat-option>
132-
</mat-select>
133-
</mat-form-field>
134-
</div>
135-
</td>
136-
<td>
137-
<a (click)="openDeleteDialog(i)">
138-
<div class="text-center m-2">
139-
<fa-icon [icon]="faTimesCircle"></fa-icon>
140-
<p>{{'DATATARGET.DELETE' | translate}}</p>
141-
</div>
142-
</a>
143-
</td>
144-
</tr>
152+
</a>
153+
</td>
154+
</tr>
145155
</tbody>
146156
</table>
147157
</ng-container>

‎src/assets/i18n/da.json‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -652,18 +652,19 @@
652652
"GIVE-URL-PLACEHOLDER": "https://min-mqtt-broker.dk",
653653
"GIVE-PORT": "Angiv datatargets broker port",
654654
"GIVE-PORT-PLACEHOLDER": "1883",
655-
"GIVE-QOS": "Angiv hvilken QoS niveau data skal sendes med",
655+
"GIVE-QOS": "Angiv hvilken QoS-niveau data skal sendes med",
656656
"GIVE-QOS-PLACEHOLDER": "0, 1, 2",
657-
"GIVE-QOS-INFO": "QoS (Quality of Service) bestemmer vigtigheden af, at en besked leveres til modtageren. Se dokumentationen for at vide mere.",
657+
"GIVE-QOS-INFO": "QoS (Quality of Service) fastlægger, hvor sikker leveringen af beskeden skal være. Der er tre muligheder: 0 (at most once), 1 (at least once) og 2 (exactly once)",
658658
"GIVE-TOPIC": "Angiv hvilket topic på brokeren der skal sendes til",
659-
"GIVE-TOPIC-PLACEHOLDER": "device/+/event",
659+
"GIVE-TOPIC-PLACEHOLDER": "Topic på ekstern broker",
660+
"GIVE-TOPIC-INFO": "Topic'et kan være givet af den udbyder, som data skal sendes til. Der kan ikke bruges wildcards",
660661
"GIVE-AUTHENTICATION-METHOD": "Vælg autentificeringsmetode",
661662
"USERNAME-PASSWORD": "Brugernavn og password",
662663
"CERTIFICATE": "Certifikat",
663664
"USERNAME": "Brugernavn",
664-
"GIVE-USERNAME": "Angiv et brugernavn med adgang til brokeren og den valgte topic",
665+
"GIVE-USERNAME": "Angiv et brugernavn med adgang til brokeren og det valgte topic",
665666
"PASSWORD": "Adgangskode",
666-
"GIVE-PASSWORD": "Angiv adgangskoden til brugeren"
667+
"GIVE-PASSWORD": "Angiv adgangskoden"
667668
}
668669
},
669670
"MULTICAST": {

0 commit comments

Comments
 (0)