implemented life container with details panel

src/app/journal/journal-stats/ability-panel/ability-table/ability-details/ability-details.component.html

@@ -8,7 +8,7 @@
   <div class="details-charges">Aufladungen: {{ abilities?.charges }}</div>
 </div>
 
-<div class="vertical-button-wrapper">
+<div class="vertical-button-wrapper-3">
   <ui-button
     [type]="'edit'"
     [size]="'xlarge'"

src/app/journal/journal-stats/ability-panel/ability-table/ability-table.component.ts

@@ -34,7 +34,7 @@ export class AbilityTableComponent {
   public constructor(
     public dataAccessor: DataService,
     public ngxSmartModalService: NgxSmartModalService,
-    private detailsAccesssor: DetailsService
+    private detailsAccessor: DetailsService
   ) {}
 
   public ngOnInit(): void {
@@ -144,15 +144,15 @@ export class AbilityTableComponent {
   // details panel
 
   public openDetailsPanel(index: number): void {
-    this.detailsAccesssor.openPanel(AbilityDetailsComponent, {
+    this.detailsAccessor.openPanel(AbilityDetailsComponent, {
       abilities: this.abilities[index],
     });
-    const resultSubscription = this.detailsAccesssor.result$.subscribe(
+    const resultSubscription = this.detailsAccessor.result$.subscribe(
       (result) => {
         console.log(result);
-        if (result === 'delete') {
+        if (result.state === 'delete') {
           this.deleteAbility(index);
-        } else if (result === 'update') {
+        } else if (result.state === 'update') {
           this.openAbilityModal(index);
         }
         resultSubscription.unsubscribe();

src/app/journal/journal-stats/ability-panel/trait-table/trait-details/trait-details.component.html

@@ -2,7 +2,7 @@
 
 <div class="details-long-description">{{ trait?.longDescription }}</div>
 
-<div class="vertical-button-wrapper">
+<div class="vertical-button-wrapper-3">
   <ui-button
     [type]="'edit'"
     [size]="'xlarge'"

src/app/journal/journal-stats/ability-panel/trait-table/trait-table.component.ts

@@ -84,9 +84,9 @@ export class TraitTableComponent {
     const resultSubscription = this.detailsAccesssor.result$.subscribe(
       (result) => {
         console.log(result);
-        if (result === 'delete') {
+        if (result.state === 'delete') {
           this.deleteTrait(index);
-        } else if (result === 'update') {
+        } else if (result.state === 'update') {
           this.openTraitModal(index);
         }
         resultSubscription.unsubscribe();

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.html

@@ -0,0 +1,37 @@
+<div class="details-title">Trefferpunkte</div>
+
+<div class="life-container">
+  <div class="life-box">
+    <input type="number" class="life-input" [(ngModel)]="maxHitPoints" />
+    <div for="" class="life-label">Maximale Trefferpunkte</div>
+  </div>
+
+  <div class="life-box">
+    <input
+      type="number"
+      class="life-input"
+      [(ngModel)]="currentHitPoints"
+      (change)="checkValidity()"
+    />
+    <div for="" class="life-label">Momentane Trefferpunkte</div>
+  </div>
+  <div class="life-box">
+    <input type="number" class="life-input" [(ngModel)]="temporaryHitPoints" />
+    <div for="" class="life-label">Temporäre Trefferpunkte</div>
+  </div>
+</div>
+
+<div class="vertical-button-wrapper-2">
+  <ui-button
+    [type]="'apply'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.scss

@@ -0,0 +1,40 @@
+.details-title{
+    text-align: center;
+    font-size: 2rem;
+    font-weight: bold;
+    margin-top: 1.5rem;
+}
+
+.life-container{
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    margin-top: 3rem;
+}
+
+.life-box{
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    justify-content: center;
+    gap: 0.5rem;
+    text-align: center;
+
+
+}
+
+.life-input{
+    width: 20%;
+    font-size: 1.5rem;
+    margin:auto;
+    text-align: center;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    border-radius: 10px;
+    border: none;
+    box-shadow: var(--shadow-small);
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;}
+}

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.spec.ts

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

src/app/journal/journal-stats/life-container/life/life-details/life-details.component.ts

@@ -0,0 +1,46 @@
+import { Component, Input } from '@angular/core';
+import { DetailsService } from 'src/services/details/details.service';
+
+@Component({
+  selector: 'app-life-details',
+  templateUrl: './life-details.component.html',
+  styleUrls: ['./life-details.component.scss'],
+})
+export class LifeDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
+
+  @Input() lifeData: any;
+
+  public maxHitPoints: number = 0;
+  public currentHitPoints: number = 0;
+  public temporaryHitPoints: number = 0;
+
+  public ngOnInit(): void {
+    this.maxHitPoints = this.lifeData.maxHitPoints;
+    this.currentHitPoints = this.lifeData.currentHitPoints;
+    this.temporaryHitPoints = this.lifeData.temporaryHitPoints;
+  }
+
+  public checkValidity(): void {
+    if (this.currentHitPoints > this.maxHitPoints) {
+      this.currentHitPoints = this.maxHitPoints;
+    }
+  }
+
+  public close(result: string): void {
+    if (result === 'update') {
+      console.log(
+        this.maxHitPoints,
+        this.currentHitPoints,
+        this.temporaryHitPoints
+      );
+      this.detailsAccessor.closePanel(result, {
+        maxHitPoints: this.maxHitPoints,
+        currentHitPoints: this.currentHitPoints,
+        temporaryHitPoints: this.temporaryHitPoints,
+      });
+    } else if (result === 'dismiss') {
+      this.detailsAccessor.closePanel({ state: result });
+    }
+  }
+}

src/app/journal/journal-stats/life-container/life/life.component.html

@@ -1,5 +1,5 @@
 <div class="life-box">
-  <div class="life-box-name">Trefferpunkte</div>
+  <div class="life-box-name" (click)="openDetailsPanel()">Trefferpunkte</div>
   <div class="life-box-bar">
     <div
       class="life-box-bar-current"

src/app/journal/journal-stats/life-container/life/life.component.ts

@@ -1,5 +1,7 @@
 import { Component } from '@angular/core';
 import { DataService } from 'src/services/data/data.service';
+import { DetailsService } from 'src/services/details/details.service';
+import { LifeDetailsComponent } from './life-details/life-details.component';
 
 @Component({
   selector: 'app-life',
@@ -7,7 +9,10 @@ import { DataService } from 'src/services/data/data.service';
   styleUrls: ['./life.component.scss'],
 })
 export class LifeComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   public maxHitPoints: number = 0;
   public currentHitPoints: number = 0;
@@ -18,61 +23,38 @@ export class LifeComponent {
   public missingHitPointsPercentage: number = 0;
 
   ngOnInit(): void {
-    this.initMaxSubscription();
-    this.initCurrentSubscription();
-    this.initTemporarySubscription();
-  }
-
-  private initMaxSubscription(): void {
-    this.dataAccessor.hitPointMaximum$.subscribe((newValue: any) => {
-      this.maxHitPoints = newValue.value;
-      this.calculatePercentages();
-    });
-  }
-
-  private initCurrentSubscription(): void {
-    this.dataAccessor.currentHitPoints$.subscribe((newValue: any) => {
-      this.currentHitPoints = newValue.value;
-      this.calculatePercentages();
-    });
-  }
-
-  private initTemporarySubscription(): void {
-    this.dataAccessor.temporaryHitPoints$.subscribe((newValue: any) => {
-      this.temporaryHitPoints = newValue.value;
-      this.calculatePercentages();
-    });
+    const lifeData = this.dataAccessor.hitPoints;
+    this.maxHitPoints = lifeData.maxHitPoints;
+    this.currentHitPoints = lifeData.currentHitPoints;
+    this.temporaryHitPoints = lifeData.temporaryHitPoints;
+    this.calculatePercentages();
   }
 
   public addHitPoints(): void {
     if (this.currentHitPoints < this.maxHitPoints) {
-      this.dataAccessor.updateCharacterData({
-        name: 'currentHitPoints',
-        value: this.currentHitPoints + 1,
-      });
+      this.currentHitPoints = this.currentHitPoints + 1;
+      this.updateDatabase();
+      this.calculatePercentages();
     }
   }
 
   public removeHitPoints(): void {
     if (this.temporaryHitPoints > 0) {
-      this.dataAccessor.updateCharacterData({
-        name: 'temporaryHitPoints',
-        value: this.temporaryHitPoints - 1,
-      });
+      this.temporaryHitPoints = this.temporaryHitPoints - 1;
+      this.updateDatabase();
+      this.calculatePercentages();
     } else if (this.currentHitPoints > 0) {
-      this.dataAccessor.updateCharacterData({
-        name: 'currentHitPoints',
-        value: this.currentHitPoints - 1,
-      });
+      this.currentHitPoints = this.currentHitPoints - 1;
+      this.updateDatabase();
+      this.calculatePercentages();
     }
   }
 
   public addTemporaryHitPoints(): void {
     if (this.currentHitPoints > 0) {
-      this.dataAccessor.updateCharacterData({
-        name: 'temporaryHitPoints',
-        value: this.temporaryHitPoints + 1,
-      });
+      this.temporaryHitPoints = this.temporaryHitPoints + 1;
+      this.updateDatabase();
+      this.calculatePercentages();
     }
   }
 
@@ -87,5 +69,34 @@ export class LifeComponent {
       this.maxHitPoints;
   }
 
-  // TODO: Set life: Modalmit dem man die Were genau einstellen kann
+  public openDetailsPanel(): void {
+    this.detailsAccessor.openPanel(LifeDetailsComponent, {
+      lifeData: {
+        maxHitPoints: this.maxHitPoints,
+        currentHitPoints: this.currentHitPoints,
+        temporaryHitPoints: this.temporaryHitPoints,
+      },
+    });
+    // The result from the details panel with return values
+    const resultSubscription = this.detailsAccessor.result$.subscribe(
+      (result) => {
+        console.log(result);
+        this.maxHitPoints = result.data.maxHitPoints;
+        this.currentHitPoints = result.data.currentHitPoints;
+        this.temporaryHitPoints = result.data.temporaryHitPoints;
+
+        this.calculatePercentages();
+        this.updateDatabase();
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
+
+  public updateDatabase() {
+    this.dataAccessor.hitPoints = {
+      maxHitPoints: this.maxHitPoints,
+      currentHitPoints: this.currentHitPoints,
+      temporaryHitPoints: this.temporaryHitPoints,
+    };
+  }
 }

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.html

@@ -0,0 +1 @@
+<p>weapon-details works!</p>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.spec.ts

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

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-weapon-details',
+  templateUrl: './weapon-details.component.html',
+  styleUrls: ['./weapon-details.component.scss']
+})
+export class WeaponDetailsComponent {
+
+}

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.html

@@ -8,7 +8,7 @@
     class="example-box"
     *ngFor="let weapon of weapons; let index = index"
     cdkDrag
-    (change)="updateWeaponInDatabase()"
+    (click)="openDetailsPanel(index)"
   >
     <div class="weapon-type">
       <icon
@@ -65,7 +65,6 @@
         [size]="'s'"
         [type]="'UI'"
         [icon]="'edit'"
-        (click)="emitUpdateWeapon(index)"
         [class]="'pointer'"
       ></icon>
     </div>

src/app/journal/journal-stats/weapons-container/weapon-table/weapon-table.component.ts

@@ -5,6 +5,8 @@ import { Attribute } from 'src/interfaces/attribute';
 import { Weapon } from 'src/interfaces/weapon';
 // import { Damage } from 'src/interfaces/damage';
 import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import { DetailsService } from 'src/services/details/details.service';
+import { WeaponDetailsComponent } from './weapon-details/weapon-details.component';
 
 @Component({
   selector: 'weapon-table',
@@ -12,7 +14,10 @@ import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
   styleUrls: ['./weapon-table.component.scss'],
 })
 export class WeaponTableComponent {
-  public constructor(public dataAccessor: DataService) {}
+  public constructor(
+    public dataAccessor: DataService,
+    public detailsAccessor: DetailsService
+  ) {}
 
   @Output() public createNewWeapon: EventEmitter<void> =
     new EventEmitter<void>();
@@ -106,6 +111,23 @@ export class WeaponTableComponent {
     this.updateWeaponInDatabase();
   }
 
+  public openDetailsPanel(index: number): void {
+    this.detailsAccessor.openPanel(WeaponDetailsComponent, {
+      weapon: this.weapons[index],
+    });
+    const resultSubscription = this.detailsAccessor.result$.subscribe(
+      (result) => {
+        console.log(result);
+        if (result.state === 'delete') {
+          this.deleteWeapon(index);
+        } else if (result.state === 'update') {
+          this.emitUpdateWeapon(index);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
+
   public emitUpdateWeapon(index: number): void {
     this.updateWeaponEvent.emit({ weapon: this.weapons[index], index: index });
     console.log('emitUpdateWeapon()');

src/app/journal/journal.module.ts

@@ -48,6 +48,8 @@ import { ToolsModalComponent } from './journal-stats/ability-panel/proficiencies
 import { TraitDetailsComponent } from './journal-stats/ability-panel/trait-table/trait-details/trait-details.component';
 import { DetailsPanelComponent } from './journal-home/details-panel/details-panel.component';
 import { AbilityDetailsComponent } from './journal-stats/ability-panel/ability-table/ability-details/ability-details.component';
+import { LifeDetailsComponent } from './journal-stats/life-container/life/life-details/life-details.component';
+import { WeaponDetailsComponent } from './journal-stats/weapons-container/weapon-table/weapon-details/weapon-details.component';
 
 @NgModule({
   declarations: [
@@ -90,6 +92,8 @@ import { AbilityDetailsComponent } from './journal-stats/ability-panel/ability-t
     TraitDetailsComponent,
     DetailsPanelComponent,
     AbilityDetailsComponent,
+    LifeDetailsComponent,
+    WeaponDetailsComponent,
   ],
   imports: [
     CommonModule,

src/app/shared-components/ui-button/ui-button.component.ts

@@ -14,9 +14,11 @@ export class UiButtonComponent {
 
   public textArray: any = {
     add: 'Hinzufügen',
+    apply: 'Anwenden',
     edit: 'Anpassen',
     delete: 'Löschen',
     dismiss: 'Abbrechen',
+    update: 'Aktualisieren',
   };
 
   constructor() {}

src/services/data/data.service.ts

@@ -407,6 +407,21 @@ export class DataService {
     // TODO: Datenbank updaten
   }
 
+  private _hitPoints = {
+    maxHitPoints: 10,
+    currentHitPoints: 8,
+    temporaryHitPoints: 1,
+  };
+
+  public set hitPoints(hitPointsData: any) {
+    console.log('hitPointsData: ', hitPointsData);
+    this._hitPoints = hitPointsData;
+  }
+
+  public get hitPoints(): any {
+    return this._hitPoints;
+  }
+
   private armorClassSubject = new BehaviorSubject<object>({
     name: 'armorClass',
     value: 19,
@@ -425,24 +440,6 @@ export class DataService {
   });
   public speed$ = this.speedSubject.asObservable();
 
-  private hitPointMaximumSubject = new BehaviorSubject<object>({
-    name: 'hitPointMaximum',
-    value: 10,
-  });
-  public hitPointMaximum$ = this.hitPointMaximumSubject.asObservable();
-
-  private currentHitPointsSubject = new BehaviorSubject<object>({
-    name: 'currentHitPoints',
-    value: 5,
-  });
-  public currentHitPoints$ = this.currentHitPointsSubject.asObservable();
-
-  private temporaryHitPointsSubject = new BehaviorSubject<object>({
-    name: 'temporaryHitPoints',
-    value: 3,
-  });
-  public temporaryHitPoints$ = this.temporaryHitPointsSubject.asObservable();
-
   private hitDiceSubject = new BehaviorSubject<object>({
     name: 'hitDice',
     value: '',

src/services/details/details.service.ts

@@ -19,10 +19,10 @@ export class DetailsService {
   }
 
   // Is called from the dynamic component to close the offcanvas
-  public closePanel(result: any) {
+  public closePanel(result: any, data?: any) {
     // console.log('closePanel', result);
     // Is listened to in the host component where the panel was opened, to initiate further steps
-    this.resultSubject.next(result);
+    this.resultSubject.next({ state: result, data: data });
     this.closePanelSubject.next('close');
   }
 }

src/styles.scss

@@ -11,6 +11,7 @@ $dialog-position-right: 20%;
 
 // general
 :root{
+    // colors
     --primary-color: #d8ac96;
     --primary-color-light: #e8c7b5;
     --primary-color-dark: #d89777;
@@ -24,14 +25,20 @@ $dialog-position-right: 20%;
     --quaternary-color-light: #7a9e65;
     --quaternary-color-dark: #6eae52;
 
-    --background-color: #ede2db;
+    --background-color: #fff2e9;
+
+    // shadows
+    --shadow-small: 4px 4px 10px 4px rgba(0,0,0,0.2);
+    --shadow-medium: 4px 4px 10px 6px rgba(0,0,0,0.2);
+    --shadow-large: 4px 4px 10px 8px rgba(0,0,0,0.2);
+                   
     
 }
 
 
 // details-panel
 
-.vertical-button-wrapper{
+.vertical-button-wrapper-3{
     width: 100%;
     position: absolute;
     bottom: 2rem;
@@ -44,6 +51,19 @@ $dialog-position-right: 20%;
     justify-content: center;
 }
 
+.vertical-button-wrapper-2{
+    width: 100%;
+    position: absolute;
+    bottom: 2rem;
+    display: grid;
+    grid-template-rows: 1fr 1fr;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin-top: 2rem;
+    align-items: center;
+    justify-content: center;
+}
+
 .details-name{
     font-size: 1.5rem;
     font-weight: bold;