@dronedeploy/rocos-js-sdk 0.0.1 → 2.6.1

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)
+          }
+        })
+      }
+    }
+  }
+}

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,61 @@
+import { Component, Input, OnInit } from '@angular/core'
+import { SdkService } from '../../services/sdk.service';
+import { finalize } from 'rxjs/operators'
+import { Observable } from 'rxjs'
+import { IRocosTelemetryMessage } from '@team-rocos/rocos-js-sdk'
+
+@Component({
+  selector: 'app-telemetry',
+  templateUrl: './telemetry.component.html',
+  styleUrls: ['./telemetry.component.css']
+})
+export class TelemetryComponent implements OnInit {
+  @Input() projectId?: string
+  @Input() callsigns?: string[]
+  sources: string[] = [
+    '/rocos/agent/telemetry/sources',
+    '/rocos/agent/telemetry/heartbeat',
+  ]
+  checkboxes: Record<string, boolean> = {}
+  messageObservables: Observable<IRocosTelemetryMessage>[] = []
+
+  constructor(private sdkService: SdkService) { }
+
+  ngOnInit(): void {
+    if (this.callsigns) {
+      this.callsigns.forEach(item => {
+        this.checkboxes[item] = true
+      })
+    }
+    console.log('TelemetryComponent', this.callsigns, this.checkboxes)
+  }
+
+  isChecked(callsign: string): boolean {
+    return this.checkboxes?.[callsign] === undefined ? true : this.checkboxes[callsign]
+  }
+
+  handleCheckboxChange(event: any): void {
+    if (event.target.name) {
+      this.checkboxes[event.target.name] = event.target.checked
+    }
+  }
+
+  subscribeToTelemetry(): void {
+    if (this.projectId && this.callsigns) {
+      const newCallsigns = []
+      for (const callsign of this.callsigns) {
+        if (this.checkboxes[callsign] === undefined || this.checkboxes[callsign]) {
+          newCallsigns.push(callsign)
+        }
+      }
+      const sources = (!Array.isArray(this.sources) ? [this.sources] : this.sources).map(item => item.trim())
+      if (newCallsigns.length && sources.length) {
+        let messageObservable$ = this.sdkService.getTelemetrySubscription(this.projectId, newCallsigns, sources)
+        messageObservable$ = messageObservable$.pipe(
+          finalize(() => this.messageObservables = this.messageObservables.filter(item => item !== messageObservable$)),
+        )
+        this.messageObservables.push(messageObservable$)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,10 @@
+<div class="box">
+  <div class="boxContent">
+    <h3>Request A Token</h3>
+    <button (click)="fetchToken()">Get Token</button>
+  </div>
+</div>
+
+<div *ngIf="token" class="box">
+  <pre>{{token}}</pre>
+</div>

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { SdkService } from '../../services/sdk.service';
+
+@Component({
+  selector: 'app-token',
+  templateUrl: './token.component.html',
+  styleUrls: ['./token.component.css']
+})
+export class TokenComponent {
+  token?: string
+
+  constructor(private sdkService: SdkService) { }
+
+  async fetchToken(): Promise<void> {
+    const token = await this.sdkService.getToken();
+    this.token = JSON.stringify(token, null, 2)
+  }
+}