--- /dev/null
+# Stage 1
+
+#FROM node:10-alpine as build-step
+
+FROM node:12.9 as build-step
+
+RUN mkdir -p /app
+
+WORKDIR /app
+
+COPY package.json /app
+
+RUN npm install
+
+COPY . /app
+
+RUN npm run build --prod
+
+# Stage 2
+
+FROM nginx:1.17.1-alpine
+
+COPY --from=build-step /app/dist/RoboUI /usr/share/nginx/html
--- /dev/null
+# RoboUI
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 8.2.2.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory. Use the `--prod` flag for a production build.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via [Protractor](http://www.protractortest.org/).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI README](https://github.com/angular/angular-cli/blob/master/README.md).
--- /dev/null
+{
+ "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+ "version": 1,
+ "newProjectRoot": "projects",
+ "projects": {
+ "RoboUI": {
+ "projectType": "application",
+ "schematics": {},
+ "root": "",
+ "sourceRoot": "src",
+ "prefix": "app",
+ "architect": {
+ "build": {
+ "builder": "@angular-devkit/build-angular:browser",
+ "options": {
+ "outputPath": "dist/RoboUI",
+ "index": "src/index.html",
+ "main": "src/main.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.app.json",
+ "aot": true,
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss",
+ "node_modules/ngx-toastr/toastr.css"
+ ],
+ "scripts": []
+ },
+ "configurations": {
+ "production": {
+ "fileReplacements": [
+ {
+ "replace": "src/environments/environment.ts",
+ "with": "src/environments/environment.prod.ts"
+ }
+ ],
+ "optimization": true,
+ "outputHashing": "all",
+ "namedChunks": false,
+ "aot": true,
+ "extractLicenses": true,
+ "vendorChunk": false,
+ "buildOptimizer": true,
+ "budgets": [
+ {
+ "type": "initial",
+ "maximumWarning": "2mb",
+ "maximumError": "5mb"
+ },
+ {
+ "type": "anyComponentStyle",
+ "maximumWarning": "6kb",
+ "maximumError": "10kb"
+ }
+ ]
+ }
+ }
+ },
+ "serve": {
+ "builder": "@angular-devkit/build-angular:dev-server",
+ "options": {
+ "browserTarget": "RoboUI:build"
+ },
+ "configurations": {
+ "production": {
+ "browserTarget": "RoboUI:build:production"
+ }
+ }
+ },
+ "extract-i18n": {
+ "builder": "@angular-devkit/build-angular:extract-i18n",
+ "options": {
+ "browserTarget": "RoboUI:build"
+ }
+ },
+ "test": {
+ "builder": "@angular-devkit/build-angular:karma",
+ "options": {
+ "main": "src/test.ts",
+ "polyfills": "src/polyfills.ts",
+ "tsConfig": "tsconfig.spec.json",
+ "karmaConfig": "karma.conf.js",
+ "assets": [
+ "src/favicon.ico",
+ "src/assets"
+ ],
+ "styles": [
+ "src/styles.scss"
+ ],
+ "scripts": []
+ }
+ },
+ "lint": {
+ "builder": "@angular-devkit/build-angular:tslint",
+ "options": {
+ "tsConfig": [
+ "tsconfig.app.json",
+ "tsconfig.spec.json",
+ "e2e/tsconfig.json"
+ ],
+ "exclude": [
+ "**/node_modules/**"
+ ]
+ }
+ },
+ "e2e": {
+ "builder": "@angular-devkit/build-angular:protractor",
+ "options": {
+ "protractorConfig": "e2e/protractor.conf.js",
+ "devServerTarget": "RoboUI:serve"
+ },
+ "configurations": {
+ "production": {
+ "devServerTarget": "RoboUI:serve:production"
+ }
+ }
+ }
+ }
+ }
+ },
+ "defaultProject": "RoboUI",
+ "schematics": {
+ "@schematics/angular:component": {
+ "styleext": "scss"
+ }
+ }
+}
\ No newline at end of file
--- /dev/null
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+ allScriptsTimeout: 11000,
+ specs: [
+ './src/**/*.e2e-spec.ts'
+ ],
+ capabilities: {
+ 'browserName': 'chrome'
+ },
+ directConnect: true,
+ baseUrl: 'http://localhost:4200/',
+ framework: 'jasmine',
+ jasmineNodeOpts: {
+ showColors: true,
+ defaultTimeoutInterval: 30000,
+ print: function() {}
+ },
+ onPrepare() {
+ require('ts-node').register({
+ project: require('path').join(__dirname, './tsconfig.json')
+ });
+ jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+ }
+};
\ No newline at end of file
--- /dev/null
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+ let page: AppPage;
+
+ beforeEach(() => {
+ page = new AppPage();
+ });
+
+ it('should display welcome message', () => {
+ page.navigateTo();
+ expect(page.getTitleText()).toEqual('Welcome to RoboUI!');
+ });
+
+ afterEach(async () => {
+ // Assert that there are no errors emitted from the browser
+ const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+ expect(logs).not.toContain(jasmine.objectContaining({
+ level: logging.Level.SEVERE,
+ } as logging.Entry));
+ });
+});
--- /dev/null
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+ navigateTo() {
+ return browser.get(browser.baseUrl) as Promise<any>;
+ }
+
+ getTitleText() {
+ return element(by.css('app-root h1')).getText() as Promise<string>;
+ }
+}
--- /dev/null
+{
+ "extends": "../tsconfig.json",
+ "compilerOptions": {
+ "outDir": "../out-tsc/e2e",
+ "module": "commonjs",
+ "target": "es2018",
+ "types": [
+ "jasmine",
+ "jasminewd2",
+ "node"
+ ]
+ }
+}
--- /dev/null
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+ config.set({
+ basePath: '',
+ frameworks: ['jasmine', '@angular-devkit/build-angular'],
+ plugins: [
+ require('karma-jasmine'),
+ require('karma-chrome-launcher'),
+ require('karma-jasmine-html-reporter'),
+ require('karma-coverage-istanbul-reporter'),
+ require('@angular-devkit/build-angular/plugins/karma')
+ ],
+ client: {
+ clearContext: false // leave Jasmine Spec Runner output visible in browser
+ },
+ coverageIstanbulReporter: {
+ dir: require('path').join(__dirname, './coverage/RoboUI'),
+ reports: ['html', 'lcovonly', 'text-summary'],
+ fixWebpackSourcePaths: true
+ },
+ reporters: ['progress', 'kjhtml'],
+ port: 9876,
+ colors: true,
+ logLevel: config.LOG_INFO,
+ autoWatch: true,
+ browsers: ['Chrome'],
+ singleRun: false,
+ restartOnFileChange: true
+ });
+};
--- /dev/null
+{
+ "name": "robo-ui",
+ "version": "0.0.0",
+ "scripts": {
+ "ng": "ng",
+ "start": "ng serve",
+ "build": "ng build",
+ "test": "ng test",
+ "lint": "ng lint",
+ "e2e": "ng e2e"
+ },
+ "private": true,
+ "dependencies": {
+ "@angular/animations": "^11.0.5",
+ "@angular/cdk": "^11.0.3",
+ "@angular/common": "~11.0.5",
+ "@angular/compiler": "~11.0.5",
+ "@angular/core": "~11.0.5",
+ "@angular/forms": "~11.0.5",
+ "@angular/material": "^11.0.3",
+ "@angular/platform-browser": "~11.0.5",
+ "@angular/platform-browser-dynamic": "~11.0.5",
+ "@angular/router": "~11.0.5",
+ "@ng-bootstrap/ng-bootstrap": "^8.0.0",
+ "bootstrap": "^4.5.3",
+ "ngx-toastr": "^13.2.0",
+ "rxjs": "~6.6.3",
+ "tslib": "^2.0.0",
+ "zone.js": "~0.10.2"
+ },
+ "devDependencies": {
+ "@angular-devkit/build-angular": "~0.1100.5",
+ "@angular/cli": "~11.0.5",
+ "@angular/compiler-cli": "~11.0.5",
+ "@angular/language-service": "~11.0.5",
+ "@types/jasmine": "~3.6.0",
+ "@types/jasminewd2": "~2.0.3",
+ "@types/node": "^12.11.1",
+ "codelyzer": "^6.0.0",
+ "jasmine-core": "~3.6.0",
+ "jasmine-spec-reporter": "~5.0.0",
+ "karma": "~5.0.0",
+ "karma-chrome-launcher": "~3.1.0",
+ "karma-coverage-istanbul-reporter": "~3.0.2",
+ "karma-jasmine": "~4.0.0",
+ "karma-jasmine-html-reporter": "^1.5.0",
+ "protractor": "~7.0.0",
+ "ts-node": "~7.0.0",
+ "tslint": "~6.1.0",
+ "typescript": "^4.0.5"
+ }
+}
--- /dev/null
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { DataFetchComponent } from './data-fetch/data-fetch.component';
+import { DataMonitorComponent } from './data-monitor/data-monitor.component';
+
+const routes: Routes = [
+ {
+ path: 'dataupload',
+ component: DataFetchComponent
+ },
+ {
+ path: 'datamonitor',
+ component: DataMonitorComponent
+ },
+ // {
+ // path: '**',
+ // redirectTo: ''
+ // }
+];
+
+@NgModule({
+ imports: [RouterModule.forRoot(routes)],
+ exports: [RouterModule]
+})
+export class AppRoutingModule {
+
+}
--- /dev/null
+<mat-toolbar color="primary">
+ <mat-toolbar-row>
+ <button mat-icon-button>
+ <mat-icon (click)="sidenav.toggle()">menu</mat-icon>
+ </button>
+ <h1>ROBO Usecase</h1>
+ <span class="menu-spacer"></span>
+ <div>
+ <a mat-button [routerLink]="'/dataupload'"> Data Upload </a>
+ <a mat-button [routerLink]="'/datamonitor'"> Data Monitor </a>
+
+ </div>
+ </mat-toolbar-row>
+
+ <!-- <mat-toolbar-row>
+ <span style="font-size: 12px;">SimpleCRM helps you easily manage your contacts</span>
+ </mat-toolbar-row> -->
+ </mat-toolbar>
+
+ <mat-sidenav-container>
+ <mat-sidenav #sidenav>
+ <mat-nav-list>
+
+ <a mat-list-item [routerLink]="'/dataupload'"> Data Upload </a>
+ <a mat-list-item [routerLink]="'/datamonitor'"> Data Monitor </a>
+
+ </mat-nav-list>
+ </mat-sidenav>
+ <mat-sidenav-content>
+ <div style="height: 88vh;">
+
+ <router-outlet></router-outlet>
+ </div>
+ </mat-sidenav-content>
+ </mat-sidenav-container>
\ No newline at end of file
--- /dev/null
+import { TestBed, async } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ imports: [
+ RouterTestingModule
+ ],
+ declarations: [
+ AppComponent
+ ],
+ }).compileComponents();
+ }));
+
+ it('should create the app', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app).toBeTruthy();
+ });
+
+ it(`should have as title 'RoboUI'`, () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ const app = fixture.debugElement.componentInstance;
+ expect(app.title).toEqual('RoboUI');
+ });
+
+ it('should render title in a h1 tag', () => {
+ const fixture = TestBed.createComponent(AppComponent);
+ fixture.detectChanges();
+ const compiled = fixture.debugElement.nativeElement;
+ expect(compiled.querySelector('h1').textContent).toContain('Welcome to RoboUI!');
+ });
+});
--- /dev/null
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+ title = 'RoboUI';
+
+
+ ngOnInit() {
+ }
+}
--- /dev/null
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { DataFetchComponent } from './data-fetch/data-fetch.component';
+
+// Angular Material components
+import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatButtonModule} from '@angular/material/button';
+import {MatInputModule} from '@angular/material/input';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSelectModule} from '@angular/material/select';
+import {MatSliderModule} from '@angular/material/slider';
+import {MatSlideToggleModule} from '@angular/material/slide-toggle';
+import {MatMenuModule} from '@angular/material/menu';
+import {MatSidenavModule} from '@angular/material/sidenav';
+import {MatToolbarModule} from '@angular/material/toolbar';
+import {MatListModule} from '@angular/material/list';
+import {MatGridListModule} from '@angular/material/grid-list';
+import {MatCardModule} from '@angular/material/card';
+import {MatStepperModule} from '@angular/material/stepper';
+import {MatTabsModule} from '@angular/material/tabs';
+import {MatExpansionModule} from '@angular/material/expansion';
+import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatChipsModule} from '@angular/material/chips';
+import {MatIconModule} from '@angular/material/icon';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatDialogModule} from '@angular/material/dialog';
+import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatTableModule} from '@angular/material/table';
+import {MatSortModule} from '@angular/material/sort';
+import {MatPaginatorModule} from '@angular/material/paginator';
+
+import { HttpClientModule } from '@angular/common/http';
+
+
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { ToastrModule } from 'ngx-toastr';
+import { DataMonitorComponent } from './data-monitor/data-monitor.component';
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ DataFetchComponent,
+ DataMonitorComponent
+ ],
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ BrowserAnimationsModule,
+ MatCheckboxModule,
+ MatButtonModule,
+ MatInputModule,
+ MatAutocompleteModule,
+ MatDatepickerModule,
+ MatFormFieldModule,
+ MatRadioModule,
+ MatSelectModule,
+ MatSliderModule,
+ MatSlideToggleModule,
+ MatMenuModule,
+ MatSidenavModule,
+ MatToolbarModule,
+ MatListModule,
+ MatGridListModule,
+ MatCardModule,
+ MatStepperModule,
+ MatTabsModule,
+ MatExpansionModule,
+ MatButtonToggleModule,
+ MatChipsModule,
+ MatIconModule,
+ MatProgressSpinnerModule,
+ MatProgressBarModule,
+ MatDialogModule,
+ MatTooltipModule,
+ MatSnackBarModule,
+ MatTableModule,
+ MatSortModule,
+ MatPaginatorModule,
+
+
+ HttpClientModule,
+ ReactiveFormsModule,
+ FormsModule,
+ ToastrModule.forRoot()
+
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
--- /dev/null
+<div class="maindiv">
+
+ <div class="centerdiv">
+
+ <div>
+ <mat-accordion>
+ <mat-expansion-panel>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ Camera Video upload
+ </mat-panel-title>
+ <mat-panel-description>
+ Please upload the required details
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <p>Camera Upload Video</p>
+
+ <div class="mp4-upload">
+ <form [formGroup]="videoUploadForm" (ngSubmit)="onSubmit()">
+ <div>
+ <img [src]="url" *ngIf="format==='image' && url" height="200"> <br />
+ <video [src]="url" *ngIf="format==='video' && url" height="200" controls></video> <br />
+ <input type="file" name="video" (change)="onFileSelect($event)" />
+ </div>
+ <div class="center-button">
+ <button mat-raised-button color="primary" type="submit">Upload</button>
+ </div>
+ </form>
+
+ </div>
+ </mat-expansion-panel>
+ </mat-accordion>
+ </div>
+
+ <div style="padding-top:10px;">
+ <mat-accordion>
+ <mat-expansion-panel>
+ <mat-expansion-panel-header>
+ <mat-panel-title>
+ Input Stream and location
+ </mat-panel-title>
+ <mat-panel-description>
+ Please upload the required details
+ </mat-panel-description>
+ </mat-expansion-panel-header>
+ <mat-card>
+ <form [formGroup]="cameraDetailsForm" (ngSubmit)="cameraDetailsSubmit()">
+
+ <div>
+ <div>
+ <mat-label style="padding-right: 20px;">Provide Video Details.....</mat-label>
+
+ </div>
+ <div>
+ <mat-label style="padding-right: 20px;">Camera Input Stream.....</mat-label>
+ <mat-form-field appearance="fill">
+ <mat-label>Select Camera Input</mat-label>
+
+ <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedCamera">
+
+ </mat-form-field>
+ </div>
+ <div>
+ <mat-label style="padding-right: 20px;">Select Camera Location </mat-label>
+ <mat-form-field appearance="fill">
+ <mat-label>Camera Location</mat-label>
+
+ <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedLocation">
+ <!-- <mat-select>
+ <mat-option *ngFor="let loc of location" [ngModelOptions]="{standalone: true}"
+ [(ngModel)]="selectedLocation" [value]="loc.value">
+ {{selectedLocation}}</mat-option>
+ </mat-select> -->
+ </mat-form-field>
+ </div>
+
+ <div>
+ <mat-label style="padding-right: 20px;">Provide RTSP URL....... </mat-label>
+ <mat-form-field appearance="fill">
+ <mat-label>RTSP URL</mat-label>
+ <input matInput [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedRTSP">
+ </mat-form-field>
+ </div>
+ </div>
+
+ <div style="display:flex; justify-content: center">
+ <button mat-raised-button color="primary" type="submit">Camera-Details-Upload</button>
+ </div>
+ </form>
+ </mat-card>
+ </mat-expansion-panel>
+ </mat-accordion>
+
+ <div style="padding-top:20px;">
+ <mat-card>
+ <div class="tablepage">
+ <div class="cameratable">
+
+ <table mat-table [dataSource]="cameraDataSource">
+
+ <ng-container matColumnDef="checked">
+ <mat-header-cell *matHeaderCellDef>Check</mat-header-cell>
+ <mat-cell *matCellDef="let element">
+ <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
+ </mat-cell>
+ </ng-container>
+
+ <ng-container matColumnDef="cameraID">
+ <th mat-header-cell *matHeaderCellDef> CAMERA ID </th>
+ <!-- <td></td> -->
+ <td mat-cell *matCellDef="let camera"> {{camera.cameraID}} </td>
+ </ng-container>
+
+ <ng-container matColumnDef="cameraLocation">
+ <th mat-header-cell *matHeaderCellDef> CAMERA LOCATION </th>
+ <td mat-cell *matCellDef="let camera"> {{camera.cameraLocation}} </td>
+ </ng-container>
+
+ <ng-container matColumnDef="cameraNumber">
+ <th mat-header-cell *matHeaderCellDef> CAMERA NUMBER </th>
+ <td mat-cell *matCellDef="let camera"> {{camera.cameraNumber}} </td>
+ </ng-container>
+
+ <ng-container matColumnDef="rtspUrl">
+ <th mat-header-cell *matHeaderCellDef> RTSP URL </th>
+ <td mat-cell *matCellDef="let camera"> {{camera.rtspUrl}} </td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="cameraColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: cameraColumns;"></tr>
+ </table>
+
+ <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
+ <div style="padding: 20px">
+ <mat-select placeholder="Select Camera values to send" [ngModelOptions]="{standalone: true}" [(ngModel)]="selectedCameraID"
+ (ngModelChange)="onCameraIDSelection()">
+ <mat-option *ngFor="let camera of selectedCameraId" [value]="camera">
+ {{ camera }}
+ </mat-option>
+ </mat-select>
+ </div>
+ </div>
+ </div>
+ </mat-card>
+ </div>
+
+ </div>
+ <div style="padding-top: 20px; display:flex; justify-content: center">
+ <button (click)="refreshPage()" mat-raised-button color="primary" type="submit">Refresh</button>
+ </div>
+ </div>
+
+</div>
\ No newline at end of file
--- /dev/null
+.maindiv {
+ position: center;
+ position: relative;
+ padding-top: 20px;
+
+ .centerdiv {
+
+ width: 100%;
+ margin: 0;
+ position: absolute;
+ padding-top: 20px;
+ padding-right: 20px;
+ padding-left: 20px;
+
+ .mp4-upload {
+
+ .center-button {
+ display:flex; justify-content: center
+ }
+
+ }
+
+ mat-accordion {
+ width: 80%;
+ }
+
+ .tablepage {
+
+ position: relative;
+ .filter {
+ width: 70%;
+ padding-left: 20px;
+ }
+ .cameratable {
+ table {
+ width: 100%;
+ }
+ }
+
+ }
+ }
+ }
+
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DataFetchComponent } from './data-fetch.component';
+
+describe('DataFetchComponent', () => {
+ let component: DataFetchComponent;
+ let fixture: ComponentFixture<DataFetchComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DataFetchComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DataFetchComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit, TemplateRef, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { HttpClient } from '@angular/common/http';
+
+import { RoboService } from './../../app/robo.service';
+
+import { cameraData,camerainfo } from './../datainterface'
+
+import { cameraDetails } from './../datainterface';
+
+// import { ToastService } from './toast.service';
+
+import { ToastrService } from 'ngx-toastr';
+import {MatTableDataSource} from '@angular/material/table';
+
+import { MatPaginator } from '@angular/material/paginator';
+
+@Component({
+ selector: 'app-data-fetch',
+ templateUrl: './data-fetch.component.html',
+ styleUrls: ['./data-fetch.component.scss']
+})
+export class DataFetchComponent implements OnInit {
+
+ cameraColumns: string [] = ['cameraID','cameraLocation','cameraNumber','rtspUrl'];
+ cameraDataSource = new MatTableDataSource<camerainfo>(CAMERA_INFO_LIST);
+
+ SERVER_URL = "http://localhost:9996/v1/monitor/video";
+ videoUploadForm: FormGroup;
+ cameraDetailsForm: FormGroup;
+
+ cameraData = {} as cameraData;
+ camerasArray = [];
+ location = [];
+
+ selectedCamera: string;
+ selectedLocation: string;
+
+ selectedRTSP: string;
+
+ cameradetconcat: string
+
+ url;
+ format;
+
+
+ cameraInfo = {} as cameraDetails;
+ cameraArrayList = [];
+
+ selectedCameraId = []
+ selectedCameraID: string
+
+ selectedValues = []
+
+ @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
+
+ constructor(
+ private formBuilder: FormBuilder,
+ private httpClient: HttpClient,
+ private roboService: RoboService,
+ private toastService: ToastrService
+ ) { }
+
+ ngOnInit() {
+ this.videoUploadForm = this.formBuilder.group({
+ video: ['']
+ });
+
+ this.cameraDetailsForm = this.formBuilder.group({
+ cameraLocation: [''],
+ cameraNumber: ['']
+ });
+
+ this.camerasArray =
+ [
+ {
+ "value": "camera01",
+ "viewValue": "camera01"
+ },
+ {
+ "value": "camera02",
+ "viewValue": "camera02"
+ },
+ {
+ "value": "camera03",
+ "viewValue": "camera03"
+ }
+ ];
+
+ this.location =
+ [
+ {
+ "value": "Bangalore",
+ "viewValue": "Bangalore"
+ }
+ ];
+
+ this.selectedCamera = "Camera"
+ this.selectedLocation = "Bangalore"
+
+ this.fetchCameraDetails();
+ }
+
+ onFileSelect(event) {
+
+
+ if (event.target.files.length > 0) {
+ const file = event.target.files[0];
+ this.videoUploadForm.get('video').setValue(file);
+ }
+
+ const file = event.target.files && event.target.files[0];
+ if (file) {
+ var reader = new FileReader();
+ reader.readAsDataURL(file);
+ if (file.type.indexOf('image') > -1) {
+ this.format = 'image';
+ } else if (file.type.indexOf('video') > -1) {
+ this.format = 'video';
+ }
+ reader.onload = (event) => {
+ this.url = (<FileReader>event.target).result;
+ }
+ }
+ }
+
+ onSubmit() {
+ const formData = new FormData();
+ formData.append('file', this.videoUploadForm.get('video').value);
+ debugger;
+ this.showFileSuccess();
+ this.httpClient.post<any>(this.SERVER_URL, formData).subscribe
+ (
+ (res) => console.log(res),
+ (err) => console.log(err)
+ );
+ }
+ cameraDetailsSubmit() {
+ const formData = new FormData();
+
+ this.cameraData.cameraNumber = this.selectedCamera;
+ this.cameraData.cameraLocation = this.selectedLocation;
+ this.cameraData.rtspUrl = this.selectedRTSP;
+
+ this.roboService.postCameraDetails(this.cameraData)
+ .subscribe(data => {
+ debugger;
+ if(data.responce == "success"){
+ this.showSuccess();
+ }
+ console.log(data);
+ }
+ ,error => console.log(error)
+ );
+
+ }
+
+ onCameraSelection() {
+ console.log("Inside onCameraSelection.....")
+ }
+
+ onCameraIDSelection() {
+ var index: number
+ console.log("Inside onCameraIDSelection.......")
+ debugger;
+ // this.roboService.postCameraID(this.selectedCameraID)
+ index = this.selectedCameraId.indexOf(this.selectedCameraID)
+ debugger;
+ this.roboService.triggerDetection(this.selectedValues[index])
+ .subscribe(data => {
+ debugger;
+ console.log(data)
+ },
+ error => console.log(error));
+
+ }
+
+
+ showSuccess() {
+ console.log("Inside showSuccess.... Method")
+ this.toastService.success('Uploaded Succesfully!','Camera Data');
+ }
+
+ showFileSuccess() {
+ console.log("Inside showSuccess.... Method")
+ this.toastService.success('Uploaded Succesfully!','Video File');
+ }
+
+ fetchCameraDetails() {
+
+ debugger;
+ this.roboService.getCameraInfo()
+ .subscribe(data => {
+ debugger;
+ console.log(data);
+ this.cameraInfo = data;
+
+ this.cameraArrayList = data.roboCamera;
+ this.cameraDataSource = new MatTableDataSource(this.cameraArrayList);
+ this.cameraDataSource.paginator = this.paginator;
+
+ console.log("For loop started.....")
+ for (var val of this.cameraArrayList) {
+ debugger;
+
+ console.log(val);
+ this.cameradetconcat = val.cameraNumber + '/'+ val.rtspUrl + '/' +val.cameraLocation
+ // this.selectedCameraId.push(val.camera);
+ this.selectedCameraId.push(this.cameradetconcat)
+ this.selectedValues.push(val.cameraID)
+
+ }
+ debugger;
+ console.log("SelectedCameraID")
+ console.log(this.selectedCameraId)
+ },
+ error => console.log(error));
+ }
+
+ refreshPage() {
+ this.fetchCameraDetails();
+ }
+}
+
+const CAMERA_INFO_LIST: camerainfo[] = [
+ { cameraID: '',cameraLocation: '', cameraNumber: '', rtspUrl: '' }
+];
--- /dev/null
+export interface cameraData {
+ cameraLocation: string;
+ cameraNumber: string;
+ rtspUrl: string;
+ // videoName: string;
+}
+
+export interface cameraDetails {
+ roboCamera: camerainfo[];
+}
+
+export interface camerainfo {
+ cameraID: string;
+ cameraLocation: string;
+ cameraNumber: string;
+ rtspUrl: string;
+}
+
+export interface monitorDetails {
+ InventryData: monitorinfo[];
+}
+
+
+export interface monitorinfo {
+ shelfName: string;
+ ObjType: string;
+ currentCount: string;
+ totalCount: string;
+ time: string;
+}
+
+
+export interface cameraID {
+ cameraID: string;
+}
\ No newline at end of file
--- /dev/null
+import { TestBed } from '@angular/core/testing';
+
+import { RoboService } from './robo.service';
+
+describe('RoboService', () => {
+ let service: RoboService;
+
+ beforeEach(() => {
+ TestBed.configureTestingModule({});
+ service = TestBed.inject(RoboService);
+ });
+
+ it('should be created', () => {
+ expect(service).toBeTruthy();
+ });
+});
--- /dev/null
+import { Injectable } from '@angular/core';
+
+import { HttpClient, HttpHeaders, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable,throwError } from 'rxjs'
+import { timer, Subscription, pipe } from 'rxjs';
+
+import { cameraData, camerainfo, cameraDetails, monitorDetails, monitorinfo, cameraID } from './datainterface'
+
+
+@Injectable({
+ providedIn: 'root'
+})
+export class RoboService {
+
+ private baseUrl = 'http://localhost:9996';
+
+ private postCameraDetailsUrl = this.baseUrl + '/v1/monitor/cameras'
+ private cameraDetailsUrl = this.baseUrl + '/v1/monitor/cameras'
+ private cameraDetails_url = './../assets/data/camera.json'
+
+ private monitorDetails_url = './../assets/data/inventory.json'
+ private monitorDetailsUrl = this.baseUrl + '/v1/inventry/table'
+
+ private monitorImageUrl = this.baseUrl + '/v1/monitor/image'
+
+ private triggerObjUrl = this.baseUrl + '/v1/monitor/cameras/'
+
+ constructor(private http:HttpClient) { }
+
+ httpOptions = {
+ headers: new HttpHeaders({
+ 'Content-Type':'application/json'
+ })
+ }
+
+ httpOptionss = {
+ headers: new HttpHeaders({
+ 'Content-Type':'application/json'
+ })
+ }
+
+ postCameraDetails(data): Observable<any> {
+ console.log(data);
+ debugger;
+ return this.http.post<any>(this.postCameraDetailsUrl, data)
+ }
+
+ getCameraInfo(): Observable<cameraDetails> {
+ debugger;
+ return this.http.get<cameraDetails>(this.cameraDetailsUrl);
+ }
+
+ getMonitorInfo(): Observable<monitorDetails> {
+ debugger;
+ return this.http.get<monitorDetails>(this.monitorDetailsUrl);
+ }
+
+ getMonitorImage(): Observable<Blob> {
+ debugger;
+ return this.http.get<Blob>(this.monitorImageUrl);
+ }
+
+
+ triggerDetection(data): Observable<any> {
+ console.log(data);
+ debugger;
+ this.triggerObjUrl = this.triggerObjUrl + data;
+ return this.http.get<any>(this.triggerObjUrl)
+ }
+}
--- /dev/null
+{
+ "roboCamera": [
+ {
+ "cameraID": "12313213",
+ "cameraLocation": "Shanghaiii",
+ "cameraNumber": "camera0001",
+ "rtspUrl": "rtspUrldata"
+
+ },
+ {
+ "cameraID": "43243243",
+ "cameraLocation": "Beijing",
+ "cameraNumber": "camera0002",
+ "rtspUrl": "rtspUrlbeijing"
+ },
+ {
+ "cameraID": "24342342",
+ "cameraLocation": "Bangalore",
+ "cameraNumber": "camera0003",
+ "rtspUrl": "rtspUrlBangalore"
+ }
+ ]
+}
\ No newline at end of file
--- /dev/null
+{
+ "InventryData": [
+ {
+ "shelfName": "Shelf1",
+ "ObjType": "Bottles",
+ "currentCount": "1",
+ "totalCount": "3",
+ "time": "Tue Feb 26 12:11:59 2020"
+ },
+ {
+ "shelfName": "Shelf2",
+ "ObjType": "Bottles",
+ "currentCount": "3",
+ "totalCount": "3",
+ "time": "Tue Feb 26 12:15:00 2020"
+ }
+ ]
+}
\ No newline at end of file
--- /dev/null
+export const environment = {
+ production: true
+};
--- /dev/null
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+ production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>RoboUI</title>
+ <base href="/">
+
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+ <app-root></app-root>
+</body>
+</html>
--- /dev/null
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+ enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+ .catch(err => console.error(err));
--- /dev/null
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ * file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
+ * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+// import 'classlist.js'; // Run `npm install --save classlist.js`.
+
+/**
+ * Web Animations `@angular/platform-browser/animations`
+ * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
+ * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
+ */
+// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags.ts';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ * with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ * (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- /dev/null
+/* You can add global styles to this file, and also import other style files */
+@import "~@angular/material/prebuilt-themes/indigo-pink.css";
+/* @import '@angular/material/prebuilt-themes/deeppurple-amber.css'; */
+/* @import '@angular/material/prebuilt-themes/pink-bluegrey.css'; */
+
+@import url("https://fonts.googleapis.com/icon?family=Material+Icons");
+/* @import "~bootstrap/dist/css/bootstrap.css"; */
+
+@import url("https://use.fontawesome.com/releases/v5.7.0/css/all.css");
+
+/* @import './styles/material-theme.scss'; */
+/* @import './app/' */
+
+@import '~ngx-toastr/toastr';
+
+
+
+body {
+ margin: 0 auto;
+}
\ No newline at end of file
--- /dev/null
+@import '~@angular/material/theming';
+
+@include mat-core();
+
+$primary: mat-palette($mat-grey, 900);
+$accent: mat-palette($mat-pink, A200, A100, A400);
+$warn: mat-palette($mat-red);
+$theme: mat-light-theme($primary, $accent, $warn);
+
+@include angular-material-theme($theme);
\ No newline at end of file
--- /dev/null
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/dist/zone-testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: any;
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+ BrowserDynamicTestingModule,
+ platformBrowserDynamicTesting()
+);
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- /dev/null
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/app",
+ "types": []
+ },
+ "files": [
+ "src/main.ts",
+ "src/polyfills.ts"
+ ],
+ "include": [
+ "src/**/*.d.ts"
+ ],
+ "exclude": [
+ "src/test.ts",
+ "src/**/*.spec.ts"
+ ]
+}
--- /dev/null
+{
+ "compileOnSave": false,
+ "compilerOptions": {
+ "skipLibCheck": true,
+ "baseUrl": "./",
+ "outDir": "./dist/out-tsc",
+ "sourceMap": true,
+ "declaration": false,
+ "downlevelIteration": true,
+ "experimentalDecorators": true,
+ "module": "es2020",
+ "moduleResolution": "node",
+ "importHelpers": true,
+ "target": "es2015",
+ "typeRoots": [
+ "node_modules/@types"
+ ],
+ "lib": [
+ "es2018",
+ "dom"
+ ]
+ },
+ "angularCompilerOptions": {
+ "fullTemplateTypeCheck": true,
+ "strictInjectionParameters": true
+ }
+}
--- /dev/null
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "outDir": "./out-tsc/spec",
+ "types": [
+ "jasmine",
+ "node"
+ ]
+ },
+ "files": [
+ "src/test.ts",
+ "src/polyfills.ts"
+ ],
+ "include": [
+ "src/**/*.spec.ts",
+ "src/**/*.d.ts"
+ ]
+}
--- /dev/null
+{
+ "extends": "tslint:recommended",
+ "rules": {
+ "align": {
+ "options": [
+ "parameters",
+ "statements"
+ ]
+ },
+ "array-type": false,
+ "arrow-parens": false,
+ "arrow-return-shorthand": true,
+ "deprecation": {
+ "severity": "warning"
+ },
+ "component-class-suffix": true,
+ "contextual-lifecycle": true,
+ "curly": true,
+ "directive-class-suffix": true,
+ "directive-selector": [
+ true,
+ "attribute",
+ "app",
+ "camelCase"
+ ],
+ "component-selector": [
+ true,
+ "element",
+ "app",
+ "kebab-case"
+ ],
+ "eofline": true,
+ "import-blacklist": [
+ true,
+ "rxjs/Rx"
+ ],
+ "import-spacing": true,
+ "indent": {
+ "options": [
+ "spaces"
+ ]
+ },
+ "interface-name": false,
+ "max-classes-per-file": false,
+ "max-line-length": [
+ true,
+ 140
+ ],
+ "member-access": false,
+ "member-ordering": [
+ true,
+ {
+ "order": [
+ "static-field",
+ "instance-field",
+ "static-method",
+ "instance-method"
+ ]
+ }
+ ],
+ "no-consecutive-blank-lines": false,
+ "no-console": [
+ true,
+ "debug",
+ "info",
+ "time",
+ "timeEnd",
+ "trace"
+ ],
+ "no-empty": false,
+ "no-inferrable-types": [
+ true,
+ "ignore-params"
+ ],
+ "no-non-null-assertion": true,
+ "no-redundant-jsdoc": true,
+ "no-switch-case-fall-through": true,
+ "no-var-requires": false,
+ "object-literal-key-quotes": [
+ true,
+ "as-needed"
+ ],
+ "object-literal-sort-keys": false,
+ "ordered-imports": false,
+ "quotemark": [
+ true,
+ "single"
+ ],
+ "trailing-comma": false,
+ "no-conflicting-lifecycle": true,
+ "no-host-metadata-property": true,
+ "no-input-rename": true,
+ "no-inputs-metadata-property": true,
+ "no-output-native": true,
+ "no-output-on-prefix": true,
+ "no-output-rename": true,
+ "semicolon": {
+ "options": [
+ "always"
+ ]
+ },
+ "space-before-function-paren": {
+ "options": {
+ "anonymous": "never",
+ "asyncArrow": "always",
+ "constructor": "never",
+ "method": "never",
+ "named": "never"
+ }
+ },
+ "no-outputs-metadata-property": true,
+ "template-banana-in-box": true,
+ "template-no-negated-async": true,
+ "typedef-whitespace": {
+ "options": [
+ {
+ "call-signature": "nospace",
+ "index-signature": "nospace",
+ "parameter": "nospace",
+ "property-declaration": "nospace",
+ "variable-declaration": "nospace"
+ },
+ {
+ "call-signature": "onespace",
+ "index-signature": "onespace",
+ "parameter": "onespace",
+ "property-declaration": "onespace",
+ "variable-declaration": "onespace"
+ }
+ ]
+ },
+ "use-lifecycle-interface": true,
+ "use-pipe-transform-interface": true,
+ "variable-name": {
+ "options": [
+ "ban-keywords",
+ "check-format",
+ "allow-pascal-case"
+ ]
+ },
+ "whitespace": {
+ "options": [
+ "check-branch",
+ "check-decl",
+ "check-operator",
+ "check-separator",
+ "check-type",
+ "check-typecast"
+ ]
+ }
+ },
+ "rulesDirectory": [
+ "codelyzer"
+ ]
+}
\ No newline at end of file
Code Review / ealt-edge.git / commitdiff