updates
This commit is contained in:
parent
4fc6736133
commit
4827fdb1b9
|
@ -6,6 +6,8 @@ namespace api.Dtos
|
|||
public class UserForDetailedDto
|
||||
{
|
||||
public string FullName {get;set;}
|
||||
|
||||
public string Username{get;set;}
|
||||
public string Gender {get;set;}
|
||||
public int Age{get;set;}
|
||||
public int Phone{get;set;}
|
||||
|
|
|
@ -4,6 +4,8 @@ namespace api.Dtos
|
|||
{
|
||||
public class UserForListDto
|
||||
{
|
||||
public int Id{get;set;}
|
||||
public string Username{get;set;}
|
||||
public string FullName {get;set;}
|
||||
public string Gender {get;set;}
|
||||
public int Age{get;set;}
|
||||
|
@ -18,5 +20,6 @@ namespace api.Dtos
|
|||
public string PhotoUrl{get;set;}
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
BIN
api/api.db
BIN
api/api.db
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -1,5 +1,5 @@
|
|||
|
||||
<body class="layout-top-nav skin-green ">
|
||||
<body class="layout-top-nav skin-red ">
|
||||
<div class="wrapper">
|
||||
|
||||
<router-outlet></router-outlet>
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import { BrowserModule } from '@angular/platform-browser';
|
||||
import { NgModule } from '@angular/core';
|
||||
import { NgxAdminLteModule } from 'ngx-admin-lte';
|
||||
import { JwtModule } from '@auth0/angular-jwt';
|
||||
|
||||
|
||||
|
||||
import { AppComponent } from './app.component';
|
||||
|
@ -12,16 +13,23 @@ import { FormsModule } from '@angular/forms';
|
|||
import { AuthService } from './services/auth.service';
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { ProfileComponent } from './profile/profile.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { Router, RouterModule } from '@angular/router';
|
||||
import { appRoutes } from './routes';
|
||||
import { AuthGuard } from './guards/auth.guard';
|
||||
import { NavigationComponent } from './navigation/navigation.component';
|
||||
import { CalendarComponent } from './calendar/calendar.component';
|
||||
import { UserService } from './services/user.service';
|
||||
import { UsersModule } from './admin/users/users.module';
|
||||
import { UsersComponent } from './admin/users/users.component';
|
||||
import { UserComponent } from './admin/users/user/user.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { UsersListComponent } from './users/usersList/usersList.component';
|
||||
import {User} from './models/user';
|
||||
import { UserComponent } from './users/user/user.component';
|
||||
import { FooterComponent } from './footer/footer.component';
|
||||
|
||||
|
||||
export function tokenGetter() {
|
||||
return localStorage.getItem('token');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
|
@ -29,18 +37,24 @@ import { UserComponent } from './admin/users/user/user.component';
|
|||
LoginComponent,
|
||||
DashboardComponent,
|
||||
ProfileComponent,
|
||||
HomeComponent,
|
||||
NavigationComponent,
|
||||
CalendarComponent,
|
||||
UsersComponent,
|
||||
UserComponent
|
||||
HomeComponent,
|
||||
UsersListComponent,
|
||||
UserComponent,
|
||||
FooterComponent
|
||||
],
|
||||
imports: [
|
||||
BrowserModule,
|
||||
NgxAdminLteModule,
|
||||
HttpClientModule,
|
||||
FormsModule,
|
||||
RouterModule.forRoot(appRoutes)
|
||||
RouterModule.forRoot(appRoutes),
|
||||
JwtModule.forRoot({
|
||||
config: {
|
||||
tokenGetter: tokenGetter,
|
||||
whitelistedDomains: ['localhost:5000'],
|
||||
blacklistedRoutes: ['localhost/login']
|
||||
}
|
||||
})
|
||||
],
|
||||
providers: [
|
||||
AuthService,
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
.qr_code
|
||||
{
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
.qr_code img{
|
||||
width:100%;
|
||||
|
||||
}
|
File diff suppressed because it is too large
Load Diff
|
@ -1,22 +1,34 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { Router } from '@angular/router';
|
||||
import { User } from '../models/user';
|
||||
import { UserService } from '../services/user.service';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
import { JwtHelperService } from '@auth0/angular-jwt';
|
||||
|
||||
@Component({
|
||||
selector: 'app-dashboard',
|
||||
selector: 'app-user',
|
||||
templateUrl: './dashboard.component.html',
|
||||
styleUrls: ['./dashboard.component.css']
|
||||
})
|
||||
export class DashboardComponent implements OnInit {
|
||||
|
||||
constructor(private router: Router) { }
|
||||
|
||||
nome = 'henrique';
|
||||
user: User;
|
||||
jwtHelper = new JwtHelperService();
|
||||
decodedToken: any;
|
||||
constructor(private userService: UserService, private route: ActivatedRoute) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUser();
|
||||
}
|
||||
|
||||
teste() {
|
||||
console.log('putas');
|
||||
this.router.navigate(['profile']);
|
||||
// members/...
|
||||
loadUser() {
|
||||
this.decodedToken = this.jwtHelper.decodeToken(localStorage.getItem('token'));
|
||||
|
||||
this.userService.getUser(+this.decodedToken['nameid']).subscribe((user: User) => {
|
||||
this.user = user;
|
||||
}, error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -0,0 +1,7 @@
|
|||
<footer class="main-footer">
|
||||
<div class="pull-right hidden-xs">
|
||||
<b>Version</b> 2.4.0
|
||||
</div>
|
||||
<strong>Copyright © 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
|
||||
reserved.
|
||||
</footer>
|
|
@ -0,0 +1,28 @@
|
|||
/* tslint:disable:no-unused-variable */
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { FooterComponent } from './footer.component';
|
||||
|
||||
describe('FooterComponent', () => {
|
||||
let component: FooterComponent;
|
||||
let fixture: ComponentFixture<FooterComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ FooterComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(FooterComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-footer',
|
||||
templateUrl: './footer.component.html',
|
||||
styleUrls: ['./footer.component.css']
|
||||
})
|
||||
export class FooterComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,3 @@
|
|||
<p>
|
||||
home works!
|
||||
</p>
|
|
@ -0,0 +1,28 @@
|
|||
/* tslint:disable:no-unused-variable */
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { HomeComponent } from './home.component';
|
||||
|
||||
describe('HomeComponent', () => {
|
||||
let component: HomeComponent;
|
||||
let fixture: ComponentFixture<HomeComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ HomeComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(HomeComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,15 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-home',
|
||||
templateUrl: './home.component.html',
|
||||
styleUrls: ['./home.component.css']
|
||||
})
|
||||
export class HomeComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
|
@ -12,5 +12,9 @@ export interface User {
|
|||
country: string;
|
||||
photos ?: Photo[];
|
||||
fullName: string;
|
||||
about: string;
|
||||
profileIcon: string;
|
||||
university: string;
|
||||
degree: string;
|
||||
|
||||
}
|
||||
|
|
|
@ -1,5 +1,10 @@
|
|||
.user-image
|
||||
.qr_code
|
||||
{
|
||||
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
.qr_code img{
|
||||
width:100%;
|
||||
|
||||
}
|
|
@ -1,6 +1,5 @@
|
|||
|
||||
|
||||
|
||||
<header class="main-header">
|
||||
<nav class="navbar navbar-static-top">
|
||||
<div class="container">
|
||||
|
@ -14,11 +13,11 @@
|
|||
<!-- Collect the nav links, forms, and other content for toggling -->
|
||||
<div class="collapse navbar-collapse pull-left" id="navbar-collapse">
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-dashboard"></i> Dashboard <span class="sr-only">(current)</span></a></li>
|
||||
<li><a routerLink="/dashboard" routerLinkActive="active"><i class="fa fa-dashboard"></i> Dashboard <span class="sr-only">(current)</span></a></li>
|
||||
<li class="dropdown">
|
||||
<a href="dashboard/#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i> Users<span class="caret"></span></a>
|
||||
<a href="dashboard/#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-users"></i> Utilizadores<span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" role="menu">
|
||||
<li><a routerLink="../dashboard" > Dashboard</a></li>
|
||||
<li><a routerLink="../users" > Lista completa</a></li>
|
||||
<li><a href="#">User</a></li>
|
||||
<li class="divider"></li>
|
||||
<li><a href="#">Separated link</a></li>
|
||||
|
@ -62,7 +61,7 @@
|
|||
<a href="#">
|
||||
<div class="pull-left">
|
||||
<!-- User Image -->
|
||||
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
|
||||
<img src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" class="img-circle" alt="User Image">
|
||||
</div>
|
||||
<!-- Message title and timestamp -->
|
||||
<h4>
|
||||
|
@ -146,14 +145,14 @@
|
|||
<!-- Menu Toggle Button -->
|
||||
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
|
||||
<!-- The user image in the navbar-->
|
||||
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
|
||||
<img src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" class="user-image" alt="User Image">
|
||||
<!-- hidden-xs hides the username on small devices so only the image appears. -->
|
||||
<span class="hidden-xs">{{nome}}</span>
|
||||
</a>
|
||||
<ul class="dropdown-menu">
|
||||
<!-- The user image in the menu -->
|
||||
<li class="user-header">
|
||||
<img src="http://localhost:5000/dist/img/user2-160x160.jpg" class="img-circle" alt="User Image">
|
||||
<img src="https://preview.ibb.co/e1XO0U/Webp_net_compress_image_1.jpg" class="img-circle" alt="User Image">
|
||||
|
||||
<p>
|
||||
Henrique Dias
|
||||
|
|
|
@ -1,35 +1,32 @@
|
|||
import {Routes} from '@angular/router';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
|
||||
import { DashboardComponent } from './dashboard/dashboard.component';
|
||||
import { LoginComponent } from './login/login.component';
|
||||
import { ProfileComponent } from './profile/profile.component';
|
||||
import { AuthGuard } from './guards/auth.guard';
|
||||
import { CalendarComponent } from './calendar/calendar.component';
|
||||
import { AdminComponent } from './admin/admin.component';
|
||||
import { UsersComponent } from './admin/users/users.component';
|
||||
import { UserComponent } from './admin/users/user/user.component';
|
||||
import { HomeComponent } from './home/home.component';
|
||||
import { UsersListComponent } from './users/usersList/usersList.component';
|
||||
import { UserComponent } from './users/user/user.component';
|
||||
|
||||
|
||||
|
||||
|
||||
export const appRoutes: Routes = [
|
||||
{
|
||||
path: 'home',
|
||||
component: HomeComponent
|
||||
path: '',
|
||||
component: DashboardComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'admin',
|
||||
path: 'users',
|
||||
component: UsersListComponent,
|
||||
canActivate: [AuthGuard],
|
||||
children: [
|
||||
{
|
||||
path: 'users',
|
||||
component: UsersComponent,
|
||||
canActivate: [AuthGuard],
|
||||
},
|
||||
{
|
||||
path: 'user',
|
||||
component: UserComponent,
|
||||
canActivate: [AuthGuard],
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: 'user/:id',
|
||||
component: UserComponent,
|
||||
canActivate: [AuthGuard],
|
||||
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
|
@ -40,11 +37,6 @@ export const appRoutes: Routes = [
|
|||
component: ProfileComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'calendar',
|
||||
component: CalendarComponent,
|
||||
canActivate: [AuthGuard]
|
||||
},
|
||||
{
|
||||
path: 'dashboard',
|
||||
component: DashboardComponent,
|
||||
|
@ -52,7 +44,7 @@ export const appRoutes: Routes = [
|
|||
},
|
||||
{
|
||||
path: '**',
|
||||
redirectTo: 'dashboard',
|
||||
redirectTo: 'home',
|
||||
pathMatch: 'full'
|
||||
}
|
||||
];
|
||||
|
|
|
@ -4,12 +4,6 @@ import { HttpClient, HttpHeaders } from '@angular/common/http';
|
|||
import { Observable } from 'rxjs/';
|
||||
import { User } from '../models/user';
|
||||
|
||||
const httpOptions = {
|
||||
headers: new HttpHeaders({
|
||||
'Authorization': 'Bearer ' + localStorage.getItem('token')
|
||||
})
|
||||
};
|
||||
|
||||
@Injectable()
|
||||
export class UserService {
|
||||
|
||||
|
@ -19,12 +13,12 @@ export class UserService {
|
|||
|
||||
getUsers(): Observable<User[]> {
|
||||
|
||||
return this.http.get<User[]>(this.baseUrl + 'users', httpOptions);
|
||||
return this.http.get<User[]>(this.baseUrl + 'users');
|
||||
}
|
||||
|
||||
getUser(id): Observable<User> {
|
||||
|
||||
return this.http.get<User>(this.baseUrl + 'users/' + id , httpOptions);
|
||||
return this.http.get<User>(this.baseUrl + 'users/' + id);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
.qr_code
|
||||
{
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 5%;
|
||||
}
|
||||
.qr_code img{
|
||||
width:100%;
|
||||
|
||||
}
|
|
@ -0,0 +1,360 @@
|
|||
<app-navigation></app-navigation>
|
||||
<!-- Content Wrapper. Contains page content -->
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-3">
|
||||
|
||||
<!-- Profile Image -->
|
||||
<div class="box box-primary">
|
||||
<div class="box-body box-profile">
|
||||
<img class="profile-user-img img-responsive img-circle" src="{{user.profileIcon}}" alt="User profile picture">
|
||||
|
||||
<h3 class="profile-username text-center">{{user.fullName}}</h3>
|
||||
|
||||
<p class="text-muted text-center">@{{user.username}}</p>
|
||||
|
||||
<div class="qr_code box"> <img src="https://preview.ibb.co/kpNOH9/qr_code.png" alt=""></div>
|
||||
|
||||
|
||||
<a href="#" class="btn btn-primary btn-block"><b><i class="fa fa-pencil" aria-hidden="true"></i> Editar informações pessoais</b></a>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
<!-- /.box -->
|
||||
|
||||
<!-- About Me Box -->
|
||||
<div class="box box-primary">
|
||||
<div class="box-header with-border">
|
||||
<h3 class="box-title">Sobre min</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body">
|
||||
<strong><i class="fa fa-book margin-r-5"></i> Estudos</strong>
|
||||
|
||||
<p class="text-muted">
|
||||
<strong>{{user.degree}}</strong>
|
||||
</p>
|
||||
<p>{{user.university}}</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<strong><i class="fa fa-map-marker margin-r-5"></i> Origem </strong>
|
||||
|
||||
<p class="text-muted">{{user.city}}, {{user.country}}</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<strong><i class="fa fa-pencil margin-r-5"></i> Skills</strong>
|
||||
|
||||
<p>
|
||||
<span class="label label-danger">UI Design</span>
|
||||
<span class="label label-success">Coding</span>
|
||||
<span class="label label-info">Javascript</span>
|
||||
<span class="label label-warning">PHP</span>
|
||||
<span class="label label-primary">Node.js</span>
|
||||
</p>
|
||||
|
||||
<hr>
|
||||
|
||||
<strong><i class="fa fa-file-text-o margin-r-5"></i> Sobre min: </strong>
|
||||
|
||||
<p>{{user.about}}</p>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
<!-- /.box -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-md-9">
|
||||
<div class="nav-tabs-custom">
|
||||
<ul class="nav nav-tabs">
|
||||
<li class="active"><a href="#activity" data-toggle="tab">Activity</a></li>
|
||||
<li><a href="#timeline" data-toggle="tab">Timeline</a></li>
|
||||
<li><a href="#settings" data-toggle="tab">Settings</a></li>
|
||||
</ul>
|
||||
<div class="tab-content">
|
||||
<div class="active tab-pane" id="activity">
|
||||
<!-- Post -->
|
||||
<div class="post">
|
||||
<div class="user-block">
|
||||
<img class="img-circle img-bordered-sm" src="assets/img/user1-128x128.jpg" alt="user image">
|
||||
<span class="username">
|
||||
<a href="#">Jonathan Burke Jr.</a>
|
||||
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
|
||||
</span>
|
||||
<span class="description">Shared publicly - 7:30 PM today</span>
|
||||
</div>
|
||||
<!-- /.user-block -->
|
||||
<p>
|
||||
Lorem ipsum represents a long-held tradition for designers,
|
||||
typographers and the like. Some people hate it and argue for
|
||||
its demise, but others ignore the hate as they create awesome
|
||||
tools to help create filler text for everyone from bacon lovers
|
||||
to Charlie Sheen fans.
|
||||
</p>
|
||||
<ul class="list-inline">
|
||||
<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
|
||||
<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
|
||||
</li>
|
||||
<li class="pull-right">
|
||||
<a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
|
||||
(5)</a></li>
|
||||
</ul>
|
||||
|
||||
<input class="form-control input-sm" type="text" placeholder="Type a comment">
|
||||
</div>
|
||||
<!-- /.post -->
|
||||
|
||||
<!-- Post -->
|
||||
<div class="post clearfix">
|
||||
<div class="user-block">
|
||||
<img class="img-circle img-bordered-sm" src="assets/img/user7-128x128.jpg" alt="User Image">
|
||||
<span class="username">
|
||||
<a href="#">Sarah Ross</a>
|
||||
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
|
||||
</span>
|
||||
<span class="description">Sent you a message - 3 days ago</span>
|
||||
</div>
|
||||
<!-- /.user-block -->
|
||||
<p>
|
||||
Lorem ipsum represents a long-held tradition for designers,
|
||||
typographers and the like. Some people hate it and argue for
|
||||
its demise, but others ignore the hate as they create awesome
|
||||
tools to help create filler text for everyone from bacon lovers
|
||||
to Charlie Sheen fans.
|
||||
</p>
|
||||
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group margin-bottom-none">
|
||||
<div class="col-sm-9">
|
||||
<input class="form-control input-sm" placeholder="Response">
|
||||
</div>
|
||||
<div class="col-sm-3">
|
||||
<button type="submit" class="btn btn-danger pull-right btn-block btn-sm">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.post -->
|
||||
|
||||
<!-- Post -->
|
||||
<div class="post">
|
||||
<div class="user-block">
|
||||
<img class="img-circle img-bordered-sm" src="assets/img/user6-128x128.jpg" alt="User Image">
|
||||
<span class="username">
|
||||
<a href="#">Adam Jones</a>
|
||||
<a href="#" class="pull-right btn-box-tool"><i class="fa fa-times"></i></a>
|
||||
</span>
|
||||
<span class="description">Posted 5 photos - 5 days ago</span>
|
||||
</div>
|
||||
<!-- /.user-block -->
|
||||
<div class="row margin-bottom">
|
||||
<div class="col-sm-6">
|
||||
<img class="img-responsive" src="assets/img/photo1.png" alt="Photo">
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-6">
|
||||
<div class="row">
|
||||
<div class="col-sm-6">
|
||||
<img class="img-responsive" src="assets/img/photo2.png" alt="Photo">
|
||||
<br>
|
||||
<img class="img-responsive" src="assets/img/photo3.jpg" alt="Photo">
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
<div class="col-sm-6">
|
||||
<img class="img-responsive" src="assets/img/photo4.jpg" alt="Photo">
|
||||
<br>
|
||||
<img class="img-responsive" src="assets/img/photo1.png" alt="Photo">
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
<ul class="list-inline">
|
||||
<li><a href="#" class="link-black text-sm"><i class="fa fa-share margin-r-5"></i> Share</a></li>
|
||||
<li><a href="#" class="link-black text-sm"><i class="fa fa-thumbs-o-up margin-r-5"></i> Like</a>
|
||||
</li>
|
||||
<li class="pull-right">
|
||||
<a href="#" class="link-black text-sm"><i class="fa fa-comments-o margin-r-5"></i> Comments
|
||||
(5)</a></li>
|
||||
</ul>
|
||||
|
||||
<input class="form-control input-sm" type="text" placeholder="Type a comment">
|
||||
</div>
|
||||
<!-- /.post -->
|
||||
</div>
|
||||
<!-- /.tab-pane -->
|
||||
<div class="tab-pane" id="timeline">
|
||||
<!-- The timeline -->
|
||||
<ul class="timeline timeline-inverse">
|
||||
<!-- timeline time label -->
|
||||
<li class="time-label">
|
||||
<span class="bg-red">
|
||||
10 Feb. 2014
|
||||
</span>
|
||||
</li>
|
||||
<!-- /.timeline-label -->
|
||||
<!-- timeline item -->
|
||||
<li>
|
||||
<i class="fa fa-envelope bg-blue"></i>
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa fa-clock-o"></i> 12:05</span>
|
||||
|
||||
<h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
|
||||
|
||||
<div class="timeline-body">
|
||||
Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
|
||||
weebly ning heekya handango imeem plugg dopplr jibjab, movity
|
||||
jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
|
||||
quora plaxo ideeli hulu weebly balihoo...
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<a class="btn btn-primary btn-xs">Read more</a>
|
||||
<a class="btn btn-danger btn-xs">Delete</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline item -->
|
||||
<li>
|
||||
<i class="fa fa-user bg-aqua"></i>
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa fa-clock-o"></i> 5 mins ago</span>
|
||||
|
||||
<h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline item -->
|
||||
<li>
|
||||
<i class="fa fa-comments bg-yellow"></i>
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa fa-clock-o"></i> 27 mins ago</span>
|
||||
|
||||
<h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
|
||||
|
||||
<div class="timeline-body">
|
||||
Take me to your leader!
|
||||
Switzerland is small and neutral!
|
||||
We are more like Germany, ambitious and misunderstood!
|
||||
</div>
|
||||
<div class="timeline-footer">
|
||||
<a class="btn btn-warning btn-flat btn-xs">View comment</a>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END timeline item -->
|
||||
<!-- timeline time label -->
|
||||
<li class="time-label">
|
||||
<span class="bg-green">
|
||||
3 Jan. 2014
|
||||
</span>
|
||||
</li>
|
||||
<!-- /.timeline-label -->
|
||||
<!-- timeline item -->
|
||||
<li>
|
||||
<i class="fa fa-camera bg-purple"></i>
|
||||
|
||||
<div class="timeline-item">
|
||||
<span class="time"><i class="fa fa-clock-o"></i> 2 days ago</span>
|
||||
|
||||
<h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
|
||||
|
||||
<div class="timeline-body">
|
||||
<img src="http://placehold.it/150x100" alt="..." class="margin">
|
||||
<img src="http://placehold.it/150x100" alt="..." class="margin">
|
||||
<img src="http://placehold.it/150x100" alt="..." class="margin">
|
||||
<img src="http://placehold.it/150x100" alt="..." class="margin">
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<!-- END timeline item -->
|
||||
<li>
|
||||
<i class="fa fa-clock-o bg-gray"></i>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- /.tab-pane -->
|
||||
|
||||
<div class="tab-pane" id="settings">
|
||||
<form class="form-horizontal">
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-2 control-label">Name</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputName" placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputEmail" class="col-sm-2 control-label">Email</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="email" class="form-control" id="inputEmail" placeholder="Email">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputName" class="col-sm-2 control-label">Name</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputName" placeholder="Name">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputExperience" class="col-sm-2 control-label">Experience</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<textarea class="form-control" id="inputExperience" placeholder="Experience"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="inputSkills" class="col-sm-2 control-label">Skills</label>
|
||||
|
||||
<div class="col-sm-10">
|
||||
<input type="text" class="form-control" id="inputSkills" placeholder="Skills">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox"> I agree to the <a href="#">terms and conditions</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="col-sm-offset-2 col-sm-10">
|
||||
<button type="submit" class="btn btn-danger">Submit</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<!-- /.tab-pane -->
|
||||
</div>
|
||||
<!-- /.tab-content -->
|
||||
</div>
|
||||
<!-- /.nav-tabs-custom -->
|
||||
</div>
|
||||
<!-- /.col -->
|
||||
</div>
|
||||
<!-- /.row -->
|
||||
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<app-footer></app-footer>
|
|
@ -0,0 +1,28 @@
|
|||
/* tslint:disable:no-unused-variable */
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { UserComponent } from './user.component';
|
||||
|
||||
describe('UserComponent', () => {
|
||||
let component: UserComponent;
|
||||
let fixture: ComponentFixture<UserComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ UserComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UserComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,30 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { User } from '../../models/user';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { ActivatedRoute } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-user',
|
||||
templateUrl: './user.component.html',
|
||||
styleUrls: ['./user.component.css']
|
||||
})
|
||||
export class UserComponent implements OnInit {
|
||||
|
||||
user: User;
|
||||
constructor(private userService: UserService, private route: ActivatedRoute) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUser();
|
||||
}
|
||||
|
||||
// members/...
|
||||
loadUser() {
|
||||
// o mais é para garantir que a route retorna um inteiro
|
||||
this.userService.getUser(+this.route.snapshot.params['id']).subscribe((user: User) => {
|
||||
this.user = user;
|
||||
}, error => {
|
||||
console.log(error);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
|
@ -0,0 +1,114 @@
|
|||
|
||||
|
||||
<app-navigation></app-navigation>
|
||||
|
||||
<!-- Content Wrapper. Contains page content -->
|
||||
<div class="content-wrapper">
|
||||
<!-- Content Header (Page header) -->
|
||||
<section class="content-header">
|
||||
<h1>
|
||||
Lista Completa
|
||||
<small>Utilizadores</small>
|
||||
</h1>
|
||||
<ol class="breadcrumb">
|
||||
|
||||
<li class="active">Dashboard</li>
|
||||
</ol>
|
||||
</section>
|
||||
|
||||
<!-- Main content -->
|
||||
<section class="content">
|
||||
|
||||
|
||||
<!-- /.col -->
|
||||
<div class="box">
|
||||
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body no-padding">
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th style="width: 10px">Id</th>
|
||||
<th>Nome</th>
|
||||
<th>Username</th>
|
||||
<th>Idade</th>
|
||||
<th>About</th>
|
||||
<th></th>
|
||||
<th></th>
|
||||
|
||||
</tr>
|
||||
<tr *ngFor="let user of users">
|
||||
<td>{{user.id}}</td>
|
||||
<td>{{user.fullName}}</td>
|
||||
<td>{{user.username}}</td>
|
||||
<td>{{user.age}}</td>
|
||||
<td>{{user.about}}</td>
|
||||
<th><button [routerLink]="['/user/',user.id]" class="btn btn-block btn-success btn-sm">Visualizar</button> </th>
|
||||
<th><button [routerLink]="['/user/',user.id]" class="btn btn-block btn-danger btn-sm">editar</button></th>
|
||||
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
<div class="box">
|
||||
<div class="box-header">
|
||||
<h3 class="box-title">Striped Full Width Table</h3>
|
||||
</div>
|
||||
<!-- /.box-header -->
|
||||
<div class="box-body no-padding">
|
||||
<table class="table table-striped">
|
||||
<tr>
|
||||
<th style="width: 10px">#</th>
|
||||
<th>Task</th>
|
||||
<th>Progress</th>
|
||||
<th style="width: 40px">Label</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>1.</td>
|
||||
<td>Update software</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-danger" style="width: 55%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-red">55%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2.</td>
|
||||
<td>Clean database</td>
|
||||
<td>
|
||||
<div class="progress progress-xs">
|
||||
<div class="progress-bar progress-bar-yellow" style="width: 70%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-yellow">70%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3.</td>
|
||||
<td>Cron job running</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar progress-bar-primary" style="width: 30%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-light-blue">30%</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4.</td>
|
||||
<td>Fix and squish bugs</td>
|
||||
<td>
|
||||
<div class="progress progress-xs progress-striped active">
|
||||
<div class="progress-bar progress-bar-success" style="width: 90%"></div>
|
||||
</div>
|
||||
</td>
|
||||
<td><span class="badge bg-green">90%</span></td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
<!-- /.box-body -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
</div>
|
||||
<!-- /.content-wrapper -->
|
||||
<app-footer></app-footer>
|
|
@ -0,0 +1,28 @@
|
|||
/* tslint:disable:no-unused-variable */
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { By } from '@angular/platform-browser';
|
||||
import { DebugElement } from '@angular/core';
|
||||
|
||||
import { UsersListComponent } from './usersList.component';
|
||||
|
||||
describe('UsersListComponent', () => {
|
||||
let component: UsersListComponent;
|
||||
let fixture: ComponentFixture<UsersListComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ UsersListComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(UsersListComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
|
@ -0,0 +1,32 @@
|
|||
import { Component, OnInit } from '@angular/core';
|
||||
import { UserService } from '../../services/user.service';
|
||||
import { User } from '../../models/user';
|
||||
import { Route, Router } from '@angular/router';
|
||||
|
||||
@Component({
|
||||
selector: 'app-usersList',
|
||||
templateUrl: './usersList.component.html',
|
||||
styleUrls: ['./usersList.component.css']
|
||||
})
|
||||
export class UsersListComponent implements OnInit {
|
||||
|
||||
users: User[];
|
||||
|
||||
constructor(private UserServive: UserService, private router: Router) { }
|
||||
|
||||
ngOnInit() {
|
||||
this.loadUsers();
|
||||
}
|
||||
loadUsers() {
|
||||
this.UserServive.getUsers().subscribe((users: User[]) => {
|
||||
this.users = users;
|
||||
}, error => {
|
||||
console.log('erro a obter lista de utilizadores');
|
||||
});
|
||||
return this.UserServive.getUsers();
|
||||
}
|
||||
|
||||
goTo(id) {
|
||||
this.router.navigate(['../user/' + id]);
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue