@dronedeploy/rocos-js-sdk 1.0.0-alpha-2 → 2.6.1

package/demo/angular/angular.json

@@ -0,0 +1,132 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "rocos-js-sdk-angular-demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "css"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/rocos-js-sdk-angular-demo",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            }
+          },
+          "defaultConfiguration": ""
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "rocos-js-sdk-angular-demo:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "rocos-js-sdk-angular-demo:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "rocos-js-sdk-angular-demo: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.css"
+            ],
+            "scripts": []
+          }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "rocos-js-sdk-angular-demo:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "rocos-js-sdk-angular-demo:serve:production"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/demo/angular/karma.conf.js

@@ -0,0 +1,44 @@
+// 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'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/rocos-js-sdk-angular-demo'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

package/demo/angular/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "rocos-js-sdk-angular-demo",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "npm run preinstall && ng serve",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e",
+    "preinstall": "cd ../../ && yarn link && cd demo/angular && yarn link \"@team-rocos/rocos-js-sdk\""
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "^15.2.7",
+    "@angular/common": "^15.2.7",
+    "@angular/compiler": "^15.2.7",
+    "@angular/core": "^15.2.7",
+    "@angular/forms": "^15.2.7",
+    "@angular/platform-browser": "^15.2.7",
+    "@angular/platform-browser-dynamic": "^15.2.7",
+    "@angular/router": "^15.2.7",
+    "@improbable-eng/grpc-web": "^0.15.0",
+    "rxjs": "~7.8.0",
+    "zone.js": "~0.11.4"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "^15.2.6",
+    "@angular-eslint/builder": "15.2.1",
+    "@angular-eslint/eslint-plugin": "15.2.1",
+    "@angular-eslint/eslint-plugin-template": "15.2.1",
+    "@angular-eslint/schematics": "15.2.1",
+    "@angular-eslint/template-parser": "15.2.1",
+    "@angular/cli": "^15.2.6",
+    "@angular/compiler-cli": "^15.2.7",
+    "@typescript-eslint/eslint-plugin": "5.48.2",
+    "@typescript-eslint/parser": "5.48.2",
+    "eslint": "^8.33.0",
+    "typescript": "~4.9.5"
+  }
+}

package/demo/angular/src/app/app.component.html

@@ -0,0 +1,9 @@
+<div class="app">
+  <header>
+    <div class="logo"></div>
+    <h1>{{ title }}</h1>
+  </header>
+  <div class="content">
+    <app-sdk class="boxRow"></app-sdk>
+  </div>
+</div>

package/demo/angular/src/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css']
+})
+export class AppComponent {
+  title = 'Rocos JS SDK - Angular Demo';
+}

package/demo/angular/src/app/app.module.ts

@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core'
+import { BrowserModule } from '@angular/platform-browser'
+import { CommonModule } from '@angular/common'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+
+import { AppComponent } from './app.component'
+import { SdkComponent } from './components/sdk/sdk.component'
+import { AuthComponent } from './components/auth/auth.component'
+import { TokenComponent } from './components/token/token.component'
+import { RobotsComponent } from './components/robots/robots.component'
+import { TelemetryComponent } from './components/telemetry/telemetry.component'
+import { SubscriptionComponent } from './components/subscription/subscription.component'
+import { CallerComponent } from './components/caller/caller.component'
+import { CommandComponent } from './components/command/command.component'
+import { VideoComponent } from './components/video/video.component'
+import { AssetsComponent } from './components/assets/assets.component'
+import { IntegrationsComponent } from './components/integrations/integrations.component'
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    SdkComponent,
+    AuthComponent,
+    TokenComponent,
+    RobotsComponent,
+    TelemetryComponent,
+    SubscriptionComponent,
+    CallerComponent,
+    CommandComponent,
+    VideoComponent,
+    AssetsComponent,
+    IntegrationsComponent,
+  ],
+  imports: [BrowserModule, CommonModule, FormsModule, ReactiveFormsModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}

package/demo/angular/src/app/components/assets/assets.component.html

