Skip to content

Commit

Permalink
Changed mqtt datatarget topic placeholder + added tooltip (#145)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@fcv-iteratorIt
fcv-iteratorIt committed Dec 1, 2023
1 parent e96a976 commit 550cd9c
Show file tree
Hide file tree
Showing 2 changed files with 81 additions and 70 deletions.
140 changes: 75 additions & 65 deletions src/app/applications/datatarget/mqtt-edit/mqtt-edit.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,79 +14,89 @@
<div class="form-group mt-3 col-12">
<label class="form-label" for="name">{{'QUESTION.GIVE-DATATARGET-NAME' | translate}}</label>*
<input type="text" class="form-control" id="name" name="name"
[placeholder]="'QUESTION.GIVE-DATATARGET-NAME-PLACEHOLDER' | translate" maxlength="50" required
[(ngModel)]="datatarget.name"
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('name'), 'is-valid' : formFailedSubmit && !errorFields.includes('name')}">
[placeholder]="'QUESTION.GIVE-DATATARGET-NAME-PLACEHOLDER' | translate" maxlength="50" required
[(ngModel)]="datatarget.name"
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('name'), 'is-valid' : formFailedSubmit && !errorFields.includes('name')}">
</div>
</div>

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

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

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

<div class="row mb-2">
<div class="form-group mt-3 col-12">
<label class="form-label" for="mqtt-topic">{{'QUESTION.DATATARGET.MQTT.GIVE-TOPIC' | translate}}</label>*
<fa-icon
[icon]="faQuestionCircle"
class="form-info-icon"
[matTooltip]="'QUESTION.DATATARGET.MQTT.GIVE-TOPIC-INFO' | translate"
matTooltipPosition="above"
matTooltipShowDelay="600"
matTooltipHideDelay="2000"
></fa-icon>
<input type="text" class="form-control" id="mqtt-topic" name="mqtt-topic"
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-TOPIC-PLACEHOLDER' | translate" required
[(ngModel)]="datatarget.mqttTopic"
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttTopic'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttTopic')}">
[placeholder]="'QUESTION.DATATARGET.MQTT.GIVE-TOPIC-PLACEHOLDER' | translate" required
[(ngModel)]="datatarget.mqttTopic"
[ngClass]="{'is-invalid' : formFailedSubmit && errorFields.includes('mqttTopic'), 'is-valid' : formFailedSubmit && !errorFields.includes('mqttTopic')}">
</div>
</div>

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

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

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

