example-apps/ROBO/RoboUI/src/app/data-monitor/data-monitor.component.ts

   1 import { Component, OnInit, ViewChild } from '@angular/core';
   2
   3 import {MatTableDataSource} from '@angular/material/table';
   4
   5 import { MatPaginator } from '@angular/material/paginator';
   6
   7 import { cameraData,monitorinfo, monitorDetails } from './../datainterface'
   8 import { RoboService } from './../../app/robo.service';
   9
  10 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
  11
  12 import { timer } from "rxjs"
  13
  14 @Component({
  15   selector: 'app-data-monitor',
  16   templateUrl: './data-monitor.component.html',
  17   styleUrls: ['./data-monitor.component.scss']
  18 })
  19 export class DataMonitorComponent implements OnInit {
  20
  21   monitorColumns: string [] = ['shelfName','objType','currentCount','maxCount','status','time'];
  22   monitorDataSource = new MatTableDataSource<monitorinfo>(MONITOR_INFO_LIST);
  23
  24   monitorArrayList = [];
  25
  26   imageBlobUrl : any;
  27   image: any;
  28   thumbnail: any;
  29   myvar: any
  30
  31   monitorInfo = {} as monitorDetails;
  32
  33   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  34
  35   constructor(
  36     private roboService: RoboService,
  37     private sanitizer: DomSanitizer
  38     ) { }
  39
  40   ngOnInit(): void {
  41     this.monitorDetails();
  42     this.inventoryDetails();
  43   }
  44
  45   timerFunc() {
  46     debugger;
  47     setInterval(this.refreshPage, 2000);
  48     // setTimeout(this.refreshPage , 2000);
  49   }
  50
  51   refreshPage() {
  52     console.log("Inside refreshPage....")
  53     this.inventoryDetails();
  54     this.monitorDetails();
  55   }
  56
  57   monitorDetails() {
  58     debugger;
  59     // setInterval(function(){
  60     //   console.log("Oooo Yeaaa!");
  61     //   this.roboService.getMonitorImage()
  62     //     .subscribe( (data:any) => {
  63
  64     //   debugger;
  65     //   console.log(data);
  66     //   // referred https://stackoverflow.com/questions/55591871/view-blob-response-as-image-in-angular
  67
  68     //   let objectURL = 'data:image/jpeg;base64,' + data.image;
  69     //   this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  70
  71     //  },
  72     //  error => console.log(error));
  73
  74
  75     // }, 2000);
  76     this.roboService.getMonitorImage()
  77         .subscribe( (data:any) => {
  78
  79       debugger;
  80
  81       let objectURL = 'data:image/jpeg;base64,' + data.image;
  82       this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
  83       debugger;
  84
  85      },
  86      error => console.log(error));
  87
  88   }
  89
  90   inventoryDetails() {
  91     console.log("inventoryDetails started....")
  92
  93     // setInterval(function(){
  94     //   console.log("Oooo!");
  95     //   this.roboService.getMonitorInfo()
  96     //   .subscribe(data => {
  97     //   console.log(data);
  98     //   this.monitorInfo = data;
  99
 100     //   this.monitorArrayList = data.InventryData;
 101     //   this.monitorDataSource = new MatTableDataSource(this.monitorArrayList);
 102     //   this.monitorDataSource.paginator = this.paginator;
 103     //  },
 104     //  error => console.log(error));
 105     // }, 2000);
 106     this.roboService.getMonitorInfo()
 107       .subscribe(data => {
 108       console.log(data);
 109       this.monitorInfo = data;
 110
 111       this.monitorArrayList = data.InventryData;
 112       this.monitorDataSource = new MatTableDataSource(this.monitorArrayList);
 113       this.monitorDataSource.paginator = this.paginator;
 114      },
 115      error => console.log(error));
 116      console.log("inventoryDetails finished...")
 117    }
 118
 119    getColor(clr) {
 120       if(clr == "Mostly Filled"){
 121         return "green"
 122       }
 123       if(clr == "Partially Filled"){
 124         return "orange"
 125       }
 126       if(clr == "Needs Filling"){
 127         return "red"
 128       }
 129    }
 130
 131 }
 132
 133 const MONITOR_INFO_LIST: monitorinfo[] = [
 134   { shelfName: '', ObjType: '', currentCount: '', maxCount: '', status: '', time: '' }
 135 ];