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>SHELF 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" [ngStyle]="{'color': getColor(monitor.status)}" > {{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" [ngStyle]="{'color': getColor(monitor.status)}"> {{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" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.currentCount}} </td>
  26                 </ng-container>
  27
  28                 <ng-container matColumnDef="maxCount">
  29                     <th mat-header-cell *matHeaderCellDef> Max Count </th>
  30                     <td mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.maxCount}} </td>
  31                 </ng-container>
  32
  33                 <ng-container matColumnDef="status">
  34                     <th mat-header-cell *matHeaderCellDef> Status </th>
  35                     <td  mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}"> {{monitor.status}}
  36                     </td>
  37                 </ng-container>
  38
  39                 <ng-container matColumnDef="time">
  40                     <th mat-header-cell *matHeaderCellDef> Time </th>
  41                     <td mat-cell *matCellDef="let monitor" [ngStyle]="{'color': getColor(monitor.status)}" > {{monitor.time}} </td>
  42                 </ng-container>
  43
  44                 <tr  mat-header-row *matHeaderRowDef="monitorColumns"></tr>
  45                 <tr mat-row *matRowDef="let row; columns: monitorColumns;"></tr>
  46             </table>
  47
  48             <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
  49
  50         </div>
  51     </div>
  52     <div class="image-card">
  53         <mat-card>
  54             <img id="myimage" [src]="thumbnail" style="display:block; margin-left: auto; margin-right: auto;" />
  55         </mat-card>
  56     </div>
  57
  58 </div>