@@ -0,0 +1,29 @@
+<div class="box wideBox">
+  <div class="boxContent">
+    <h3>Project Assets</h3>
+    <label>
+      Upload project asset:
+      <input type="file" name="file" (change)="onFileSelected($event)"/>
+    </label>
+    <label>
+      Parent folder of the asset:
+      <input type="text" name="parentFolder" [(ngModel)]="parentFolder" />
+    </label>
+
+    <button (click)="uploadAsset()">Upload Asset</button>
+    <label>{{uploadingStatus}}</label>
+  </div>
+</div>
+
+<div class="box wideBox">
+  <div class="boxContent">
+    <label> List Project Assets </label>
+    <label *ngFor="let asset of assets; let i = index">
+      {{ asset.name }}
+      <a href="javascript: void(-1)" (click)="download(asset.name, asset.relativePath, asset.contentType)"
+        >click to download</a
+      >
+    </label>
+    <button (click)="listAssets()">List Assets</button>
+  </div>
+</div>

package/demo/angular/src/app/components/assets/assets.component.ts

@@ -0,0 +1,107 @@
+import { Component, ElementRef, Input, OnInit, ViewChild } from '@angular/core'
+import { Subscription } from 'rxjs'
+import { SdkService } from '../../services/sdk.service'
+
+interface IAsset {
+  name: string
+  path: string // The abusolute path to download the file, this path formated with {prefix}/{relativePath}
+  relativePath: string // The relative path without the prefix
+  contentType: string
+  size: number
+}
+
+@Component({
+  selector: 'app-assets',
+  templateUrl: './assets.component.html',
+  styleUrls: ['./assets.component.css'],
+})
+export class AssetsComponent implements OnInit {
+  @Input() projectId?: string
+
+  parentFolder = '/'
+  uploadingStatus = ''
+  file?: File
+
+  assets?: IAsset[]
+
+  videoIsStreaming: boolean = false
+  videoIsConnecting: boolean = false
+
+  // The prefix that represents within the asset abusolute file download path
+  assetDownloadPathPrefix: string = ''
+
+  constructor(private sdkService: SdkService) {}
+
+  ngOnInit(): void {
+    this.assetDownloadPathPrefix = `/projects/${this.projectId}/assets/`
+  }
+
+  async listAssets() {
+    if (!this.projectId) {
+      console.error('Project id was not provided')
+      return
+    }
+
+    this.assets = await this._listAssets(this.projectId)
+  }
+
+  onFileSelected(event: any) {
+    this.file = event.target.files[0]
+  }
+
+  async uploadAsset() {
+    console.info(this.projectId, this.file)
+
+    if (this.projectId && this.file) {
+      this.uploadingStatus = 'Uploading...'
+      let parentFolderCleaned = this.parentFolder.split('/').filter(Boolean).join('/')
+
+      let relativeFilePath = `${parentFolderCleaned}/${this.file.name}`
+
+      let allAssets = await this._listAssets(this.projectId)
+      try {
+        if (allAssets.find((a) => a.name === relativeFilePath)) {
+          console.info("File exists, update the asset")
+
+          // Asset already exists, update it
+          await this.sdkService.updateAsset(this.projectId, relativeFilePath, this.file)
+        } else {
+          console.info("File does not exist, create new asset")
+
+          // New asset, create it
+          await this.sdkService.createAsset(this.projectId, relativeFilePath, this.file)
+        }
+
+        this.uploadingStatus = 'Uploaded!'
+      } catch (err: any) {
+        this.uploadingStatus = `Failed, ${err?.message}`
+      }
+    } else {
+      alert('No project or file selected to upload')
+    }
+  }
+
+  async download(name: string, path: string, contentType: string) {
+    if (this.projectId) {
+      let downloadedAssetBlob = await this.sdkService.downloadAsset(this.projectId, encodeURIComponent(path))
+
+      console.info(downloadedAssetBlob)
+
+      let a = document.createElement('a')
+      let blob = new Blob([downloadedAssetBlob], { 'type': contentType })
+      a.href = window.URL.createObjectURL(blob)
+      a.download = name
+      a.click()
+    } else {
+      alert('No project was provided')
+    }
+  }
+
+  async _listAssets(projectId: string): Promise<IAsset[]> {
+    return (await this.sdkService.listAssets(projectId)).map((asset: IAsset) => {
+      asset.relativePath = asset.path.replace(this.assetDownloadPathPrefix, '')
+
+      return asset
+    })
+  }
+}

