Merge pull request #60 from OS2iot/feature/IOT-16_MulticastFrontend

Feature/iot 16 multicast frontend

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

@@ -1,6 +1,5 @@
 <div *ngIf="application">
   <app-top-bar [data]="application" [backButton]="backButton" [subPage]="true"
-    [dtRouterLink]="['datatarget-list', application.name]" [dtLabel]="'APPLICATION.DATATARGET-SHOW' | translate"
     [addDetailDowndown]="true" [dropDownButton]="dropdownButton" (deleteSelectedInDropdown)="onDeleteApplication()">
   </app-top-bar>
   <div class="container-fluid">
@@ -18,22 +17,68 @@ <h3>Detaljer</h3>
         </div>
       </div>
     </div>
-    <div class="row">
-      <div class="col-sm-12">
-        <div class="jumbotron">
-          <div *ngIf="canEdit else readOnly">
-            <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate"
-              [ctaLabelPrimary]="'FORM.CREATE-NEW-IOT-DEVICE' | translate" [ctaRouterLinkPrimary]="'new-iot-device'"
-              [ctaLabelSecondary]="'APPLICATION.IMPORT-CSV' | translate" [ctaRouterLinkSecondary]="'bulk-import'">
-            </app-top-bar-table>
+    <mat-tab-group animationDuration="200ms">
+      <mat-tab label="{{'APPLICATION.IOT-DEVICES' | translate}}">
+        <div class="jumbotron--table">
+          <div class="row">
+            <div class="col-sm-12">
+              <div class="jumbotron">
+                <div *ngIf="canEdit else readOnly">
+                  <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate"
+                    [ctaLabelPrimary]="'FORM.CREATE-NEW-IOT-DEVICE' | translate" [ctaRouterLinkPrimary]="'new-iot-device'"
+                    [ctaLabelSecondary]="'APPLICATION.IMPORT-CSV' | translate" [ctaRouterLinkSecondary]="'bulk-import'">
+                  </app-top-bar-table>
+                </div>
+                <ng-template #readOnly>
+                  <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate">
+                  </app-top-bar-table>
+                </ng-template>
+                <app-iot-devices-table [applicationId]="id"></app-iot-devices-table>
+              </div>
+            </div>
           </div>
-          <ng-template #readOnly>
-            <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate">
-            </app-top-bar-table>
-          </ng-template>
-          <app-iot-devices-table [applicationId]="id"></app-iot-devices-table>
         </div>
-      </div>
-    </div>
+      </mat-tab>
+      <mat-tab label="{{'APPLICATION.MULTICAST-GROUPS' | translate}}">
+        <div class="jumbotron--table">
+          <div class="row">
+            <div class="col-sm-12">
+              <div class="jumbotron">
+                <div *ngIf="canEdit else readOnly">
+                  <app-top-bar-table [component]="true" [title]="'APPLICATION.MULTICAST-SHOW' | translate"
+                  [ctaLabelPrimary]="'FORM.CREATE-NEW-MULTICAST' | translate" [ctaRouterLinkPrimary]="'multicast-edit'">
+                  </app-top-bar-table>
+                </div>
+                <ng-template #readOnly>
+                  <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate">
+                  </app-top-bar-table>
+                </ng-template>
+                  <app-multicast-table></app-multicast-table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </mat-tab>
+      <mat-tab label="{{'APPLICATION.DATATARGET-SHOW' | translate}}">
+        <div class="jumbotron--table">
+          <div class="row">
+            <div class="col-sm-12">
+              <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'">
+                  </app-top-bar-table>
+                </div>
+                <ng-template #readOnly>
+                  <app-top-bar-table [component]="true" [title]="'APPLICATION.ATTACHED-IOT' | translate">
+                  </app-top-bar-table>
+                </ng-template>
+                  <app-datatarget-table [pageLimit]="pageLimit"></app-datatarget-table>
+              </div>
+            </div>
+          </div>
+        </div>
+      </mat-tab>
+    </mat-tab-group>
   </div>
 </div>

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

@@ -9,6 +9,7 @@ import { Title } from '@angular/platform-browser';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Application } from '@applications/application.model';
 import { ApplicationService } from '@applications/application.service';
+import { environment } from '@environments/environment';
 import { TranslateService } from '@ngx-translate/core';
 import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dialog.service';
 import { DeviceType } from '@shared/enums/device-type';
