3 files changed, 130 insertions, 0 deletions
diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html
new file mode 100644
index 0000000..0c2787c
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html
@@ -0,0 +1,48 @@
+<nb-card class="xds-sdks">
+  <nb-card-header>
+
+    <div class="row">
+      <div class="col-12 col-md-8">
+        {{ labelGet(sdk) }}
+      </div>
+      <div class="col-6 col-md-4 text-right" role="group">
+        <button class="btn btn-outline-danger btn-tn btn-xds" (click)="delete(sdk)">
+          <span class="fa fa-trash fa-size-x2"></span>
+        </button>
+      </div>
+    </div>
+  </nb-card-header>
+
+  <nb-card-body>
+    <table class="table table-striped">
+      <tbody>
+        <tr>
+          <th>
+            <span class="fa fa-fw fa-id-badge"></span>&nbsp;
+            <span>SDK ID</span>
+          </th>
+          <td>{{ sdk.id }}</td>
+        </tr>
+        <tr>
+          <th><span class="fa fa-fw fa-user"></span>&nbsp;<span>Profile</span></th>
+          <td>{{ sdk.profile }}</td>
+        </tr>            <tr>
+            <th><span class="fa fa-fw fa-tasks"></span>&nbsp;<span>Architecture</span></th>
+            <td>{{ sdk.arch }}</td>
+        </tr>
+        <tr>
+            <th><span class="fa fa-fw fa-code-fork"></span>&nbsp;<span>Version</span></th>
+            <td>{{ sdk.version }}</td>
+        </tr>
+        <tr>
+            <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Sdk path</span></th>
+            <td>{{ sdk.path}}</td>
+        </tr>
+      </tbody>
+    </table>
+  </nb-card-body>
+
+  <nb-card-footer>
+    <!-- <pre>{{sdk | json}}</pre> -->
+  </nb-card-footer>
+</nb-card>
diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss
new file mode 100644
index 0000000..e404610
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss
@@ -0,0 +1,47 @@
+@import '~@nebular/theme/styles/global/bootstrap/buttons';
+
+.xds-sdk-card .icon {
+  padding: 0.75rem 0;
+  font-size: 1.75rem;
+}
+
+nb-card-body {
+  padding: 0;
+}
+
+nb-card-footer {
+  text-align: right;
+}
+
+.fa-big {
+  font-size: 20px;
+  font-weight: bold;
+}
+
+.fa-size-x2 {
+  font-size: 20px;
+}
+
+th span {
+  font-weight: 100;
+}
+
+th label {
+  font-weight: 100;
+  margin-bottom: 0;
+}
+
+tr.info>th {
+  vertical-align: middle;
+}
+
+tr.info>td {
+  vertical-align: middle;
+}
+
+.btn-outline-danger.btn-xds {
+  color: #ff4c6a;
+  &:focus {
+    color: white;
+  }
+}
diff --git a/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts
new file mode 100644
index 0000000..8228570
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts
@@ -0,0 +1,35 @@
+import { Component, Input, Pipe, PipeTransform } from '@angular/core';
+import { SdkService, ISdk } from '../../../@core-xds/services/sdk.service';
+import { AlertService } from '../../../@core-xds/services/alert.service';
+
+
+@Component({
+  selector: 'xds-sdk-card',
+  styleUrls: ['./sdk-card.component.scss'],
+  templateUrl: './sdk-card.component.html',
+})
+export class SdkCardComponent {
+
+  // FIXME workaround of https://github.com/angular/angular-cli/issues/2034
+  // should be removed with angular 5
+  // @Input() sdk: ISdk;
+  @Input() sdk = <ISdk>null;
+
+  constructor(
+    private alert: AlertService,
+    private sdkSvr: SdkService
+  ) {
+  }
+
+  labelGet(sdk: ISdk) {
+    return sdk.profile + '-' + sdk.arch + '-' + sdk.version;
+  }
+
+  delete(sdk: ISdk) {
+    this.sdkSvr.delete(sdk).subscribe(
+      res => { },
+      err => this.alert.error('ERROR delete: ' + err)
+    );
+  }
+}
+