fixed issue for realtime

Cumulocity-IoT · Feb 11, 2022 · 2a2c0ea · 2a2c0ea
1 parent e7af0c7
commit 2a2c0ea
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 64 deletions.
diff --git a/.../gp-asset-viewer/src/lib/gp-asset-overview-config/gp-asset-overview-config.component.html b/.../gp-asset-viewer/src/lib/gp-asset-overview-config/gp-asset-overview-config.component.html
@@ -205,7 +205,7 @@
    <div class="row">
     <div class="col-sm-6 form-horizontal">
        <div class="col-sm-12 form-group">
-                <label for="pageSize" class=" col-sm-6 control-label">Default Page Size:</label>
+                <label for="pageSize" class=" col-sm-6 control-label">Page Size:</label>
                 <div class="col-sm-6 ">
                     <select  [(ngModel)]="config.pageSize" name="pageSize" id="pageSize">
                         <option *ngFor="let pageSize of pageSizeList"

diff --git a/projects/gp-asset-viewer/src/lib/gp-asset-viewer.component.html b/projects/gp-asset-viewer/src/lib/gp-asset-viewer.component.html
@@ -1,8 +1,8 @@
 <div class="gp-device-list header-container">
     <div class="header-item" style="display: flex;">
       <div class="btn-group" role="group">
-        <button type="button" class="btn btn-default" (click) = "viewMode = '1';"><i class="fa fa-file header-mode"></i></button>
-        <button type="button" class="btn btn-default"(click) = "viewMode = '2';"><i class="fa fa-list header-mode"></i></button>
+        <button type="button" class="btn btn-default" (click) = "viewMode = '1';"><i class="dlt-c8y-icon-files header-mode"></i></button>
+        <button type="button" class="btn btn-default"(click) = "viewMode = '2';"><i class="dlt-c8y-icon-list header-mode"></i></button>
       </div>
 
        <div class="btn-group device-list-switch-toggle ">
@@ -45,10 +45,9 @@
 
     </div>
   </div>
-  <mat-paginator [style.visibility]="totalRecord === -1? 'hidden': 'visible'" class="device-list-pagination-view" [length]="totalRecord"
-  [pageSizeOptions]="[5,10,20,50,100]" [pageSize]="pageSize" (page)="getPageEvent($event)"></mat-paginator>
+  <pagination  [style.visibility]="totalRecord === -1? 'hidden': 'visible'" class="m-t-8 m-r-8 p-b-8 pull-right" previousText=" " nextText=" "  [maxSize]="10" [totalItems]="totalRecord" [itemsPerPage]="pageSize" [(ngModel)]="currentPage" (pageChanged)="getPageEvent($event)"></pagination>
   <div style="text-align: center;"><c8y-loading *ngIf="isBusy"></c8y-loading></div>
-  <div *ngIf="!isBusy && totalRecord > 0 ; else noRecordFound"> 
+  <div *ngIf="!isBusy && totalRecord > 0 ; else noRecordFound" class="col-sm-12 col-xs-12"> 
     <div class="card-wrapper" *ngIf="viewMode !== '2' && !isBusy">
         <div class="book " *ngFor="let ndevice of filterData" [ngClass]="{'cover': ndevice.isBookOpen === true}">
           <div class="back"></div>

diff --git a/projects/gp-asset-viewer/src/lib/gp-asset-viewer.component.ts b/projects/gp-asset-viewer/src/lib/gp-asset-viewer.component.ts
@@ -78,13 +78,12 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
   totalRecord = -1;
   onlyProblems = false;
   latestFirmwareVersion = 0;
-  unsubscribeRealTime$ = new Subject<void>();
   bsModalRef: BsModalRef;
   viewMode = '1';
+  allSubscriptions: any = [];
   @ViewChild(MatSort, { static: false })
   set sort(v: MatSort) { this.dataSource.sort = v; }
   @ViewChild(MatTable, { static: false }) matTable: MatTable<any>;