@@ -28,6 +29,7 @@ export class ApplicationDetailComponent implements OnInit, OnDestroy {
   public application: Application;
   public backButton: BackButton = { label: '', routerLink: '/applications' };
   public id: number;
+  public pageLimit = environment.tablePageSize;
   public dropdownButton: DropdownButton;
   public errorMessage: string;
   public canEdit = false;

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

@@ -7,9 +7,10 @@ import { ApplicationsComponent } from './applications.component';
 import { IoTDeviceDetailComponent } from './iot-devices/iot-device-detail/iot-device-detail.component';
 import { IotDeviceEditComponent } from './iot-devices/iot-device-edit/iot-device-edit.component';
 import { DatatargetEditComponent } from './datatarget/datatarget-edit/datatarget-edit.component';
-import { DatatargetListComponent } from './datatarget/datatarget-list/datatarget-list.component';
 import { DatatargetDetailComponent } from './datatarget/datatarget-detail/datatarget-detail.component';
 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';
 
 
 const applicationRoutes: Routes = [
@@ -26,18 +27,17 @@ 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: 'datatarget-list/:name',
-                        children: [
-                            { path: '', component: DatatargetListComponent },
-                            { path: 'datatarget-edit', component: DatatargetEditComponent },
-                            { path: 'datatarget-edit/:datatargetId', component: DatatargetEditComponent },
-                            { path: 'datatarget/:datatargetId', component: DatatargetDetailComponent }
-                        ]
+                    { path: 'iot-device/:deviceId', component: IoTDeviceDetailComponent, },    
 
-                    },
-                    { path: 'bulk-import', component: BulkImportComponent }
+                    { path: 'datatarget-edit', component: DatatargetEditComponent },
+                    { path: 'datatarget-edit/:datatargetId', component: DatatargetEditComponent },
+                    { path: 'datatarget/:datatargetId', component: DatatargetDetailComponent },    
+
+                    { path: 'multicast-edit', component: MulticastEditComponent},
+                    { path: 'multicast-edit/:multicastId', component: MulticastEditComponent },
+                    { path: 'multicast/:multicastId', component: MulticastDetailComponent },
+
+                    { path: 'bulk-import', component: BulkImportComponent },
                 ],
             },
 

src/app/applications/applications.module.ts

@@ -17,34 +17,35 @@ import { NGMaterialModule } from '@shared/Modules/materiale.module';
 import { BulkImportComponent } from './bulk-import/bulk-import.component';
 import { PipesModule } from '@shared/pipes/pipes.module';
 import { ApplicationsTableComponent } from './applications-list/applications-table/applications-table.component';
-
+import { MulticastModule } from './multicast/multicast.module';
 
 @NgModule({
-    declarations: [
-        ApplicationsComponent,
-        ApplicationDetailComponent,
-        ApplicationEditComponent,
-        ApplicationsListComponent,
-        ApplicationsTableComponent,
-        BulkImportComponent,
-    ],
-    exports: [
-        ApplicaitonsRoutingModule,
-        ApplicationsComponent,
-        ApplicationsTableComponent,
-    ],
-    imports: [
-        CommonModule,
-        RouterModule,
-        TranslateModule,
-        IotDevicesModule,
-        DatatargetModule,
-        DirectivesModule,
-        FormModule,
-        SharedModule,
-        FontAwesomeModule,
-        NGMaterialModule,
-        PipesModule,
-    ],
+  declarations: [
+    ApplicationsComponent,
+    ApplicationDetailComponent,
+    ApplicationEditComponent,
+    ApplicationsListComponent,
+    ApplicationsTableComponent,
+    BulkImportComponent,
+  ],
+  exports: [
+    ApplicaitonsRoutingModule,
+    ApplicationsComponent,
+    ApplicationsTableComponent,
+  ],
+  imports: [
+    CommonModule,
+    RouterModule,
+    TranslateModule,
+    IotDevicesModule,
+    DatatargetModule,
+    DirectivesModule,
+    FormModule,
+    SharedModule,
+    FontAwesomeModule,
+    NGMaterialModule,
+    PipesModule,
+    MulticastModule,
+  ],
 })
-export class ApplicationsModule { }
+export class ApplicationsModule {}

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

