diff options
10 files changed, 184 insertions, 39 deletions
diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts index 5e86a7eb7..b332f8fe4 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/designer/designer.component.ts @@ -112,21 +112,21 @@ export class DesignerComponent implements OnInit { d.x = xbyMath; d.y = ybyMath; - firstg.append('rect') - .attr('x', 95) - .attr('y', 20) - // .attr('r', 10) + firstg.append('circle') + .attr('cx', 97) + .attr('cy', 20) + .attr('r', 5) .attr('width', 10) .attr('height', 10) .attr('fill', 'orange') if(d.requirementsArray) { d.requirementsArray.forEach(requirement =>{ - firstg.append('rect') + firstg.append('circle') .attr('id', d.name+requirement.name) - .attr('x', 95) - .attr('y', 60) - // .attr('r', 10) + .attr('cx', 97) + .attr('cy', 60) + .attr('r', 5) .attr('width', 10) .attr('height', 10) .attr('fill', 'blue') @@ -137,16 +137,16 @@ export class DesignerComponent implements OnInit { if(d.capabilitiesArray) { d.capabilitiesArray.forEach(capability =>{ - firstg.append('rect') + firstg.append('circle') .attr('id', d.name+capability.name) - .attr('x', 95) - .attr('y', 40) - // .attr('r', 10) + .attr('cx', 97) + .attr('cy', 40) + .attr('r', 5) .attr('width', 10) .attr('height', 10) .attr('fill', 'green'); - capability.x = xbyMath + 95; - capability.y = ybyMath + 60; + capability.x = xbyMath + 97; + capability.y = ybyMath + 40; }); } @@ -237,7 +237,7 @@ export class DesignerComponent implements OnInit { .attr('x2', link.targetX) .attr('y2', link.targetY) .attr('stroke','gray') - .attr('stroke-width', 5); + .attr('stroke-width', 2); }); } diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html index c41bdafb7..1ba944a30 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.component.html @@ -61,6 +61,7 @@ limitations under the License. <!-- <svg id="svgArea" width="1000px" height="100%" style="background-color: #C0C0C0"> --> <!-- <rect x="0" y="0" width="300" height="200" fill="yellow"></rect> --> <!-- </svg> --> + <app-designer></app-designer> </div> @@ -71,6 +72,18 @@ limitations under the License. <div *ngIf="on" id="overlay" class="outerDiv divThree"> <mat-accordion style="width: 100%"> + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Type + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box">vnf-netconf-device</div> + </div> + </mat-expansion-panel> + <mat-expansion-panel> <mat-expansion-panel-header style="background-color: #f1f1f1"> <mat-panel-title> @@ -91,6 +104,56 @@ limitations under the License. </div> </mat-expansion-panel> + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Interface + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Artifacts + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Inputs + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + <mat-expansion-panel (opened)="panelOpenState = true" (closed)="panelOpenState = false"> + <mat-expansion-panel-header style="background-color: #f1f1f1"> + <mat-panel-title> + Capabilities + </mat-panel-title> + </mat-expansion-panel-header> + + <div class="item-list"> + <div class="item-box" *ngFor="let item of review" cdkDrag>{{item}}</div> + </div> + </mat-expansion-panel> + + + </mat-accordion> </div> </div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts index eed926b7f..9ccb9977f 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/modify-template/modify-template.module.ts @@ -25,13 +25,16 @@ import { CdkTableModule } from '@angular/cdk/table'; import { ModifyTemplateComponent } from './modify-template.component'; import { ModifyTemplateRoutingModule } from './modify-template-routing.module'; import { AppMaterialModule } from '../../../common/modules/app-material.module'; +import { DesignerComponent } from './designer/designer.component'; @NgModule({ declarations: [ - ModifyTemplateComponent + ModifyTemplateComponent, + DesignerComponent ], exports: [ - ModifyTemplateComponent + ModifyTemplateComponent, + DesignerComponent ], imports: [ CommonModule, diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html index 635b83cbd..f97ea0ee7 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.html @@ -18,4 +18,9 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ --> -<input type="file" accept=".cba">
\ No newline at end of file +<div> + <input type="file" accept=".json" (change)="fileChanged($event)"> +</div> +<div> + <button mat-button matStepperNext class="matStepNextBtn" (click)="extractBlueprint()">Upload</button> +</div>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss index 22941b5fa..5732b5a26 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.scss @@ -17,4 +17,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ -*/
\ No newline at end of file +*/ + +.matStepNextBtn { + color: white; + background: gray; + margin-top: 10px; + position: absolute; + margin-bottom: 5px; +}
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts index a58be6eb3..3a344c9fc 100644 --- a/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts +++ b/cds-ui/client/src/app/feature-modules/blueprint/select-template/search-template/search-template.component.ts @@ -19,7 +19,9 @@ limitations under the License. ============LICENSE_END============================================ */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, EventEmitter, Output } from '@angular/core'; +import { Store } from '@ngrx/store'; +import { IBlueprint} from '../../../../common/core/store/models/blueprint.model'; @Component({ selector: 'app-search-template', @@ -27,10 +29,25 @@ import { Component, OnInit } from '@angular/core'; styleUrls: ['./search-template.component.scss'] }) export class SearchTemplateComponent implements OnInit { - + file: any; + localBluePrintData: IBlueprint; + fileText: object[]; + constructor() { } - ngOnInit() { + ngOnInit() { } + + fileChanged(e: any) { + this.file = e.target.files[0]; + let fileReader = new FileReader(); + fileReader.readAsText(e.srcElement.files[0]); + var me = this; + fileReader.onload = function () { + let fileData = JSON.stringify(fileReader.result); + me.localBluePrintData = JSON.parse(fileData); + console.log(me.localBluePrintData); + } + } + extractBlueprint(){ } - } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html index dad727cec..83c9ae2c0 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.html @@ -18,23 +18,28 @@ * ============LICENSE_END========================================================= */--> +<mat-card class="ver-card"> +<mat-card-header> +</mat-card-header> +<mat-card-content> <mat-vertical-stepper linear> - <mat-step > + <mat-step [stepControl]="step1FormGroup"> <ng-template matStepLabel>Choose Resource file</ng-template> <br> - <app-resource-template-options></app-resource-template-options> + <app-resource-template-options (options)="selectedOption($event)"></app-resource-template-options> <br> <div> <button mat-button matStepperNext class="matStepNextBtn">Proceed</button> </div> </mat-step> - <mat-step > + <mat-step [stepControl]="step2FormGroup"> <ng-template matStepLabel>Browse Template file</ng-template> - <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource> + <app-upload-resource (change)="fileChange(fileupload.files)"></app-upload-resource><br><br> + <app-existing-model></app-existing-model> <div> <button mat-button matStepperNext class="matStepNextBtn">Upload</button> </div> </mat-step> -</mat-vertical-stepper> - -<!-- <router-outlet></router-outlet> -->
\ No newline at end of file + </mat-vertical-stepper> + </mat-card-content> +</mat-card>
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss index b1d0ac57a..1d113d49b 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.scss @@ -22,4 +22,25 @@ background:gray; margin-top: 10px; position: absolute; + +} +.ver-card { + width: 100%; + background-color: #f1f1f1; + padding: 0.01em 16px; + margin: 20px 0; + box-shadow: 0 2px 2px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)!important; + height: auto; +} +.mat-card-header{ + height:35px; +} +.mat-card-content{ + width: auto; + background-color: #fff; + padding: 8px 8px; + // border-left: 4px solid #4CAF50; + word-wrap: break-word; + min-height:350px; + height: auto; }
\ No newline at end of file diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts index 32dc3807d..bb8ceea51 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.component.ts @@ -30,10 +30,10 @@ import { Store } from '@ngrx/store'; export class ResourceCreationComponent implements OnInit { myFile: File; /* property of File type */ - + selectedValue: any; constructor() { } - + ngOnInit() { } @@ -41,8 +41,13 @@ export class ResourceCreationComponent implements OnInit { console.log(files); this.myFile = files[0].nativeElement; } - upload(){ } + + selectedOption(value){ + this.selectedValue=value; + console.log(this.selectedValue); +} + } diff --git a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts index e4fcf1378..7003f4c20 100644 --- a/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts +++ b/cds-ui/client/src/app/feature-modules/resource-definition/resource-creation/resource-creation.module.ts @@ -24,22 +24,39 @@ import { CommonModule } from '@angular/common'; import { ResourceCreationRoutingModule } from './resource-creation-routing.module'; import { ResourceCreationComponent } from './resource-creation.component'; import { ResourceTemplateOptionsComponent } from './resource-template-options/resource-template-options.component'; -import { MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material'; +import { MatAutocompleteModule,MatToolbarModule,MatIconModule, MatButtonModule, MatSidenavModule, MatCheckboxModule, MatListModule, MatGridListModule, MatCardModule, MatMenuModule, MatTableModule, MatPaginatorModule, MatSortModule, MatInputModule, MatSelectModule, MatRadioModule, MatFormFieldModule, MatStepperModule} from '@angular/material'; import { UploadResourceComponent } from './upload-resource/upload-resource.component'; +import { NewTemplateComponent } from './new-template/new-template.component'; +import { ExistingModelComponent } from './existing-model/existing-model.component'; +import { SearchResourceComponent } from './existing-model/search-resource/search-resource.component'; +import { SharedModule } from '../../../../app/common/shared/shared.module'; +import { FormsModule,ReactiveFormsModule } from '@angular/forms'; @NgModule({ - declarations: [ + + declarations: [ ResourceCreationComponent, ResourceTemplateOptionsComponent, - UploadResourceComponent + UploadResourceComponent, + NewTemplateComponent, + ExistingModelComponent, + SearchResourceComponent, + ], exports: [ ResourceCreationComponent, ResourceTemplateOptionsComponent, - UploadResourceComponent + UploadResourceComponent, + NewTemplateComponent, + ExistingModelComponent, + SearchResourceComponent, + SharedModule ], imports: [ CommonModule, + SharedModule, + FormsModule, + ReactiveFormsModule, ResourceCreationRoutingModule, MatToolbarModule, MatIconModule, @@ -57,7 +74,8 @@ import { UploadResourceComponent } from './upload-resource/upload-resource.compo MatSelectModule, MatRadioModule, MatFormFieldModule, - MatStepperModule - ] + MatStepperModule, + MatAutocompleteModule + ] }) export class ResourceCreationModule { } |