Merge pull request #188 from OS2iot/feature/FeedbackChanges

feedback changes

Author: augusthjerrild

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.html

@@ -2,10 +2,16 @@
   <div class="row">
     <div class="col-md-6 d-flex align-items-stretch">
       <div class="jumbotron jumbotron--full-width">
-        <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
+        <div class="d-flex align-items-start justify-content-between">
+          <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
+          <div class="spinner-placeholder">
+            <div *ngIf="loading">
+              <app-loading-spinner></app-loading-spinner>
+            </div>
+          </div>
+        </div>
         <div *ngIf="dataTarget.type === DataTargetType.MQTT">
-          <button (click)="pingDataTarget()"
-                  class="mt-3 btn btn-primary">
+          <button (click)="pingDataTarget()" class="mt-3 btn btn-primary">
             {{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}
           </button>
           <p class="mt-2">{{ "DATATARGET.TEST_CONNECTION.SEND-PING-TO-DATATARGET" | translate }}</p>
@@ -24,20 +30,23 @@ <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
         <mat-select
           [(value)]="payloadDecoderId"
           [placeholder]="'DATATARGET.TEST_CONNECTION.CHOOSE-PAYLOAD-DECODER' | translate"
-          class="mt-3 form-control">
+          class="mt-3 form-control"
+        >
           <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>
-        <button (click)="pingDataTarget(payloadData)" [disabled]="!payloadData"
-                class="mt-3 btn btn-primary">{{ "DATATARGET.TEST_CONNECTION.SEND-DATA-PACKAGE" | translate }}
+        <button (click)="pingDataTarget(payloadData)" [disabled]="!payloadData" class="mt-3 btn btn-primary">
+          {{ "DATATARGET.TEST_CONNECTION.SEND-DATA-PACKAGE" | translate }}
         </button>
         <p class="mt-2" style="white-space: pre-wrap">
           {{ "DATATARGET.TEST_CONNECTION.SEND-DATA-PACKAGE-DESCRIPTION" | translate }}
-          {{ dataTarget.type === DataTargetType.MQTT ? ("DATATARGET.TEST_CONNECTION.MQTT-DISCLAIMER"| translate) : "" }}
+          {{
+            dataTarget.type === DataTargetType.MQTT ? ("DATATARGET.TEST_CONNECTION.MQTT-DISCLAIMER" | translate) : ""
+          }}
         </p>
       </div>
     </div>
@@ -77,8 +86,5 @@ <h3>{{ "DATATARGET.TEST_CONNECTION.RECEIVED-RESPONSE" | translate }}</h3>
         </ngx-monaco-editor>
       </div>
     </div>
-    <div *ngIf="loading">
-      <app-loading-spinner></app-loading-spinner>
-    </div>
   </div>
 </div>

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.scss

@@ -5,3 +5,13 @@
 .min-height-400 {
   min-height: 400px;
 }
+
+::ng-deep.loading-wrapper {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.spinner-placeholder{
+  width: 80px;
+  height: 80px;
+}

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.ts

@@ -11,6 +11,7 @@ import { DataTargetType } from "@shared/enums/datatarget-type";
 import { PayloadDecoderMinimal } from "@payload-decoder/payload-decoder.model";
 import { PayloadDecoderService } from "@payload-decoder/payload-decoder.service";
 import { PayloadDeviceDatatargetService } from "@payload-decoder/payload-device-datatarget.service";
+import { TranslateService } from "@ngx-translate/core";
 
 @Component({
   selector: "app-datatarget-test-connection",
@@ -43,6 +44,7 @@ export class DatatargetTestConnectionComponent implements OnInit, OnDestroy {
 
   constructor(
     private deviceService: IoTDeviceService,
+    public translate: TranslateService,
     private dataTargetService: DatatargetService,
     private route: ActivatedRoute,
     private payloadDecoderService: PayloadDecoderService,
@@ -99,7 +101,11 @@ export class DatatargetTestConnectionComponent implements OnInit, OnDestroy {
       })
       .subscribe(
         response => {
-          this.testResponse = response?.result ? JSON.stringify(response.result, null, 2) : "";
+          this.testResponse = response?.result
+            ? JSON.stringify(response.result, null, 2)
+            : this.dataTarget.type === DataTargetType.MQTT
+            ? this.translate.instant("DATATARGET.SEE-RESULT-IN-LOG")
+            : "";
           this.decodedData = response?.decodedPayload ? JSON.stringify(response.decodedPayload, null, 2) : "";
           this.loading = false;
         },

src/assets/i18n/da.json

@@ -245,6 +245,7 @@
     "LATEST_MESSAGE": "Seneste besked",
     "24H_STATUS": "Status (24 timer)",
     "ADD-TO-OPENDATADK": "Send data til OpenDataDK",
+    "SEE-RESULT-IN-LOG": "// Se resultatet i loggen.",
     "OPENDATA-DK": {
       "TYPE": "OpenDataDK",
       "NAME": "Open Data DK",