],
"scripts": [
- "./node_modules/jquery/dist/jquery.min.js",
+ "./node_modules/ace-builds/src-min/ace.js",
+ "./node_modules/ace-builds/src-min/theme-eclipse.js",
+ "./node_modules/ace-builds/src-min/mode-json.js",
+ "./node_modules/ace-builds/src-min/mode-javascript.js",
+ "./node_modules/ace-builds/src-min/mode-python.js",
+ "./node_modules/ace-builds/src-min/mode-xml.js",
+ "./node_modules/ace-builds/src-min/mode-kotlin.js",
+ "./node_modules/ace-builds/src-min/mode-text.js",
+ "./node_modules/ace-builds/src-min/mode-velocity.js",
+ "./node_modules/ace-builds/src-min/mode-yaml.js",
+ "./node_modules/ace-builds/src-min/theme-vibrant_ink.js",
+ "./node_modules/ace-builds/src-min/snippets/html.js",
+ "./node_modules/ace-builds/src-min/ext-beautify.js",
+ "./node_modules/ace-builds/src-min/ext-searchbox.js",
+ "./node_modules/ace-builds/src-min/ext-language_tools.js",
+ "./node_modules/jquery/dist/jquery.js",
"./node_modules/lodash/index.js",
"./node_modules/backbone/backbone.js",
"./node_modules/jointjs/dist/joint.js"
}
},
"defaultProject": "designer-client"
-}
\ No newline at end of file
+}
"json2typescript": "^1.2.3",
"lodash": "^4.17.15",
"ng-sidebar": "^9.1.1",
+ "ng2-ace-editor": "^0.3.9",
"ngx-file-drop": "^8.0.8",
"rxjs": "~6.4.0",
"tslib": "^1.10.0",
--- /dev/null
+<p>dsl-definitions-tab works!</p>
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DslDefinitionsTabComponent } from './dsl-definitions-tab.component';
+
+describe('DslDefinitionsTabComponent', () => {
+ let component: DslDefinitionsTabComponent;
+ let fixture: ComponentFixture<DslDefinitionsTabComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ DslDefinitionsTabComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(DslDefinitionsTabComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+ selector: 'app-dsl-definitions-tab',
+ templateUrl: './dsl-definitions-tab.component.html',
+ styleUrls: ['./dsl-definitions-tab.component.css']
+})
+export class DslDefinitionsTabComponent implements OnInit {
+
+ constructor() { }
+
+ ngOnInit() {
+ }
+
+}
+a.accordion-delete i {
+ color: red;
+}
+
+a.accordion-delete i:hover {
+ color: #007bff;
+ cursor: pointer;
+ transition-duration: .5s;
+ /* for Safari & Chrome */
+ -webkit-transition-duration: .5s;
+}
\ No newline at end of file
<input placeholder="Enter file URL" type="input" class="ng-pristine ng-valid ng-touched">
<a class="enter-link" href="#"><i class="icon-enter"></i></a>
</div>
- <span class="import-container-span">Or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></span>
+ <span class="import-container-span">Or you can also <a href="#" data-toggle="modal"
+ data-target="#exampleModal">Import File</a></span>
</div>
<label class="label-name">File</label>
</div>
</div>
- <div id="accordion" *ngFor="let file of definitionFiles | keyvalue">
- <div class="card">
+ <div id="accordion" *ngFor="let file of definitionFiles | keyvalue; let mapIndex = index">
+ <!-- <div class="card">
<div class="card-header" [id]="file.key">
<h5 class="mb-0 d-flex justify-content-between">
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne"
- aria-expanded="true" aria-controls="collapseOne">
+ aria-expanded="true" aria-controls="collapseOne">
<i class="icon-file-code"></i> Definitions/{{file.key}}
</button>
<a class="accordion-delete" href="#"><i class="icon-delete"></i></a>
{{file.value | json}}
</div>
</div>
+ </div> -->
+ <div class="card">
+ <div class="card-header" [id]="'head-'+mapIndex">
+ <h5 class="mb-0 d-flex justify-content-between">
+ <button class="btn btn-link collapsed" data-toggle="collapse"
+ [attr.data-target]="'#id-'+mapIndex" aria-expanded="false"
+ [attr.aria-controls]="'id-'+mapIndex">
+ <i class="icon-file-code"></i> Definitions/{{file.key}}
+ </button>
+ <a class="accordion-delete" (click)="removeFile(mapIndex)"><i class="icon-delete"></i></a>
+ </h5>
+ </div>
+ <div [id]="'id-'+mapIndex" class="collapse" [attr.aria-labelledby]="'head-'+mapIndex"
+ data-parent="#accordion">
+ <div class="card-body">
+ {{file.value}}
+ </div>
+ </div>
</div>
- <!-- <div class="card">
- <div class="card-header" id="headingTwo">
- <h5 class="mb-0">
- <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
- aria-expanded="false" aria-controls="collapseTwo">
- <i class="icon-file-code"></i> Definitions/relationship_types.json
- </button>
- </h5>
- </div>
- <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
- <div class="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
- 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt
- laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin
- coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes
- anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
- occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard
- of them accusamus labore sustainable VHS.
- </div>
- </div>
- </div>
+ <!--
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
</div>
</div>
</div>
- --></div>
+ -->
+ </div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
- aria-hidden="true">
+ aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body">
<ngx-file-drop dropZoneLabel="Drop files here" (onFileDrop)="dropped($event)"
- (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
+ (onFileOver)="fileOver($event)" (onFileLeave)="fileLeave($event)">
<ng-template ngx-file-drop-content-tmp let-openFileSelector="openFileSelector">
<div class="folder-upload">
- <img src="assets/img/folder-upload.svg"/>
+ <img src="assets/img/folder-upload.svg" />
</div>
<div class="folder-upload-text">
Drag & Drop file
<div class="upload-table" *ngFor="let item of uploadedFiles; let i=index">
<table class="table">
<thead>
- <tr>
- <th>Name : {{ item.name }}</th>
- </tr>
+ <tr>
+ <th>Name : {{ item.name }}</th>
+ </tr>
</thead>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal"
- (click)="resetTheUploadedFiles()">Cancel
+ (click)="resetTheUploadedFiles()">Cancel
</button>
<button type="button" class="btn btn-sm btn-primary" data-dismiss="modal" (click)="setFilesToStore()">
Import
</div>
</div>
</div>
-</div>
-
-
+</div>
\ No newline at end of file
-import {Component, OnInit} from '@angular/core';
-import {NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry} from 'ngx-file-drop';
-import {PackageCreationStore} from '../package-creation.store';
-import {PackageCreationUtils} from '../package-creation.utils';
+import { Component, OnInit } from '@angular/core';
+import { NgxFileDropEntry, FileSystemFileEntry, FileSystemDirectoryEntry } from 'ngx-file-drop';
+import { PackageCreationStore } from '../package-creation.store';
+import { PackageCreationUtils } from '../package-creation.utils';
@Component({
templateUrl: './imports-tab.component.html',
styleUrls: ['./imports-tab.component.css']
})
-export class ImportsTabComponent {
+export class ImportsTabComponent implements OnInit {
public definitionFiles: Map<string, string> = new Map<string, string>();
public uploadedFiles: FileSystemFileEntry[] = [];
+ private fileNames: Set<string> = new Set();
public files: NgxFileDropEntry[] = [];
});
}
+ ngOnInit(): void {
+ // TODO
+ }
+
public dropped(files: NgxFileDropEntry[]) {
this.files = files;
for (const droppedFile of files) {
-
- // Is it a file?
- if (droppedFile.fileEntry.isFile) {
+ // Is it a file? & Not added before
+ if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
this.uploadedFiles.push(fileEntry);
-
+ console.log(fileEntry.name);
+ this.fileNames.add(fileEntry.name);
} /*else {
const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
}
}
+ removeFile(fileIndex: number) {
+ console.log(this.uploadedFiles[fileIndex]);
+ console.log(this.uploadedFiles);
+ this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'definitions');
+ this.uploadedFiles.splice(fileIndex, 1);
+ }
+
public fileOver(event) {
console.log(event);
}
public fileLeave(event) {
console.log(event);
}
-
-
/* readFileContent(file: File): string | ArrayBuffer {
const fileReader = new FileReader();
// let content: string | ArrayBuffer = '';
-import {Metadata} from './definitions/VlbDefinition';
+
+import {MetaDataTabModel} from './metadata/MetaDataTab.model';
export class Definition {
public files: Map<string, string> = new Map<string, string>();
}
}
+export class Scripts {
+ public files: Map<string, string> = new Map<string, string>();
+
+ constructor(files: Map<string, string>) {
+ this.files = files;
+ }
+}
+
export class CBAPackage {
- public metaData: Metadata;
+
+ public metaData: MetaDataTabModel;
public definitions: Definition;
+ public scripts: Scripts;
constructor() {
this.definitions = new Definition(new Map<string, string>());
- this.metaData = new Metadata();
+ this.scripts = new Scripts(new Map<string, string>());
+ this.metaData = new MetaDataTabModel();
}
}
*/
-export class MetaDataTab {
+export class MetaDataTabModel {
mode: string;
- dictionaryLibraryInstance?: null;
name: string;
description: string;
version: string;
export class MetaDataFile {
- static getObjectInstance(metaDataTab: MetaDataTab): string {
+ static getObjectInstance(metaDataTab: MetaDataTabModel): string {
return 'TOSCA-Meta-File-Version: 1.0.0\n' +
'CSAR-Version: 1.0\n' +
'Created-By: Shaaban Ebrahim <shaaban.eltanany.ext@orange.con>\n' +
--- /dev/null
+<div class="card creat-card">
+ <div class="single-line">
+ <label class="label-name">Mode</label>
+ <label name="trst" *ngFor="let mode of modes; let i = index">
+ <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
+ name="exampleRadios" id="exampleRadios1" value={{mode.name}}>
+
+ <span>
+ <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
+ {{mode.name}}
+ </span>
+ </label>
+ </div>
+
+</div>
+<div class="card creat-card">
+ <div class="single-line">
+ <label class="label-name">Name</label>
+ <div class="label-input">
+ <input type="input"
+ [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
+ </div>
+ </div>
+ <hr/>
+ <div class="single-line">
+ <label class="label-name">Description</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.description"
+ placeholder="Descripe the package">
+ </div>
+ </div>
+ <hr/>
+ <div class="single-line">
+ <label class="label-name">Version</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.version"
+ (input)="validatePackageNameAndVersion()"
+ placeholder="Example: 1.0.0">
+ </div>
+ <div><label style="color: red">{{errorMessage}}</label></div>
+ </div>
+ <hr/>
+ <div class="single-line">
+ <label class="label-name">tags</label>
+ <div class="label-input">
+ <input type="input" [(ngModel)]="metaDataTab.tags"
+ placeholder="Ex., vDNS-CDS">
+ </div>
+ </div>
+</div>
+<div id="container">
+ <div id="target">
+ <div class="card creat-card">
+ <div class="single-line">
+ <h5 class="label-name">
+ Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
+ </h5>
+
+ </div>
+ <div class="single-line">
+ <label class="label-name">Name</label>
+ <div class="label-input">
+ <input name="key" type="input" placeholder="Enter Name">
+ </div>
+ </div>
+ <hr/>
+ <div class="single-line">
+ <label class="label-name">Value</label>
+ <div class="label-input">
+ <input name="value" type="input"
+ placeholder="Enter Value">
+ </div>
+ </div>
+
+ </div>
+ </div>
+</div>
+<div class="card creat-card">
+ <div class="single-line">
+ <div name="custom key">
+ <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
+ class="fa fa-plus" aria-hidden="true"></i> Add a custom key
+ </button>
+
+
+ </div>
+ </div>
+</div>
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { PackageCreationComponent } from './package-creation.component';
+import { MetadataTabComponent } from './metadata-tab.component';
-describe('PackageCreationComponent', () => {
- let component: PackageCreationComponent;
- let fixture: ComponentFixture<PackageCreationComponent>;
+describe('MetadataTabComponent', () => {
+ let component: MetadataTabComponent;
+ let fixture: ComponentFixture<MetadataTabComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
- declarations: [ PackageCreationComponent ]
+ declarations: [ MetadataTabComponent ]
})
.compileComponents();
}));
beforeEach(() => {
- fixture = TestBed.createComponent(PackageCreationComponent);
+ fixture = TestBed.createComponent(MetadataTabComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
--- /dev/null
+import {Component, OnInit} from '@angular/core';
+import {PackageCreationService} from '../package-creation.service';
+import {PackageCreationUtils} from '../package-creation.utils';
+import {Router} from '@angular/router';
+import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from '../mapping-models/metadata/MetaDataTab.model';
+import * as JSZip from 'jszip';
+import {PackageCreationStore} from '../package-creation.store';
+
+
+@Component({
+ selector: 'app-metadata-tab',
+ templateUrl: './metadata-tab.component.html',
+ styleUrls: ['./metadata-tab.component.css']
+})
+export class MetadataTabComponent implements OnInit {
+
+ counter = 0;
+ modes: object[] = [
+ {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
+ {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
+ private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
+
+ private folder: FolderNodeElement = new FolderNodeElement();
+ private zipFile: JSZip = new JSZip();
+ private filesData: any = [];
+ private errorMessage: string;
+
+ constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
+ private router: Router, private packageCreationStore: PackageCreationStore) {
+
+ }
+
+ ngOnInit() {
+ this.packageCreationStore.changeMetaData(this.metaDataTab);
+ }
+
+ saveMetaData() {
+ this.setModeType(this.metaDataTab);
+ this.setEntryPoint(this.metaDataTab);
+
+ this.addToscaMetaDataFile(this.metaDataTab);
+
+ // const vlbDefinition: VlbDefinition = new VlbDefinition();
+ // this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
+
+ this.filesData.push(this.folder.TREE_DATA);
+ this.saveBluePrint();
+ this.packageCreationService.refreshPackages();
+ this.router.navigate(['/packages']);
+
+ }
+
+ addToscaMetaDataFile(metaDataTab: MetaDataTabModel) {
+ const filename = 'TOSCA.meta';
+ FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
+ }
+
+ private setModeType(metaDataTab: MetaDataTabModel) {
+ if (metaDataTab.mode.startsWith('Scripting')) {
+ metaDataTab.mode = 'KOTLIN_SCRIPT';
+ } else if (metaDataTab.mode.startsWith('Designer')) {
+ metaDataTab.mode = 'DEFAULT';
+ } else {
+ metaDataTab.mode = 'GENERIC_SCRIPT';
+ }
+ }
+
+ saveBluePrint() {
+ this.create();
+ this.zipFile.generateAsync({type: 'blob'})
+ .then(blob => {
+ this.packageCreationService.savePackage(blob);
+
+ });
+ }
+
+
+ create() {
+ this.folder.TREE_DATA.forEach((path) => {
+
+ const name = path.name;
+ if (path.children) {
+ this.zipFile.folder(name);
+ path.children.forEach(children => {
+ const name2 = children.name;
+ if (FilesContent.getMapOfFilesNamesAndContent().has(name2)) {
+ this.zipFile.file(name + '/' + name2, FilesContent.getMapOfFilesNamesAndContent().get(name2));
+ } else {
+ }
+
+ });
+
+ }
+ });
+ }
+
+ private setEntryPoint(metaDataTab: MetaDataTabModel) {
+ if (metaDataTab.mode.startsWith('DEFAULT')) {
+ metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
+ } else {
+ metaDataTab.entryFileName = '';
+ }
+
+
+ }
+
+ /* private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTabModel) {
+
+ const metadata: Metadata = new Metadata();
+ metadata.template_author = 'Shaaban';
+ metadata.template_name = metaDataTab.templateName;
+ metadata.template_tags = metaDataTab.tags;
+
+ metadata.dictionary_group = 'default';
+ metadata.template_version = metaDataTab.version;
+ metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
+ metadata['user-groups'] = 'ADMIN';
+ vlbDefinition.tosca_definitions_version = metaDataTab.version;
+ vlbDefinition.metadata = metadata;
+ const value = this.packageCreationUtils.transformToJson(vlbDefinition);
+ console.log(value);
+ FilesContent.putData('vLB_CDS.json', value);
+ }*/
+
+ validatePackageNameAndVersion() {
+ if (this.metaDataTab.name && this.metaDataTab.version) {
+ this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
+ if (element) {
+ this.errorMessage = 'the package with name and version is exists';
+ } else {
+ this.errorMessage = ' ';
+ }
+ });
+ }
+
+ }
+}
</div>
<nav class="row">
<div class="col pr-0">
- <button class="float btn btn-sm btn-primary" (click)="saveMetaData()">Save</button>
+ <button class="float btn btn-sm btn-primary" (click)="saveBluePrint()">Save</button>
<button class="float btn btn-sm btn-outline-secondary" disabled>Cancel</button>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-metadata" role="tabpanel"
aria-labelledby="nav-metadata-tab">
- <div class="card creat-card">
- <div class="single-line">
- <label class="label-name">Mode</label>
- <label name="trst" *ngFor="let mode of modes; let i = index">
- <input class="form-check-input" [(ngModel)]="metaDataTab.mode" type="radio"
- name="exampleRadios" id="exampleRadios1" value={{mode.name}}>
-
- <span>
- <i [className]="mode.style" aria-hidden="true" [id]="mode.name"></i>
- {{mode.name}}
- </span>
- </label>
- </div>
-
- </div>
- <div class="card creat-card">
- <div class="single-line">
- <label class="label-name">Name</label>
- <div class="label-input">
- <input type="input"
- [(ngModel)]="metaDataTab.name" placeholder="Topology name.vLB.CDS">
- </div>
- </div>
- <hr/>
- <div class="single-line">
- <label class="label-name">Description</label>
- <div class="label-input">
- <input type="input" [(ngModel)]="metaDataTab.description"
- placeholder="Descripe the package">
- </div>
- </div>
- <hr/>
- <div class="single-line">
- <label class="label-name">Version</label>
- <div class="label-input">
- <input type="input" [(ngModel)]="metaDataTab.version"
- (input)="validatePackageNameAndVersion()"
- placeholder="Example: 1.0.0">
- </div>
- <div><label style="color: red">{{errorMessage}}</label></div>
- </div>
- <hr/>
- <div class="single-line">
- <label class="label-name">tags</label>
- <div class="label-input">
- <input type="input" [(ngModel)]="metaDataTab.tags"
- placeholder="Ex., vDNS-CDS">
- </div>
- </div>
- </div>
- <div id="container">
- <div id="target">
- <div class="card creat-card">
- <div class="single-line">
- <h5 class="label-name">
- Custom key <a class="delete-key" (click)="deleteCustomKey($event)">Delete</a>
- </h5>
-
- </div>
- <div class="single-line">
- <label class="label-name">Name</label>
- <div class="label-input">
- <input name="key" type="input" placeholder="Enter Name">
- </div>
- </div>
- <hr/>
- <div class="single-line">
- <label class="label-name">Value</label>
- <div class="label-input">
- <input name="value" type="input"
- placeholder="Enter Value">
- </div>
- </div>
-
- </div>
- </div>
- </div>
- <div class="card creat-card">
- <div class="single-line">
- <div name="custom key">
- <button class="custom-key" (click)="createAnotherCustomKeyDiv()"><i
- class="fa fa-plus" aria-hidden="true"></i> Add a custom key
- </button>
-
-
- </div>
- </div>
- </div>
-
+ <app-metadata-tab></app-metadata-tab>
</div>
<div class="tab-pane fade" id="nav-imports" role="tabpanel"
aria-labelledby="nav-imports-tab">
</div>
<div class="tab-pane fade" id="nav-authentication" role="tabpanel"
- aria-labelledby="nav-authentication-tab">...
+ aria-labelledby="nav-authentication-tab">
+ <app-source-editor [Data]="'test'" lang="javascript"></app-source-editor>
</div>
<div class="tab-pane fade" id="nav-template" role="tabpanel"
- aria-labelledby="nav-template-tab"><app-template-mapping></app-template-mapping>
+ aria-labelledby="nav-template-tab">
+ <app-template-mapping></app-template-mapping>
</div>
<div class="tab-pane fade" id="nav-scripts" role="tabpanel"
- aria-labelledby="nav-scripts-tab">...
+ aria-labelledby="nav-scripts-tab">
+ <app-scripts-tab></app-scripts-tab>
</div>
</div>
</div>
*/
import {Component, OnInit} from '@angular/core';
-import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTab} from './mapping-models/metadata/MetaDataTab.model';
+import {FilesContent, FolderNodeElement, MetaDataFile, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
// import {saveAs} from 'file-saver/dist/FileSaver';
import * as JSZip from 'jszip';
-import {Observable} from 'rxjs';
-import {ApiService} from '../../../../common/core/services/api.service';
-import {BlueprintURLs} from '../../../../common/constants/app-constants';
-import {Import, Metadata, VlbDefinition} from './mapping-models/definitions/VlbDefinition';
-import {JsonConvert} from 'json2typescript';
-import {JsonPipe} from '@angular/common';
-import {PackageCreationService} from './package-creation.service';
-import {PackageCreationUtils} from './package-creation.utils';
-import List = _.List;
-import {Router} from '@angular/router';
+import {PackageCreationStore} from './package-creation.store';
@Component({
selector: 'app-package-creation',
modes: object[] = [
{name: 'Designer Mode', style: 'mode-icon icon-designer-mode'},
{name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}];
- customKeysAndValues: Map<string, string> = new Map<string, string>();
-
- dictionaryLibraryInstances: string[] = ['x', 'y'];
- private container: HTMLElement;
- private elements: HTMLCollection;
- private newElement: HTMLElement;
- private metaDataTab: MetaDataTab = new MetaDataTab();
-
- private result: string;
-
+ private metaDataTab: MetaDataTabModel = new MetaDataTabModel();
private folder: FolderNodeElement = new FolderNodeElement();
private zipFile: JSZip = new JSZip();
private filesData: any = [];
- private errorMessage: string;
- private keys: NodeListOf<HTMLElement>;
- private values: NodeListOf<HTMLElement>;
-
- constructor(private packageCreationService: PackageCreationService, private packageCreationUtils: PackageCreationUtils,
- private router: Router) {
+ constructor(private packageCreationStore: PackageCreationStore) {
}
ngOnInit() {
- // this.customKeysAndValues.set('Dictionary Library Instances', ' ');
- this.keys = document.getElementsByName('key');
- this.values = document.getElementsByName('value');
- }
-
-
- createAnotherCustomKeyDiv() {
- this.newElement = document.getElementById('target');
- const id = this.newElement.getAttribute('id');
- this.newElement.setAttribute('id', 'target' + this.counter++);
- const copiedElement = this.newElement.cloneNode(true);
- this.container = document.getElementById('container');
- this.container.appendChild(copiedElement);
- this.elements = this.container.children;
- this.newElement.setAttribute('id', id);
- this.clearCopiedElement();
-
- // console.log(this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version));
- /*this.metaDataTab = new MetaDataTab();
- this.metaDataTab.name = 'klfdj';
- this.metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
- this.metaDataTab.description = 'rere';
- this.metaDataTab.tags = 'ffsssssss';
- this.metaDataTab.version = '1.01.10';
- this.metaDataTab.templateName = 'test';
-
-
- this.saveToFileSystem(MetaDataFile.getObjectInstance(this.metaDataTab));*/
- }
-
- private clearCopiedElement() {
- const newCopiedElement: HTMLInputElement = document.getElementById('target' + (this.counter - 1)) as HTMLInputElement;
- const inputElements = newCopiedElement.getElementsByTagName('input');
- for (let i = 0; i < inputElements.length; i++) {
- const element: HTMLInputElement = inputElements.item(i) as HTMLInputElement;
- element.value = '';
- }
- }
-
-
- validatePackageNameAndVersion() {
- if (this.metaDataTab.name && this.metaDataTab.version) {
- this.packageCreationService.checkBluePrintNameAndVersion(this.metaDataTab.name, this.metaDataTab.version).then(element => {
- if (element) {
- this.errorMessage = 'the package with name and version is exists';
- } else {
- this.errorMessage = ' ';
- }
- });
- }
}
- getDictionaryLibraryInstances() {
+ saveBluePrint() {
+ this.packageCreationStore.state$.subscribe(
+ cbaPackage => {
+ this.metaDataTab = cbaPackage.metaData;
+ this.setModeType(this.metaDataTab);
+ this.setEntryPoint(this.metaDataTab);
+ this.addToscaMetaDataFile(this.metaDataTab);
- }
+ // const vlbDefinition: VlbDefinition = new VlbDefinition();
+ // this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
- saveMetaData() {
- for (let i = 0; i < this.values.length; i++) {
- const inputKeyElement: HTMLInputElement = this.keys.item(i) as HTMLInputElement;
- const inputKey: string = inputKeyElement.value;
- const inputValueElement: HTMLInputElement = this.values.item(i) as HTMLInputElement;
- const inputValue: string = inputValueElement.value;
- this.customKeysAndValues.set(inputKey, inputValue);
- }
-
- this.metaDataTab.mapOfCustomKey = this.customKeysAndValues;
- this.setModeType(this.metaDataTab);
- this.setEntryPoint(this.metaDataTab);
-
- this.addToscaMetaDataFile(this.metaDataTab);
-
- const vlbDefinition: VlbDefinition = new VlbDefinition();
- this.fillVLBDefinition(vlbDefinition, this.metaDataTab);
+ this.filesData.push(this.folder.TREE_DATA);
+ console.log(FilesContent.getMapOfFilesNamesAndContent());
+ this.saveBluePrintToDataBase();
+ });
- this.filesData.push(this.folder.TREE_DATA);
- this.saveToBackend();
- this.packageCreationService.refreshPackages();
- this.router.navigate(['/packages']);
}
- addToscaMetaDataFile(metaDataTab: MetaDataTab) {
+ addToscaMetaDataFile(metaDataTab: MetaDataTabModel) {
const filename = 'TOSCA.meta';
FilesContent.putData(filename, MetaDataFile.getObjectInstance(this.metaDataTab));
}
- private setModeType(metaDataTab: MetaDataTab) {
+ private setModeType(metaDataTab: MetaDataTabModel) {
if (metaDataTab.mode.startsWith('Scripting')) {
metaDataTab.mode = 'KOTLIN_SCRIPT';
} else if (metaDataTab.mode.startsWith('Designer')) {
}
}
- saveToBackend() {
+ saveBluePrintToDataBase() {
this.create();
this.zipFile.generateAsync({type: 'blob'})
.then(blob => {
- this.saveBluePrint(blob);
-
+ this.packageCreationStore.saveBluePrint(blob);
});
}
- private saveBluePrint(blob) {
- const formData = new FormData();
- formData.append('file', blob);
- this.packageCreationService.saveBlueprint(formData)
- .subscribe(
- data => {
- console.log('Success:' + JSON.stringify(data));
- }, error => {
- console.log('Error -' + error.message);
- });
- }
-
create() {
this.folder.TREE_DATA.forEach((path) => {
});
}
-
- deleteCustomKey(event) {
- this.container = document.getElementById('container');
- const element = event.parentElement.parentElement.parentElement;
- this.container.removeChild(element);
- }
-
-
- private setEntryPoint(metaDataTab: MetaDataTab) {
+ private setEntryPoint(metaDataTab: MetaDataTabModel) {
if (metaDataTab.mode.startsWith('DEFAULT')) {
metaDataTab.entryFileName = 'Definitions/vLB_CDS.json';
} else {
}
- private fillVLBDefinition(vlbDefinition: VlbDefinition, metaDataTab: MetaDataTab) {
-
- const metadata: Metadata = new Metadata();
- metadata.template_author = 'Shaaban';
- metadata.template_name = metaDataTab.templateName;
- metadata.template_tags = metaDataTab.tags;
-
- metadata.dictionary_group = 'default';
- metadata.template_version = metaDataTab.version;
- metadata['author-email'] = 'shaaban.altanany.ext@orange.com';
- metadata['user-groups'] = 'ADMIN';
- // metadata.mapOfCustomKeys = this.metaDataTab.mapOfCustomKey;
- vlbDefinition.tosca_definitions_version = metaDataTab.version;
- vlbDefinition.metadata = metadata;
-
- // console.log(vlbDefinition.metadata.mapOfCustomKeys);
- const value = this.packageCreationUtils.transformToJson(vlbDefinition);
- console.log(value);
- FilesContent.putData('vLB_CDS.json', value);
- }
+
}
constructor(private api: ApiService, private packagesListService: PackagesApiService, private packagesStore: PackagesStore) {
}
- saveBlueprint(body: any | null, options?: any): Observable<any> {
+
private saveBlueprint(body: any | null, options?: any): Observable<any> {
return this.api.post(BlueprintURLs.save, body, {responseType: 'text'});
}
refreshPackages() {
this.packagesStore.getAll();
}
+
+ savePackage(blob) {
+
+ const formData = new FormData();
+ formData.append('file', blob);
+ this.saveBlueprint(formData)
+ .subscribe(
+ data => {
+ console.log('Success:' + JSON.stringify(data));
+ }, error => {
+ console.log('Error -' + error.message);
+ });
+ }
+
}
import {Store} from '../../../../common/core/stores/Store';
-import {CBAPackage, Definition} from './mapping-models/CBAPacakge.model';
-import {Metadata} from './mapping-models/definitions/VlbDefinition';
+import {CBAPackage, Definition, Scripts} from './mapping-models/CBAPacakge.model';
import {PackageCreationService} from './package-creation.service';
+import {FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model';
+import * as JSZip from 'jszip';
@Injectable({
})
export class PackageCreationStore extends Store<CBAPackage> {
+ private folder: FolderNodeElement = new FolderNodeElement();
+ private zipFile: JSZip = new JSZip();
+
constructor(private packageCreationService: PackageCreationService) {
super(new CBAPackage());
}
- changeMetaData(metaDataObject: Metadata) {
+ changeMetaData(metaDataObject: MetaDataTabModel) {
this.setState({
...this.state,
definitions: new Definition(this.state.definitions.files.set(name, content))
});
}
+
+ addScripts(name: string, content: string) {
+
+ this.setState({
+ ...this.state,
+ scripts: new Scripts(this.state.scripts.files.set(name, content))
+ });
+
+ }
+
+ // type => refer to scripts || definitions
+ // from Files from scripts or imports
+ removeFromState(name: string, type: string) {
+ this.state[type].files.delete(name);
+ }
+
+ saveBluePrint(blob) {
+ this.packageCreationService.savePackage(blob);
+ }
}
--- /dev/null
+a.accordion-delete i {
+ color: red;
+}
+
+a.accordion-delete i:hover {
+ color: #007bff;
+ cursor: pointer;
+ transition-duration: .5s;
+ /* for Safari & Chrome */
+ -webkit-transition-duration: .5s;
+}
\ No newline at end of file
--- /dev/null
+<div class="import-container-all">
+ <div class="import-container">
+ <div class="import-container-input">
+ <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL" type="input">
+ <a class="enter-link" href="#"><i class="icon-enter"></i></a>
+ </div>
+ <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal"
+ href="#">Import File</a></span>
+
+ </div>
+
+ <div class="accordion">
+ <div class="card creat-card">
+ <div class="single-line">
+ <label class="label-name">File</label>
+ </div>
+ </div>
+ <div *ngFor="let file of scriptsFiles | keyvalue; let mapIndex = index" id="accordion">
+
+ <div class="card">
+ <div [id]="'head-'+mapIndex" class="card-header">
+ <h5 class="mb-0 d-flex justify-content-between">
+ <button [attr.aria-controls]="'id-'+mapIndex" [attr.data-target]="'#id-'+mapIndex"
+ aria-expanded="false" class="btn btn-link collapsed"
+ data-toggle="collapse">
+ <i class="icon-file-code"></i> Definitions/{{file.key}}
+ </button>
+ <a (click)="removeFile(mapIndex)" class="accordion-delete"><i class="icon-delete"></i></a>
+ </h5>
+ </div>
+ <div [attr.aria-labelledby]="'head-'+mapIndex" [id]="'id-'+mapIndex" class="collapse"
+ data-parent="#accordion">
+ <div class="card-body">
+ {{file.value}}
+ </div>
+ </div>
+ </div>
+
+ </div>
+ </div>
+
+</div>
+
+<div aria-hidden="true" aria-labelledby="scriptsModalLabel" class="modal fade" id="scriptsModal" role="dialog"
+ tabindex="-1">
+ <div class="modal-dialog" role="document">
+ <div class="modal-content">
+ <div class="modal-header">
+ <h5 class="modal-title" id="scriptsModalLabel">Import File</h5>
+ <button aria-label="Close" class="close" data-dismiss="modal" type="button">
+ <span aria-hidden="true">×</span>
+ </button>
+ </div>
+ <div class="modal-body">
+ <ngx-file-drop (onFileDrop)="dropped($event)" (onFileLeave)="fileLeave($event)"
+ (onFileOver)="fileOver($event)" dropZoneLabel="Drop files here">
+ <ng-template let-openFileSelector="openFileSelector" ngx-file-drop-content-tmp>
+ <div class="folder-upload">
+ <img src="assets/img/folder-upload.svg"/>
+ </div>
+ <div class="folder-upload-text">
+ Drag & Drop file
+ </div>
+ <div class="folder-upload-text">or
+ <button (click)="openFileSelector()" class="btn btn-sm btn-primary" type="button">Browse
+ Files
+ </button>
+ </div>
+ <div class="folder-upload-type">Allowed file type: Kotlin(Kt)</div>
+ </ng-template>
+ </ngx-file-drop>
+ <div *ngFor="let item of uploadedFiles; let i=index" class="upload-table">
+ <table class="table">
+ <thead>
+ <tr>
+ <th>Name : {{ item.name }}</th>
+ </tr>
+ </thead>
+ </table>
+ </div>
+ </div>
+ <div class="modal-footer">
+ <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal"
+ type="button">Cancel
+ </button>
+ <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" data-dismiss="modal" type="button">
+ Import
+ </button>
+ </div>
+ </div>
+ </div>
+</div>
--- /dev/null
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+
+import {ScriptsTabComponent} from './scripts-tab.component';
+
+describe('ScriptsTabComponent', () => {
+ let component: ScriptsTabComponent;
+ let fixture: ComponentFixture<ScriptsTabComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ScriptsTabComponent]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(ScriptsTabComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import {Component, OnInit} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../package-creation.store';
+import {PackageCreationUtils} from '../package-creation.utils';
+
+@Component({
+ selector: 'app-scripts-tab',
+ templateUrl: './scripts-tab.component.html',
+ styleUrls: ['./scripts-tab.component.css']
+})
+export class ScriptsTabComponent implements OnInit {
+
+ public scriptsFiles: Map<string, string> = new Map<string, string>();
+ public uploadedFiles: FileSystemFileEntry[] = [];
+ public files: NgxFileDropEntry[] = [];
+ private fileNames: Set<string> = new Set();
+
+ constructor(private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils) {
+ this.packageCreationStore.state$.subscribe(cbaPackage => {
+ if (cbaPackage.scripts && cbaPackage.scripts.files && cbaPackage.scripts.files.size > 0) {
+ this.scriptsFiles = cbaPackage.scripts.files;
+ }
+ });
+ }
+
+
+ ngOnInit() {
+ }
+
+ public dropped(files: NgxFileDropEntry[]) {
+ this.files = files;
+ for (const droppedFile of files) {
+ // Is it a file & Not added before ?
+ if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+ const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
+ this.uploadedFiles.push(fileEntry);
+ console.log(fileEntry.name);
+ this.fileNames.add(fileEntry.name);
+
+ }
+ }
+ }
+
+ removeFile(fileIndex: number) {
+ console.log(this.uploadedFiles[fileIndex]);
+ this.packageCreationStore.removeFromState(this.uploadedFiles[fileIndex].name, 'scripts');
+ this.uploadedFiles.splice(fileIndex, 1);
+ }
+
+ public fileOver(event) {
+ console.log(event);
+ }
+
+ public fileLeave(event) {
+ console.log(event);
+ }
+
+
+ setFilesToStore() {
+ for (const droppedFile of this.uploadedFiles) {
+ droppedFile.file((file: File) => {
+ const fileReader = new FileReader();
+ fileReader.onload = (e) => {
+ this.packageCreationStore.addScripts(droppedFile.name,
+ this.packageCreationUtils.transformToJson(fileReader.result));
+ };
+ fileReader.readAsText(file);
+ });
+
+ }
+ }
+
+ resetTheUploadedFiles() {
+ this.uploadedFiles = [];
+ }
+}
<div class="single-line">
<label class="label-name">Name</label>
<div class="label-input">
- <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"
- placeholder="Topology name.vLB.CDS">
+ <input type="input" placeholder="Topology name.vLB.CDS">
+ <!--(input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"-->
+
</div>
</div>
- <hr />
+ <hr/>
<div class="single-line">
<label class="label-name">Management Type</label>
<div class="label-input">
</div>
</div>
- <hr />
+ <hr/>
<div class="single-line">
<label class="label-name">Type</label>
<div class="label-input">
<label name="trst">
- <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
<span>
Velcoity
</span>
</label>
<label name="trst">
- <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value=Velcoity>
<span>
Jinja
</span>
</label>
<label name="trst">
- <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>
+ <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value=Velcoity>
<span>
Kotlin
</div>
<div class="template-mapping-accordion">
-<div id="accordion">
- <div class="card">
- <div class="card-header" id="headingOne">
- <h5 class="mb-0 d-flex justify-content-between">
- <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
- 1. Create Template
- </button>
-
- </h5>
- </div>
-
- <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
- <div class="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ <div id="accordion">
+ <div class="card">
+ <div class="card-header" id="headingOne">
+ <h5 class="mb-0 d-flex justify-content-between">
+ <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true"
+ aria-controls="collapseOne">
+ 1. Create Template
+ </button>
+
+ </h5>
+ </div>
+
+ <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+ wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+ eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+ assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+ sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+ farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+ labore sustainable VHS.
+ </div>
+ </div>
</div>
- </div>
- </div>
- <div class="card">
- <div class="card-header" id="headingTwo">
- <h5 class="mb-0">
- <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
- 2. Manage Mapping
- </button>
- </h5>
- </div>
- <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
- <div class="card-body">
- Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+ <div class="card">
+ <div class="card-header" id="headingTwo">
+ <h5 class="mb-0">
+ <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
+ aria-expanded="false" aria-controls="collapseTwo">
+ 2. Manage Mapping
+ </button>
+ </h5>
+ </div>
+ <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+ <div class="card-body">
+ Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3
+ wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum
+ eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla
+ assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt
+ sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer
+ farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
+ labore sustainable VHS.
+ </div>
+ </div>
</div>
- </div>
</div>
- </div>
-</div>
\ No newline at end of file
+</div>
import {ActionsComponent} from './designer/actions/actions.component';
import {PackageCreationComponent} from './package-creation/package-creation.component';
import {FormsModule} from '@angular/forms';
-import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component';
-import { NgxFileDropModule } from 'ngx-file-drop';
-import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component';
+import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component';
+import {NgxFileDropModule} from 'ngx-file-drop';
+import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component';
+import {SourceEditorComponent} from './source-editor/source-editor.component';
+import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component';
+import {AceEditorModule} from 'ng2-ace-editor';
+import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component';
+import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component';
@NgModule({
declarations: [PackagesDashboardComponent,
PackageCreationComponent,
ImportsTabComponent,
TemplateMappingComponent,
+ SourceEditorComponent,
+ ScriptsTabComponent,
+ MetadataTabComponent,
+ DslDefinitionsTabComponent,
],
imports: [
CommonModule,
SidebarModule.forRoot(),
FormsModule,
NgxFileDropModule,
+ AceEditorModule
],
providers: [ApiService, JsonPipe],
bootstrap: []
--- /dev/null
+.aceEditor {
+ overflow: hidden;
+ height: 100% !important;
+ background-color: white !important;
+ border: 1px solid #3f51b5;
+ border-left: 5px solid #3f51b5;
+}
\ No newline at end of file
--- /dev/null
+<ace-editor [(text)]="text" [mode]="'javascript'" #editor style="height:150px;"></ace-editor>
\ No newline at end of file
--- /dev/null
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SourceEditorComponent } from './source-editor.component';
+
+describe('SourceEditorComponent', () => {
+ let component: SourceEditorComponent;
+ let fixture: ComponentFixture<SourceEditorComponent>;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ SourceEditorComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(SourceEditorComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
--- /dev/null
+import { Component, OnInit, ViewChild, Input, AfterViewInit } from '@angular/core';
+// import 'brace/ext/searchbox';
+// import 'ace-builds/webpack-resolver';
+// import 'brace';
+// import 'brace/ext/language_tools';
+// import 'ace-builds/src-min-noconflict/snippets/html';
+
+@Component({
+ selector: 'app-source-editor',
+ templateUrl: './source-editor.component.html',
+ styleUrls: ['./source-editor.component.css']
+})
+export class SourceEditorComponent implements OnInit, AfterViewInit {
+
+
+ @Input() Data: string;
+ @Input() lang: string;
+ mode = 'json';
+ @ViewChild('editor', { static: false }) editor;
+ text = '';
+
+ ngOnInit(): void {
+ // throw new Error("Method not implemented.");
+ }
+
+
+
+ ngAfterViewInit() {
+ this.editor.setTheme('eclipse');
+
+ this.editor.getEditor().setOptions({
+ enableBasicAutocompletion: true
+ });
+
+ this.editor.getEditor().commands.addCommand({
+ name: 'showOtherCompletions',
+ bindKey: 'Ctrl-.',
+ exec(editor) {
+
+ }
+ });
+ }
+
+}
Code Review / ccsdk / cds.git / commitdiff