-  detailSubs;
 
   constructor(private inventoryService: InventoryService,
     public inventory: InventoryService,
@@ -99,28 +98,28 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
     this.isBusy = true;
     this.appId = this.deviceListService.getAppId();
     if (!this._config.device && isDevMode()) {
-      this.group = '###';
+      this.group = '18793';
       this._config = {
         // Sample Configuration Data
-        // fpProps: ['Availability', 'ActiveAlarmsStatus', 'Other', 'FirmwareStatus'],
-        // p1Props: [
-        //   { id: 'childDeviceAvailable', label: 'Child devices', value: 'childDeviceAvailable' },
-        //   { id: 'id', label: 'id', value: 'id' },
-        //   { id: 'c8y_Firmware.versionIssuesName', label: 'versionIssuesName', value: 'c8y_Firmware.versionIssuesName' },
-        //   { id: 'c8y_Firmware.name', label: 'firmware name', value: 'c8y_Firmware.name' },
-        //   { id: 'c8y_Availability.status', label: 'status', value: 'c8y_Availability.status' }
-        //         ],
-        // p2Props: [
-        //   { id: 'owner', label: 'owner', value: 'owner' },
-        //   { id: 'creationTime', label: 'creationTime', value: 'creationTime' },
-        //   { id: 'type', label: 'type', value: 'type' },
-        //   { id: 'lastUpdated', label: 'lastUpdated', value: 'lastUpdated' },
-        //   { id: 'deviceExternalDetails.externalType', label: 'externalType', value: 'deviceExternalDetails.externalType' }
-        //         ],
-        // otherProp: {
-        //   label: 'Firmware:',
-        //   value: 'id'
-        // }
+       /*  fpProps: ['Availability', 'ActiveAlarmsStatus', 'Other', 'FirmwareStatus'],
+        p1Props: [
+          { id: 'childDeviceAvailable', label: 'Child devices', value: 'childDeviceAvailable' },
+          { id: 'id', label: 'id', value: 'id' },
+          { id: 'c8y_Firmware.versionIssuesName', label: 'versionIssuesName', value: 'c8y_Firmware.versionIssuesName' },
+          { id: 'c8y_Firmware.name', label: 'firmware name', value: 'c8y_Firmware.name' },
+          { id: 'c8y_Availability.status', label: 'status', value: 'c8y_Availability.status' }
+                ],
+        p2Props: [
+          { id: 'owner', label: 'owner', value: 'owner' },
+          { id: 'creationTime', label: 'creationTime', value: 'creationTime' },
+          { id: 'type', label: 'type', value: 'type' },
+          { id: 'lastUpdated', label: 'lastUpdated', value: 'lastUpdated' },
+          { id: 'deviceExternalDetails.externalType', label: 'externalType', value: 'deviceExternalDetails.externalType' }
+                ],
+        otherProp: {
+          label: 'Firmware:',
+          value: 'id'
+        } */
       };
       this.configDashboardList = [];
       this.withTabGroup = true;
@@ -172,7 +171,7 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
   }
 
   async refresh() {
-    this.unsubscribeRealTime$.next();
+    this.clearSubscriptions();
     this.matData = [];
     this.deviceListData = [];
     this.filterData = [];
@@ -191,9 +190,8 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
    * This method will called during page navigation
    */
   getPageEvent(pageEvent) {
-    this.pageSize = pageEvent.pageSize;
-    this.currentPage = pageEvent.pageIndex + 1;
-    this.unsubscribeRealTime$.next();
+    this.currentPage = pageEvent.page;
+    this.clearSubscriptions();
     this.matData = [];
     this.deviceListData = [];
     this.filterData = [];
@@ -212,17 +210,17 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
 
     // Get list of devices for given group
     const response = await this.deviceListService.getDeviceList(this.group, this.pageSize, this.currentPage, this.showChildDevices);
-    if (response.data && response.data.length < this.pageSize) {
-      this.totalRecord = (this.pageSize * (response.paging.totalPages - 1)) + response.data.length;
-    } else {
-      this.totalRecord = this.pageSize * response.paging.totalPages;
-    }
+      if (response.data && response.data.length < this.pageSize) {
+        this.totalRecord = (this.pageSize * (response.paging.totalPages - 1)) + response.data.length;
+      } else {
+        this.totalRecord = this.pageSize * response.paging.totalPages;
+      }
     if (response.data && response.data.length > 0) {
       await this.asyncForEach(response.data, async (x) => {
         await this.loadBoxes(x);
         await this.loadMatData(x);
         let externalData;
-        if (this.isRuntimeExternalId || !x.deviceExternalDetails) {
+        if (this.isRuntimeExternalId && !x.deviceExternalDetails) {
           externalData = await this.getExternalId(x.id);
           if (externalData && (!x.deviceExternalDetails || x.deviceExternalDetails.externalId !== externalData.externalId)) {
             await this.updateDeviceObjectForExternalId(x.id, externalData);
@@ -279,29 +277,23 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
 
   handleReatime(id) {
     // REALTIME ------------------------------------------------------------------------
-    // tslint:disable-next-line: deprecation
     const manaogedObjectChannel = `/managedobjects/${id}`;
-    this.detailSubs = this.realTimeService.subscribe(
+    const detailSubs = this.realTimeService.subscribe(
       manaogedObjectChannel,
       (resp) => {
-
         const data = (resp.data ? resp.data.data : {});
-        // this.updateMarkerPosition(data);
-        this.manageRealtime(data[0]);
+        this.manageRealtime(data);
       }
     );
-
-
-
-    //  this.inventoryService.detail$(id, {
-    //       hot: true,
-    //       realtime: true
-    //     })
-    //     .pipe(skip(1))
-    //     .pipe(takeUntil(this.unsubscribeRealTime$)) // skiping first instance since we already get latest data from init call
-    //     .subscribe((data) => {
-    //         this.manageRealtime(data[0]);
-    // });
+    if (this.realtimeState) {
+      this.allSubscriptions.push({
+        id: id,
+        subs: detailSubs,
+        type: 'Realtime',
+      });
+    } else {
+      this.realTimeService.unsubscribe(detailSubs);
+    }
   }
 
   manageRealtime(updatedDeviceData) {
@@ -464,7 +456,7 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
         this.handleReatime(x.id);
       });
     } else {
-      this.unsubscribeRealTime$.next();
+      this.clearSubscriptions();
     }
   }
 
@@ -728,9 +720,17 @@ export class GpAssetViewerComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    this.unsubscribeRealTime$.next();
-    this.unsubscribeRealTime$.complete();
-    this.realTimeService.unsubscribe(this.detailSubs);
+   this.clearSubscriptions();
   }
 
+  /**
+   * Clear all Realtime subscriptions
+   */
+   private clearSubscriptions() {
+    if (this.allSubscriptions) {
+      this.allSubscriptions.forEach((s) => {
+        this.realTimeService.unsubscribe(s.subs);
+      });
+    }
+  }
 }
diff --git a/projects/gp-asset-viewer/src/lib/gp-asset-viewer.module.ts b/projects/gp-asset-viewer/src/lib/gp-asset-viewer.module.ts
@@ -23,27 +23,25 @@ import { GpAssetViewerComponent } from './gp-asset-viewer.component';
 import { GpAssetViewerService } from './gp-asset-viewer.service';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatTableModule } from '@angular/material/table';
-import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
 import {GpAssetViewerConfigComponent} from './gp-asset-overview-config/gp-asset-overview-config.component';
 import {NgSelectModule} from '@ng-select/ng-select';
-import { MatRippleModule } from '@angular/material/core';
+import { PaginationModule } from 'ngx-bootstrap/pagination';
 @NgModule({
   declarations: [GpAssetViewerComponent, GpAssetViewerConfigComponent],
   imports: [
     CoreModule,
     FormsModule,
     ReactiveFormsModule,
     MatTableModule,
-    MatPaginatorModule,
     MatSortModule,
-    MatRippleModule,
     TypeaheadModule.forRoot(),
     ModalModule.forRoot(),
     AccordionModule.forRoot(),
+    PaginationModule.forRoot(),
     NgSelectModule
   ],
   exports: [GpAssetViewerComponent, GpAssetViewerConfigComponent],

diff --git a/runtime/styles/index.css b/runtime/styles/index.css
@@ -1,2 +1,6 @@
 @import'~@angular/material/prebuilt-themes/indigo-pink.css';
 @import "~@ng-select/ng-select/themes/default.theme.css";
+
+.pagination>li>a, .pagination>li>span {
+    height: 100%;
+}
diff --git a/runtime/webpack.config.js b/runtime/webpack.config.js
@@ -2,7 +2,7 @@ const URLImportPlugin  = require("webpack-external-import/webpack");
 const path = require('path');
 
 module.exports = {
-    mode: 'development',
+    mode: 'production',
     devtool: 'source-map',
     entry: {
         [require('./cumulocity.json').contextPath]: './dist/bundle-src/custom-widget.js'

diff --git a/src/styles.less b/src/styles.less
@@ -3,3 +3,7 @@
 @import '~@c8y/style/main.less';
 @import '~@c8y/style/extend.less';
 @import "~@ng-select/ng-select/themes/default.theme.css";
+
+.pagination>li>a, .pagination>li>span {
+    height: 100%;
+}