import {PackageCreationModes} from './PackageCreationModes';
-import {CBAPackage, Definition, Scripts} from '../mapping-models/CBAPacakge.model';
+import {CBAPackage, Scripts} from '../mapping-models/CBAPacakge.model';
import {FilesContent} from '../mapping-models/metadata/MetaDataTab.model';
import {Import, Metadata, VlbDefinition} from '../mapping-models/definitions/VlbDefinition';
import {PackageCreationUtils} from '../package-creation.utils';
execute(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
this.addToscaMetaDataFile(cbaPackage.metaData);
- this.createDefinitionsFolder(cbaPackage.definitions, packageCreationUtils);
+ this.createDefinitionsFolder(cbaPackage, packageCreationUtils);
this.addScriptsFolder(cbaPackage.scripts);
}
-
- /* private createDefinitionsFolder(definition: Definition) {
- definition.imports.forEach((key, value) => {
- console.log(key);
- FilesContent.putData(key, value);
- });
-
- }*/
-
private addScriptsFolder(scripts: Scripts) {
scripts.files.forEach((key, value) => {
FilesContent.putData(key, value);
});
}
- private createDefinitionsFolder(definition: Definition, packageCreationUtils: PackageCreationUtils) {
- definition.imports.forEach((key, valueOfFile) => {
+ private createDefinitionsFolder(cbaPackage: CBAPackage, packageCreationUtils: PackageCreationUtils) {
+ cbaPackage.definitions.imports.forEach((key, valueOfFile) => {
FilesContent.putData(key, valueOfFile);
});
const metadata: Metadata = new Metadata();
metadata.template_author = 'Shaaban Ebrahim';
- metadata.template_name = definition.metaDataTab.name;
- metadata.template_tags = definition.metaDataTab.tags;
- metadata.template_version = definition.metaDataTab.version;
+ metadata.template_name = cbaPackage.metaData.name;
+ metadata.template_tags = cbaPackage.metaData.tags;
+ metadata.template_version = cbaPackage.metaData.version;
metadata['author-email'] = 'shaaban.eltanany.ext@orange.com';
metadata['user-groups'] = 'test';
- definition.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => {
+ cbaPackage.definitions.metaDataTab.mapOfCustomKey.forEach((key, customKeyValue) => {
metadata[key] = customKeyValue;
});
vlbDefinition.metadata = metadata;
- // const files = Import[definition.imports.size];
const files: Import[] = [];
- definition.imports.forEach((key, valueOfFile) => {
+ cbaPackage.definitions.imports.forEach((key, valueOfFile) => {
files.push({file: valueOfFile});
});
console.log(vlbDefinition);
vlbDefinition.imports = files;
- /* vlbDefinition.imports = this.definition.imports; /!*[{
- this.this.definition.imports.forEach(key,value =>{
-
- });
- file: 'Definitions/data_types.json'
- }]; */
-
const value = packageCreationUtils.transformToJson(vlbDefinition);
FilesContent.putData(filenameEntry, value);
console.log('hello there');
console.log(fileEntry.name);
this.fileNames.add(fileEntry.name);
- } /*else {
- const directorEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
- this.filesUnderDirectory = directorEntry.getFile('');
- // const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
- /* this.uploadedFile.push(droppedFile);
- const formData = new FormData()
- formData.append('logo', fileEntry, droppedFile.relativePath);
- console.log(formData);*/
- /* // It was a directory (empty directories are added, otherwise only files)
- const fileEntry = droppedFile.fileEntry as FileSystemDirectoryEntry;
- console.log(droppedFile.relativePath, fileEntry);
-
-
- const formData = new FormData();
- formData.append('logo', droppedFile, droppedFile.relativePath);
- console.log(formData);
-
- //this.packageCreationStore.addDefinition(droppedFile.relativePath, this.getContent(droppedFile.relativePath));
-*/
- /* }*/
+ }
}
}
console.log(event);
}
- /* readFileContent(file: File): string | ArrayBuffer {
- const fileReader = new FileReader();
- // let content: string | ArrayBuffer = '';
- fileReader.onload = (e) => {
- content = fileReader.result;
- };
- fileReader.readAsText(file);
- return content;
- }
- */
setFilesToStore() {
for (const droppedFile of this.uploadedFiles) {
droppedFile.file((file: File) => {
}
}
+
+export class Template {
+ public files: Map<string, string>;
+
+ constructor() {
+ this.files = new Map<string, string>();
+ }
+
+ public setTemplates(key: string, value: string) {
+ this.files.set(key, value);
+ return this;
+ }
+}
+
export class CBAPackage {
public metaData: MetaDataTabModel;
public definitions: Definition;
public scripts: Scripts;
+ public templates: Template;
constructor() {
this.definitions = new Definition();
this.scripts = new Scripts();
this.metaData = new MetaDataTabModel();
+ this.templates = new Template();
}
saveBluePrint(blob) {
this.packageCreationService.savePackage(blob);
}
+
+ addTemplate(filePath: string, fileContent: string) {
+ this.setState({
+ ...this.state,
+ templates: this.state.templates.setTemplates(filePath, fileContent)
+ });
+ }
}
--- /dev/null
+export enum TemplateType {
+ Velocity = 'vtl',
+ Koltin = 'kt',
+ Jinja = 'Unknown'
+}
<label class="label-name">Name
<span _ngcontent-uew-c3="">*</span>
</label>
-
+
<div class="label-input">
- <input type="input" placeholder="Topology name.vLB.CDS">
+ <input type="input" [(ngModel)]="fileName" placeholder="Topology name.vLB.CDS">
</div>
</div>
</div>
<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">
+ aria-controls="collapseOne">
1. Create Template
</button>
<label class="label-name">Template 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="exampleRadios1"
+ 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="exampleRadios1"
+ value=Velcoity>
+
<span>
Kotlin
</span>
</label>
</div>
</div>
- <div class="create-template-import">Use the editor to add parameters or you can also <a href="#" data-toggle="modal" data-target="#exampleModal">Import File</a></div>
+ <div class="create-template-import">Use the editor to add parameters or you can also <a href="#"
+ data-toggle="modal"
+ data-target="#exampleModal">Import
+ File</a></div>
<div class="editor-container">
<app-dsl-definitions-tab></app-dsl-definitions-tab>
</div>
<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">
+ aria-expanded="false" aria-controls="collapseTwo">
2. Manage Mapping
</button>
</h5>
<div class="text-center">
<a href="#" class="mapping-source-load">
<i class="icon-current-template"></i>
- <br/>
+ <br/>
<span>Use Current Template Instance</span>
</a>
<a href="#" data-toggle="modal" data-target="#exampleModal" class="mapping-source-load">
<i class="icon-Upload-attribute"></i>
- <br/>
+ <br/>
<div>Upload attribute list</div>
<div class="source-load-note">(Should be comma delimited file)</div>
</a>
</div>
<div class="table-container">
-
+
</div>
</div>
-
+
</div>
-
+
</div>
<div class="template-mapping-action">
<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()">
+ <button type="button" class="btn btn-sm btn-primary" data-dismiss="modal"
+ (click)="setFilesToStore()">
Import
</button>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
-import { Component, OnInit } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {FileSystemFileEntry, NgxFileDropEntry} from 'ngx-file-drop';
+import {PackageCreationStore} from '../../package-creation.store';
@Component({
- selector: 'app-templ-mapp-creation',
- templateUrl: './templ-mapp-creation.component.html',
- styleUrls: ['./templ-mapp-creation.component.css']
+ selector: 'app-templ-mapp-creation',
+ templateUrl: './templ-mapp-creation.component.html',
+ styleUrls: ['./templ-mapp-creation.component.css']
})
export class TemplMappCreationComponent implements OnInit {
- constructor() { }
+ public uploadedFiles: FileSystemFileEntry[] = [];
+ private fileNames: Set<string> = new Set();
- ngOnInit() {
- }
+ public files: NgxFileDropEntry[] = [];
+ fileName: any;
+ constructor(private packageCreationStore: PackageCreationStore) {
+ }
+
+ 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);
+ this.fileNames.add(fileEntry.name);
+
+ }
+ }
+ }
+
+ removeFile(fileIndex: number) {
+ /*const filename = 'Definitions/' + this.uploadedFiles[fileIndex].name;
+ this.packageCreationStore.removeFileFromDefinition(filename);
+ this.uploadedFiles.splice(fileIndex, 1);*/
+ }
+
+ setFilesToStore() {
+ for (const droppedFile of this.uploadedFiles) {
+ droppedFile.file((file: File) => {
+ const fileReader = new FileReader();
+ fileReader.onload = (e) => {
+ this.packageCreationStore.addTemplate('Templates/' + this.fileName,
+ fileReader.result.toString());
+ };
+ fileReader.readAsText(file);
+ });
+
+ }
+ }
+
+ public fileOver(event) {
+ console.log(event);
+ }
+
+ public fileLeave(event) {
+ console.log(event);
+ }
+
+ resetTheUploadedFiles() {
+ this.uploadedFiles = [];
+ }
}
</div>
<div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordion">
- <div class="card-body max-height-list">
+ <div class="card-body max-height-list" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">
<div class="row">
<div class="col">
- <a href="#" class="template-mapping-list active">hostname
+ <a href="#" class="template-mapping-list active">{{file.key}}
<span>Mapping</span>
<span>Template</span>
</a>
</div>
- <div class="col">
<a href="#" class="template-mapping-list">vf-module-1
<span>Mapping</span>
</a>
<a href="#" class="template-mapping-list">vf-module-2
<span>Mapping</span>
</a>
- </div>
+ </div>-->
</div>
- <div class="row">
<div class="col">
<a href="#" class="template-mapping-list">hostname
<span>Mapping</span>
<span>Template</span>
</a>
</div>
- </div>
+ </div>-->
</div>
</div>
</div>
</div>
-</div>
\ No newline at end of file
+</div>
-import { Component, OnInit, Output, EventEmitter } from '@angular/core';
+import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {PackageCreationStore} from '../../package-creation.store';
+import {Template} from '../../mapping-models/CBAPacakge.model';
@Component({
- selector: 'app-templ-mapp-listing',
- templateUrl: './templ-mapp-listing.component.html',
- styleUrls: ['./templ-mapp-listing.component.css']
+ selector: 'app-templ-mapp-listing',
+ templateUrl: './templ-mapp-listing.component.html',
+ styleUrls: ['./templ-mapp-listing.component.css']
})
export class TemplMappListingComponent implements OnInit {
- @Output() showCreationViewParentNotification = new EventEmitter<any>();
+ @Output() showCreationViewParentNotification = new EventEmitter<any>();
+ private templates: Template;
- constructor() { }
+ constructor(private packageCreationStore: PackageCreationStore) {
+ this.packageCreationStore.state$.subscribe(cba => {
+ if (cba.templates) {
+ this.templates = cba.templates;
+ }
+ });
+ }
- ngOnInit() {
- }
+ ngOnInit() {
+ }
- openCreationView() {
- this.showCreationViewParentNotification.emit('tell parent to open create views');
- }
+ openCreationView() {
+ this.showCreationViewParentNotification.emit('tell parent to open create views');
+ }
}
Code Review / ccsdk / cds.git / commitdiff