aboutsummaryrefslogtreecommitdiffstats
path: root/webapp/src/app/pages/sdks
diff options
context:
space:
mode:
Diffstat (limited to 'webapp/src/app/pages/sdks')
-rw-r--r--webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html48
-rw-r--r--webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss47
-rw-r--r--webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts35
-rw-r--r--webapp/src/app/pages/sdks/sdks.component.html26
-rw-r--r--webapp/src/app/pages/sdks/sdks.component.scss83
-rw-r--r--webapp/src/app/pages/sdks/sdks.component.ts35
-rw-r--r--webapp/src/app/pages/sdks/sdks.module.ts22
7 files changed, 296 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)
+ );
+ }
+}
+
diff --git a/webapp/src/app/pages/sdks/sdks.component.html b/webapp/src/app/pages/sdks/sdks.component.html
new file mode 100644
index 0000000..adfd924
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdks.component.html
@@ -0,0 +1,26 @@
+<div class="row">
+ <div class="col-12">
+ <nb-card-body>
+ <div class="col-9">
+ <nb-actions size="medium">
+ <nb-action>
+ <button (click)="add()">
+ <i class="nb-plus"></i>
+ <span>Add new SDK</span>
+ </button>
+ </nb-action>
+ </nb-actions>
+ </div>
+ <div class="col-3 right">
+ <nb-actions size="medium">
+ <nb-action>
+ <nb-search type="rotate-layout"></nb-search>
+ </nb-action>
+ </nb-actions>
+ </div>
+ </nb-card-body>
+ </div>
+ <div class="col-md-12 col-lg-12 col-xxxl-6" *ngFor="let sdk of (sdks$ | async)">
+ <xds-sdk-card [sdk]="sdk"></xds-sdk-card>
+ </div>
+</div>
diff --git a/webapp/src/app/pages/sdks/sdks.component.scss b/webapp/src/app/pages/sdks/sdks.component.scss
new file mode 100644
index 0000000..3631fbb
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdks.component.scss
@@ -0,0 +1,83 @@
+@import '../../@theme/styles/themes';
+@import '~@nebular/theme/components/card/card.component.theme';
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/bootstrap/breakpoints';
+@include nb-install-component() {
+ nb-card-body {
+ display: flex;
+ align-items: center;
+ }
+ .action-groups-header {
+ flex-basis: 20%;
+ color: nb-theme(card-header-fg-heading);
+ font-family: nb-theme(card-header-font-family);
+ font-size: nb-theme(card-header-font-size);
+ font-weight: nb-theme(card-header-font-weight);
+ }
+ .nb-actions {
+ flex-basis: 80%;
+ }
+ .right {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ order: 1;
+ flex-direction: row-reverse;
+ }
+ nb-actions>nb-action {
+ padding: 0;
+ }
+ nb-action {
+ i {
+ color: nb-theme(color-fg);
+ font-size: 2.5rem;
+ margin-right: 1rem;
+ }
+ span {
+ font-family: nb-theme(font-secondary);
+ font-weight: nb-theme(font-weight-bold);
+ color: nb-theme(color-fg-heading);
+ text-transform: uppercase;
+ }
+ button {
+ margin: 0 auto;
+ padding: 0;
+ cursor: pointer;
+ border: none;
+ background: none;
+ display: flex;
+ align-items: center;
+ &:focus {
+ box-shadow: none;
+ outline: none;
+ }
+ }
+ }
+ @include media-breakpoint-down(md) {
+ nb-actions nb-action {
+ padding: 0 0.75rem;
+ }
+ }
+ @include media-breakpoint-down(sm) {
+ nb-card-body {
+ padding: 1rem;
+ }
+ nb-action {
+ font-size: 0.75rem;
+ i {
+ font-size: 2rem;
+ margin-right: 0.5rem;
+ }
+ }
+ }
+ @include media-breakpoint-down(is) {
+ nb-action i {
+ font-size: 1.75rem;
+ margin: 0;
+ }
+ span {
+ display: none;
+ }
+ }
+}
diff --git a/webapp/src/app/pages/sdks/sdks.component.ts b/webapp/src/app/pages/sdks/sdks.component.ts
new file mode 100644
index 0000000..3208121
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdks.component.ts
@@ -0,0 +1,35 @@
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+//import { SdkAddModalComponent } from './sdk-add-modal/sdk-add-modal.component';
+
+import { SdkService, ISdk } from '../../@core-xds/services/sdk.service';
+
+@Component({
+ selector: 'xds-sdks',
+ styleUrls: ['./sdks.component.scss'],
+ templateUrl: './sdks.component.html',
+})
+export class SdksComponent implements OnInit {
+
+ sdks$: Observable<ISdk[]>;
+ sdks: ISdk[];
+
+ constructor(
+ private sdkSvr: SdkService,
+ private modalService: NgbModal,
+ ) {
+ }
+
+ ngOnInit() {
+ this.sdks$ = this.sdkSvr.Sdks$;
+ }
+
+ add() {
+ /* SEB TODO
+ const activeModal = this.modalService.open(SdkAddModalComponent, { size: 'lg', container: 'nb-layout' });
+ activeModal.componentInstance.modalHeader = 'Large Modal';
+ */
+ }
+}
diff --git a/webapp/src/app/pages/sdks/sdks.module.ts b/webapp/src/app/pages/sdks/sdks.module.ts
new file mode 100644
index 0000000..48629f6
--- /dev/null
+++ b/webapp/src/app/pages/sdks/sdks.module.ts
@@ -0,0 +1,22 @@
+import { NgModule } from '@angular/core';
+import { ThemeModule } from '../../@theme/theme.module';
+
+import { SdksComponent } from './sdks.component';
+import { SdkCardComponent } from './sdk-card/sdk-card.component';
+//import { SdkAddModalComponent } from './sdk-add-modal/sdk-add-modal.component';
+
+
+@NgModule({
+ imports: [
+ ThemeModule,
+ ],
+ declarations: [
+ SdksComponent,
+ SdkCardComponent,
+ //SdkAddModalComponent,
+ ],
+ entryComponents: [
+ //SdkAddModalComponent
+ ],
+})
+export class SdksModule { }