diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template')
3 files changed, 69 insertions, 0 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css new file mode 100644 index 000000000..e69de29bb --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.css diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html new file mode 100644 index 000000000..f67364421 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.html @@ -0,0 +1,13 @@ +<p>topology-template works!</p> +<ul class="defintionsNote"> + <li><b>To add new property: </b></li> + <li>1. Use Copy and paste option or</li> + <li>2. Write them manually</li> +</ul> +<ace-editor [(text)]="content" [mode]="'json'" + [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'" + (textChanged)="textChanged($event)" + #editor style="height:300px;" + (autocomplete)="content" +> +</ace-editor> diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts new file mode 100644 index 000000000..8fce6954d --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/topology-template/topology-template.component.ts @@ -0,0 +1,56 @@ +import {Component, OnDestroy, OnInit} from '@angular/core'; +import {distinctUntilChanged, takeUntil} from 'rxjs/operators'; +import {DesignerStore} from '../../designer/designer.store'; +import {Subject} from 'rxjs'; +import {PackageCreationUtils} from '../package-creation.utils'; +import {PackageCreationStore} from '../package-creation.store'; + +@Component({ + selector: 'app-topology-template', + templateUrl: './topology-template.component.html', + styleUrls: ['./topology-template.component.css'] +}) +export class TopologyTemplateComponent implements OnInit, OnDestroy { + + ngUnsubscribe = new Subject(); + content = ' '; + private cbaPackage: any; + private designerState: any; + + constructor(private designerStore: DesignerStore, + private packageCreationUtils: PackageCreationUtils, + private packageCreationStore: PackageCreationStore) { + + this.packageCreationStore.state$ + .pipe(distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe( + cbaPackage => { + this.cbaPackage = cbaPackage; + }); + this.designerStore.state$.pipe( + distinctUntilChanged((a: any, b: any) => JSON.stringify(a) === JSON.stringify(b)), + takeUntil(this.ngUnsubscribe)) + .subscribe(state => { + this.designerState = state; + this.content = + this.packageCreationUtils.transformToJson(state.template); + console.log(this.content); + console.log(state.template); + }); + } + + ngOnInit() { + } + + textChanged($event: {}) { + this.cbaPackage.templateTopology.content = this.content; + this.designerState.template = JSON.parse(this.content); + + } + + ngOnDestroy() { + this.ngUnsubscribe.next(); + this.ngUnsubscribe.complete(); + } +} |