diff options
Diffstat (limited to 'src/app/identity-page/identity-page.component.html')
| -rw-r--r-- | src/app/identity-page/identity-page.component.html | 73 |
1 files changed, 30 insertions, 43 deletions
diff --git a/src/app/identity-page/identity-page.component.html b/src/app/identity-page/identity-page.component.html index 4eeb8da..fe72dc1 100644 --- a/src/app/identity-page/identity-page.component.html +++ b/src/app/identity-page/identity-page.component.html | |||
| @@ -1,51 +1,38 @@ | |||
| 1 | <div *ngIf="is_displayed"> | 1 | <div *ngIf="is_displayed"> |
| 2 | <div class="o-grid"> | 2 | <div class="o-grid"> |
| 3 | <div class="o-grid__col u-1/2"> | 3 | <create-identity-component class="o-grid__col u-1/2"></create-identity-component> |
| 4 | <create-identity-component></create-identity-component> | 4 | <div class="o-grid__col u-1/2"> |
| 5 | </div> | 5 | <div class="c-card c-card--no-padding u-p-x3"> |
| 6 | <div class="o-grid__col u-1/2"> | 6 | <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Search</h1> |
| 7 | <div class="c-card c-card--no-padding u-p-x3"> | 7 | <div class=""> |
| 8 | <div class="o-type-20 u-pb-x1" >Search</div> | 8 | <p class="u-color-grey">Search Input:</p> |
| 9 | <div class=""> | 9 | <input #myInput class="c-input u-2/2" placeholder="e.g. Name, ID, ..." [(ngModel)]="name" (input)="filterItem(myInput.value)"/> |
| 10 | <input #myInput class="c-input u-2/2" placeholder="Search" [(ngModel)]="name" (input)="filterItem(myInput.value)"/> | 10 | </div> |
| 11 | </div> | 11 | </div> |
| 12 | </div> | 12 | </div> |
| 13 | </div> | 13 | </div> |
| 14 | </div> | ||
| 15 | |||
| 16 | <div class="c-card u-mt-x2"> | ||
| 17 | <table class=" u-2/2 c-table"> | ||
| 18 | <tr> | ||
| 19 | <th class="u-text-center">Type</th> | ||
| 20 | <th>Name</th> | ||
| 21 | <th>ID</th> | ||
| 22 | <th class="u-text-center">Rename</th> | ||
| 23 | <th class="u-text-center">Delete</th> | ||
| 24 | </tr> | ||
| 25 | <tr *ngIf="request"> | ||
| 26 | <td class="u-text-center"><div class="c-spinner"></div></td> | ||
| 27 | <td class="u-text-center"><div class="c-spinner"></div></td> | ||
| 28 | <td class="u-text-center"><div class="c-spinner"></div></td> | ||
| 29 | <td class="u-text-center"><div class="c-spinner"></div></td> | ||
| 30 | <td class="u-text-center"><div class="c-spinner"></div></td> | ||
| 31 | </tr> | ||
| 32 | <tr *ngFor="let identity of filteredItems"> | ||
| 33 | <td class="u-text-center"><span class="fa fa-user o-type-20" *ngIf="identity.type == 'ego'"></span></td> | ||
| 34 | <td> | ||
| 35 | <span class="">{{identity.name}}</span> | ||
| 36 | </td> | ||
| 37 | <td>{{identity.id}}</td> | ||
| 38 | <td class="u-text-center"><a class="c-button c-button--rename" (click)="onClickRename(identity)"><i class="fa fa-pencil"></i></a></td> | ||
| 39 | <td class="u-text-center"><a class="c-button c-button--danger" (click)="onClickDelete(identity)"><i class="fa fa-trash"></i></a></td> | ||
| 40 | </tr> | ||
| 41 | </table> | ||
| 42 | </div> | ||
| 43 | </div> | ||
| 44 | 14 | ||
| 15 | <div *ngIf="request" class="u-text-center u-m-x3"> | ||
| 16 | <div class="c-spinner"></div> | ||
| 17 | </div> | ||
| 18 | <div class="u-mv-x1" *ngFor="let identity of filteredItems"> | ||
| 19 | <div class="c-card c-card--no-padding u-p-x1"> | ||
| 20 | <div class="o-grid"> | ||
| 21 | <div class="o-grid__col u-1/12"><div class="c-circle" [ngStyle]="{'background-color': returnHSL(identity.id)}">{{identity.name | slice:0:1 | uppercase}}</div></div> | ||
| 22 | <div class="o-grid__col u-9/12"> | ||
| 23 | <p class="u-color-grey">Public Key: <span class="">{{identity.id}}</span></p> | ||
| 24 | <span class="o-type-20">{{identity.name}}</span> | ||
| 25 | </div> | ||
| 26 | <div class="o-grid__col u-1/12"><p class="u-color-grey">Rename</p><a class="c-button c-button--rename" (click)="onClickRename(identity)"><i class="fa fa-pencil"></i></a></div> | ||
| 27 | <div class="o-grid__col u-1/12"><p class="u-color-grey">Delete</p><a class="c-button c-button--danger" (click)="onClickDelete(identity)"><i class="fa fa-trash"></i></a></div> | ||
| 28 | </div> | ||
| 29 | </div> | ||
| 30 | </div> | ||
| 31 | </div> | ||
| 45 | 32 | ||
| 46 | <div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename"> | 33 | <div class="c-card u-p-x3 u-mt-x2" *ngIf="this.rename"> |
| 47 | <div class="o-type-20 u-pb-x1" >Rename</div> | 34 | <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Rename</h1> |
| 48 | <div class="u-color-grey">ID: <span>{{changeIdentity.id}}</span></div> | 35 | <div class="u-color-grey">Public Key: <span>{{changeIdentity.id}}</span></div> |
| 49 | <div> | 36 | <div> |
| 50 | <span class="u-mr-x2"><span class="u-mr-x3">Name: </span><input class="c-input" placeholder="Change Name" [(ngModel)]="changeIdentity.name"/></span> | 37 | <span class="u-mr-x2"><span class="u-mr-x3">Name: </span><input class="c-input" placeholder="Change Name" [(ngModel)]="changeIdentity.name"/></span> |
| 51 | <a class="c-button" (click)="onRename(changeIdentity)">Rename</a> | 38 | <a class="c-button" (click)="onRename(changeIdentity)">Rename</a> |
| @@ -54,8 +41,8 @@ | |||
| 54 | </div> | 41 | </div> |
| 55 | 42 | ||
| 56 | <div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete"> | 43 | <div class="c-card u-p-x3 u-mt-x2" *ngIf="this.delete"> |
| 57 | <div class="o-type-20 u-pb-x1" >Rename</div> | 44 | <h1 class="o-type-22 u-pb-x1 u-color-primary-light" >Delete</h1> |
| 58 | <div >ID: <span>{{changeIdentity.id}}</span></div> | 45 | <div >Public Key: <span>{{changeIdentity.id}}</span></div> |
| 59 | <div >Name: <span>{{changeIdentity.name}}</span></div> | 46 | <div >Name: <span>{{changeIdentity.name}}</span></div> |
| 60 | <div> | 47 | <div> |
| 61 | <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a> | 48 | <a class="c-button" (click)="onDelete(changeIdentity.id)">Delete</a> |