1 import { Component, OnInit, ViewChild } from '@angular/core';
3 import {MatTableDataSource} from '@angular/material/table';
5 import { MatPaginator } from '@angular/material/paginator';
7 import { cameraData,monitorinfo, monitorDetails } from './../datainterface'
8 import { RoboService } from './../../app/robo.service';
10 import { DomSanitizer, SafeUrl } from "@angular/platform-browser";
13 selector: 'app-data-monitor',
14 templateUrl: './data-monitor.component.html',
15 styleUrls: ['./data-monitor.component.scss']
17 export class DataMonitorComponent implements OnInit {
19 monitorColumns: string [] = ['shelfName','objType','currentCount','totalCount','time'];
20 monitorDataSource = new MatTableDataSource<monitorinfo>(MONITOR_INFO_LIST);
22 monitorArrayList = [];
28 monitorInfo = {} as monitorDetails;
30 @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
33 private roboService: RoboService,
34 private sanitizer: DomSanitizer
38 this.monitorDetails();
39 this.inventoryDetails();
43 this.inventoryDetails();
44 this.monitorDetails();
49 this.roboService.getMonitorImage()
50 .subscribe( (data:any) => {
54 // referred https://stackoverflow.com/questions/55591871/view-blob-response-as-image-in-angular
56 let objectURL = 'data:image/jpeg;base64,' + data.image;
57 this.thumbnail = this.sanitizer.bypassSecurityTrustUrl(objectURL);
60 error => console.log(error));
65 this.roboService.getMonitorInfo()
68 this.monitorInfo = data;
70 this.monitorArrayList = data.InventryData;
71 this.monitorDataSource = new MatTableDataSource(this.monitorArrayList);
72 this.monitorDataSource.paginator = this.paginator;
74 error => console.log(error));
79 const MONITOR_INFO_LIST: monitorinfo[] = [
80 { shelfName: '', ObjType: '', currentCount: '', totalCount: '', time: '' }