Added create and delete for factions

projects/speech-statistics/src/app/auth/administration/factions/factions.component.html

@@ -3,14 +3,34 @@
     <tr>
       <th>Fraktion</th>
       <th># Mitglieder</th>
+      <th></th>
     </tr>
   </thead>
   <tbody>
     <tr *ngFor="let faction of factions | async">
-      <td>{{faction.name}}</td>
-      <td>{{faction.size}}</td>
+      <td>{{faction.payload.val()?.name}}</td>
+      <td>{{faction.payload.val()?.size}}</td>
+      <td>
+        <button class="btn btn-outline-danger" (click)="deleteFaction(faction.key)">
+          <span class="bi bi-trash"></span>
+        </button>
+      </td>
     </tr>
   </tbody>
 </table>
 
+<form #addForm="ngForm" (ngSubmit)="addFaction(faction.value, factionSize.value); addForm.resetForm(); faction.value = ''; factionSize.value = '0'">
+  <div class="row">
+    <div class="col">
+      <input type="text" class="form-control" placeholder="Neue Fraktion" aria-label="Fraktion" #faction>
+    </div>
+    <div class="col">
+      <input type="number" class="form-control" min="3" aria-label="Fraktion" #factionSize>
+    </div>
+    <div class="col">
+      <button type="submit" class="btn btn-primary">Hinzufügen</button>
+    </div>
+  </div>
+</form>
+
 

projects/speech-statistics/src/app/auth/administration/factions/factions.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {Faction} from './faction';
-import {AngularFireDatabase} from '@angular/fire/compat/database';
+import {AngularFireDatabase, SnapshotAction} from '@angular/fire/compat/database';
 import {Observable} from 'rxjs';
 import {map} from 'rxjs/operators';
 
@@ -10,26 +10,49 @@ import {map} from 'rxjs/operators';
   styleUrls: ['./factions.component.scss']
 })
 export class FactionsComponent implements OnInit {
-  public factions: Observable<Faction[]> = new Observable<Faction[]>();
+  public factions: Observable<SnapshotAction<Faction>[]> = new Observable<SnapshotAction<Faction>[]>();
 
   constructor(private database: AngularFireDatabase) { }
 
   ngOnInit(): void {
     const factionRef = this.database.list<Faction>('factions');
-    this.factions = factionRef.valueChanges().pipe(
+    this.factions = factionRef.snapshotChanges().pipe(
       map(results => {
         return results.sort(FactionsComponent.sortDescending)
       })
     );
   }
 
-  private static sortDescending(factionA: Faction, factionB: Faction): number {
-    if (factionA.size < factionB.size) {
+  public addFaction(name: string, size: string): void {
+    const factionRef = this.database.list<Faction>('factions');
+    factionRef.push({
+      name: name,
+      size: +size
+    })
+  }
+
+  public deleteFaction(key: string|null): void {
+    const factionRef = this.database.list<Faction>('factions');
+    if (key != null) {
+      factionRef.remove(key);
+    }
+  }
+
+  private static sortDescending(factionA: SnapshotAction<Faction>, factionB: SnapshotAction<Faction>): number {
+    const factionAValue = factionA.payload.val();
+    const factionBValue = factionB.payload.val();
+
+    if (factionAValue == null || factionBValue == null) {
+      return 0;
+    }
+
+    if (factionAValue.size < factionBValue.size) {
       return 1;
     }
-    if (factionA.size > factionB.size) {
+    if (factionAValue.size > factionBValue.size) {
       return -1;
     }
+
     return 0;
   }
 }