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

   1 <div class="maindiv">
   2     <div class="tablepage">
   3         <div class="monitortable">
   4
   5             <table mat-table [dataSource]="monitorDataSource">
   6
   7                 <ng-container matColumnDef="shelfName">
   8                     <th mat-header-cell *matHeaderCellDef> Shelf Name </th>
   9                     <td mat-cell *matCellDef="let monitor"> {{monitor.shelfName}} </td>
  10                 </ng-container>
  11
  12                 <ng-container matColumnDef="objType">
  13                     <th mat-header-cell *matHeaderCellDef> Object Type </th>
  14                     <td mat-cell *matCellDef="let monitor"> {{monitor.ObjType}} </td>
  15                 </ng-container>
  16
  17                 <ng-container matColumnDef="currentCount">
  18                     <th mat-header-cell *matHeaderCellDef> Current Count </th>
  19                     <td mat-cell *matCellDef="let monitor"> {{monitor.currentCount}} </td>
  20                 </ng-container>
  21
  22                 <ng-container matColumnDef="totalCount">
  23                     <th mat-header-cell *matHeaderCellDef> Total Count </th>
  24                     <td mat-cell *matCellDef="let monitor"> {{monitor.totalCount}} </td>
  25                 </ng-container>
  26
  27                 <ng-container matColumnDef="time">
  28                     <th mat-header-cell *matHeaderCellDef> Time </th>
  29                     <td mat-cell *matCellDef="let monitor"> {{monitor.time}} </td>
  30                 </ng-container>
  31
  32                 <tr mat-header-row *matHeaderRowDef="monitorColumns"></tr>
  33                 <tr mat-row *matRowDef="let row; columns: monitorColumns;"></tr>
  34             </table>
  35
  36             <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  37
  38         </div>
  39     </div>
  40     <div class="image-card">
  41         <mat-card>
  42             <img id="myimage" [src]='thumbnail' />
  43             <!-- <p>Backend image</p> -->
  44         </mat-card>
  45     </div>
  46
  47 </div>