From a172837fe042e8acb3030df2d84cd39615cf5a11 Mon Sep 17 00:00:00 2001 From: Kai Moritz Date: Sun, 25 Dec 2022 23:03:47 +0100 Subject: [PATCH] feat: Added a chatroom component, that is navigatable by the chatroom's ID --- src/app/app-routing.module.ts | 2 ++ src/app/app.module.ts | 4 ++- src/app/chatroom.service.ts | 5 +++ src/app/chatroom/chatroom.component.html | 7 ++++ src/app/chatroom/chatroom.component.less | 0 src/app/chatroom/chatroom.component.spec.ts | 23 +++++++++++++ src/app/chatroom/chatroom.component.ts | 37 +++++++++++++++++++++ src/app/chatrooms/chatrooms.component.html | 2 +- src/app/chatrooms/chatrooms.component.ts | 2 +- 9 files changed, 79 insertions(+), 3 deletions(-) create mode 100644 src/app/chatroom/chatroom.component.html create mode 100644 src/app/chatroom/chatroom.component.less create mode 100644 src/app/chatroom/chatroom.component.spec.ts create mode 100644 src/app/chatroom/chatroom.component.ts diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 57fcedcc..4809bddf 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 { UserComponent } from "./user/user.component"; import { ChatroomsComponent } from "./chatrooms/chatrooms.component"; +import { ChatroomComponent } from "./chatroom/chatroom.component"; const routes: Routes = [ { path: 'user', component: UserComponent }, { path: 'chatrooms', component: ChatroomsComponent }, + { path: 'chatroom/:id', component: ChatroomComponent }, { path: '', redirectTo: '/user', pathMatch: 'full' }, ]; diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 2c193a99..b2b66d61 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,12 +7,14 @@ import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { ChatroomsComponent } from './chatrooms/chatrooms.component'; import { UserComponent } from './user/user.component'; +import { ChatroomComponent } from './chatroom/chatroom.component'; @NgModule({ declarations: [ AppComponent, ChatroomsComponent, - UserComponent + UserComponent, + ChatroomComponent ], imports: [ BrowserModule, diff --git a/src/app/chatroom.service.ts b/src/app/chatroom.service.ts index 77b08182..ab922063 100644 --- a/src/app/chatroom.service.ts +++ b/src/app/chatroom.service.ts @@ -9,10 +9,15 @@ import { Chatroom } from "./chatroom"; export class ChatroomService { private uriList = 'http://localhost:8080/list'; + private uriGet = 'http://localhost:8080/get/'; constructor(private http: HttpClient) { } getChatrooms(): Observable { return this.http.get(this.uriList); } + + getChatroom(id: String): Observable { + return this.http.get(this.uriGet + id); + } } diff --git a/src/app/chatroom/chatroom.component.html b/src/app/chatroom/chatroom.component.html new file mode 100644 index 00000000..a45ee7b5 --- /dev/null +++ b/src/app/chatroom/chatroom.component.html @@ -0,0 +1,7 @@ +
+
+

{{chatroom.name}}

+
+
+
+
diff --git a/src/app/chatroom/chatroom.component.less b/src/app/chatroom/chatroom.component.less new file mode 100644 index 00000000..e69de29b diff --git a/src/app/chatroom/chatroom.component.spec.ts b/src/app/chatroom/chatroom.component.spec.ts new file mode 100644 index 00000000..6ebaacfe --- /dev/null +++ b/src/app/chatroom/chatroom.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ChatroomComponent } from './chatroom.component'; + +describe('ChatroomComponent', () => { + let component: ChatroomComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ChatroomComponent ] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ChatroomComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/chatroom/chatroom.component.ts b/src/app/chatroom/chatroom.component.ts new file mode 100644 index 00000000..51aff666 --- /dev/null +++ b/src/app/chatroom/chatroom.component.ts @@ -0,0 +1,37 @@ +import { Component, OnInit } from '@angular/core'; +import { ActivatedRoute } from '@angular/router'; +import { ChatroomService } from "../chatroom.service"; +import { UserService } from "../user.service"; +import { Chatroom } from "../chatroom"; + +@Component({ + selector: 'app-chatroom', + templateUrl: './chatroom.component.html', + styleUrls: ['./chatroom.component.less'] +}) +export class ChatroomComponent implements OnInit { + + chatroom: Chatroom = { id: 'FOO', name: 'BAR'}; + + constructor( + private chatroomsService: ChatroomService, + private userService: UserService, + private route: ActivatedRoute) {} + + ngOnInit(): void + { + this.userService.assertUserisKnown(() => this.getChatroom()); + } + + getChatroom(): void { + const id: string | null = this.route.snapshot.paramMap.get('id'); + if (id === null) { + console.log("ID for chatroom is missing in URI"); + } + else { + this.chatroomsService + .getChatroom(id) + .subscribe(chatroom => this.chatroom = chatroom); + } + } +} diff --git a/src/app/chatrooms/chatrooms.component.html b/src/app/chatrooms/chatrooms.component.html index c2656757..4df38dec 100644 --- a/src/app/chatrooms/chatrooms.component.html +++ b/src/app/chatrooms/chatrooms.component.html @@ -3,6 +3,6 @@

Please Choose a Chat-Room

- +
diff --git a/src/app/chatrooms/chatrooms.component.ts b/src/app/chatrooms/chatrooms.component.ts index 99eb15ac..26665da7 100644 --- a/src/app/chatrooms/chatrooms.component.ts +++ b/src/app/chatrooms/chatrooms.component.ts @@ -8,7 +8,7 @@ import { ChatroomService } from "../chatroom.service"; templateUrl: './chatrooms.component.html', styleUrls: ['./chatrooms.component.less'] }) -export class ChatroomsComponent implements OnInit +export class ChatroomsComponent implements OnInit { chatrooms: Chatroom[] = []; -- 2.20.1