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

   1 <div class="maindiv">
   2     <div class="refresh">
   3         <button (click)="refreshPage()" mat-raised-button color="primary" type="submit">Refresh</button>
   4     </div>
   5     <div style="display:flex; justify-content: center;">
   6         <h3>INVENTORY STATUS</h3>
   7     </div>
   8     <div class="tablepage">
   9         <div class="monitortable">
  10
  11             <table mat-table [dataSource]="monitorDataSource">
  12
  13                 <ng-container matColumnDef="shelfName">
  14                     <th mat-header-cell *matHeaderCellDef> Shelf Name </th>
  15                     <td mat-cell *matCellDef="let monitor"> {{monitor.shelfName}} </td>
  16                 </ng-container>
  17
  18                 <ng-container matColumnDef="objType">
  19                     <th mat-header-cell *matHeaderCellDef> Object Type </th>
  20                     <td mat-cell *matCellDef="let monitor"> {{monitor.ObjType}} </td>
  21                 </ng-container>
  22
  23                 <ng-container matColumnDef="currentCount">
  24                     <th mat-header-cell *matHeaderCellDef> Current Count </th>
  25                     <td mat-cell *matCellDef="let monitor"> {{monitor.currentCount}} </td>
  26                 </ng-container>
  27
  28                 <ng-container matColumnDef="totalCount">
  29                     <th mat-header-cell *matHeaderCellDef> Total Count </th>
  30                     <td mat-cell *matCellDef="let monitor"> {{monitor.totalCount}} </td>
  31                 </ng-container>
  32
  33                 <ng-container matColumnDef="time">
  34                     <th mat-header-cell *matHeaderCellDef> Time </th>
  35                     <td mat-cell *matCellDef="let monitor"> {{monitor.time}} </td>
  36                 </ng-container>
  37
  38                 <tr mat-header-row *matHeaderRowDef="monitorColumns"></tr>
  39                 <tr mat-row *matRowDef="let row; columns: monitorColumns;"></tr>
  40             </table>
  41
  42             <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  43
  44         </div>
  45     </div>
  46     <div class="image-card">
  47         <mat-card>
  48             <img id="myimage" [src]="thumbnail" style="display:block; margin-left: auto; margin-right: auto;" />
  49         </mat-card>
  50     </div>
  51
  52 </div>