package/demo/angular/src/app/components/auth/auth.component.html

@@ -0,0 +1,27 @@
+<div class="box">
+  <div class="boxContent">
+    <h3>Rocos SDK Client Params</h3>
+    <label>
+      <input type="text" [(ngModel)]="url" placeholder="Hostname" />
+    </label>
+    <label>
+      <input type="text" [(ngModel)]="appId" placeholder="Application ID" />
+    </label>
+    <label>
+      <input type="text" [(ngModel)]="appKey" placeholder="Application Key" />
+    </label>
+    <button (click)="createSdkClient()">Create SDK Client</button>
+  </div>
+</div>
+
+<div *ngIf="sdkExists" class="box">
+  <pre>
+Rocos SDK created with params:
+url: {{url}}
+appId: {{appId}}
+appKey: {{appKey}}
+  </pre>
+  <div class="boxContent">
+    <button (click)="removeSdkClient()">Remove SDK Client</button>
+  </div>
+</div>

package/demo/angular/src/app/components/auth/auth.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core'
+import { SdkService } from '../../services/sdk.service';
+
+@Component({
+  selector: 'app-auth',
+  templateUrl: './auth.component.html',
+  styleUrls: ['./auth.component.css']
+})
+export class AuthComponent {
+  @Input() sdkExists?: boolean
+  @Input() url?: string
+  @Input() appId?: string
+  @Input() appKey?: string
+  @Output() create = new EventEmitter<boolean>();
+
+  constructor(private sdkService: SdkService) { }
+
+  createSdkClient(): void {
+    localStorage.setItem('url', this.url ?? '');
+    localStorage.setItem('appId', this.appId ?? '');
+    localStorage.setItem('appKey', this.appKey ?? '');
+
+    if (this.url && this.appId && this.appKey) {
+      this.sdkService.init(this.url, this.appId, this.appKey);
+      this.create.emit(true);
+    }
+  }
+
+  removeSdkClient(): void {
+    this.sdkService.destroy();
+    this.create.emit(false);
+  }
+}

package/demo/angular/src/app/components/caller/caller.component.html

@@ -0,0 +1,22 @@
+<div class="box">
+  <div class="boxContent">
+    <h3>Invoke Service Call</h3>
+
+    <label *ngFor="let callsign of callsigns; let i = index">
+      <input name="caller-callsign" value={{callsign}} type="radio" [checked]="isChecked(callsign)" (change)="handleRadioChange($event)" />
+      {{callsign}}
+    </label>
+
+    <label>
+      <input type="text" name="topic" [(ngModel)]="topic" />
+    </label>
+    <label>
+      <textarea name="payload" [(ngModel)]="payload"></textarea>
+    </label>
+    <button (click)="makeServiceCall()">Call</button>
+  </div>
+</div>
+
+<div *ngIf="callerMessage" class="box">
+  <pre>{{callerMessage}}</pre>
+</div>

package/demo/angular/src/app/components/caller/caller.component.ts