Expand All @@ -99,49 +109,49 @@ <h6> {{'QUESTION.DATATARGET.RELATIONS' | translate}} </h6>
<ng-container *ngIf="devices && payloadDecoders && payloadDeviceDatatarget?.length > 0">
<table class="table table-striped table-bordered">
<tbody>
<tr *ngFor="let element of payloadDeviceDatatarget; let i = index;" [attr.data-index]="i">
<td>
<div class="row">
<mat-form-field appearance="fill">
<mat-label>{{'QUESTION.DATATARGET.SELECT-DEVICES' | translate}}</mat-label>
<mat-select multiple name="devices" [(value)]="element.iotDeviceIds">
<mat-option disabled="disabled" class="filter-option">
<button mat-raised-button class="mat-primary fill text-sm" (click)="selectAllDevices(i)">
{{'QUESTION.DATATARGET.SELECTALLDEVICES' | translate}}
</button>
<button mat-raised-button class="mat-primary fill text-sm" (click)="deselectAllDevices(i)">
{{'QUESTION.DATATARGET.DESELECTALLDEVICES' | translate}}
</button>
</mat-option>
<mat-option *ngFor="let device of devices" [value]="device.id">{{device.name}}</mat-option>
</mat-select>
</mat-form-field>
<tr *ngFor="let element of payloadDeviceDatatarget; let i = index;" [attr.data-index]="i">
<td>
<div class="row">
<mat-form-field appearance="fill">
<mat-label>{{'QUESTION.DATATARGET.SELECT-DEVICES' | translate}}</mat-label>
<mat-select multiple name="devices" [(value)]="element.iotDeviceIds">
<mat-option disabled="disabled" class="filter-option">
<button mat-raised-button class="mat-primary fill text-sm" (click)="selectAllDevices(i)">
{{'QUESTION.DATATARGET.SELECTALLDEVICES' | translate}}
</button>
<button mat-raised-button class="mat-primary fill text-sm" (click)="deselectAllDevices(i)">
{{'QUESTION.DATATARGET.DESELECTALLDEVICES' | translate}}
</button>
</mat-option>
<mat-option *ngFor="let device of devices" [value]="device.id">{{device.name}}</mat-option>
</mat-select>
</mat-form-field>
</div>
</td>
<td>
<div class="row">
<mat-form-field appearance="fill">
<mat-label>{{'QUESTION.DATATARGET.SELECT-PAYLOADDECODER' | translate}}</mat-label>
<mat-select matNativeControl name="payloadDecoderId" [(value)]="element.payloadDecoderId">
<mat-option [value]="0">
{{'QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED' | translate}}
</mat-option>
<mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
{{payloadDecoder.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</td>
<td>
<a (click)="openDeleteDialog(i)">
<div class="text-center m-2">
<fa-icon [icon]="faTimesCircle"></fa-icon>
<p>{{'DATATARGET.DELETE' | translate}}</p>
</div>
</td>
<td>
<div class="row">
<mat-form-field appearance="fill">
<mat-label>{{'QUESTION.DATATARGET.SELECT-PAYLOADDECODER' | translate}}</mat-label>
<mat-select matNativeControl name="payloadDecoderId" [(value)]="element.payloadDecoderId">
<mat-option [value]="0">
{{'QUESTION.DATATARGET.NO-PAYLOAD-DECODER-SELECTED' | translate}}
</mat-option>
<mat-option *ngFor="let payloadDecoder of payloadDecoders" [value]="payloadDecoder.id">
{{payloadDecoder.name}}
</mat-option>
</mat-select>
</mat-form-field>
</div>
</td>
<td>
<a (click)="openDeleteDialog(i)">
<div class="text-center m-2">
<fa-icon [icon]="faTimesCircle"></fa-icon>
<p>{{'DATATARGET.DELETE' | translate}}</p>
</div>
</a>
</td>
</tr>
</a>
</td>
</tr>
</tbody>
</table>
</ng-container>
Expand Down
11 changes: 6 additions & 5 deletions src/assets/i18n/da.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -652,18 +652,19 @@
"GIVE-URL-PLACEHOLDER": "https://min-mqtt-broker.dk",
"GIVE-PORT": "Angiv datatargets broker port",
"GIVE-PORT-PLACEHOLDER": "1883",
"GIVE-QOS": "Angiv hvilken QoS niveau data skal sendes med",
"GIVE-QOS": "Angiv hvilken QoS-niveau data skal sendes med",
"GIVE-QOS-PLACEHOLDER": "0, 1, 2",
"GIVE-QOS-INFO": "QoS (Quality of Service) bestemmer vigtigheden af, at en besked leveres til modtageren. Se dokumentationen for at vide mere.",
"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)",
"GIVE-TOPIC": "Angiv hvilket topic på brokeren der skal sendes til",
"GIVE-TOPIC-PLACEHOLDER": "device/+/event",
"GIVE-TOPIC-PLACEHOLDER": "Topic på ekstern broker",
"GIVE-TOPIC-INFO": "Topic'et kan være givet af den udbyder, som data skal sendes til. Der kan ikke bruges wildcards",
"GIVE-AUTHENTICATION-METHOD": "Vælg autentificeringsmetode",
"USERNAME-PASSWORD": "Brugernavn og password",
"CERTIFICATE": "Certifikat",
"USERNAME": "Brugernavn",
"GIVE-USERNAME": "Angiv et brugernavn med adgang til brokeren og den valgte topic",
"GIVE-USERNAME": "Angiv et brugernavn med adgang til brokeren og det valgte topic",
"PASSWORD": "Adgangskode",
"GIVE-PASSWORD": "Angiv adgangskoden til brugeren"
"GIVE-PASSWORD": "Angiv adgangskoden"
}
},
"MULTICAST": {
Expand Down

0 comments on commit 550cd9c

Please sign in to comment.