backend fertig gestellt

frontend angefangen

ui/src/app/besucher/besucher.component.html

@@ -0,0 +1,26 @@
+<h1>besucher works!</h1>
+<table class="table">
+    <thead>
+        <tr>
+            <th>ID</th>
+            <th>Nachricht</th>
+            <th>Kommt</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr *ngFor="let besucher of activeBesuchers">
+            <td>{{besucher.id}}</td>
+            <td>{{besucher.message}}</td>
+        </tr>
+    </tbody>
+</table>
+
+<input placeholder="Ihre Name..." [(ngModel)]="BesucherName">
+<input placeholder="Eventuell eine Nachricht" [(ngModel)]="BesucherMessage">
+<label id="zusage-radio-button-group-label">Kommen Sie</label>
+<mat-radio-group>
+    <mat-radio-button value="1">Ja</mat-radio-button>
+    <mat-radio-button value="0">Nein</mat-radio-button>
+</mat-radio-group>
+<button class="btn btn-primary" (click)="addBesucher()">Abschicken</button>
+

ui/src/app/besucher/besucher.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BesucherComponent } from './besucher.component';
+
+describe('BesucherComponent', () => {
+  let component: BesucherComponent;
+  let fixture: ComponentFixture<BesucherComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BesucherComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BesucherComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

ui/src/app/besucher/besucher.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatRadioModule } from '@angular/material/radio';
+import { filter } from 'rxjs';
+import { BesucherService } from '../besucher.service';
+import { Besucher } from 'src/besucher';
+
+@Component({
+  selector: 'app-besucher',
+  templateUrl: './besucher.component.html',
+  styleUrls: ['./besucher.component.css']
+})
+
+export class BesucherComponent implements OnInit {
+  
+  activeBesuchers: Besucher[] = [];
+  kommendeBesuchers: Besucher[] = [];
+  BesucherName: string = "";
+  BesucherMessage: string = "";
+  BesucherKommt: boolean = false;
+
+  constructor(private besucherService: BesucherService) { }
+
+  ngOnInit(): void {
+    this.getAll();
+    
+  }
+
+  getAll() {
+    this.besucherService.getBesucherList().subscribe((data: Besucher[]) => {
+      this.activeBesuchers = data;
+      console.log(data);
+      
+    });
+  }
+  /*getAll() {
+    this.besucherService.getBesucherList()
+      .pipe(
+        filter((data): data is Besucher[] => data instanceof Besucher))
+      .subscribe(data => {
+        this.activeBesuchers = data.filter((a) => !a.come);
+        this.kommendeBesuchers = data.filter((a) => a.come);
+      });
+  }*/
+
+  addBesucher() {
+    var newBesucher : Besucher = {
+      name : this.BesucherName,
+      message : this.BesucherMessage,
+      id: '',
+      come : this.BesucherKommt
+    };
+    this.besucherService.addBesucher(newBesucher).subscribe(() => {
+      this.getAll();
+      this.BesucherMessage = '';
+    })
+  }
+
+
+}