FIWARE datatarget (#67)

* Datatarget multi-types administration and new FIWARE Datatarget type

* PR fixes

* DatatargetTypesService pr fixes

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { MonacoEditorModule } from 'ngx-monaco-editor';
 import { MatInputModule } from '@angular/material/input';
 import { MatPaginatorIntl } from '@angular/material/paginator';
 import { MatPaginatorIntlDa } from '@shared/helpers/mat-paginator-intl-da';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 export function HttpLoaderFactory(http: HttpClient) {
     return new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -62,6 +63,7 @@ export function tokenGetter() {
         SearchModule,
         HttpClientModule,
         MatInputModule,
+        MatTooltipModule,
         JwtModule.forRoot({
             config: {
                 tokenGetter

src/app/applications/application-detail/application-detail.component.html

@@ -66,7 +66,7 @@ <h3>Detaljer</h3>
               <div class="jumbotron">
                 <div *ngIf="canEdit else readOnly">
                   <app-top-bar-table [component]="true" [title]="'APPLICATION.DATATARGET-SHOW' | translate"
-                  [ctaLabelPrimary]="'FORM.CREATE-NEW-DATATARGET' | translate" [ctaRouterLinkPrimary]="'datatarget-edit'">
+                  [ctaLabelPrimary]="'FORM.CREATE-NEW-DATATARGET' | translate" [ctaRouterLinkPrimary]="'datatarget-new'">
                   </app-top-bar-table>
                 </div>
                 <ng-template #readOnly>

src/app/applications/application-detail/application-detail.component.ts

@@ -52,9 +52,7 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy {
         label: '',
         editRouterLink: '../../edit-application/' + this.id,
         isErasable: true,
-      };
-
-      console.log(this.id);
+      };      
     }
 
     this.translate

src/app/applications/applications-routing.module.ts

@@ -11,7 +11,7 @@ import { DatatargetDetailComponent } from './datatarget/datatarget-detail/datata
 import { BulkImportComponent } from './bulk-import/bulk-import.component';
 import { MulticastEditComponent } from './multicast/multicast-edit/multicast-edit.component';
 import { MulticastDetailComponent } from './multicast/multicast-detail/multicast-detail.component';
-
+import { DatatargetNewComponent } from './datatarget/datatarget-new/datatarget-new.component';
 
 const applicationRoutes: Routes = [
     {
@@ -27,12 +27,11 @@ const applicationRoutes: Routes = [
                     { path: '', component: ApplicationDetailComponent },
                     { path: 'new-iot-device', component: IotDeviceEditComponent, },
                     { path: 'iot-device-edit/:deviceId', component: IotDeviceEditComponent, },
-                    { path: 'iot-device/:deviceId', component: IoTDeviceDetailComponent, },    
-
+                    { path: 'iot-device/:deviceId', component: IoTDeviceDetailComponent, },
+                    { path: 'datatarget-new', component: DatatargetNewComponent },
                     { path: 'datatarget-edit', component: DatatargetEditComponent },
                     { path: 'datatarget-edit/:datatargetId', component: DatatargetEditComponent },
-                    { path: 'datatarget/:datatargetId', component: DatatargetDetailComponent },    
-
+                    { path: 'datatarget/:datatargetId', component: DatatargetDetailComponent },                                        
                     { path: 'multicast-edit', component: MulticastEditComponent},
                     { path: 'multicast-edit/:multicastId', component: MulticastEditComponent },
                     { path: 'multicast/:multicastId', component: MulticastDetailComponent },
@@ -41,7 +40,7 @@ const applicationRoutes: Routes = [
                 ],
             },
 
-        ],
+        ], 
     },
 ];
 

src/app/applications/datatarget/datatarget-detail/datatarget-detail-type-selector.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { ViewContainerRef } from '@angular/core';
+import { DatatargetDetailTypeSelectorDirective } from './datatarget-detail-type-selector.directive';
+let  viewContainerRef: ViewContainerRef;
+describe('Directive: DatatargetDetailTypeSelector', () => {
+  it('should create an instance', () => {
+    const directive = new DatatargetDetailTypeSelectorDirective(viewContainerRef);
+    expect(directive).toBeTruthy();
+  });
+});

src/app/applications/datatarget/datatarget-detail/datatarget-detail-type-selector.directive.ts

@@ -0,0 +1,9 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[detail-component]'
+})
+export class DatatargetDetailTypeSelectorDirective {
+
+  constructor(public viewContainerRef: ViewContainerRef) { }
+}

src/app/applications/datatarget/datatarget-detail/datatarget-detail.component.html

