summaryrefslogtreecommitdiffstats
path: root/vid-webpack-master/src/app/drawingBoard/service-planning
diff options
context:
space:
mode:
Diffstat (limited to 'vid-webpack-master/src/app/drawingBoard/service-planning')
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html13
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss16
-rw-r--r--vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts77
3 files changed, 106 insertions, 0 deletions
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
new file mode 100644
index 000000000..5b2f22d5f
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.html
@@ -0,0 +1,13 @@
+<div class="service-planning-header">
+ <drawing-board-header></drawing-board-header>
+</div>
+<div class="service-planning-content row">
+ <available-models-tree class="left-side col-md-6" (highlightInstances)="highlightInstancesBySelectingNode($event)"></available-models-tree>
+ <!--<no-content-message-and-icon *ngIf="!isShowTree()" class="span-over"-->
+ <!--data-title="Please add objects (VNFs, network, modules etc.) from the left tree to design the service instance"-->
+ <!--subtitle="Once done, click Deploy to start instantiation"-->
+ <!--iconPath="./img/UPLOAD.svg"-->
+ <!--iconClass="upload-icon-service-planing"></no-content-message-and-icon>-->
+ <drawing-board-tree *ngIf="isShowTree()" class="span-over col-md-6" (highlightNode)="highlightNodeBySelectingInstance($event)"></drawing-board-tree>
+</div>
+
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss
new file mode 100644
index 000000000..69546a6c0
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.scss
@@ -0,0 +1,16 @@
+
+.service-planning-content {
+ display: flex;
+ flex: 1;
+}
+
+.span-over {
+ display: flex;
+ flex: 1;
+}
+
+//css for the icon. :host ::ng-deep are needed for applying css to child component
+:host ::ng-deep .upload-icon-service-planing {
+ height: 117px;
+ margin-top: 32px;
+}
diff --git a/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
new file mode 100644
index 000000000..1ce0e8100
--- /dev/null
+++ b/vid-webpack-master/src/app/drawingBoard/service-planning/service-planning.component.ts
@@ -0,0 +1,77 @@
+import {Component, ViewChild} from '@angular/core';
+import {DrawingBoardTreeComponent} from "../drawing-board-tree/drawing-board-tree.component";
+import {AvailableModelsTreeComponent} from "../available-models-tree/available-models-tree.component";
+import {ITreeNode} from "angular-tree-component/dist/defs/api";
+import {TreeComponent} from 'angular-tree-component';
+
+@Component({
+ selector: 'service-planning',
+ templateUrl: './service-planning.component.html',
+ styleUrls: ['./service-planning.component.scss']
+})
+
+export class ServicePlanningComponent {
+
+ @ViewChild(DrawingBoardTreeComponent) drawingModelTree;
+ @ViewChild(AvailableModelsTreeComponent) availableModelTree;
+
+ isShowTree(): boolean {
+ return true;
+ }
+
+ public highlightNodeBySelectingInstance(modelId: number): void {
+ this.availableModelTree.tree.treeModel.getNodeBy((node: ITreeNode) => node.data.id === modelId)
+ .setActiveAndVisible().expand();
+ }
+
+ public highlightInstancesBySelectingNode(id: number): void {
+ if(this.isShowTree()) {
+ let _this = this;
+ let matchInstances = _this.searchTree(id);
+ if (!matchInstances.length)
+ _this.clearSelectionInTree(_this.drawingModelTree.tree);
+ matchInstances.forEach(function (instance, index) {
+ let multi : boolean = !!index;
+ _this.drawingModelTree.tree.treeModel.getNodeById(instance.id)
+ .setActiveAndVisible(multi).expand();
+ });
+
+ }
+ }
+
+ clearSelectionInTree(tree: TreeComponent): void {
+ let activateNode = tree.treeModel.getActiveNode();
+ activateNode ? activateNode.toggleActivated().blur() : null;
+ }
+
+ searchTree(modelId: number) {
+ let _this = this;
+ let results = [];
+ let nodes = _this.drawingModelTree.nodes;
+ nodes.forEach(function (node) {
+ _this.searchTreeNode(node, modelId, results);
+ });
+ return results;
+ }
+
+ searchTreeNode(node, modelId: number, results): void {
+ if(node.modelId === modelId){
+ results.push(node);
+ }
+ if (node.children != null){
+ for(let i = 0; i < node.children.length; i++){
+ this.searchTreeNode(node.children[i], modelId, results);
+ }
+ }
+ }
+
+
+}
+
+export class ServicePlanningEmptyComponent extends ServicePlanningComponent {
+ isShowTree() : boolean {
+ return false;
+ }
+}
+
+