Merge pull request #4 from GDSC-HSU/feature/view-device

Feature/view device

package.json

@@ -23,6 +23,7 @@
     "@nebular/eva-icons": "^9.0.1",
     "@nebular/theme": "^9.0.1",
     "@ngrx/store": "^13.0.2",
+    "angularx-qrcode": "^13.0.3",
     "eva-icons": "^1.1.3",
     "firebase": "^9.4.0",
     "lottie-web": "^5.9.1",

src/app/models/device.ts

@@ -1,9 +1,13 @@
+import { DeviceStatus } from "./enums/device_status";
+
 export interface Device {
     id?: string,
     accessKey?: string,
     oid?: string,
     name?: string,
     location?: string,
     hardwareInfo?: JSON,
-    tag?: Array<string>;
+    tags?: Array<string>;
+    status?: DeviceStatus;
+    timestampUpdate?: string;
 }

src/app/pages/dashboard/pages/devices/components/device-card-detail/device-card-detail.component.ts

@@ -14,52 +14,31 @@ export class DeviceCardDetailComponent implements OnInit {
   @Input() device?: Device
   status: DeviceStatus = DeviceStatus.disconnected;
 
-  constructor(private deviceService: DeviceService, private ref: ChangeDetectorRef) { }
+  constructor(private deviceService: DeviceService) { }
 
   ngOnInit(): void {
     this.listenStatus();
   }
 
-  observerStatus = {
-    next: (value: DocumentSnapshot<DocumentData>) => {
-      let deviceStatus = value.data();
-      if (deviceStatus!["status"]) {
-        this.status = DeviceStatus.connected;
-      }
-      else {
-        this.status = DeviceStatus.disconnected;
-      }
-      this.ref.detectChanges();
-    },
-    error: (err: FirestoreError) => console.error(err),
-    complete: () => console.log('Observer got a complete notification'),
-  };
-
   listenStatus() {
-    this.deviceService.checkCreated(this.device!.id!).then(value => {
-      if (value.data()) {
-        let dataSnapshot = this.deviceService.listenStatus(this.device!.id!, this.observerStatus);
-      } else {
-        this.status = DeviceStatus.created;
-      }
-    })
+    this.deviceService.checkCreated(this.device!.id!);
   }
 
   getTextStatus() {
-    if (this.status == DeviceStatus.connected) {
+    if (this.device?.status == DeviceStatus.connected) {
       return "online";
     }
-    else if (this.status == DeviceStatus.disconnected) {
+    else if (this.device?.status == DeviceStatus.disconnected) {
       return "offline";
     }
     return "pending";
   }
 
   getStatus(){
-    if (this.status == DeviceStatus.connected) {
+    if (this.device?.status == DeviceStatus.connected) {
       return "success";
     }
-    else if (this.status == DeviceStatus.disconnected) {
+    else if (this.device?.status == DeviceStatus.disconnected) {
       return "danger";
     }
     return "warning";

src/app/pages/dashboard/pages/devices/components/device-card/device-card.component.html

@@ -1,12 +1,12 @@
-<nb-card class="main-card-device">
+<nb-card [nbSpinner]="this.deviceService.isLoadingGetDevice" nbSpinnerStatus="primary" class="main-card-device">
     <nb-card-header>
         <div class="main-card-device-header">
             <div class="title-card">
                 <b>
                     Devices
                 </b>
             </div>
-            <button nbButton status="primary">
+            <button (click)="this.openAddNewDialog()" nbButton status="primary">
                 <nb-icon icon="plus-outline"></nb-icon>
                 new device
             </button>

src/app/pages/dashboard/pages/devices/components/device-card/device-card.component.ts

@@ -1,16 +1,22 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
+import { NbDialogService } from '@nebular/theme';
 import { Device } from 'src/app/models/device';
 import { DeviceService } from 'src/app/services/device/device.service';
+import { CreateDeviceDialogComponent } from '../../dialog/create-device-dialog/create-device-dialog.component';
 
 @Component({
   selector: 'app-device-card',
   templateUrl: './device-card.component.html',
   styleUrls: ['./device-card.component.scss']
 })
 export class DeviceCardComponent implements OnInit {
-  constructor(public deviceService: DeviceService) { }
+  @Input() loading!: boolean;
+  constructor(private dialogService: NbDialogService, public deviceService: DeviceService, private ref: ChangeDetectorRef) { }
   ngOnInit(): void {
+    this.deviceService.renderUIDeviceStatus = () => { this.ref.detectChanges() }
   }
 
-
+  openAddNewDialog() {
+    this.dialogService.open(CreateDeviceDialogComponent);
+  }
 }

src/app/pages/dashboard/pages/devices/components/header-total/header-total.component.html

@@ -29,9 +29,9 @@ <h5>
 
                 <div class="header-total-text">
                     <h5>
-                        {{this.totalConnect}} Devices
+                        {{this.countDeviceConnected()}} Devices
                     </h5>
-                    <p class="total-text">Connecting devices</p>
+                    <p class="total-text">Connected devices</p>
                 </div>
 
             </div>
@@ -48,9 +48,9 @@ <h5>
 
                 <div class="header-total-text">
                     <h5>
-                        {{this.totalDisconnect}} Devices
+                        {{this.countDeviceDisconnected()}} Devices
                     </h5>
-                    <p class="total-text">Disconnect devices</p>
+                    <p class="total-text">Disconnected devices</p>
                 </div>
 
             </div>

src/app/pages/dashboard/pages/devices/components/header-total/header-total.component.ts

@@ -1,7 +1,7 @@
-import { Component, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
 import { Firestore } from '@angular/fire/firestore';
 import { collection, DocumentData, onSnapshot, QueryDocumentSnapshot, QuerySnapshot } from 'firebase/firestore';
-import { DeviceStatus } from 'src/app/models/device_status';
+import { DeviceStatus } from 'src/app/models/enums/device_status';
 import { DeviceService } from 'src/app/services/device/device.service';
 
 @Component({
@@ -13,32 +13,17 @@ export class HeaderTotalComponent implements OnInit {
   totalConnect = 0;
   totalDisconnect = 0;
 
-  constructor(public deviceService: DeviceService, private fireStore: Firestore) { }
+  constructor(public deviceService: DeviceService, private fireStore: Firestore, private ref: ChangeDetectorRef) { }
 
   ngOnInit(): void {
-    this.listenDeviceCount();
+    this.deviceService.renderUIDeviceStatistics = () => { this.ref.detectChanges(); }
   }
 
-  listenDeviceCount() {
-    onSnapshot(collection(this.fireStore, "device_status"), {
-      next: (value: QuerySnapshot<DocumentData>) => {
-        this.countConnect(value.docs);
-      },
-    })
+  countDeviceConnected() {
+    return this.deviceService.devices.filter(element => element.status == DeviceStatus.connected).length
   }
-  countConnect(array: Array<QueryDocumentSnapshot<DocumentData>>) {
-    let countConnect = 0;
-    let countDisconnect = 0;
-    array.forEach(deviceStatusSnap => {
-      let deviceStatus = deviceStatusSnap.data() as DeviceStatus;
-      if (deviceStatus.status) {
-        countConnect++;
-      }
-      else {
-        countDisconnect++;
-      }
-    });
-    this.totalConnect = countConnect;
-    this.totalDisconnect = countDisconnect;
+
+  countDeviceDisconnected() {
+    return this.deviceService.devices.filter(element => element.status == DeviceStatus.disconnected).length
   }
 }