diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts new file mode 100644 index 0000000..dfee5ac --- /dev/null +++ b/src/app/app-routing.module.ts @@ -0,0 +1,32 @@ + +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; + +import { DashboardComponent } from './dashboard/dashboard.component'; +import { HomepageComponent } from './homepage/homepage.component'; +import { LoginComponent } from './login/login.component'; +import { RegisterComponent } from './register/register.component'; +import { UserDetailComponent } from './user-detail/user-detail.component'; +import { UsersComponent } from './users/users.component'; + + +const appRoutes: Routes = [ + { path: '', component: HomepageComponent }, + { path: 'dashboard', component: DashboardComponent }, + { path: 'login', component: LoginComponent }, + { path: 'register', component: RegisterComponent }, + { path: 'users', component: UsersComponent}, + { path: 'user/:id', component: UserDetailComponent} + ]; + +@NgModule({ + imports: [ + RouterModule.forRoot( + appRoutes, + ) + ], + exports: [ + RouterModule + ] +}) +export class AppRoutingModule {} diff --git a/src/app/app.component.html b/src/app/app.component.html index fa2706a..0680b43 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,20 +1 @@ - -
-

- Welcome to {{ title }}! -

- Angular Logo -
-

Here are some links to help you start:

- - + diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 926975a..a47844a 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -1,18 +1,37 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; - +import { ReactiveFormsModule, FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; +import { AppRoutingModule } from './app-routing.module'; + +import { DashboardComponent } from './dashboard/dashboard.component'; +import { HomepageComponent } from './homepage/homepage.component'; +import { LoginComponent } from './login/login.component'; +import { RegisterComponent } from './register/register.component'; +import { UsersComponent } from './users/users.component'; +import { UserDetailComponent } from './user-detail/user-detail.component'; + +import { UserService } from './user.service'; @NgModule({ declarations: [ - AppComponent + AppComponent, + DashboardComponent, + HomepageComponent, + LoginComponent, + RegisterComponent, + UserDetailComponent, + UsersComponent ], imports: [ - BrowserModule + BrowserModule, + AppRoutingModule, + ReactiveFormsModule, + FormsModule ], - providers: [], + providers: [UserService], bootstrap: [AppComponent] }) export class AppModule { } diff --git a/src/app/dashboard/dashboard.component.css b/src/app/dashboard/dashboard.component.css new file mode 100644 index 0000000..6149c07 --- /dev/null +++ b/src/app/dashboard/dashboard.component.css @@ -0,0 +1,46 @@ +[class*='col-'] { + float: left; + padding-right: 20px; + padding-bottom: 20px; +} +[class*='col-']:last-of-type { + padding-right: 0; +} +*, *:after, *:before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +h2 { + text-align: center; margin-bottom: 0; +} +h4 { + position: relative; +} +.grid { + margin: 0; +} +.col-1-4 { + width: 25%; +} +.grid-pad { + padding: 10px 0; +} + +.grid-pad > [class*='col-']:last-of-type { + padding-right: 20px; +} +.grid-card { + padding: 20px; + text-align: center; + color: #eee; + max-height: 120px; + min-width: 120px; + background-color: #607D8B; + border-radius: 2px; +} +.grid-card:hover { + background-color: #EEE; + cursor: pointer; + color: #607d8b; +} diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html new file mode 100644 index 0000000..3721e1c --- /dev/null +++ b/src/app/dashboard/dashboard.component.html @@ -0,0 +1,8 @@ +

Top users

+
+ +
+

{{user.name}}

+
+ +
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.spec.ts b/src/app/dashboard/dashboard.component.spec.ts new file mode 100644 index 0000000..9c996c3 --- /dev/null +++ b/src/app/dashboard/dashboard.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { DashboardComponent } from './dashboard.component'; + +describe('DashboardComponent', () => { + let component: DashboardComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ DashboardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(DashboardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts new file mode 100644 index 0000000..c389634 --- /dev/null +++ b/src/app/dashboard/dashboard.component.ts @@ -0,0 +1,21 @@ +import { Component, OnInit } from '@angular/core'; +import { User } from '../user'; +import { UserService } from '../user.service'; + +@Component({ + selector: 'app-dashboard', + templateUrl: './dashboard.component.html', + styleUrls: ['./dashboard.component.css'] +}) +export class DashboardComponent implements OnInit { + users: User[]; + constructor(private userService: UserService) { } + + ngOnInit() { + this.getUsers(); + } + + getUsers(): void { + this.userService.getUsers().subscribe(res => this.users = res.slice(0, 4)); + } +} diff --git a/src/app/homepage/homepage.component.css b/src/app/homepage/homepage.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/homepage/homepage.component.html b/src/app/homepage/homepage.component.html new file mode 100644 index 0000000..e28fd6e --- /dev/null +++ b/src/app/homepage/homepage.component.html @@ -0,0 +1,7 @@ +

Homepage

+ + \ No newline at end of file diff --git a/src/app/homepage/homepage.component.spec.ts b/src/app/homepage/homepage.component.spec.ts new file mode 100644 index 0000000..8d1d3bb --- /dev/null +++ b/src/app/homepage/homepage.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { HomepageComponent } from './homepage.component'; + +describe('HomepageComponent', () => { + let component: HomepageComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ HomepageComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(HomepageComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/homepage/homepage.component.ts b/src/app/homepage/homepage.component.ts new file mode 100644 index 0000000..c87ff1c --- /dev/null +++ b/src/app/homepage/homepage.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-homepage', + templateUrl: './homepage.component.html', + styleUrls: ['./homepage.component.css'] +}) +export class HomepageComponent implements OnInit { + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/app/login/login.component.css b/src/app/login/login.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/login/login.component.html b/src/app/login/login.component.html new file mode 100644 index 0000000..2f076b2 --- /dev/null +++ b/src/app/login/login.component.html @@ -0,0 +1,27 @@ +

Login

+
+
+ please enter the username +
+
+ +
+
+ please enter the password +
+
+ +
+ + + +
+ +
+ Back to homepage + Don't have an account? Register +
\ No newline at end of file diff --git a/src/app/login/login.component.spec.ts b/src/app/login/login.component.spec.ts new file mode 100644 index 0000000..d6d85a8 --- /dev/null +++ b/src/app/login/login.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { LoginComponent } from './login.component'; + +describe('LoginComponent', () => { + let component: LoginComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ LoginComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LoginComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/login/login.component.ts b/src/app/login/login.component.ts new file mode 100644 index 0000000..119d04e --- /dev/null +++ b/src/app/login/login.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; +import { FormControl, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-login', + templateUrl: './login.component.html', + styleUrls: ['./login.component.css'] +}) +export class LoginComponent implements OnInit { + + loginForm = new FormGroup ({ + username: new FormControl('', [Validators.required, Validators.minLength(4)]), + password: new FormControl('', [Validators.required, Validators.minLength(1)]) + }); + get username() { return this.loginForm.get('username'); } + + get password() { return this.loginForm.get('password'); } + + constructor() { } + + ngOnInit() { + } + + onSubmit() { + console.log('login'); + } +} diff --git a/src/app/mock-users.ts b/src/app/mock-users.ts new file mode 100644 index 0000000..97a499e --- /dev/null +++ b/src/app/mock-users.ts @@ -0,0 +1,12 @@ +import { User } from './user'; + +export const USERS: User[] = [ + { id: 1, name: 'Jon Doe' }, + { id: 2, name: 'Jane Doe'}, + { id: 3, name: 'Mark Clarck'}, + { id: 4, name: 'Joe Shmoe'}, + { id: 5, name: 'Louie Booey'}, + { id: 6, name: 'Alfred Malfred'}, + { id: 7, name: 'Rick Rickson'}, + { id: 8, name: 'Harry Berry'}, +]; diff --git a/src/app/register/register.component.css b/src/app/register/register.component.css new file mode 100644 index 0000000..17292cc --- /dev/null +++ b/src/app/register/register.component.css @@ -0,0 +1,3 @@ +.formControl { + padding:10px; +} \ No newline at end of file diff --git a/src/app/register/register.component.html b/src/app/register/register.component.html new file mode 100644 index 0000000..4cf0477 --- /dev/null +++ b/src/app/register/register.component.html @@ -0,0 +1,40 @@ +

Register

+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+ +
+Back to homepage diff --git a/src/app/register/register.component.spec.ts b/src/app/register/register.component.spec.ts new file mode 100644 index 0000000..6c19551 --- /dev/null +++ b/src/app/register/register.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RegisterComponent } from './register.component'; + +describe('RegisterComponent', () => { + let component: RegisterComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RegisterComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RegisterComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/register/register.component.ts b/src/app/register/register.component.ts new file mode 100644 index 0000000..903e4c7 --- /dev/null +++ b/src/app/register/register.component.ts @@ -0,0 +1,35 @@ +import { Component, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup, Validators } from '@angular/forms'; + +@Component({ + selector: 'app-register', + templateUrl: './register.component.html', + styleUrls: ['./register.component.css'] +}) +export class RegisterComponent implements OnInit { + + registerForm: FormGroup; + + constructor(private fb: FormBuilder) { + this.createForm(); + } + + ngOnInit() { + } + + createForm() { + this.registerForm = this.fb.group({ + firstName: ['', Validators.required], + lastName: ['', Validators.required], + username: ['', Validators.required], + password: ['', Validators.required], + address: '', + phone: '', + email: ['', Validators.required] + }); + } + + onSubmit() { + + } +} diff --git a/src/app/user-detail/user-detail.component.css b/src/app/user-detail/user-detail.component.css new file mode 100644 index 0000000..e69de29 diff --git a/src/app/user-detail/user-detail.component.html b/src/app/user-detail/user-detail.component.html new file mode 100644 index 0000000..64e0339 --- /dev/null +++ b/src/app/user-detail/user-detail.component.html @@ -0,0 +1,10 @@ +
+

{{user.name | uppercase}} User Details

+
Id:{{user.id}}
+
+ +
+
+ \ No newline at end of file diff --git a/src/app/user-detail/user-detail.component.spec.ts b/src/app/user-detail/user-detail.component.spec.ts new file mode 100644 index 0000000..81b7580 --- /dev/null +++ b/src/app/user-detail/user-detail.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UserDetailComponent } from './user-detail.component'; + +describe('UserDetailComponent', () => { + let component: UserDetailComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UserDetailComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UserDetailComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/user-detail/user-detail.component.ts b/src/app/user-detail/user-detail.component.ts new file mode 100644 index 0000000..8748239 --- /dev/null +++ b/src/app/user-detail/user-detail.component.ts @@ -0,0 +1,34 @@ +import { Component, OnInit } from '@angular/core'; +import { User } from '../user'; +import { ActivatedRoute } from '@angular/router'; +import { UserService } from '../user.service'; +import { Location } from '@angular/common'; + +@Component({ + selector: 'app-user-detail', + templateUrl: './user-detail.component.html', + styleUrls: ['./user-detail.component.css'] +}) +export class UserDetailComponent implements OnInit { + user: User; + + constructor( + private location: Location, + private route: ActivatedRoute, + private userService: UserService + ) { } + + ngOnInit() { + this.getUser(); + } + + getUser(): void { + const id = +this.route.snapshot.paramMap.get('id'); + this.userService.getUser(id).subscribe(res => this.user = res); + } + + goBack() { + this.location.back(); + } + +} diff --git a/src/app/user.service.spec.ts b/src/app/user.service.spec.ts new file mode 100644 index 0000000..b26195c --- /dev/null +++ b/src/app/user.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { UserService } from './user.service'; + +describe('UserService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [UserService] + }); + }); + + it('should be created', inject([UserService], (service: UserService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/user.service.ts b/src/app/user.service.ts new file mode 100644 index 0000000..7905efc --- /dev/null +++ b/src/app/user.service.ts @@ -0,0 +1,21 @@ +import { Injectable } from '@angular/core'; +import { Observable } from 'rxjs/Observable'; +import { of } from 'rxjs/observable/of'; + +import { User } from './user'; +import { USERS } from './mock-users'; + +@Injectable() +export class UserService { + + constructor() { } + + getUsers(): Observable { + return of(USERS); + } + + getUser(id: number): Observable { + const result = USERS.find(user => user.id === id); + return of(result); + } +} diff --git a/src/app/user.ts b/src/app/user.ts new file mode 100644 index 0000000..ebfc1a4 --- /dev/null +++ b/src/app/user.ts @@ -0,0 +1,4 @@ +export class User { + id: number; + name: string; +} diff --git a/src/app/users/users.component.css b/src/app/users/users.component.css new file mode 100644 index 0000000..5ba966b --- /dev/null +++ b/src/app/users/users.component.css @@ -0,0 +1,26 @@ +.users { + margin: 0 0 2em 0; + width: 15em; +} + +.user { + background-color: #575757; + color: white; + padding: 5px; +} + +.user a { + color: white; +} + +.user-detail-section { + margin: .5em; + padding: .5em; + border: 2px solid #575757; + width: 450px; +} + +.user:hover { + background-color: #CFD8DC; + color: white; +} \ No newline at end of file diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html new file mode 100644 index 0000000..1039f23 --- /dev/null +++ b/src/app/users/users.component.html @@ -0,0 +1,12 @@ +

Users

+ + Home + diff --git a/src/app/users/users.component.spec.ts b/src/app/users/users.component.spec.ts new file mode 100644 index 0000000..909b5ba --- /dev/null +++ b/src/app/users/users.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { UsersComponent } from './users.component'; + +describe('UsersComponent', () => { + let component: UsersComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ UsersComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(UsersComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts new file mode 100644 index 0000000..e917cf1 --- /dev/null +++ b/src/app/users/users.component.ts @@ -0,0 +1,18 @@ +import { Component, OnInit } from '@angular/core'; +import { User } from '../user'; +import { USERS } from '../mock-users'; + +@Component({ + selector: 'app-users', + templateUrl: './users.component.html', + styleUrls: ['./users.component.css'] +}) +export class UsersComponent implements OnInit { + users = USERS; + + constructor() { } + + ngOnInit() { + } + +} diff --git a/src/styles.css b/src/styles.css index 90d4ee0..1956581 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1 +1,33 @@ /* You can add global styles to this file, and also import other style files */ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} +h2, h3 { + color: #444; + font-family: Arial, Helvetica, sans-serif; + font-weight: lighter; +} +body { + margin: 2em; +} +body, input[text], button { + color: #888; + font-family: Cambria, Georgia; +} +a { + text-decoration: none; + color: #1976d2; +} +ul { + list-style: none; + padding: 0; +} +li { + border-radius: 5px; + border: 1px solid transparent; + cursor: pointer; + margin: .5em; + padding: .3em 0; +}