Add user metadata details.

This commit is contained in:
Spencer Ofwiti 2020-11-25 11:00:53 +03:00
parent b20c6f21fb
commit f34894e80a
10 changed files with 284 additions and 0 deletions

View File

@ -0,0 +1,64 @@
<!-- Begin page -->
<div class="wrapper">
<app-sidebar></app-sidebar>
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div id="content">
<app-topbar></app-topbar>
<!-- Start Content-->
<div class="container-fluid" appMenuSelection>
<div class="card text-center">
<div class="card-header bg-dark text-white">
<strong>USER DETAILS</strong>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-6">
<h4>Platform: </h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<p>Address: {{user.key.ethereum[1]}}</p>
</li>
<li class="list-group-item">
<p>
Selling: {{user.selling}}
</p>
</li>
<li class="list-group-item">
<p>Location: </p>
<p>Latitude: {{user.location.latitude}}</p>
<p>Longitude: {{user.location.longitude}}</p>
</li>
<li class="list-group-item">
<p>Date registered: {{user.dateRegistered}}</p>
</li>
</ul>
</div>
<div class="col-md-6">
<h4>V Card: </h4>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<p>Name: {{parsedVcard['fn']}}</p>
</li>
<li class="list-group-item">
<p>Version: {{parsedVcard['version']}}</p>
</li>
<li class="list-group-item">
<p>Tel: {{parsedVcard['tel'][0]['meta']['TYP']}} : {{parsedVcard['tel'][0]['value'][0]}}</p>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>

View File

@ -0,0 +1,76 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UserDetailsComponent } from './user-details.component';
import {ActivatedRouteStub, FooterStubComponent, SidebarStubComponent, TopbarStubComponent, UserServiceStub} from '../../../../testing';
import {ActivatedRoute} from '@angular/router';
import {HttpClient} from '@angular/common/http';
import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
import {UserService} from '../../../_services';
describe('UserDetailsComponent', () => {
let component: UserDetailsComponent;
let fixture: ComponentFixture<UserDetailsComponent>;
let httpClient: HttpClient;
let httpTestingController: HttpTestingController;
let route: ActivatedRouteStub;
beforeEach(async () => {
route = new ActivatedRouteStub();
route.setParamMap({ id: 'test' });
await TestBed.configureTestingModule({
declarations: [
UserDetailsComponent,
FooterStubComponent,
SidebarStubComponent,
TopbarStubComponent
],
imports: [HttpClientTestingModule],
providers: [
{ provide: ActivatedRoute, useValue: route },
{ provide: UserService, useClass: UserServiceStub }
]
})
.compileComponents();
httpClient = TestBed.inject(HttpClient);
httpTestingController = TestBed.inject(HttpTestingController);
});
beforeEach(() => {
fixture = TestBed.createComponent(UserDetailsComponent);
component = fixture.componentInstance;
component.user = {
dateRegistered: 1595537208,
key: {
ethereum: [
'0x51d3c8e2e421604e2b644117a362d589c5434739',
'0x9D7c284907acbd4a0cE2dDD0AA69147A921a573D'
]
},
location: {
external: {},
latitude: '22.430670',
longitude: '151.002995'
},
selling: [
'environment',
'health',
'transport'
],
vcard: {
fn: 'Test User',
tel: [{
meta: {TYP: 'CELL'},
value: ['25412345678']
}],
version: '3.0'
}
};
component.parsedVcard = component.user.vcard;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,45 @@
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, Params} from '@angular/router';
import {User, Phone} from 'cic-client-meta';
import {first} from 'rxjs/operators';
import {User as UserModel} from '../../../_models';
import {UserService} from '../../../_services';
import {parse} from '../../../../assets/js/parse-vcard';
@Component({
selector: 'app-user-details',
templateUrl: './user-details.component.html',
styleUrls: ['./user-details.component.scss']
})
export class UserDetailsComponent implements OnInit {
user: UserModel;
vcard: any;
parsedVcard: any;
constructor(
private route: ActivatedRoute,
private userService: UserService
) {
this.route.paramMap.subscribe(
(params: Params) => {
this.getUser(params.get('id')).then();
// console.log(Phone.toKey(25412341234));
// console.log(User.toKey('0x9D7c284907acD0AA69147A9bd4a0cE2dD21a573D'));
}
);
}
ngOnInit(): void {
}
async getUser(address: string): Promise<void> {
this.userService.getUser(await User.toKey(address)).pipe(first()).subscribe(res => {
console.log(res);
this.user = res;
this.vcard = atob(res.vcard);
this.parsedVcard = parse(this.vcard);
}, error => {
console.log(error);
});
}
}

View File

@ -0,0 +1,16 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { UsersComponent } from './users.component';
import {UserDetailsComponent} from './user-details/user-details.component';
const routes: Routes = [
{ path: '', component: UsersComponent },
{ path: ':id', component: UserDetailsComponent }
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class UsersRoutingModule { }

View File

@ -0,0 +1,25 @@
<!-- Begin page -->
<div class="wrapper">
<app-sidebar></app-sidebar>
<!-- ============================================================== -->
<!-- Start Page Content here -->
<!-- ============================================================== -->
<div id="content">
<app-topbar></app-topbar>
<!-- Start Content-->
<div class="container-fluid" appMenuSelection>
<div class="container">
<div class="row mt-5">
<h2>Users</h2>
</div>
</div>
</div>
<app-footer appMenuSelection></app-footer>
</div>
<!-- ============================================================== -->
<!-- End Page content -->
<!-- ============================================================== -->
</div>

View File

View File

@ -0,0 +1,25 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { UsersComponent } from './users.component';
describe('UsersComponent', () => {
let component: UsersComponent;
let fixture: ComponentFixture<UsersComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ UsersComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(UsersComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-users',
templateUrl: './users.component.html',
styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}

View File

@ -0,0 +1,18 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UsersRoutingModule } from './users-routing.module';
import { UsersComponent } from './users.component';
import { UserDetailsComponent } from './user-details/user-details.component';
import {SharedModule} from '../../shared/shared.module';
@NgModule({
declarations: [UsersComponent, UserDetailsComponent],
imports: [
CommonModule,
UsersRoutingModule,
SharedModule
]
})
export class UsersModule { }