diff --git a/package-lock.json b/package-lock.json index 02dd16f83f1f746eef2f30535e54278dfc5cfd65..6edb7288a578b51ed2a2a74c29a850ba8774a06d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -517,6 +517,11 @@ } } }, + "angular-in-memory-web-api": { + "version": "0.5.3", + "resolved": "https://registry.npmjs.org/angular-in-memory-web-api/-/angular-in-memory-web-api-0.5.3.tgz", + "integrity": "sha512-1QPwwXG8R/2s7EbHh13HDiJYsk4sdBHNxHJHZHJ/Kxb4T9OG+bb1kGcXzY9UrJkEVxOtUW0ozvL4p/HmeIEszg==" + }, "ansi-html": { "version": "0.0.7", "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz", diff --git a/package.json b/package.json index 8f70d9d4d76372ef5573a4c0b28b3bb02a2ad05f..197d184587bd870444fc7ee3490092aac570fb22 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", + "angular-in-memory-web-api": "^0.5.3", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "rxjs": "^5.5.6", diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 83f6cbe5ba37e41341ecda6d1fb63f9e059083f7..2ab86cea19fe6b85b5966799e9cd504634163970 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -2,10 +2,12 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { LoginScreenComponent } from './login-screen/login-screen.component'; +import { RoomComponent } from './room/room.component'; const routes: Routes = [ { path: 'home', component: LoginScreenComponent }, { path: '', redirectTo: '/home', pathMatch: 'full' }, + { path: 'room/:roomId', component: RoomComponent }, { path: '**', component: PageNotFoundComponent } ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f712169653107d5b3cea21d62043e17d18d9297f..a6976acd9ba62604f03c1abf196d1936df3369b7 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -45,11 +45,17 @@ import { MatToolbarModule, MatTooltipModule } from '@angular/material'; +import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api'; +import { HttpClientModule } from '@angular/common/http'; +import { InMemoryDataService } from './in-memory-data.service'; +import { RoomComponent } from './room/room.component'; import { RoomCreationComponent } from './room-creation/room-creation.component'; import { LoginScreenComponent } from './login-screen/login-screen.component'; import { NotificationService } from './notification.service'; import { AuthenticationService } from './authentication.service'; import { AuthenticationGuard } from './authentication.guard'; +import { RoomService } from './room.service'; +import { RoomListComponent } from './room-list/room-list.component'; @NgModule({ declarations: [ @@ -59,7 +65,10 @@ import { AuthenticationGuard } from './authentication.guard'; PageNotFoundComponent, PasswordResetComponent, RegisterComponent, - RoomCreationComponent + RoomComponent, + RegisterComponent, + RoomCreationComponent, + RoomListComponent ], entryComponents: [ RegisterComponent, @@ -102,12 +111,18 @@ import { AuthenticationGuard } from './authentication.guard'; MatTabsModule, MatToolbarModule, MatTooltipModule, - ReactiveFormsModule + ReactiveFormsModule, + MatTooltipModule, + HttpClientModule, + HttpClientInMemoryWebApiModule.forRoot( + InMemoryDataService, { dataEncapsulation: false } + ) ], providers: [ NotificationService, AuthenticationService, - AuthenticationGuard + AuthenticationGuard, + RoomService ], bootstrap: [AppComponent] }) diff --git a/src/app/in-memory-data.service.ts b/src/app/in-memory-data.service.ts new file mode 100644 index 0000000000000000000000000000000000000000..d41c3dd448dece77b8d3c7d0aa00b68ef08f37e7 --- /dev/null +++ b/src/app/in-memory-data.service.ts @@ -0,0 +1,27 @@ +import { InMemoryDbService } from 'angular-in-memory-web-api'; + +export class InMemoryDataService implements InMemoryDbService { + createDb() { + const rooms = [ + { + id: 'test', + revision: '1', + shortId: 't', + abbreviation: 'abb', + name: 'testroom', + description: 'this is a test room', + closed: true + }, + { + id: 'test1', + revision: '11', + shortId: 't1', + abbreviation: 'abb1', + name: 'testroom1', + description: 'this is a test room1', + closed: false + } + ]; + return { rooms }; + } +} diff --git a/src/app/room-creation/room-creation.component.ts b/src/app/room-creation/room-creation.component.ts index 79b2071ef14b925b5635f0beedc6f0e900f4ad23..be4d0b99cbb70ff4de154ea8044aeb80fe2d4c82 100644 --- a/src/app/room-creation/room-creation.component.ts +++ b/src/app/room-creation/room-creation.component.ts @@ -8,9 +8,10 @@ import { Component, OnInit } from '@angular/core'; export class RoomCreationComponent implements OnInit { longName: string; shortName: string; - constructor() { } - ngOnInit() { + constructor() { } + ngOnInit() { + } } diff --git a/src/app/room-list/room-list.component.html b/src/app/room-list/room-list.component.html new file mode 100644 index 0000000000000000000000000000000000000000..5c96b0160fa03bc126ea52648f8037ae6535a916 --- /dev/null +++ b/src/app/room-list/room-list.component.html @@ -0,0 +1,8 @@ +<mat-list> + <mat-list-item *ngFor="let room of rooms"> + <button mat-button routerLink="room/{{room.id}}"> + {{room.name}} + </button> + </mat-list-item> +</mat-list> + diff --git a/src/app/room-list/room-list.component.scss b/src/app/room-list/room-list.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/room-list/room-list.component.spec.ts b/src/app/room-list/room-list.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..904000a5ccf692e3fe2c951ce0af8a3f5ff2407f --- /dev/null +++ b/src/app/room-list/room-list.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoomListComponent } from './room-list.component'; + +describe('RoomListComponent', () => { + let component: RoomListComponent; + let fixture: ComponentFixture<RoomListComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoomListComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoomListComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/room-list/room-list.component.ts b/src/app/room-list/room-list.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..83597ea4983706ea53dc3aedd85f870aa80f4753 --- /dev/null +++ b/src/app/room-list/room-list.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; +import { Room } from '../room'; +import { RoomService } from '../room.service'; + +@Component({ + selector: 'app-room-list', + templateUrl: './room-list.component.html', + styleUrls: ['./room-list.component.scss'] +}) +export class RoomListComponent implements OnInit { + rooms: Room[]; + closedRooms: Room[]; + + constructor(private roomService: RoomService) { + } + + ngOnInit() { + this.getRooms(); + } + + getRooms(): void { + this.roomService.getRooms().subscribe(rooms => { + this.rooms = rooms; + this.closedRooms = this.rooms.filter(room => room.closed); + }); + } +} diff --git a/src/app/room.service.spec.ts b/src/app/room.service.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..abd820893e50f017d9317cd2c56ad0ecc711219b --- /dev/null +++ b/src/app/room.service.spec.ts @@ -0,0 +1,15 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { RoomService } from './room.service'; + +describe('RoomService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [RoomService] + }); + }); + + it('should be created', inject([RoomService], (service: RoomService) => { + expect(service).toBeTruthy(); + })); +}); diff --git a/src/app/room.service.ts b/src/app/room.service.ts new file mode 100644 index 0000000000000000000000000000000000000000..f0d336c2b853c4823c36ef404bf045e7b9839fdf --- /dev/null +++ b/src/app/room.service.ts @@ -0,0 +1,29 @@ +import { Injectable } from '@angular/core'; +import { Room } from './room'; +import { HttpClient, HttpHeaders } from '@angular/common/http'; +import { Observable } from 'rxjs/Observable'; + +const httpOptions = { + headers: new HttpHeaders({ 'Content-Type': 'application/json' }) +}; + +@Injectable() +export class RoomService { + private roomsUrl = 'api/rooms'; + + constructor(private http: HttpClient) { + } + + getRooms(): Observable<Room[]> { + return this.http.get<Room[]>(this.roomsUrl); + } + + addRoom(room: Room): Observable<Room> { + return this.http.post<Room>(this.roomsUrl, room, httpOptions); + } + + getRoom(id: string): Observable<Room> { + const url = `${this.roomsUrl}/${id}`; + return this.http.get<Room>(url); + } +} diff --git a/src/app/room.ts b/src/app/room.ts new file mode 100644 index 0000000000000000000000000000000000000000..c26bda393b5a51309da7b4504b36e2520553dc5a --- /dev/null +++ b/src/app/room.ts @@ -0,0 +1,9 @@ +export class Room { + id: string; + revision: string; + shortId: string; + abbreviation: string; + name: string; + description: string; + closed: boolean; +} diff --git a/src/app/room/room.component.html b/src/app/room/room.component.html new file mode 100644 index 0000000000000000000000000000000000000000..c53d313290a9d8e6b3c34f3188fc71c30686747e --- /dev/null +++ b/src/app/room/room.component.html @@ -0,0 +1,12 @@ + +<mat-list *ngIf="room"> + <mat-list-item>ID: {{room.id}}</mat-list-item> + <mat-list-item>Revision: {{room.revision}}</mat-list-item> + <mat-list-item>Short ID: {{room.shortId}}</mat-list-item> + <mat-list-item>Abbreviation: {{room.abbreviation}}</mat-list-item> + <mat-list-item>Name: {{room.name}}</mat-list-item> + <mat-list-item>Description: {{room.description}}</mat-list-item> + <mat-list-item>Closed: {{room.closed}}</mat-list-item> +</mat-list> + +<!-- content-type of room--> diff --git a/src/app/room/room.component.scss b/src/app/room/room.component.scss new file mode 100644 index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391 diff --git a/src/app/room/room.component.spec.ts b/src/app/room/room.component.spec.ts new file mode 100644 index 0000000000000000000000000000000000000000..f51b2a9942f43096abe3859f1bcb30350b8d0d86 --- /dev/null +++ b/src/app/room/room.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RoomComponent } from './room.component'; + +describe('RoomComponent', () => { + let component: RoomComponent; + let fixture: ComponentFixture<RoomComponent>; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ RoomComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RoomComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/room/room.component.ts b/src/app/room/room.component.ts new file mode 100644 index 0000000000000000000000000000000000000000..582301e28751e4d79e5ad799dd71ecf172a75175 --- /dev/null +++ b/src/app/room/room.component.ts @@ -0,0 +1,27 @@ +import { Component, OnInit } from '@angular/core'; +import { Room } from '../room'; +import { RoomService } from '../room.service'; +import { ActivatedRoute } from '@angular/router'; + +@Component({ + selector: 'app-room', + templateUrl: './room.component.html', + styleUrls: ['./room.component.scss'] +}) +export class RoomComponent implements OnInit { + room: Room = null; + + constructor(private roomService: RoomService, + private route: ActivatedRoute) { + } + + ngOnInit() { + this.route.params.subscribe(params => { + this.getRoom(params['roomId']); + }); + } + + getRoom(id: string): void { + this.roomService.getRoom(id).subscribe(room => this.room = room); + } +}