webapp/src/app/projects/projectCard.component.ts

   1 import { Component, Input, Pipe, PipeTransform } from '@angular/core';
   2 import { ProjectService, IProject, ProjectType } from '../services/project.service';
   3 import { AlertService } from '../services/alert.service';
   4
   5 @Component({
   6     selector: 'xds-project-card',
   7     template: `
   8         <div class="row">
   9             <div class="col-xs-12">
  10                 <div class="text-right" role="group">
  11                     <button class="btn btn-link" (click)="delete(project)">
  12                         <span class="fa fa-trash fa-size-x2"></span>
  13                     </button>
  14                 </div>
  15             </div>
  16         </div>
  17
  18         <table class="table table-striped">
  19             <tbody>
  20             <tr>
  21                 <th><span class="fa fa-fw fa-id-badge"></span>&nbsp;<span>Project ID</span></th>
  22                 <td>{{ project.id }}</td>
  23             </tr>
  24             <tr>
  25                 <th><span class="fa fa-fw fa-exchange"></span>&nbsp;<span>Sharing type</span></th>
  26                 <td>{{ project.type | readableType }}</td>
  27             </tr>
  28             <tr>
  29                 <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Local path</span></th>
  30                 <td>{{ project.pathClient }}</td>
  31             </tr>
  32             <tr *ngIf="project.pathServer && project.pathServer != ''">
  33                 <th><span class="fa fa-fw fa-folder-open-o"></span>&nbsp;<span>Server path</span></th>
  34                 <td>{{ project.pathServer }}</td>
  35             </tr>
  36             <tr>
  37                 <th><span class="fa fa-fw fa-flag"></span>&nbsp;<span>Status</span></th>
  38                 <td>{{ project.status }} - {{ project.isInSync ? "Up to Date" : "Out of Sync"}}
  39                     <button *ngIf="!project.isInSync" class="btn btn-link" (click)="sync(project)">
  40                         <span class="fa fa-refresh fa-size-x2"></span>
  41                     </button>
  42                 </td>
  43             </tr>
  44             </tbody>
  45         </table >
  46     `,
  47     styleUrls: ['../config/config.component.css']
  48 })
  49
  50 export class ProjectCardComponent {
  51
  52     @Input() project: IProject;
  53
  54     constructor(
  55         private alert: AlertService,
  56         private projectSvr: ProjectService
  57     ) {
  58     }
  59
  60     delete(prj: IProject) {
  61         this.projectSvr.Delete(prj)
  62             .subscribe(res => {
  63             }, err => {
  64                 this.alert.error('Delete ERROR: ' + err);
  65             });
  66     }
  67
  68     sync(prj: IProject) {
  69         this.projectSvr.Sync(prj)
  70             .subscribe(res => {
  71             }, err => {
  72                 this.alert.error('ERROR: ' + err);
  73             });
  74     }
  75
  76 }
  77
  78 // Remove APPS. prefix if translate has failed
  79 @Pipe({
  80     name: 'readableType'
  81 })
  82
  83 export class ProjectReadableTypePipe implements PipeTransform {
  84     transform(type: ProjectType): string {
  85         switch (type) {
  86             case ProjectType.NATIVE_PATHMAP: return 'Native (path mapping)';
  87             case ProjectType.SYNCTHING: return 'Cloud (Syncthing)';
  88             default: return String(type);
  89         }
  90     }
  91 }