Traits and abilities done

Started working with the offcanvas

.nx/cache/d/daemon.log

@@ -459070,3 +459070,40 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-10T06:52:22.007Z - Time taken for 'hash changed files from watcher' 43.397600173950195ms
 [NX Daemon Server] - 2023-11-10T06:52:22.008Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-10T06:52:22.008Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-12T18:46:55.322Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\b99a3e5445b3962b8dd8\d.sock
+[NX Daemon Server] - 2023-11-12T18:46:55.329Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools (native)
+[NX Daemon Server] - 2023-11-12T18:46:55.335Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-12T18:46:55.337Z - Closed a connection. Number of open connections: 0
+[NX Daemon Server] - 2023-11-12T18:46:55.337Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-12T18:46:55.338Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-12T18:46:55.918Z - Error detected when recomputing project file map: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+[NX Daemon Server] - 2023-11-12T18:46:55.918Z - [REQUEST]: Responding to the client with an error. Error when preparing serialized project graph. The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+Error: The following projects are defined in multiple locations:
+- DnDTools: 
+  - 
+  - .
+
+To fix this, set a unique name for each project in a project.json inside the project's root. If the project does not currently have a project.json, you can create one that contains only a name.
+    at readProjectConfigurationsFromRootMap (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:58:12)
+    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
+    at async processCollectedUpdatedAndDeletedFiles (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\CharacterJournal\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-12T18:46:55.920Z - Time taken for 'hash changed files from watcher' 89.20329999923706ms
+[NX Daemon Server] - 2023-11-12T18:46:55.920Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-12T18:46:55.921Z - Done responding to the client null

.nx/cache/d/server-process.json

@@ -1 +1 @@
-{"processId":2884}
+{"processId":18256}

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

@@ -1,52 +1,91 @@
-<!-- <div cdkDropList class="example-list" (cdkDropListDropped)="drop($event)">
-  <div
-    class="example-box"
-    [class]="ability.currentlyUsedCharges === ability.charges ? 'used' : ''"
-
-    cdkDrag
-  >
-    <div *ngIf="ability.cost != 'none'" class="cost-box">
-      {{ costTranslator[ability.cost] }}
-    </div>
-    <div class="ability-name">{{ ability.name }}</div>
-    <br />
-
-    <p>{{ ability.shortDescription }}</p>
-
-    <div class="charges-box" *ngIf="ability.charges != 0">
-      <span>Aufladungen: </span>
-      <span
-        *ngFor="let _ of getArray(ability.charges); let chargeIndex = index"
-      >
-        <input
-          [id]="'checkbox' + abilityIndex + '-' + chargeIndex"
-          type="checkbox"
-          (click)="$event.stopPropagation()"
-          (change)="
-            $event.stopPropagation();
-            handleChangedCharges(abilityIndex, $event.target)
-          "
-        />
-      </span>
-    </div>
-  </div> -->
-
-<button class="accordion">Section 1</button>
+<button class="accordion" (click)="toggleAcordion($event)">
+  Waffen und Rüstungen
+</button>
 <div class="panel">
-  <p>Lorem ipsum... 1</p>
+  <div>
+    Einfache Waffen:
+    <input
+      type="checkbox"
+      [(ngModel)]="proficiencies.weapons.simple"
+      (change)="updateDatabase()"
+    />
+  </div>
+  <div>
+    Schwere Waffen:
+    <input
+      type="checkbox"
+      [(ngModel)]="proficiencies.weapons.martial"
+      (change)="updateDatabase()"
+    />
+  </div>
+  <div>
+    Weitere Waffen:
+    <input
+      [(ngModel)]="proficiencies.weapons.other"
+      (change)="updateDatabase()"
+    />
+  </div>
+  <br />
+  <div>
+    Leichte Rüstungen:
+    <input
+      type="checkbox"
+      [(ngModel)]="proficiencies.armor.light"
+      (change)="updateDatabase()"
+    />
+  </div>
+  <div>
+    Mittlere Rüstungen:
+    <input
+      type="checkbox"
+      [(ngModel)]="proficiencies.armor.medium"
+      (change)="updateDatabase()"
+    />
+  </div>
+  <div>
+    Schwere Rüstungen:
+    <input
+      type="checkbox"
+      [(ngModel)]="proficiencies.armor.heavy"
+      (change)="updateDatabase()"
+    />
+  </div>
 </div>
 
-<button class="accordion">Section 2</button>
+<button class="accordion" (click)="toggleAcordion($event)">
+  Werkzeuge und Sprachen
+</button>
 <div class="panel">
-  <p>Lorem ipsum... 2</p>
-</div>
-
-<button class="accordion">Section 3</button>
-<div class="panel">
-  <p>Lorem ipsum... 3</p>
+  <h5>Werkzeuge</h5>
+  <div
+    cdkDropList
+    class="example-list"
+    (cdkDropListDropped)="dropTools($event)"
+  >
+    <div class="example-box" *ngFor="let tool of proficiencies.tools" cdkDrag>
+      {{ tool }}
+    </div>
+  </div>
+  <h5>Sprachen</h5>
+  <div
+    cdkDropList
+    class="example-list"
+    (cdkDropListDropped)="dropLanguages($event)"
+  >
+    <div
+      class="example-box"
+      *ngFor="let language of proficiencies.languages"
+      cdkDrag
+    >
+      {{ language }}
+    </div>
+  </div>
+  <button (click)="modifyToolsAndLanguages()">
+    <icon [size]="'xs'" [type]="'UI'" [icon]="'edit'"></icon>Anpassen
+  </button>
 </div>
 
-<button class="accordion">Section 4</button>
-<div class="panel">
-  <p>Lorem ipsum... 4</p>
-</div>
+<tools-modal
+  [proficiencies]="proficiencies"
+  (proficienciesUpdated)="updateProficiencies($event)"
+></tools-modal>

src/app/journal/journal-stats/ability-panel/proficiencies-table/proficiencies-table.component.scss

@@ -20,6 +20,69 @@
 .panel {
   padding: 0 18px;
   background-color: white;
-  display: none;
+  max-height: 0;
   overflow: hidden;
+  transition: max-height 0.2s ease-out;
+}
+
+.accordion:after {
+  content: '\02795'; /* Unicode character for "plus" sign (+) */
+  font-size: 13px;
+  color: #777;
+  float: right;
+  margin-left: 5px;
+}
+
+.active:after {
+  content: "\2796"; /* Unicode character for "minus" sign (-) */
+}
+
+// 
+.example-list {
+  width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.example-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  // align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
 }

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

@@ -18,14 +18,57 @@ export class ProficienciesTableComponent {
   public constructor(
     public dataAccessor: DataService,
     public ngxSmartModalService: NgxSmartModalService
-  ) {}
+  ) {
+    this.proficiencies = this.dataAccessor.getProficiencies();
+  }
 
   public proficiencies!: any;
 
-  ngOnInit(): void {}
+  public ngOnInit(): void {
+    // this.proficiencies = this.dataAccessor.getProficiencies();
+  }
 
-  // public drop(event: CdkDragDrop<string[]>): void {
-  //   moveItemInArray(this.abilities, event.previousIndex, event.currentIndex);
-  //   this.updateDatabase();
-  // }
+  public dropTools(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(
+      this.proficiencies.tools,
+      event.previousIndex,
+      event.currentIndex
+    );
+    this.updateDatabase();
+  }
+
+  public dropLanguages(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(
+      this.proficiencies.languages,
+      event.previousIndex,
+      event.currentIndex
+    );
+    this.updateDatabase();
+  }
+
+  public toggleAcordion(event: any): void {
+    if (event.target.classList.contains('accordion')) {
+      event.target.classList.toggle('active');
+      var panel = event.target.nextElementSibling;
+      if (panel.style.maxHeight) {
+        panel.style.maxHeight = null;
+      } else {
+        panel.style.maxHeight = panel.scrollHeight + 'px';
+      }
+    }
+  }
+
+  public modifyToolsAndLanguages(): void {
+    this.ngxSmartModalService.getModal('modifyToolsAndLanguages').open();
+  }
+
+  public updateDatabase(): void {
+    this.dataAccessor.setProficiencies(this.proficiencies);
+  }
+
+  public updateProficiencies(data: any): void {
+    this.proficiencies = data;
+    this.ngxSmartModalService.getModal('modifyToolsAndLanguages').close();
+    this.updateDatabase();
+  }
 }

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.html

