@dronedeploy/rocos-js-sdk 2.6.1 → 3.0.0-alpha.20

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

@@ -1,38 +0,0 @@
-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

@@ -1,29 +0,0 @@
-<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

@@ -1,107 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,33 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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

@@ -1,61 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<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

@@ -1,60 +0,0 @@
-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)
-          }
-        })
-      }
-    }
-  }
-}

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

@@ -1,43 +0,0 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, TrackByFunction } from '@angular/core'
-import { SdkService } from 'src/app/services/sdk.service'
-import { Plan } from '@team-rocos/rocos-js-sdk';
-
-@Component({
-  selector: 'app-integrations',
-  template: `
-    <div class="box wideBox">
-      <div class="boxContent">
-        <h3>Project Integrations</h3>
-        <label> List Plans </label>
-        <ul *ngIf="plans">
-          <li *ngFor="let plan of plans; trackBy: trackByFn">{{ plan.name }} ({{ plan.date_creation.$date | date : 'medium' }})</li>
-        </ul>
-        <p *ngIf="plans">Total: {{ plans.length }}</p>
-        <button (click)="listPlans()">List Plans</button>
-        <button *ngIf="pageNext" (click)="listPlans(pageNext)">Next Page</button>
-      </div>
-    </div>
-  `,
-  styles: [`
-    ul li { font-family: 'HKGrotesk-Regular'; }
-    button:not(:last-child) { margin-right: 10px; }
-  `],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class IntegrationsComponent {
-  @Input() projectId!: string
-
-  plans?: Plan[];
-  pageNext?: string;
-
-  trackByFn: TrackByFunction<Plan> = (_, item) => item._id.$oid;
-
-  constructor(private sdkService: SdkService, private cdr: ChangeDetectorRef) {}
-
-  async listPlans(next?: string) {
-    const res = await this.sdkService.sdk?.getIntegrationService().getPlansPaged(this.projectId, next)
-    this.plans = res?.plans || []
-    this.pageNext = res?.pageNext
-    this.cdr.markForCheck()
-  }
-}

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

@@ -1,13 +0,0 @@
-<div class="box">
-  <div class="boxContent">
-    <h3>Request A List Of Robots</h3>
-    <label>
-      <input type="text" [(ngModel)]="projectId" placeholder="Project ID" />
-    </label>
-    <button (click)="fetchRobots()">Get All Robots</button>
-  </div>
-</div>
-
-<div *ngIf="robots" class="box">
-  <pre>{{robots}}</pre>
-</div>

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

@@ -1,26 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core'
-import { SdkService } from '../../services/sdk.service';
-
-@Component({
-  selector: 'app-robots',
-  templateUrl: './robots.component.html',
-  styleUrls: ['./robots.component.css']
-})
-export class RobotsComponent {
-  @Input() projectId?: string
-  @Output() callsigns = new EventEmitter<string[]>();
-  @Output() project = new EventEmitter<string | undefined>();
-  robots?: string
-
-  constructor(private sdkService: SdkService) { }
-
-  async fetchRobots(): Promise<void> {
-    if (this.projectId) {
-      const robots = await this.sdkService.getRobots(this.projectId);
-      this.robots = JSON.stringify(robots, null, 2)
-      const callsigns = robots.map(item => item.callsign)
-      this.callsigns.emit(callsigns);
-    }
-    this.project.emit(this.projectId);
-  }
-}

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

@@ -1,43 +0,0 @@
-<app-auth
-  class="boxColumn boxColumn-250"
-  [sdkExists]="sdkExists"
-  [url]="url"
-  [appId]="appId"
-  [appKey]="appKey"
-  (create)="onCreate($event)"
-></app-auth>
-
-<app-token class="boxColumn boxColumn-250" *ngIf="sdkExists"></app-token>
-<app-robots
-  class="boxColumn boxColumn-250"
-  *ngIf="sdkExists"
-  [projectId]="projectId"
-  (callsigns)="onCallsigns($event)"
-  (project)="onProject($event)"
-></app-robots>
-<app-telemetry
-  class="boxColumn boxColumn-250"
-  *ngIf="sdkExists && callsigns.length"
-  [projectId]="projectId"
-  [callsigns]="callsigns"
-></app-telemetry>
-<app-caller
-  class="boxColumn-250"
-  *ngIf="sdkExists && callsigns.length"
-  [projectId]="projectId"
-  [callsigns]="callsigns"
-></app-caller>
-<app-command
-  class="boxColumn"
-  *ngIf="sdkExists && callsigns.length"
-  [projectId]="projectId"
-  [callsigns]="callsigns"
-></app-command>
-<app-video
-  class="boxColumn"
-  *ngIf="sdkExists && callsigns.length"
-  [projectId]="projectId"
-  [callsigns]="callsigns"
-></app-video>
-<app-assets class="boxColumn" *ngIf="sdkExists && projectId" [projectId]="projectId"></app-assets>
-<app-integrations class="boxColumn" *ngIf="sdkExists && projectId" [projectId]="projectId"></app-integrations>

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

@@ -1,50 +0,0 @@
-import { Component, ViewChild } from '@angular/core'
-import { IRocosTelemetryMessage } from '@team-rocos/rocos-js-sdk';
-import { Observable } from "rxjs";
-import { TokenComponent } from "../token/token.component";
-
-@Component({
-  selector: 'app-sdk',
-  templateUrl: './sdk.component.html',
-  styleUrls: ['./sdk.component.css']
-})
-export class SdkComponent {
-  @ViewChild(TokenComponent) tokenComponent?: TokenComponent;
-  url?: string = 'api2.rocos.io' // your app url
-  appId?: string = '' // your app id
-  
-  appKey?: string = '' // your project key
-  projectId?: string = '' // your project id
-  messageObservables: Observable<IRocosTelemetryMessage>[] = []
-
-  sdkExists = false
-  callsigns: string[] = []
-
-  constructor() { 
-    this.url = localStorage.getItem('url') ?? this.url;
-    this.appId = localStorage.getItem('appId') ?? this.appId;
-    this.appKey = localStorage.getItem('appKey') ?? this.appKey;
-    this.projectId = localStorage.getItem('projectId') ?? this.projectId;
-  }
-
-  onCreate(created: boolean): void {
-    this.sdkExists = created
-    if (!this.sdkExists) {
-      this.callsigns = []
-    }
-  }
-
-  onCallsigns(callsigns: string[]): void {
-    this.callsigns = callsigns
-    // This is not required by SDK, token management is automatic.
-    // Only reason we are ccalling a token here is to populate the UI.
-    this.tokenComponent?.fetchToken()
-    console.log('this.callsigns', this.callsigns)
-  }
-
-  onProject(projectId: string | undefined): void {
-    this.projectId = projectId
-    localStorage.setItem('projectId', this.projectId ?? '');
-    console.log('this.projectId', this.projectId)
-  }
-}

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

@@ -1,6 +0,0 @@
-<div class="box">
-  <pre>{{message | json}}</pre>
-  <div class="boxContent">
-    <button (click)="unsubscribe()">Unsubscribe</button>
-  </div>
-</div>

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

@@ -1,40 +0,0 @@
-import { Component, OnInit, Input, OnDestroy } from '@angular/core';
-import {Observable, Subscription} from 'rxjs';
-import { IRocosTelemetryMessage } from '@team-rocos/rocos-js-sdk';
-
-@Component({
-  selector: 'app-subscription',
-  templateUrl: './subscription.component.html',
-  styleUrls: ['./subscription.component.css']
-})
-
-export class SubscriptionComponent implements OnInit, OnDestroy {
-  @Input() messageObservable?: Observable<IRocosTelemetryMessage>
-  @Input() index = 0
-  public message?: IRocosTelemetryMessage;
-  subscription$?: Subscription
-
-  constructor() { }
-
-  ngOnInit() {
-    this.subscribe()
-  }
-
-  ngOnDestroy() {
-    this.unsubscribe();
-  }
-
-  private async subscribe(): Promise<void> {
-    if (this.messageObservable) {
-      this.subscription$ = this.messageObservable.subscribe((msg) => {
-        this.message = msg;
-      })
-    }
-  }
-
-  unsubscribe(): void {
-    if (this.subscription$) {
-      this.subscription$.unsubscribe()
-    }
-  }
-}

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

@@ -1,19 +0,0 @@
-<div class="box">
-  <div class="boxContent">
-    <h3>Subscribe To Telemetry</h3>
-
-    <label *ngFor="let callsign of callsigns; let i = index">
-      <input name={{callsign}} type="checkbox" [checked]="isChecked(callsign)" (change)="handleCheckboxChange($event)" />
-      {{callsign}}
-    </label>
-
-    <label>
-      <textarea name="source" [(ngModel)]="sources"></textarea>
-    </label>
-    <button (click)="subscribeToTelemetry()">Subscribe</button>
-  </div>
-</div>
-
-<app-subscription *ngFor="let messageObservable of messageObservables; let i = index"
-                  [messageObservable]="messageObservable"
-                  [index]="i"></app-subscription>