added a switch to select from all or only class specific spells.

src/app/character/character-picker/character-picker.component.html

@@ -54,7 +54,7 @@
 
 <ng-template #warning let-warning>
   <div class="modal-header">
-    <h4 class="modal-title" id="modal-basic-title">v0.7.0</h4>
+    <h4 class="modal-title" id="modal-basic-title">0.9.2</h4>
     <button
       type="button"
       class="btn-close"

src/app/journal/journal-spellcards/add-card/add-card.component.html

@@ -22,6 +22,21 @@
     </div>
   } @else if (state === 3) {
     <div class="spell-selection">
+      <div class="controll-row">
+        <div class="toggle-row">
+          <span class="toggle-label" [class]="showAll ? 'inactive' : 'active'"
+            >Klasse</span
+          >
+          <mat-slide-toggle
+            [hideIcon]="true"
+            (change)="toggleShowAll()"
+          ></mat-slide-toggle>
+          <span class="toggle-label" [class]="showAll ? 'active' : 'inactive'"
+            >Alle</span
+          >
+        </div>
+        <icon-button [icon]="'cross'" (click)="resetThis()"></icon-button>
+      </div>
       <input
         type="text"
         class="spell-name"
@@ -53,7 +68,7 @@
         </ul>
       </div>
 
-      <button class="cancel-button" (click)="resetThis()">Abbrechen</button>
+      <!-- <button class="cancel-button" (click)="resetThis()">Abbrechen</button> -->
     </div>
   }
 </div>

src/app/journal/journal-spellcards/add-card/add-card.component.scss

@@ -60,11 +60,38 @@
   }
 }
 
