added buttons to add remove, delete and update spells and fovaorite spells

src/app/journal/journal-spellcards/journal-spellcards.component.ts

@@ -96,6 +96,8 @@ export class JournalSpellcardsComponent {
           }, 100);
         } else if (result.state === 'add') {
           this.dataAccessor.addFavoriteSpell(spell);
+        } else if (result.state === 'removeFromFavorites') {
+          this.dataAccessor.removeFavoriteSpell(spell);
         }
       },
     );

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

@@ -33,8 +33,9 @@ export class SpellTableComponent {
   }
 
   public showFullSpellcard(spellIndex: number): void {
+    const spell = this.spells[spellIndex];
     this.modalAccessor.openModal(FullSpellcardComponent, {
-      spell: this.spells[spellIndex],
+      spell: spell,
       isFromDashboard: true,
     });
     const resultSubscription = this.modalAccessor.result$.subscribe(
@@ -43,6 +44,8 @@ export class SpellTableComponent {
         if (result.state === 'remove') {
           this.spells.splice(spellIndex, 1);
           this.updateSpellsInDatabase();
+        } else if (result.state === 'removeFromFavorites') {
+          this.dataAccessor.removeFavoriteSpell(spell);
         }
       },
     );

src/app/shared-components/full-spellcard/full-spellcard.component.html

@@ -107,7 +107,9 @@
           } @else if (spell.needsAttackRoll) {
             <div class="name">{{ "fullSpellcards.attack" | translate }}</div>
           } @else {
-            <div class="name">{{ "fullSpellcards.modifier" | translate }}</div>
+            <div class="name">
+              {{ "fullSpellcards.modifier" | translate }}
+            </div>
           }
         </div>
         <div class="value">
@@ -241,4 +243,28 @@
       'var(--' + spell.school.toLowerCase() + '-border-large)'
     "
   ></div>
+  <div class="button-container">
+    @if (spell.isCustom) {
+      <button class="green" (click)="update()">Bearbeiten</button>
+    }
+    <button
+      [class]="alreadyInFavorites ? 'red' : 'green'"
+      style="height: 4rem"
+      (click)="alreadyInFavorites ? removeFromFavorites() : addToFavorites()"
+    >
+      @if (alreadyInFavorites) {
+        Aus Favoriten entfernen
+      } @else {
+        Zu Favoriten hinzufügen
+      }
+    </button>
+    @if (!isFromDashboard) {
+      @if (spell.isCustom) {
+        <button class="red" style="height: 4rem" (click)="delete()">
+          Endgültig löschen
+        </button>
+      }
+      <button class="red" (click)="remove()">Entfernen</button>
+    }
+  </div>
 </div>

src/app/shared-components/full-spellcard/full-spellcard.component.scss

@@ -12,6 +12,12 @@
   z-index: 1;
 }
 
+// .spellmodal-container {
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+
 .card-container {
   width: 38rem;
   height: 50rem;
@@ -192,3 +198,59 @@
   margin: 0 auto;
   padding: 1rem;
 }
+
+.button-container {
+  position: absolute;
+  left: 38rem;
+  top: 2rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 1.5rem;
+  margin-left: 1.5rem;
+
+  button {
+    display: block;
+    font-size: 1.25rem;
+    font-weight: 600;
+    height: 3rem;
+    width: 10rem;
+    border-radius: 10px;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    transition: background-color 0.25s ease-in-out;
+  }
+
+  .disabled {
+    cursor: not-allowed;
+    filter: grayscale(50%);
+  }
+
+  .green {
+    background-color: var(--accept);
+    &:hover {
+      background-color: var(--accept-hover);
+    }
+  }
+
+  .red {
+    background-color: var(--delete);
+    &:hover {
+      background-color: var(--delete-hover);
+    }
+  }
+
+  .blue {
+    background-color: var(--edit);
+    &:hover {
+      background-color: var(--edit-hover);
+    }
+  }
+
+  .neutral {
+    background-color: var(--neutral);
+    &:hover {
+      background-color: var(--neutral-hover);
+    }
+  }
+}

src/app/shared-components/full-spellcard/full-spellcard.component.ts

@@ -12,10 +12,7 @@ import { TranslateService } from '@ngx-translate/core';
 export class FullSpellcardComponent {
   @Input() public spell!: Spell;
   @Input() public isFromDashboard!: boolean;
-  @Input() public alreadyInFavorites!: boolean;
-
-  public saveDC: number = 0;
-  public attackBonus: string = '+3';
+  @Input() public alreadyInFavorites: boolean = true;
 
   public constructor(
     private modalAccessor: ModalService,
@@ -23,10 +20,6 @@ export class FullSpellcardComponent {
     public translate: TranslateService,
   ) {}
 
-  // ngOnInit(): void {
-  //   console.log('Der zauber: ', this.spell);
-  // }
-
   public setBackupImage(event: any): void {
     event.target.src = 'assets/images/spells/backup.jpg';
   }
@@ -46,4 +39,10 @@ export class FullSpellcardComponent {
   public addToFavorites(): void {
     this.modalAccessor.handleModalClosing('add', undefined);
   }
+
+  public removeFromFavorites(): void {
+    console.log('removeFromFavorites');
+
+    this.modalAccessor.handleModalClosing('removeFromFavorites', undefined);
+  }
 }

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

@@ -1,4 +1,7 @@
-<button [class]="width + ' ' + color">
+<button
+  [disabled]="disabled"
+  [class]="disabled ? width + ' ' + color + '' + disabled : width + ' ' + color"
+>
   <!-- <ng-content></ng-content> -->
   {{ "buttons." + type | translate }}
 </button>

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

@@ -12,6 +12,11 @@ button {
   width: 100%;
 }
 
+.disabled {
+  cursor: not-allowed;
+  filter: grayscale(50%);
+}
+
 .green {
   background-color: var(--accept);
   &:hover {

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

@@ -6,6 +6,9 @@ import { Component, Input } from '@angular/core';
   styleUrls: ['./ui-button.component.scss'],
 })
 export class UiButtonComponent {
+  /** Defines if the ui-button is disabled */
+  @Input() disabled: boolean = false;
+
   /** Available colors: green | red | blue | neutral */
   @Input() type: string = 'default';
 

src/assets/i18n/de.json

@@ -70,7 +70,10 @@
     "close": "Schließen",
     "discard": "Verwerfen",
     "export": "Exportieren",
-    "deleteSelected": "Ausgewählte löschen"
+    "deleteSelected": "Ausgewählte löschen",
+    "addToFavorites": "Zu Favoriten hinzufügen",
+    "alradyInFavorites": "Bereits in Favoriten",
+    "finalDelete": "Endgültig löschen?"
   },
   "time": {
     "action": "Aktion",

src/services/data/data.service.ts

@@ -237,7 +237,9 @@ export class DataService {
   }
 
   public removeFavoriteSpell(spell: Spell): void {
-    const index = this._favoriteSpells.indexOf(spell);
+    const index = this._favoriteSpells.findIndex(
+      (favorite) => favorite.id === spell.id,
+    );
     if (index > -1) {
       this._favoriteSpells.splice(index, 1);
       this.setData('favoriteSpells', { spells: this._favoriteSpells });