@@ -11,7 +11,6 @@ import { DeleteDialogService } from '@shared/components/delete-dialog/delete-dia
 import { Datatarget } from '../datatarget.model';
 import { DropdownButton } from '@shared/models/dropdown-button.model';
 import { faArrowsAltH } from '@fortawesome/free-solid-svg-icons';
-import { IotDevice } from '@applications/iot-devices/iot-device.model';
 
 @Component({
     selector: 'app-datatarget-detail',
@@ -65,7 +64,7 @@ export class DatatargetDetailComponent implements OnInit, OnDestroy {
     }
 
     private setBackButton(applicationId: number) {
-        this.backButton.routerLink = ['applications', applicationId.toString(), 'datatarget-list', this.applicationName ]
+        this.backButton.routerLink = ['applications', applicationId.toString()]
     }
 
     onDeleteDatatarget() {

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

@@ -11,7 +11,7 @@ import { DatatargetService } from '../datatarget.service';
 import { ApplicationService } from '@applications/application.service';
 import { PayloadDecoderService } from '@payload-decoder/payload-decoder.service';
 import { PayloadDeviceDatatargetService } from '@payload-decoder/payload-device-datatarget.service';
-import { SaveSnackService } from '@shared/services/save-snack.service';
+import { SnackService } from '@shared/services/snack.service';
 import { MatDialog } from '@angular/material/dialog';
 import { HttpErrorResponse } from '@angular/common/http';
 import { PayloadDecoderMappedResponse } from '@payload-decoder/payload-decoder.model';
@@ -44,7 +44,7 @@ export class DatatargetEditComponent implements OnInit, OnDestroy {
   public formFailedSubmit = false;
   public datatargetid: number;
   private applicationId: number;
-  private applicationNane: string;
+  private applicationName: string;
   public application: Application;
   public devices: IotDevice[];
   public payloadDecoders = [];
@@ -63,7 +63,7 @@ export class DatatargetEditComponent implements OnInit, OnDestroy {
     private applicationService: ApplicationService,
     private payloadDecoderService: PayloadDecoderService,
     private payloadDeviceDataTargetService: PayloadDeviceDatatargetService,
-    private saveSnackService: SaveSnackService,
+    private saveSnackService: SnackService,
     private dialog: MatDialog,
     private errorMessageService: ErrorMessageService,
     private opendatadkService: OpendatadkService,
@@ -94,7 +94,7 @@ export class DatatargetEditComponent implements OnInit, OnDestroy {
 
     this.datatargetid = +this.route.snapshot.paramMap.get('datatargetId');
     this.applicationId = +this.route.snapshot.paramMap.get('id');
-    this.applicationNane = this.route.snapshot.paramMap.get('name');
+    this.applicationName = this.route.snapshot.paramMap.get('name');
     if (this.datatargetid !== 0) {
       this.getDatatarget(this.datatargetid);
       this.getPayloadDeviceDatatarget(this.datatargetid);
@@ -237,6 +237,7 @@ export class DatatargetEditComponent implements OnInit, OnDestroy {
           this.datatarget.openDataDkDataset.acceptTerms = true;
         }
         this.showSavedSnack();
+        this.routeToDatatargets();
       },
         (error: HttpErrorResponse) => {
           this.checkDataTargetModelOpendatadkdatasaet();
@@ -288,7 +289,7 @@ export class DatatargetEditComponent implements OnInit, OnDestroy {
   }
 
   routeToDatatargets(): void {
-    this.router.navigate(['applications',this.applicationId.toString(),'datatarget-list', this.applicationNane])
+    this.router.navigate(['applications',this.applicationId.toString()])
   }
 
   onCoordinateKey(event: any) {

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

@@ -15,7 +15,7 @@
       </td>
     </ng-container>
 
-    <!-- Devices Column -->
+    <!-- Type Column -->
     <ng-container matColumnDef="type">
       <th mat-header-cell *matHeaderCellDef mat-sort-header class="col-1">
         {{ 'DATATARGET-TABLE.TYPE' | translate }}</th>

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

@@ -46,7 +46,7 @@ export class DatatargetTableComponent implements OnInit, AfterViewInit, OnDestro
     }
 
     ngOnInit(): void {
-        this.applicationId = +Number(this.route.parent.parent.snapshot.paramMap.get('id'));
+        this.applicationId = +Number(this.route.parent.snapshot.paramMap.get('id'));
         console.log(this.applicationId);
         this.getDatatarget();
         this.canEdit = this.meService.canWriteInTargetOrganization()