+.controll-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 0.25rem 0.25rem 0.375rem 0.5rem;
+}
+
+.toggle-row {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.toggle-label {
+  transition: all 0.2s ease-in-out;
+  width: 3rem;
+  font-weight: 600;
+}
+
+.active {
+  // font-size: 1.125rem;
+}
+
+.inactive {
+  color: rgb(124, 124, 124);
+}
+
 .spell-selection {
   width: 100%;
   height: 100%;
   background-color: var(--background-color);
-  padding-top: 0.875rem;
+  padding-top: 0.375rem;
 }
 
 .add-button {
@@ -75,7 +102,6 @@
   border-radius: 10px;
   box-shadow: var(--shadow);
   font-weight: 600;
-  // opacity: 0;
   transition: all 0.25s ease-in-out;
 
   &:hover {
@@ -89,7 +115,6 @@
   display: block;
   border-radius: 5px;
   border: var(--border);
-  // box-shadow: var(--shadow);
 }
 
 .available-spells {
@@ -98,7 +123,7 @@
   border: var(--border);
   border-radius: 5px;
   overflow: auto;
-  height: 13rem;
+  height: 14.5rem;
   background-color: white;
   box-shadow: var(--shadow);
 

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

@@ -17,10 +17,12 @@ export class AddCardComponent {
   @Output() onSpellSelected = new EventEmitter<any>();
 
   public newSpellName: string = '';
+  private classAvailableSpells: any[] = [];
   private allAvailableSpells: any[] = [];
   public availableSpells: any[] = [];
   public isModification: boolean | undefined;
   public state: number = 1;
+  public showAll: boolean = false;
 
   public constructor(
     private spellsAccessor: SpellsService,
@@ -28,39 +30,49 @@ export class AddCardComponent {
   ) {}
 
   public ngOnInit(): void {
-    this.allAvailableSpells = this.spellsAccessor.getAvailableSpells(
+    this.classAvailableSpells = this.spellsAccessor.getAvailableSpells(
       this.level,
       this.dataAccessor.characterData.class,
     );
+    this.allAvailableSpells = this.spellsAccessor.getAvailableSpells(
+      this.level,
+    );
+    console.log('all: ', this.allAvailableSpells);
+    console.log('class: ', this.classAvailableSpells);
+
     this.filterSpellArray();
     this.spellsAccessor.closeSubject$.subscribe((level) => {
-      console.log('Close subject received: ', level);
-
       if (level !== this.level) {
         this.resetThis();
       }
     });
   }
 
+  public toggleShowAll(): void {
+    this.showAll = !this.showAll;
+    if (this.isModification) {
+      this.filterSpellArrayForModification();
+    } else {
+      this.filterSpellArray();
+    }
+  }
+
   public emitNewSpell(): void {
-    console.warn('Emitting new spell to create: ', this.level);
     this.createNewSpell.emit(this.level);
     this.resetThis();
   }
 
   public emitNewSpellFromOfficial(spell: Spell): void {
-    console.warn('Emitting new spell to modify from official: ', spell);
-
     this.createNewSpellFromOfficial.emit(spell);
     this.resetThis();
   }
 
   public continueToSpellSelection(modify: boolean): void {
-    this.allAvailableSpells = this.spellsAccessor.getAvailableSpells(
+    this.classAvailableSpells = this.spellsAccessor.getAvailableSpells(
       this.level,
       this.dataAccessor.characterData.class,
     );
-    this.filterSpellArray();
+    // this.filterSpellArray();
     this.isModification = modify;
     if (modify) {
       this.filterSpellArrayForModification();
@@ -86,8 +98,11 @@ export class AddCardComponent {
   }
 
   public filterSpellArray(): void {
-    if (this.newSpellName.length >= 1) {
-      this.availableSpells = this.allAvailableSpells.filter(
+    let array = this.showAll
+      ? this.allAvailableSpells
+      : this.classAvailableSpells;
+    if (this.newSpellName.length > 0) {
+      this.availableSpells = array.filter(
         (spell) =>
           (spell.german
             .toLowerCase()
@@ -98,15 +113,19 @@ export class AddCardComponent {
           !this.alreadyUsedSpells.includes(spell.id),
       );
     } else {
-      this.availableSpells = this.allAvailableSpells.filter(
+      this.availableSpells = array.filter(
         (spell) => !this.alreadyUsedSpells.includes(spell.id),
       );
     }
+    console.log('available: ', this.availableSpells);
   }
 
   public filterSpellArrayForModification(): void {
-    if (this.newSpellName.length >= 1) {
-      this.availableSpells = this.allAvailableSpells.filter(
+    let array = this.showAll
+      ? this.allAvailableSpells
+      : this.classAvailableSpells;
+    if (this.newSpellName.length > 0) {
+      this.availableSpells = array.filter(
         (spell) =>
           spell.german
             .toLowerCase()
@@ -114,7 +133,8 @@ export class AddCardComponent {
           spell.english.toLowerCase().includes(this.newSpellName.toLowerCase()),
       );
     } else {
-      this.availableSpells = this.allAvailableSpells;
+      this.availableSpells = array;
     }
+    console.log('available: ', this.availableSpells);
   }
 }

src/services/spells/spells.service.ts

@@ -29,12 +29,23 @@ export class SpellsService {
    * @param characterClass The character class of the spell.
    * @returns An array of available spells.
    */
-  public getAvailableSpells(level: number, characterClass: string): Spell[] {
-    let result = this.spells
-      .filter((spell) => spell.level === level)
-      .filter((spell) => spell.classes.includes(characterClass));
-    result.push(...this.customSpells.filter((spell) => spell.level === level));
-    return result;
+  public getAvailableSpells(level: number, characterClass?: string): Spell[] {
+    let result: Spell[] = [];
+    if (characterClass !== undefined) {
+      result = this.spells
+        .filter((spell) => spell.level === level)
+        .filter((spell) => spell.classes.includes(characterClass));
+      result.push(
+        ...this.customSpells.filter((spell) => spell.level === level),
+      );
+      return result;
+    } else {
+      result = this.spells.filter((spell) => spell.level === level);
+      result.push(
+        ...this.customSpells.filter((spell) => spell.level === level),
+      );
+      return result;
+    }
   }
 
   /**