@@ -0,0 +1,61 @@
+<ngx-smart-modal #modifyToolsAndLanguages identifier="modifyToolsAndLanguages">
+  <h4>Werkzeuge</h4>
+  <div
+    cdkDropList
+    class="example-list"
+    (cdkDropListDropped)="dropTools($event)"
+  >
+    <div
+      class="example-box"
+      *ngFor="let tool of proficiencies.tools; let toolIndex = index"
+      cdkDrag
+    >
+      <input type="text" [(ngModel)]="proficiencies.tools[toolIndex]" /><icon
+        [size]="'s'"
+        [type]="'UI'"
+        [icon]="'remove'"
+        [class]="'pointer'"
+        (click)="deleteTool(toolIndex)"
+      ></icon>
+    </div>
+    <icon
+      [size]="'s'"
+      [type]="'UI'"
+      [icon]="'add'"
+      [class]="'pointer'"
+      (click)="addTool()"
+    ></icon>
+  </div>
+  <br />
+  <br />
+  <h4>Sprachen</h4>
+  <div
+    cdkDropList
+    class="example-list"
+    (cdkDropListDropped)="dropLanguages($event)"
+  >
+    <div
+      class="example-box"
+      *ngFor="let tool of proficiencies.languages; let languageIndex = index"
+      cdkDrag
+    >
+      <input type="text" [(ngModel)]="proficiencies.languages[languageIndex]" />
+      <icon
+        [size]="'s'"
+        [type]="'UI'"
+        [icon]="'remove'"
+        [class]="'pointer'"
+        (click)="deleteLanguage(languageIndex)"
+      ></icon>
+    </div>
+    <icon
+      [size]="'s'"
+      [type]="'UI'"
+      [icon]="'add'"
+      [class]="'pointer'"
+      (click)="addLanguage()"
+    ></icon>
+  </div>
+
+  <button (click)="updateProficiencies()">Aktualisieren</button>
+</ngx-smart-modal>

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.scss

