From: Kai Moritz <kai@juplo.de>
Date: Sun, 25 Dec 2022 01:21:49 +0000 (+0100)
Subject: feat: The available chatrooms are fetched and displayed in a component
X-Git-Url: http://juplo.de/gitweb/?a=commitdiff_plain;h=53ae6990eb208b7631e46d95a4a65215e1b1b5ac;p=demos%2Fkafka%2Fchat

feat: The available chatrooms are fetched and displayed in a component
---

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6213adcb..0af4fab5 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1 +1,2 @@
 <h1>{{title}}</h1>
+<app-chatrooms></app-chatrooms>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index bfa49bd8..d947470c 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
+import { FormsModule } from "@angular/forms";
+import { HttpClientModule } from '@angular/common/http';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
@@ -12,6 +14,8 @@ import { ChatroomsComponent } from './chatrooms/chatrooms.component';
   ],
   imports: [
     BrowserModule,
+    FormsModule,
+    HttpClientModule,
     AppRoutingModule
   ],
   providers: [],
diff --git a/src/app/chatroom.service.spec.ts b/src/app/chatroom.service.spec.ts
new file mode 100644
index 00000000..af0ed87d
--- /dev/null
+++ b/src/app/chatroom.service.spec.ts
@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ChatroomService } from './chatroom.service';
+
+describe('ChatroomService', () => {
+  let service: ChatroomService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(ChatroomService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
diff --git a/src/app/chatroom.service.ts b/src/app/chatroom.service.ts
new file mode 100644
index 00000000..77b08182
--- /dev/null
+++ b/src/app/chatroom.service.ts
@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from "@angular/common/http";
+import { Observable, of } from "rxjs";
+import { Chatroom } from "./chatroom";
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ChatroomService {
+
+  private uriList = 'http://localhost:8080/list';
+
+  constructor(private http: HttpClient) { }
+
+  getChatrooms(): Observable<Chatroom[]> {
+    return this.http.get<Chatroom[]>(this.uriList);
+  }
+}
diff --git a/src/app/chatroom.ts b/src/app/chatroom.ts
new file mode 100644
index 00000000..8eb1ec83
--- /dev/null
+++ b/src/app/chatroom.ts
@@ -0,0 +1,5 @@
+export interface Chatroom
+{
+  id: string,
+  name: string
+}
diff --git a/src/app/chatrooms/chatrooms.component.html b/src/app/chatrooms/chatrooms.component.html
new file mode 100644
index 00000000..bea94738
--- /dev/null
+++ b/src/app/chatrooms/chatrooms.component.html
@@ -0,0 +1,9 @@
+<h2>Available Chatrooms</h2>
+<ul class="chatrooms">
+  <li *ngFor="let chatroom of chatrooms">
+    <button type="button">
+      <span class="badge">{{chatroom.id}}</span>
+      <span class="name">{{chatroom.name}}</span>
+    </button>
+  </li>
+</ul>
diff --git a/src/app/chatrooms/chatrooms.component.less b/src/app/chatrooms/chatrooms.component.less
new file mode 100644
index 00000000..a90dc386
--- /dev/null
+++ b/src/app/chatrooms/chatrooms.component.less
@@ -0,0 +1,65 @@
+.chatrooms {
+  margin: 0 0 2em 0;
+  list-style-type: none;
+  padding: 0;
+  width: 15em;
+}
+
+.chatrooms li {
+  display: flex;
+}
+
+.chatrooms button {
+  flex: 1;
+  cursor: pointer;
+  position: relative;
+  left: 0;
+  background-color: #EEE;
+  margin: .5em;
+  padding: 0;
+  border-radius: 4px;
+  display: flex;
+  align-items: stretch;
+  height: 1.8em;
+}
+
+.chatrooms button:hover {
+  color: #2c3a41;
+  background-color: #e6e6e6;
+  left: .1em;
+}
+
+.chatrooms button:active {
+  background-color: #525252;
+  color: #fafafa;
+}
+
+.chatrooms button.selected {
+  background-color: black;
+  color: white;
+}
+
+.chatrooms button.selected:hover {
+  background-color: #505050;
+  color: white;
+}
+
+.chatrooms button.selected:active {
+  background-color: black;
+  color: white;
+}
+
+.chatrooms .badge {
+  display: inline-block;
+  font-size: small;
+  color: white;
+  padding: 0.8em 0.7em 0 0.7em;
+  background-color: #405061;
+  line-height: 1em;
+  margin-right: .8em;
+  border-radius: 4px 0 0 4px;
+}
+
+.chatrooms .name {
+  align-self: center;
+}
diff --git a/src/app/chatrooms/chatrooms.component.spec.ts b/src/app/chatrooms/chatrooms.component.spec.ts
new file mode 100644
index 00000000..b9a1a6f8
--- /dev/null
+++ b/src/app/chatrooms/chatrooms.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ChatroomsComponent } from './chatrooms.component';
+
+describe('ChatroomsComponent', () => {
+  let component: ChatroomsComponent;
+  let fixture: ComponentFixture<ChatroomsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ChatroomsComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ChatroomsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/chatrooms/chatrooms.component.ts b/src/app/chatrooms/chatrooms.component.ts
new file mode 100644
index 00000000..c965cf98
--- /dev/null
+++ b/src/app/chatrooms/chatrooms.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { Chatroom } from '../chatroom';
+import { ChatroomService } from "../chatroom.service";
+
+@Component({
+  selector: 'app-chatrooms',
+  templateUrl: './chatrooms.component.html',
+  styleUrls: ['./chatrooms.component.less']
+})
+export class ChatroomsComponent  implements OnInit
+{
+  chatrooms: Chatroom[] = [];
+
+  constructor(private chatroomsService: ChatroomService) { }
+
+  ngOnInit(): void
+  {
+    this.getChatrooms();
+  }
+
+  getChatrooms(): void {
+    this.chatroomsService
+      .getChatrooms()
+      .subscribe(chatrooms => this.chatrooms = chatrooms);
+  }
+}