diff options
Diffstat (limited to 'webapp/src/app/pages/sdks')
-rw-r--r-- | webapp/src/app/pages/sdks/sdk-card/sdk-card.component.html | 48 | ||||
-rw-r--r-- | webapp/src/app/pages/sdks/sdk-card/sdk-card.component.scss | 47 | ||||
-rw-r--r-- | webapp/src/app/pages/sdks/sdk-card/sdk-card.component.ts | 35 | ||||
-rw-r--r-- | webapp/src/app/pages/sdks/sdks.component.html | 26 | ||||
-rw-r--r-- | webapp/src/app/pages/sdks/sdks.component.scss | 83 | ||||
-rw-r--r-- | webapp/src/app/pages/sdks/sdks.component.ts | 35 | ||||
-rw-r--r-- | webapp/src/app/pages/sdks/sdks.module.ts | 22 |
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> + <span>SDK ID</span> + </th> + <td>{{ sdk.id }}</td> + </tr> + <tr> + <th><span class="fa fa-fw fa-user"></span> <span>Profile</span></th> + <td>{{ sdk.profile }}</td> + </tr> <tr> + <th><span class="fa fa-fw fa-tasks"></span> <span>Architecture</span></th> + <td>{{ sdk.arch }}</td> + </tr> + <tr> + <th><span class="fa fa-fw fa-code-fork"></span> <span>Version</span></th> + <td>{{ sdk.version }}</td> + </tr> + <tr> + <th><span class="fa fa-fw fa-folder-open-o"></span> <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 { } |