IOT-262 add detail page

Author: Jeppe Elkjær Jørgensen

src/app/shared/services/payloadDeviceDatatarget.service.ts

@@ -34,4 +34,19 @@ export class PayloadDeviceDatatargetService {
     return this.restService.get(this.BASEURL + this.BYDATATARGETURL, null, id);
   }
 
+  mapToDatatargetDevicePayload(dto: PayloadDeviceDatatargetGetByDataTargetResponse): PayloadDeviceDatatarget[] {
+    const payloadDeviceDatatargetList = [];
+    dto.data.forEach(
+      (element) => {
+        payloadDeviceDatatargetList.push({
+          id: element.id,
+          iotDeviceIds: element.iotDevices.map((x) => x.id),
+          payloadDecoderId: element.payloadDecoder?.id,
+          dataTargetId: element.dataTarget.id
+        });
+      }
+    );
+    return payloadDeviceDatatargetList;
+  }
+
 }

src/app/views/datatarget/datatarget/datatarget.component.html

@@ -35,6 +35,26 @@ <h4>{{ 'DATATARGET.TYPE' | translate }}</h4>
             <p>{{datatarget.type}}</p>
           </div>
         </div>
+        <div class="col-12 py-4">
+          <div class="col-12 col-sm-12">
+            <h4>{{ 'DATATARGET.RELATIONS' | translate }}</h4>
+          </div>
+          <div class="col-12 pt-2 col-sm-8" *ngFor="let relation of dataTargetRelations">
+            <p>{{'DATATARGET.DATATARGET' | translate}}</p>
+              <ul>
+                <li>
+                  {{relation.dataTarget.name}}
+                </li>
+              </ul>
+            
+              <p>{{'DATATARGET.IOTDEVICE' | translate}}</p>
+            <div *ngFor="let device of relation.iotDevices">
+               <ul>
+                 <li>{{device.name}}</li>
+               </ul>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>

src/app/views/datatarget/datatarget/datatarget.component.ts

@@ -7,6 +7,8 @@ import { ActivatedRoute } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 import { DatatargetService } from 'src/app/shared/services/datatarget.service';
 import { DatatargetResponse } from 'src/app/models/datatarget-response';
+import { PayloadDeviceDatatargetService } from '@shared/services/payloadDeviceDatatarget.service';
+import { PayloadDeviceDatatarget, PayloadDeviceDatatargetGetByDataTarget } from '@app/models/payload-device-data';
 
 @Component({
     selector: 'app-datatarget',
@@ -100,16 +102,19 @@ export class DatatargetComponent implements OnInit {
     ];
     public pageOffset: 0;
     public pageTotal: number;
+    public dataTargetRelations: PayloadDeviceDatatargetGetByDataTarget[];
 
     constructor(
         private route: ActivatedRoute,
+        private datatargetRelationServicer: PayloadDeviceDatatargetService,
         private datatargetService: DatatargetService,
         public translate: TranslateService) { }
 
     ngOnInit(): void {
         const id: number = +this.route.snapshot.paramMap.get('datatargetId');
         if (id) {
             this.getDatatarget(id);
+            this.getDatatargetRelations(id);
         }
         this.translate.get(['NAV.MY-DATATARGET'])
             .subscribe(translations => {
@@ -124,4 +129,11 @@ export class DatatargetComponent implements OnInit {
             });
     }
 
+    getDatatargetRelations(id: number) {
+        this.datatargetRelationServicer.getByDataTarget(id)
+            .subscribe( (response) => {
+                this.dataTargetRelations = response.data;
+            });
+    }
+
 }

src/assets/i18n/da.json

@@ -56,7 +56,10 @@
     "TIMEOUT": "Timeout",
     "TYPE": "Type",
     "NAME": "Datatarget navn",
-    "DELETE": "Slet"
+    "DELETE": "Slet",
+    "RELATIONS": "Tilknyttede IoT enheder og payload decoders",
+    "DATATARGET": "Data Target navn:",
+    "IOTDEVICE": "IoT Device navn:"
   },
   "APPLICATION-TABLE": {
     "NAME": "NAVN",