diff options
Diffstat (limited to 'webapp/src/app/pages/targets/target-card')
3 files changed, 190 insertions, 0 deletions
diff --git a/webapp/src/app/pages/targets/target-card/target-card.component.html b/webapp/src/app/pages/targets/target-card/target-card.component.html new file mode 100644 index 0000000..7c921b1 --- /dev/null +++ b/webapp/src/app/pages/targets/target-card/target-card.component.html @@ -0,0 +1,62 @@ +<nb-card class="xds-targets"> + <nb-card-header> + + <div class="row"> + <div class="col-12 col-md-8"> + {{ target.name }} + </div> + <div class="col-6 col-md-4 text-right" role="group"> + <button class="btn btn-outline-danger btn-tn btn-xds" (click)="delete(target)"> + <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>Target ID</span> + </th> + <td>{{ target.id }}</td> + </tr> + <tr> + <th> + <span class="fa fa-fw fa-exchange"></span> + <span>Type</span> + </th> + <td>{{ target.type | readableType }}</td> + </tr> + <tr> + <th> + <span class="fa fa-fw fa-folder-open-o"></span> + <span>IP</span> + </th> + <td>{{ target.ip }}</td> + </tr> + <tr> + <th> + <span class="fa fa-fw fa-flag"></span> + <span>Status</span> + </th> + <td>{{ target.status }}</td> + </tr> + <tr> + <th> + <span class="fa fa-fw fa-folder-open-o"></span> + <span>Terminals</span> + </th> + <td>{{ target.terms.length }}</td> + </tr> + + </tbody> + </table> + </nb-card-body> + + <nb-card-footer> + <!-- <pre>{{target | json}}</pre> --> + </nb-card-footer> +</nb-card> diff --git a/webapp/src/app/pages/targets/target-card/target-card.component.scss b/webapp/src/app/pages/targets/target-card/target-card.component.scss new file mode 100644 index 0000000..6ac8d11 --- /dev/null +++ b/webapp/src/app/pages/targets/target-card/target-card.component.scss @@ -0,0 +1,41 @@ +@import '~@nebular/theme/styles/global/bootstrap/buttons'; + +.xds-project-card .icon { + padding: 0.75rem 0; + font-size: 1.75rem; +} + +nb-card-body { + padding: 0; +} + +nb-card-footer { + text-align: right; +} + +.fa-size-x2 { + font-size: 20px; +} + +th span { + font-weight: 100; +} + +th label { + font-weight: 100; + margin-bottom: 0; +} + +.btn-outline-danger.btn-xds { + color: #ff4c6a; + &:focus { + color: white; + } +} + +.btn-outline-info.btn-xds { + color: #4ca6ff; + &:focus { + color: white; + } +} diff --git a/webapp/src/app/pages/targets/target-card/target-card.component.ts b/webapp/src/app/pages/targets/target-card/target-card.component.ts new file mode 100644 index 0000000..6d43260 --- /dev/null +++ b/webapp/src/app/pages/targets/target-card/target-card.component.ts @@ -0,0 +1,87 @@ +/** +* @license +* Copyright (C) 2018 "IoT.bzh" +* Author Sebastien Douheret <sebastien@iot.bzh> +* +* Licensed under the Apache License, Version 2.0 (the "License"); +* you may not use this file except in compliance with the License. +* You may obtain a copy of the License at +* +* http://www.apache.org/licenses/LICENSE-2.0 +* +* Unless required by applicable law or agreed to in writing, software +* distributed under the License is distributed on an "AS IS" BASIS, +* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +* See the License for the specific language governing permissions and +* limitations under the License. +*/ + +import { Component, Input, Pipe, PipeTransform } from '@angular/core'; +import { TargetService, ITarget, TargetType, TargetTypeEnum, TargetTypes } from '../../../@core-xds/services/target.service'; +import { AlertService } from '../../../@core-xds/services/alert.service'; +import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; +import { ConfirmModalComponent, EType } from '../../confirm/confirm-modal/confirm-modal.component'; +import { find } from 'rxjs/operator/find'; +import { findIndex } from 'rxjs/operator/findIndex'; + +@Component({ + selector: 'xds-target-card', + styleUrls: ['./target-card.component.scss'], + templateUrl: './target-card.component.html', +}) +export class TargetCardComponent { + + // FIXME workaround of https://github.com/angular/angular-cli/issues/2034 + // should be removed with angular 5 + // @Input() target: ITarget; + @Input() target = <ITarget>null; + + constructor( + private alert: AlertService, + private targetSvr: TargetService, + private modalService: NgbModal, + ) { + } + + delete(tgt: ITarget) { + + const modal = this.modalService.open(ConfirmModalComponent, { + size: 'lg', + backdrop: 'static', + container: 'nb-layout', + }); + modal.componentInstance.title = 'Confirm SDK deletion'; + modal.componentInstance.type = EType.YesNo; + modal.componentInstance.question = ` + Do you <b>permanently delete '` + tgt.name + `'</b> target ? + <br><br> + <i><small>(Target ID: ` + tgt.id + ` )</small></i>`; + + modal.result + .then(res => { + if (res === 'yes') { + this.targetSvr.delete(tgt).subscribe( + r => { }, + err => this.alert.error('ERROR delete: ' + err), + ); + } + }); + + } + +} + +// Make Target type human readable +@Pipe({ + name: 'readableType', +}) + +export class TargetReadableTypePipe implements PipeTransform { + transform(type: TargetTypeEnum): string { + const tt = TargetTypes.find(el => type === el.value); + if (tt) { + return tt.display; + } + return String(type); + } +} |