@@ -1,74 +1,3 @@
-<div *ngIf="datatarget">
-  <app-top-bar [data]="datatarget" [backButton]="backButton" [subPage]="true" [addDetailDowndown]="true"
-    [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteDatatarget()"></app-top-bar>
-  <div class="container-fluid">
-    <div class="row">
-      <div class="col-md-6 d-flex align-items-stretch">
-        <div class="jumbotron jumbotron--m-right jumbotron--full-width">
-          <h3>{{ 'DATATARGET.DETAILS' | translate }}</h3>
-          <app-general-details [data]="datatarget"></app-general-details>
-          <mat-divider></mat-divider>
-          <p><strong>{{ 'DATATARGET.URL' | translate }}</strong>{{datatarget.url}}</p>
-          <p><strong>{{ 'DATATARGET.TIMEOUT' | translate }}</strong>{{datatarget.timeout}}</p>
-          <p><strong>{{ 'DATATARGET.TYPE' | translate }}</strong>{{datatarget.type | translate}}</p>
-          <mat-divider></mat-divider>
-          <p><strong>{{ 'DATATARGET.AUTHORIZATIONHEADER' | translate }}</strong></p>
-          <code><pre *ngIf="datatarget.authorizationHeader; else showNoAuthText">{{datatarget.authorizationHeader}}</pre></code>
-          <ng-template #showNoAuthText>
-            <p>{{ 'DATATARGET.NO-AUTHORIZATIONHEADER' | translate }}</p>
-          </ng-template>
-
-        </div>
-      </div>
-      <div class="col-md-6 d-flex align-items-stretch">
-        <div class="jumbotron jumbotron--m-left jumbotron--full-width">
-          <h3>{{ 'DATATARGET.OPENDATA-DK' | translate }}</h3>
-          <div *ngIf="datatarget.setToOpendataDk else noOpendataDk">
-            <app-opendatadk-detail [openDataDkDataset]="datatarget.openDataDkDataset"></app-opendatadk-detail>
-          </div>
-          <ng-template #noOpendataDk>
-            <p>{{ 'DATATARGET.NO-OPENDATA-DK' | translate }}</p>
-          </ng-template>
-        </div>
-      </div>
-    </div>
-
-    <div class="row">
-      <div class="col-12">
-        <div class=" jumbotron">
-          <div class="form-group">
-            <h3>{{ 'DATATARGET.RELATIONS' | translate }}</h3>
-            <div *ngIf="dataTargetRelations?.length === 0">
-              <p>{{'DATATARGET.NO-RELATIONS' | translate}}</p>
-            </div>
-            <div *ngIf="dataTargetRelations">
-              <div *ngFor="let relation of dataTargetRelations">
-                <div class="row">
-                  <div class="col-md-4 d-flex align-items-center">
-                    <p><strong>{{'DATATARGET.PAYLOADEDECODER' | translate}}</strong><span
-                        *ngIf="relation.payloadDecoder; else noDecoder">
-                        <a [routerLink]="['/payload-decoder/payload-decoder-detail/', relation.payloadDecoder.id]">{{relation.payloadDecoder.name}}</a>
-                      </span>
-                      <ng-template #noDecoder>{{ 'DATATARGET.NO-PAYLOADDECODER' | translate}}</ng-template>
-                    </p>
-                  </div>
-                  <div class="col-md-1 d-flex align-items-center justify-content-center">
-                    <fa-icon [icon]="arrowsAltH" class="icon--primary icon--medium icon--disabled"></fa-icon>
-                  </div>
-                  <div class="col-md-7 d-flex align-items-center">
-                    <p><strong>{{'DATATARGET.IOTDEVICE' | translate}}</strong>
-                      <span *ngFor="let device of relation.iotDevices; let first = first">
-                        <ng-container *ngIf="!first">, </ng-container> <a [routerLink]="['/applications', device.application.id, 'iot-device', device.id]">{{device.name}}</a>
-                      </span>
-                    </p>
-                  </div>
-                  <mat-divider></mat-divider>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+<div>
+  <ng-template detail-component></ng-template>
 </div>

src/app/applications/datatarget/datatarget-detail/datatarget-detail.component.ts

@@ -1,16 +1,11 @@
-import { Component, OnDestroy, OnInit } from '@angular/core';
-import { Subscription } from 'rxjs';
+import { Component, ComponentFactoryResolver, OnDestroy, OnInit, Type, ViewChild } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
-import { TranslateService } from '@ngx-translate/core';
-import { PayloadDeviceDatatargetGetByDataTarget } from '@app/payload-decoder/payload-device-data.model';
-import { PayloadDeviceDatatargetService } from '@app/payload-decoder/payload-device-datatarget.service';
-import { BackButton } from '@shared/models/back-button.model';
-import { DatatargetService } from '../datatarget.service';
-import { Location } from '@angular/common';
-import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
+import { DataTargetType } from '@shared/enums/datatarget-type';
+import { DatatargetTypesService } from '../datatarget-types.service';
 import { Datatarget } from '../datatarget.model';
-import { DropdownButton } from '@shared/models/dropdown-button.model';
-import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons';
+import { DatatargetService } from '../datatarget.service';
+import { DatatargetDetail } from './datatarget-detail';
+import { DatatargetDetailTypeSelectorDirective } from './datatarget-detail-type-selector.directive';
 
 @Component({
     selector: 'app-datatarget-detail',
@@ -19,79 +14,46 @@ import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons';
 })
 export class DatatargetDetailComponent implements OnInit, OnDestroy {
 
-    public datatargetSubscription: Subscription;
+    @ViewChild(DatatargetDetailTypeSelectorDirective, {static: true}) adHost!: DatatargetDetailTypeSelectorDirective;
+
     public datatarget: Datatarget;
-    public backButton: BackButton = { label: '', routerLink: '/datatarget-list' };
-    public dataTargetRelations: PayloadDeviceDatatargetGetByDataTarget[];
-    private deleteDialogSubscription: Subscription;
-    public dropdownButton: DropdownButton;
-    arrowsAltH = faArrowsAltH;
-    private applicationName: string;
-
-    constructor(
-        private route: ActivatedRoute,
-        private deleteDialogService: DeleteDialogService,
-        private location: Location,
-        private datatargetRelationServicer: PayloadDeviceDatatargetService,
-        private datatargetService: DatatargetService,
-        public translate: TranslateService) { }
+    private datatargetType: DataTargetType;
 
-    ngOnInit(): void {
-        const id: number = +this.route.snapshot.paramMap.get('datatargetId');
-        this.applicationName = this.route.snapshot.paramMap.get('name');
-        if (id) {
-            this.getDatatarget(id);
-            this.getDatatargetRelations(id);
-            this.dropdownButton = {
-                label: '',
-                editRouterLink: '../../datatarget-edit/' + id,
-                isErasable: true,
-            }
-        }
-        this.translate.get(['NAV.MY-DATATARGET', 'DATATARGET.SHOW-OPTIONS'])
-            .subscribe(translations => {
-                this.backButton.label = translations['NAV.MY-DATATARGET'];
-                this.dropdownButton.label = translations['DATATARGET.SHOW-OPTIONS']
-            });
-    }
+    constructor(private componentFactoryResolver: ComponentFactoryResolver,
+                private datatargetService: DatatargetService,
+                private route: ActivatedRoute,
+                private datatargetTypesService: DatatargetTypesService
+        ) { }
 
-    getDatatarget(id: number) {
-        this.datatargetService.get(id)
-            .subscribe((dataTarget: Datatarget) => {
-                this.datatarget = dataTarget;
-                this.setBackButton(this.datatarget.applicationId);
-            });
-    }
 
-    private setBackButton(applicationId: number) {
-        this.backButton.routerLink = ['applications', applicationId.toString()]
-    }
+    loadComponent(componentType: Type<any>) {
 
-    onDeleteDatatarget() {
-        this.deleteDialogSubscription = this.deleteDialogService.showSimpleDialog().subscribe(
-            (response) => {
-                if (response) {
-                    this.datatargetService.delete(this.datatarget.id).subscribe((response) => {
-                    });
-                    this.location.back();
-                } else {
-                    console.log(response);
-                }
-            }
-        );
-    }
+        const viewContainerRef = this.adHost.viewContainerRef;
 
-    getDatatargetRelations(id: number) {
-        this.datatargetRelationServicer.getByDataTarget(id)
-            .subscribe((response) => {
-                this.dataTargetRelations = response.data;
-            });
+        viewContainerRef.clear();
+        const factory = this.componentFactoryResolver.resolveComponentFactory(componentType);
+        viewContainerRef.createComponent<DatatargetDetail>(factory);
     }
 
-    ngOnDestroy(): void {
-        if (this.deleteDialogSubscription) {
-            this.deleteDialogSubscription.unsubscribe();
-        }
+    ngOnInit(): void {
+
+         const id: number = +this.route.snapshot.paramMap.get('datatargetId');
+
+         this.datatargetService.get(id)
+          .subscribe((dataTarget: Datatarget) => {
+              this.datatarget = dataTarget;
+              this.datatargetType = dataTarget.type;
+
+              const component = this.datatargetTypesService.getDetailComponent(this.datatargetType);
+
+              this.loadComponent(component);
+
+          });
+
+
     }
 
+    ngOnDestroy() {
+
+      }
 }

src/app/applications/datatarget/datatarget-detail/datatarget-detail.ts

@@ -0,0 +1,2 @@
+export interface DatatargetDetail {
+}

src/app/applications/datatarget/datatarget-edit/datatarget-edit-type-selector.directive.spec.ts

@@ -0,0 +1,11 @@
+/* tslint:disable:no-unused-variable */
+
+import { ViewContainerRef } from '@angular/core';
+import { DatatargetEditTypeSelectorDirective } from './datatarget-edit-type-selector.directive';
+let  viewContainerRef: ViewContainerRef;
+describe('Directive: DatatargetEditTypeSelector', () => {
+  it('should create an instance', () => {
+    const directive = new DatatargetEditTypeSelectorDirective(viewContainerRef);
+    expect(directive).toBeTruthy();
+  });
+});

src/app/applications/datatarget/datatarget-edit/datatarget-edit-type-selector.directive.ts

@@ -0,0 +1,10 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[edit-component]'
+})
+export class DatatargetEditTypeSelectorDirective  {
+
+  constructor(public viewContainerRef: ViewContainerRef) { }
+
+}