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

   1 <div class="maindiv">
   2
   3   <div class="centerdiv">
   4
   5     <div>
   6       <mat-accordion>
   7         <mat-expansion-panel>
   8           <mat-expansion-panel-header>
   9             <mat-panel-title>
  10               Camera Video upload
  11             </mat-panel-title>
  12             <mat-panel-description>
  13               Please upload the required details
  14             </mat-panel-description>
  15           </mat-expansion-panel-header>
  16           <p>Camera Upload Video</p>
  17
  18           <div class="mp4-upload">
  19             <form [formGroup]="videoUploadForm" (ngSubmit)="onSubmit()">
  20               <div>
  21                 <img [src]="url" *ngIf="format==='image' && url" height="200"> <br />
  22                 <video [src]="url" *ngIf="format==='video' && url" height="200" controls></video> <br />
  23                 <input type="file" name="video" (change)="onFileSelect($event)" />
  24               </div>
  25               <div class="center-button">
  26                 <button mat-raised-button color="primary" type="submit">Upload</button>
  27               </div>
  28             </form>
  29
  30           </div>
  31         </mat-expansion-panel>
  32       </mat-accordion>
  33     </div>
  34
  35     <div style="padding-top:10px;">
  36       <mat-accordion>
  37         <mat-expansion-panel>
  38           <mat-expansion-panel-header>
  39             <mat-panel-title>
  40               Input Stream and location
  41             </mat-panel-title>
  42             <mat-panel-description>
  43               Please upload the required details
  44             </mat-panel-description>
  45           </mat-expansion-panel-header>
  46           <mat-card>
  47             <form [formGroup]="cameraDetailsForm" (ngSubmit)="cameraDetailsSubmit()">
  48
  49               <div>
  50                 <div>
  51                   <mat-label style="padding-right: 20px;">Provide Video Details.....</mat-label>
  52
  53                 </div>
  54                 <div>
  55                   <mat-label style="padding-right: 20px;">Camera Input Stream.....</mat-label>
  56                   <mat-form-field appearance="fill">
  57                     <mat-label>Select Camera Input</mat-label>
  58
  59                     <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedCamera">
  60
  61                   </mat-form-field>
  62                 </div>
  63                 <div>
  64                   <mat-label style="padding-right: 20px;">Select Camera Location </mat-label>
  65                   <mat-form-field appearance="fill">
  66                     <mat-label>Camera Location</mat-label>
  67
  68                     <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedLocation">
  69                     <!-- <mat-select>
  70                       <mat-option *ngFor="let loc of location" [ngModelOptions]="{standalone: true}"
  71                         [(ngModel)]="selectedLocation" [value]="loc.value">
  72                         {{selectedLocation}}</mat-option>
  73                     </mat-select> -->
  74                   </mat-form-field>
  75                 </div>
  76
  77                 <div>
  78                   <mat-label style="padding-right: 20px;">Provide RTSP URL....... </mat-label>
  79                   <mat-form-field appearance="fill">
  80                     <mat-label>RTSP URL</mat-label>
  81                     <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRTSP">
  82                   </mat-form-field>
  83                 </div>
  84               </div>
  85
  86               <div style="display:flex; justify-content: center">
  87                 <button mat-raised-button color="primary" type="submit">Camera-Details-Upload</button>
  88               </div>
  89             </form>
  90           </mat-card>
  91         </mat-expansion-panel>
  92       </mat-accordion>
  93
  94       <div style="padding-top:20px;">
  95         <mat-card>
  96           <div class="tablepage">
  97             <div class="cameratable">
  98
  99               <table mat-table [dataSource]="cameraDataSource">
 100
 101                 <ng-container matColumnDef="checked">
 102                   <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
 103                   <mat-cell *matCellDef="let element">
 104                     <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
 105                   </mat-cell>
 106                 </ng-container>
 107
 108                 <ng-container matColumnDef="cameraID">
 109                   <th mat-header-cell *matHeaderCellDef> CAMERA ID </th>
 110                   <!-- <td></td> -->
 111                   <td mat-cell *matCellDef="let camera"> {{camera.cameraID}} </td>
 112                 </ng-container>
 113
 114                 <ng-container matColumnDef="cameraLocation">
 115                   <th mat-header-cell *matHeaderCellDef> CAMERA LOCATION </th>
 116                   <td mat-cell *matCellDef="let camera"> {{camera.cameraLocation}} </td>
 117                 </ng-container>
 118
 119                 <ng-container matColumnDef="cameraNumber">
 120                   <th mat-header-cell *matHeaderCellDef> CAMERA NUMBER </th>
 121                   <td mat-cell *matCellDef="let camera"> {{camera.cameraNumber}} </td>
 122                 </ng-container>
 123
 124                 <ng-container matColumnDef="rtspUrl">
 125                   <th mat-header-cell *matHeaderCellDef> RTSP URL </th>
 126                   <td mat-cell *matCellDef="let camera"> {{camera.rtspUrl}} </td>
 127                 </ng-container>
 128
 129                 <tr mat-header-row *matHeaderRowDef="cameraColumns"></tr>
 130                 <tr mat-row *matRowDef="let row; columns: cameraColumns;"></tr>
 131               </table>
 132
 133               <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
 134               <div style="padding: 20px">
 135               <mat-select placeholder="Select Camera values to send" [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedCameraID"
 136                 (ngModelChange)="onCameraIDSelection()">
 137                 <mat-option *ngFor="let camera of selectedCameraId" [value]="camera">
 138                   {{ camera }}
 139                 </mat-option>
 140               </mat-select>
 141               </div>
 142             </div>
 143           </div>
 144         </mat-card>
 145       </div>
 146
 147     </div>
 148     <div style="padding-top: 20px; display:flex; justify-content: center">
 149       <button (click)="refreshPage()" mat-raised-button color="primary" type="submit">Refresh</button>
 150     </div>
 151   </div>
 152
 153 </div>