diff options
5 files changed, 104 insertions, 8 deletions
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(){ } - } |