@@ -0,0 +1,49 @@
+// 
+.example-list {
+  width: 100%;
+  border: solid 1px #ccc;
+  min-height: 60px;
+  display: block;
+  background: white;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.example-box {
+  padding: 20px 10px;
+  border-bottom: solid 1px #ccc;
+  color: rgba(0, 0, 0, 0.87);
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  // align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  cursor: move;
+  background: white;
+  font-size: 14px;
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
+              0 8px 10px 1px rgba(0, 0, 0, 0.14),
+              0 3px 14px 2px rgba(0, 0, 0, 0.12);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.example-box:last-child {
+  border: none;
+}
+
+.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/journal/journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component.spec.ts

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

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

@@ -0,0 +1,57 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import {
+  CdkDragDrop,
+  CdkDropList,
+  CdkDrag,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop';
+
+@Component({
+  selector: 'tools-modal',
+  templateUrl: './tools-modal.component.html',
+  styleUrls: ['./tools-modal.component.scss'],
+})
+export class ToolsModalComponent {
+  @Input() public proficiencies: any;
+  @Output() public proficienciesUpdated = new EventEmitter<any>();
+
+  public ngOnInit(): void {
+    this.proficiencies = JSON.parse(JSON.stringify(this.proficiencies));
+  }
+
+  public dropTools(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(
+      this.proficiencies.tools,
+      event.previousIndex,
+      event.currentIndex
+    );
+  }
+
+  public dropLanguages(event: CdkDragDrop<string[]>): void {
+    moveItemInArray(
+      this.proficiencies.languages,
+      event.previousIndex,
+      event.currentIndex
+    );
+  }
+
+  public addTool(): void {
+    this.proficiencies.tools.push('');
+  }
+
+  public deleteTool(index: number): void {
+    this.proficiencies.tools.splice(index, 1);
+  }
+
+  public addLanguage(): void {
+    this.proficiencies.languages.push('');
+  }
+
+  public deleteLanguage(index: number): void {
+    this.proficiencies.languages.splice(index, 1);
+  }
+
+  public updateProficiencies(): void {
+    this.proficienciesUpdated.emit(this.proficiencies);
+  }
+}

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

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

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

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

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

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

src/app/journal/journal.module.ts

@@ -44,6 +44,8 @@ import { SpellslotsModalComponent } from './journal-stats/ability-panel/spellslo
 
 import { SharedComponentsModule } from '../shared-components/shared-components.module';
 import { ProficienciesTableComponent } from './journal-stats/ability-panel/proficiencies-table/proficiencies-table.component';
+import { ToolsModalComponent } from './journal-stats/ability-panel/proficiencies-table/tools-modal/tools-modal.component';
+import { TraitDetailsComponent } from './journal-stats/ability-panel/trait-table/trait-details/trait-details.component';
 
 @NgModule({
   declarations: [
@@ -82,6 +84,8 @@ import { ProficienciesTableComponent } from './journal-stats/ability-panel/profi
     SpellslotsComponent,
     SpellslotsModalComponent,
     ProficienciesTableComponent,
+    ToolsModalComponent,
+    TraitDetailsComponent,
   ],
   imports: [
     CommonModule,

src/services/data/data.service.ts

@@ -376,6 +376,7 @@ export class DataService {
     weapons: {
       simple: true,
       martial: true,
+      other: ['Kurzschwert', 'Gleve'],
     },
     tools: ['Schmiedewerkzeuge', 'Würfel'],
     languages: ['Gemeinsprache', 'Elfisch', 'Zwergisch'],