Create firmware-card component

Create reusable firmware card component that will be
used in the updated firmware page:
https://ibm.invisionapp.com/share/4XNZ0JAMJ7B#/screens/319212821_4-8-D-1_Home

Signed-off-by: Yoshie Muranaka <yoshiemuranaka@gmail.com>
Change-Id: I86e526c59ac5c2e2c011aed0ce4bc3d82db63b5e

1 files changed, 51 insertions, 0 deletions

diff --git a/app/configuration/components/card.js b/app/configuration/components/card.js
new file mode 100644
index 0000000..863c079
--- /dev/null
+++ b/app/configuration/components/card.js
@@ -0,0 +1,51 @@
+window.angular && (function(angular) {
+  'use strict';
+
+  /**
+   *
+   * firmwareCard Component
+   *
+   */
+
+  /**
+   * Component template
+   */
+  const template = `
+    <div class="card-component">
+      <div class="card__header"
+           ng-class="{
+            'card__header--success' : $ctrl.status === 'success',
+            'card__header--error'   : $ctrl.status === 'error' }">
+        <p class="card__header__label inline">{{$ctrl.headerLabel}}</p>
+        <p class="card__header__value inline">{{$ctrl.headerValue}}</p>
+      </div>
+      <div class="card__body"
+           ng-if="$ctrl.body">
+        <div class="row">
+          <div class="column small-6">
+            <label>BMC Status</label>
+            {{$ctrl.bmcStatus || 'n/a'}}
+          </div>
+          <div class="column small-6">
+            <label>Host status</label>
+            {{$ctrl.hostStatus || 'n/a'}}
+          </div>
+        </div>
+      </div>
+    </div>`
+
+  /**
+   * Register firmwareCard component
+   */
+  angular.module('app.configuration').component('firmwareCard', {
+    template,
+    bindings: {
+      headerLabel: '@',
+      headerValue: '<',
+      status: '<',  // optional, 'success' or 'error'
+      body: '<',    // boolean true to render body content
+      hostStatus: '<',
+      bmcStatus: '<'
+    }
+  })
+})(window.angular);
\ No newline at end of file