Code coverage report for src/card/info-status/info-status-card.component.js

Statements: 85.71% (6 / 7)      Branches: 100% (0 / 0)      Functions: 66.67% (2 / 3)      Lines: 85.71% (6 / 7)      Ignored: none     

All files » src/card/info-status/ » info-status-card.component.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97                                                                                                                                                          1                 6 6 6 6 6            
/**
 * @ngdoc directive
 * @name patternfly.card.component:pfInfoStatusCard
 * @restrict E
 *
 * @param {object} status Status configuration information<br/>
 * <ul style='list-style-type: none'>
 * <li>.title         - the main title of the info status card
 * <li>.href          - the href to navigate to if one clicks on the title or count
 * <li>.iconClass     - an icon to display to the left of the count
 * <li>.iconImage     - an image to display to the left of Infrastructure
 * <li>.info          - an array of strings to display, each element in the array is on a new line, accepts HTML content
 * </ul>
 * @param {boolean=} show-top-border Show/hide the top border, true shows top border, false (default) hides top border
 * @param {boolean} htmlContent Flag to allow HTML content within the info options
 *
 * @description
 * Component for easily displaying textual information
 *
 * @example
 <example module="patternfly.card">
 
 <file name="index.html">
   <div ng-controller="CardDemoCtrl" style="display:inline-block;">
     <div class="col-md-10">
       <label>With Top Border, Icon Class, Href</label>
       <pf-info-status-card status="infoStatus" show-top-border="true"></pf-info-status-card>
       <br/>
       <label>No Top Border, Icon Image, No Title</label>
       <pf-info-status-card status="infoStatusTitless"></pf-info-status-card>
       <br/>
       <label>With HTML</label>
       <pf-info-status-card status="infoStatusAlt" html-content="true"></pf-info-status-card>
     </div>
   </div>
 </file>
 
 <file name="script.js">
   angular.module( 'patternfly.card' ).controller( 'CardDemoCtrl', function( $scope, $window ) {
    var imagePath = $window.IMAGE_PATH || "img";
    $scope.infoStatus = {
      "title":"TinyCore-local",
      "href":"#",
      "iconClass": "fa fa-shield",
      "info":[
        "VM Name: aapdemo002",
        "Host Name: localhost.localdomian",
        "IP Address: 10.9.62.100",
        "Power status: on"
      ]
    };
 
    $scope.infoStatusTitless = {
      "iconImage": imagePath + "/OpenShift-logo.svg",
      "info":[
        "Infastructure: VMware",
        "Vmware: 1 CPU (1 socket x 1 core), 1024 MB",
        "12 Snapshots",
        "Drift History: 1"
        ]
    };
 
    $scope.infoStatusAlt = {
      "title":"Favorite Things",
      "iconClass":"fa fa-heart",
      "info":[
        "<i class='fa fa-coffee'>",
        "<i class='fa fa-motorcycle'>",
        "<b>Tacos</b>"
      ]
    };
   });
 </file>
 
 </example>
 */
 
angular.module( 'patternfly.card' ).component('pfInfoStatusCard', {
  bindings: {
    status: '=',
    showTopBorder: '@?',
    htmlContent: '@?'
  },
  templateUrl: 'card/info-status/info-status-card.html',
  controller: function ($sce) {
    'use strict';
    var ctrl = this;
    ctrl.$onInit = function () {
      ctrl.shouldShowTopBorder = (ctrl.showTopBorder === 'true');
      ctrl.shouldShowHtmlContent = (ctrl.htmlContent === 'true');
      ctrl.trustAsHtml = function (html) {
        return $sce.trustAsHtml(html);
      };
    };
  }
});