catalog-ui/src/app/ng2/pages/composition/graph/connection-wizard/connection-wizard-header/connection-wizard-header.component.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17 <div class="header-main-container">
  18     <div class="inner-container">
  19         <div class="node from-node" [ngClass]="{'selected':currentStepIndex == 0}">
  20             <div class="text">
  21                 <div class="node-name">
  22                     {{connectWizardService.connectRelationModel.fromNode.componentInstance.name}}
  23                 </div>
  24                 <div class="selected-req-or-cap" [ngClass]="{'selected': currentStepIndex == 2 && !connectWizardService.selectedMatch.isFromTo}">
  25                     {{getSelectedReqOrCapName(true)}}
  26                 </div>
  27             </div>
  28             <div class="icon">
  29                 <div class="small medium {{connectWizardService.connectRelationModel.fromNode.componentInstance.iconSprite}} {{connectWizardService.connectRelationModel.fromNode.componentInstance.icon}}">
  30                 </div>
  31             </div>
  32         </div>
  33         <div class="connection">
  34
  35         </div>
  36         <div class="node to-node"  [ngClass]="{'selected':currentStepIndex == 1}">
  37             <div class="icon">
  38                 <div class="small medium {{connectWizardService.connectRelationModel.toNode.componentInstance.iconSprite}} {{connectWizardService.connectRelationModel.toNode.componentInstance.icon}}">
  39                 </div>
  40             </div>
  41
  42             <div class="text">
  43                 <div class="node-name">
  44                     {{connectWizardService.connectRelationModel.toNode.componentInstance.name}}
  45                 </div>
  46                 <div class="selected-req-or-cap"  [ngClass]="{'selected': currentStepIndex == 2 && connectWizardService.selectedMatch.isFromTo}">
  47                     {{getSelectedReqOrCapName(false)}}
  48                 </div>
  49             </div>
  50         </div>
  51     </div>
  52 </div>