@@ -0,0 +1,61 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { SdkService } from '../../services/sdk.service'
+
+@Component({
+  selector: 'app-caller',
+  templateUrl: './caller.component.html',
+  styleUrls: ['./caller.component.css']
+})
+export class CallerComponent implements OnInit {
+  @Input() projectId?: string
+  @Input() callsigns?: string[]
+  topic = "getServices"
+  payload = "{\"query\":{\"type\":0,\"data\":{\"depth\":0,\"path\":\"*\",\"showHidden\":false}}}"
+  checkedCallsign?: string
+  callerMessage?: string
+
+  constructor(private sdkService: SdkService) { }
+
+  ngOnInit(): void {
+    if (this.callsigns) {
+      this.callsigns.forEach((item, index) => {
+        if (index === 0) {
+          this.checkedCallsign = item
+        }
+      })
+    }
+    console.log('CallerComponent', this.callsigns, this.checkedCallsign)
+  }
+
+  isChecked(callsign: string): boolean {
+    return this.checkedCallsign === undefined ? true : this.checkedCallsign === callsign
+  }
+
+  handleRadioChange(event: any): void {
+    if (event.target.value) {
+      this.checkedCallsign = event.target.value
+    }
+  }
+
+  makeServiceCall(): void {
+    if (this.projectId && this.callsigns && this.topic && this.payload) {
+      let selectedCallsign = ''
+      for (const callsign of this.callsigns) {
+        if (this.checkedCallsign === undefined || this.checkedCallsign === callsign) {
+          selectedCallsign = callsign
+        }
+      }
+
+      if (selectedCallsign) {
+        let messageObservable$ = this.sdkService.getCallerSubscription(this.projectId, selectedCallsign, this.topic, this.payload)
+        messageObservable$.subscribe((msg) => {
+          const payload = msg?.responses?.responsesList?.[0]?.pb_return?.payload
+          if (payload) {
+            const payloadJSON = JSON.parse(atob(payload.toString()))
+            this.callerMessage = JSON.stringify(payloadJSON, null, 2)
+          }
+        })
+      }
+    }
+  }
+}

package/demo/angular/src/app/components/command/command.component.html

@@ -0,0 +1,22 @@
+<div class="box">
+  <div class="boxContent">
+    <h3>Invoke Command (Rambo) Call</h3>
+
+    <label *ngFor="let callsign of callsigns; let i = index">
+      <input name="command-callsign" value={{callsign}} type="radio" [checked]="isChecked(callsign)" (change)="handleRadioChange($event)" />
+      {{callsign}}
+    </label>
+
+    <label>
+      <input type="text" name="command" [(ngModel)]="command" />
+    </label>
+    <label>
+      <textarea name="parameters" [(ngModel)]="parameters"></textarea>
+    </label>
+    <button (click)="makeCommandCall()">Call</button>
+  </div>
+</div>
+
+<div *ngIf="commandMessage" class="box">
+  <pre>{{commandMessage}}</pre>
+</div>

package/demo/angular/src/app/components/command/command.component.ts

@@ -0,0 +1,60 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { SdkService } from '../../services/sdk.service'
+
+@Component({
+  selector: 'app-command',
+  templateUrl: './command.component.html',
+  styleUrls: ['./command.component.css']
+})
+export class CommandComponent implements OnInit {
+  @Input() projectId?: string
+  @Input() callsigns?: string[]
+  command = "turnLeft"
+  parameters = "{}"
+  checkedCallsign?: string
+  commandMessage?: string
+
+  constructor(private sdkService: SdkService) { }
+
+  ngOnInit(): void {
+    if (this.callsigns) {
+      this.callsigns.forEach((item, index) => {
+        if (index === 0) {
+          this.checkedCallsign = item
+        }
+      })
+    }
+    console.log('CommandComponent', this.callsigns, this.checkedCallsign)
+  }
+
+  isChecked(callsign: string): boolean {
+    return this.checkedCallsign === undefined ? true : this.checkedCallsign === callsign
+  }
+
+  handleRadioChange(event: any): void {
+    if (event.target.value) {
+      this.checkedCallsign = event.target.value
+    }
+  }
+
+  makeCommandCall(): void {
+    if (this.projectId && this.callsigns && this.command && this.parameters) {
+      let selectedCallsign = ''
+      for (const callsign of this.callsigns) {
+        if (this.checkedCallsign === undefined || this.checkedCallsign === callsign) {
+          selectedCallsign = callsign
+        }
+      }
+
+      if (selectedCallsign) {
+        let messageObservable$ = this.sdkService.getCommandSubscription(this.projectId, selectedCallsign, this.command, this.parameters)
+        messageObservable$.subscribe((msg) => {
+          const payload = msg?.response
+          if (payload) {
+            this.commandMessage = JSON.stringify(payload, null, 2)
+          }
+        })
+      }
+    }
+  }
+}