openc3 5.8.1 → 5.9.0

data/templates/tool_angular/src/app/app.component.ts

@@ -0,0 +1,51 @@
+import { Component, ViewChild, AfterViewInit, OnDestroy } from '@angular/core';
+import {CdkPortal, DomPortalOutlet} from '@angular/cdk/portal';
+import { OpenC3Api } from "@openc3/tool-common/src/services/openc3-api";
+
+@Component({
+  selector: 'openc3-tool-<%= tool_name %>-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss'],
+})
+export class AppComponent implements  AfterViewInit, OnDestroy {
+  @ViewChild(CdkPortal)
+  private portal: CdkPortal | undefined;
+  private host: DomPortalOutlet | undefined;
+
+  clickHandler = function() {
+    let api = new OpenC3Api();
+    api.cmd("INST", "COLLECT", { TYPE: "NORMAL" }).then((response: any) => {
+      alert("Command Sent!");
+    });
+  }
+  getMenuElement() {
+    let elem = document.getElementById("openc3-menu")
+    if (elem) {
+      return elem
+    } else {
+      return new HTMLElement()
+    }
+  }
+  ngAfterViewInit(): void {
+    this.host = new DomPortalOutlet(
+      this.getMenuElement()
+    );
+    this.host.attach(this.portal);
+    document.title = "<%= tool_name_display %>";
+    let tool = document.querySelector('#openc3-tool');
+    if (tool == null) {
+      tool = new HTMLElement()
+    }
+    let overlay = document.querySelector('.cdk-overlay-container');
+    if (overlay == null) {
+      overlay = new HTMLElement()
+    }
+    // Move stuff
+    tool.append(overlay);
+  }
+  ngOnDestroy(): void {
+    if (this.host) {
+      this.host.detach();
+    }
+  }
+}

data/templates/tool_angular/src/app/app.module.ts

@@ -0,0 +1,30 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { PortalModule } from '@angular/cdk/portal';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatMenuModule} from '@angular/material/menu';
+import {OverlayContainer} from '@angular/cdk/overlay';
+import {AppOverlayContainer} from './custom-overlay-container';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    PortalModule,
+    MatCardModule,
+    MatButtonModule,
+    MatMenuModule
+  ],
+  providers: [
+    { provide: OverlayContainer, useClass: AppOverlayContainer },
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

data/templates/tool_angular/src/app/custom-overlay-container.ts

@@ -0,0 +1,17 @@
+import { Injectable, OnDestroy } from '@angular/core';
+import { OverlayContainer } from '@angular/cdk/overlay';
+
+export class AppOverlayContainer extends OverlayContainer {
+
+  override _createContainer(): void {
+    let container = document.createElement('div');
+    container.classList.add('cdk-overlay-container');
+
+    let elem = document.querySelector('#openc3-tool');
+    if (!elem) {
+      elem = new HTMLElement();
+    }
+    elem.appendChild(container);
+    this._containerElement = container;
+  }
+}

data/templates/tool_angular/src/app/empty-route/empty-route.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'openc3-tool-<%= tool_name %>-empty-route',
+  template: '',
+})
+export class EmptyRouteComponent {}

data/templates/tool_angular/src/app/openc3-api.d.ts

@@ -0,0 +1 @@
+declare module '@openc3/tool-common/src/services/openc3-api';

data/templates/tool_angular/src/environments/environment.prod.ts

@@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};

data/templates/tool_angular/src/environments/environment.ts

@@ -0,0 +1,16 @@
+// 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.

data/templates/tool_angular/src/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Openc3ToolTemplateAngular</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>
+  <openc3-tool-template-angular-root></openc3-tool-template-angular-root>
+</body>
+</html>

data/templates/tool_angular/src/main.single-spa.ts

@@ -0,0 +1,40 @@
+import 'zone.js/dist/zone'
+
+import { enableProdMode, NgZone } from '@angular/core';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { Router, NavigationStart } from '@angular/router';
+
+import { singleSpaAngular, getSingleSpaExtraProviders } from 'single-spa-angular';
+
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+import { singleSpaPropsSubject } from './single-spa/single-spa-props';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+const lifecycles = singleSpaAngular({
+  bootstrapFunction: singleSpaProps => {
+    singleSpaPropsSubject.next(singleSpaProps);
+    return platformBrowserDynamic(getSingleSpaExtraProviders()).bootstrapModule(AppModule);
+  },
+  template: '<openc3-tool-<%= tool_name %>-root />',
+  Router,
+  NavigationStart,
+  NgZone,
+  domElementGetter: function() {
+    let elem = document.getElementById("openc3-tool")
+    if (elem) {
+      return elem
+    } else {
+      return new HTMLElement()
+    }
+  },
+});
+
+export const bootstrap = lifecycles.bootstrap;
+export const mount = lifecycles.mount;
+export const unmount = lifecycles.unmount;

data/templates/tool_angular/src/single-spa/asset-url.ts

@@ -0,0 +1,12 @@
+// In single-spa, the assets need to be loaded from a dynamic location,
+// instead of hard coded to `/assets`. We use webpack public path for this.
+// See https://webpack.js.org/guides/public-path/#root
+
+export function assetUrl(url: string): string {
+  // @ts-ignore
+  const publicPath = __webpack_public_path__;
+  const publicPathSuffix = publicPath.endsWith('/') ? '' : '/';
+  const urlPrefix = url.startsWith('/') ? '' : '/';
+
+  return `${publicPath}${publicPathSuffix}assets${urlPrefix}${url}`;
+}

data/templates/tool_angular/src/single-spa/single-spa-props.ts

@@ -0,0 +1,8 @@
+import { ReplaySubject } from 'rxjs';
+import { AppProps } from 'single-spa';
+
+export const singleSpaPropsSubject = new ReplaySubject<SingleSpaProps>(1);
+
+// Add any custom single-spa props you have to this type def
+// https://single-spa.js.org/docs/building-applications.html#custom-props
+export type SingleSpaProps = AppProps & {};

data/templates/tool_angular/src/styles.scss

@@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */

data/templates/tool_angular/tsconfig.app.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/app",
+    "types": []
+  },
+  "files": [
+    "src/main.single-spa.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}

data/templates/tool_angular/tsconfig.json

@@ -0,0 +1,33 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "ES2022",
+    "module": "ES2022",
+    "useDefineForClassFields": false,
+    "lib": [
+      "ES2022",
+      "dom"
+    ]
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}

data/templates/tool_angular/tsconfig.spec.json

@@ -0,0 +1,14 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "./out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}