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

   1 import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
   2 import { FormBuilder, FormGroup } from '@angular/forms';
   3 import { HttpClient } from '@angular/common/http';
   4
   5 import { RoboService } from './../../app/robo.service';
   6
   7 import { cameraData,camerainfo } from './../datainterface'
   8
   9 import { cameraDetails } from './../datainterface';
  10
  11 // import { ToastService } from './toast.service';
  12
  13 import { ToastrService } from 'ngx-toastr';
  14 import {MatTableDataSource} from '@angular/material/table';
  15
  16 import { MatPaginator } from '@angular/material/paginator';
  17
  18 @Component({
  19   selector: 'app-data-fetch',
  20   templateUrl: './data-fetch.component.html',
  21   styleUrls: ['./data-fetch.component.scss']
  22 })
  23 export class DataFetchComponent implements OnInit {
  24
  25   cameraColumns: string [] = ['cameraID','cameraLocation','cameraNumber','rtspUrl'];
  26   cameraDataSource = new MatTableDataSource<camerainfo>(CAMERA_INFO_LIST);
  27
  28   SERVER_URL = "http://localhost:30092/v1/monitor/video";
  29   videoUploadForm: FormGroup;
  30   cameraDetailsForm: FormGroup;
  31
  32   cameraData = {} as cameraData;
  33   camerasArray = [];
  34   location = [];
  35
  36   selectedCamera: string;
  37   selectedLocation: string;
  38
  39   selectedRTSP: string;
  40
  41   cameradetconcat: string
  42
  43   url;
  44   format;
  45
  46
  47   cameraInfo = {} as cameraDetails;
  48   cameraArrayList = [];
  49
  50   selectedCameraId = []
  51   selectedCameraID: string
  52
  53   selectedValues = []
  54
  55   @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  56
  57   constructor(
  58     private formBuilder: FormBuilder,
  59     private httpClient: HttpClient,
  60     private roboService: RoboService,
  61     private toastService: ToastrService
  62     ) { }
  63
  64   ngOnInit() {
  65     this.fetchCameraDetails();
  66     this.videoUploadForm = this.formBuilder.group({
  67       video: ['']
  68     });
  69
  70     this.cameraDetailsForm = this.formBuilder.group({
  71       cameraLocation: [''],
  72       cameraNumber: ['']
  73     });
  74
  75     this.camerasArray =
  76     [
  77       {
  78         "value": "camera01",
  79         "viewValue": "camera01"
  80       },
  81       {
  82         "value": "camera02",
  83         "viewValue": "camera02"
  84       },
  85       {
  86         "value": "camera03",
  87         "viewValue": "camera03"
  88       }
  89     ];
  90
  91     this.location =
  92     [
  93       {
  94         "value": "Bangalore",
  95         "viewValue": "Bangalore"
  96       }
  97     ];
  98
  99     this.selectedCamera = "Camera"
 100     this.selectedLocation = "Bangalore"
 101     // this.fetchCameraDetails();
 102   }
 103
 104   onFileSelect(event) {
 105
 106
 107     if (event.target.files.length > 0) {
 108       const file = event.target.files[0];
 109       this.videoUploadForm.get('video').setValue(file);
 110     }
 111
 112     const file = event.target.files && event.target.files[0];
 113     if (file) {
 114       var reader = new FileReader();
 115       reader.readAsDataURL(file);
 116       if (file.type.indexOf('image') > -1) {
 117         this.format = 'image';
 118       } else if (file.type.indexOf('video') > -1) {
 119         this.format = 'video';
 120       }
 121       reader.onload = (event) => {
 122         this.url = (<FileReader>event.target).result;
 123       }
 124     }
 125   }
 126
 127   onSubmit() {
 128     const formData = new FormData();
 129     formData.append('file', this.videoUploadForm.get('video').value);
 130     debugger;
 131     this.showFileSuccess();
 132     this.httpClient.post<any>(this.SERVER_URL, formData).subscribe
 133     (
 134       (res) => console.log(res),
 135       (err) => console.log(err)
 136     );
 137   }
 138   cameraDetailsSubmit() {
 139     const formData = new FormData();
 140
 141     this.cameraData.cameraNumber = this.selectedCamera;
 142     this.cameraData.cameraLocation = this.selectedLocation;
 143     this.cameraData.rtspUrl = this.selectedRTSP;
 144
 145     this.roboService.postCameraDetails(this.cameraData)
 146         .subscribe(data => {
 147           debugger;
 148           if(data.responce == "success"){
 149             this.showSuccess();
 150           }
 151           console.log(data);
 152         }
 153       ,error => console.log(error)
 154       );
 155
 156   }
 157
 158   onCameraSelection() {
 159     console.log("Inside onCameraSelection.....")
 160   }
 161
 162   onCameraIDSelection() {
 163     console.log("Spotted...")
 164     var index: number
 165     console.log("Inside onCameraIDSelection.......")
 166     debugger;
 167     // this.roboService.postCameraID(this.selectedCameraID)
 168     index = this.selectedCameraId.indexOf(this.selectedCameraID)
 169     debugger;
 170     this.roboService.triggerDetection(this.selectedValues[index])
 171     .subscribe(data => {
 172       debugger;
 173       console.log(data)
 174      },
 175      error => console.log(error));
 176      index = null;
 177   }
 178
 179
 180   showSuccess() {
 181     console.log("Inside showSuccess.... Method")
 182     this.toastService.success('Uploaded Succesfully!','Camera Data');
 183   }
 184
 185   showFileSuccess() {
 186     console.log("Inside showSuccess.... Method")
 187     this.toastService.success('Uploaded Succesfully!','Video File');
 188   }
 189
 190   fetchCameraDetails() {
 191
 192     debugger;
 193     this.roboService.getCameraInfo()
 194       .subscribe(data => {
 195       debugger;
 196       console.log(data);
 197       this.cameraInfo = data;
 198
 199       this.cameraArrayList = data.roboCamera;
 200       this.cameraDataSource = new MatTableDataSource(this.cameraArrayList);
 201       this.cameraDataSource.paginator = this.paginator;
 202
 203       console.log("For loop started.....")
 204       for (var val of this.cameraArrayList) {
 205         debugger;
 206
 207         console.log(val);
 208         this.cameradetconcat = val.cameraNumber + '/'+ val.rtspUrl + '/' +val.cameraLocation
 209         // this.selectedCameraId.push(val.camera);
 210         this.selectedCameraId.push(this.cameradetconcat)
 211         this.selectedValues.push(val.cameraID)
 212
 213       }
 214       debugger;
 215       console.log("SelectedCameraID")
 216       console.log(this.selectedCameraId)
 217      },
 218      error => console.log(error));
 219    }
 220
 221    refreshPage() {
 222      this.fetchCameraDetails();
 223    }
 224 }
 225
 226 const CAMERA_INFO_LIST: camerainfo[] = [
 227   { cameraID: '',cameraLocation: '', cameraNumber: '', rtspUrl: '' }
 228 ];