changes before altering the modal

.nx/cache/d/daemon.log

@@ -460155,3 +460155,40 @@ To fix this, set a unique name for each project in a project.json inside the pro
 [NX Daemon Server] - 2023-11-27T15:52:38.589Z - [WATCHER]: Processing file changes in outputs
 [NX Daemon Server] - 2023-11-27T15:52:38.590Z - [WATCHER]: .nx/cache/d/daemon.log was modified
 [NX Daemon Server] - 2023-11-27T15:52:38.591Z - Done responding to the client null
+[NX Daemon Server] - 2023-11-28T06:10:57.510Z - Started listening on: \\.\pipe\nx\C:\Users\chris\AppData\Local\Temp\e6a479e02f1047051806\d.sock
+[NX Daemon Server] - 2023-11-28T06:10:57.520Z - [WATCHER]: Subscribed to changes within: c:\Users\chris\Softwareprojekte\Test\DnDTools (native)
+[NX Daemon Server] - 2023-11-28T06:10:57.521Z - Established a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-28T06:10:57.522Z - Established a connection. Number of open connections: 2
+[NX Daemon Server] - 2023-11-28T06:10:57.526Z - Closed a connection. Number of open connections: 1
+[NX Daemon Server] - 2023-11-28T06:10:57.527Z - [REQUEST]: Client Request for Project Graph Received
+[NX Daemon Server] - 2023-11-28T06:10:58.118Z - 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-28T06:10:58.119Z - [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\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:97:15)
+    at buildProjectsConfigurationsFromProjectPathsAndPlugins (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\project-configuration-utils.js:70:19)
+    at createProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:131:129)
+    at WorkspaceContext.<anonymous> (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:82:39)
+    at getProjectConfigurationsFromContext (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\utils\workspace-context.js:26:29)
+    at _retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\project-graph\utils\retrieve-workspace-files.js:81:72)
+    at retrieveProjectConfigurations (c:\Users\chris\Softwareprojekte\Test\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\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:102:34)
+    at async processFilesAndCreateAndSerializeProjectGraph (c:\Users\chris\Softwareprojekte\Test\DnDTools\node_modules\nx\src\daemon\server\project-graph-incremental-recomputation.js:138:17)
+[NX Daemon Server] - 2023-11-28T06:10:58.120Z - Time taken for 'hash changed files from watcher' 69.08570003509521ms
+[NX Daemon Server] - 2023-11-28T06:10:58.120Z - [WATCHER]: Processing file changes in outputs
+[NX Daemon Server] - 2023-11-28T06:10:58.121Z - Done responding to the client null

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

@@ -1 +1 @@
-{"processId":10316}
+{"processId":19756}

src/app/journal/journal-home/modal/modal.component.html

@@ -1,6 +1,6 @@
-<div id="myModal" class="modal-backdrop">
+<div id="myModal" class="modal-backdrop" (click)="cancel()">
   <!-- Modal content -->
-  <div class="modal-content">
+  <div class="modal-content" (click)="$event.stopPropagation()">
     <ng-template
       *ngComponentOutlet="modalComponent; inputs: inputData"
     ></ng-template>

src/app/journal/journal-home/modal/modal.component.scss

@@ -10,6 +10,7 @@
   overflow: auto; 
   background-color: rgb(0,0,0); 
   background-color: rgba(0,0,0,0.4); 
+  cursor: pointer;
 }
 
 /* Modal Content/Box */
@@ -19,6 +20,7 @@
   padding: 20px;
   border: 1px solid #888;
   width: 80%; /* Could be more or less, depending on screen size */
+  cursor: auto;
 }
 
 /* The Close Button */

src/app/journal/journal-home/modal/modal.component.ts

@@ -7,30 +7,34 @@ import { ModalService } from 'src/services/modal/modal.service';
   styleUrl: './modal.component.scss',
 })
 export class ModalComponent {
-  constructor(private modal: ModalService) {}
+  constructor(private modalAccessor: ModalService) {}
   public modalComponent: any;
   public inputData: any;
   public modalRef: any;
 
-  public open(): void {
-    console.log(this.modalRef);
-    this.modalRef!.style.display = 'block';
-  }
-
-  public close(): void {
-    this.modalRef!.style.display = 'none';
-  }
-
   ngOnInit() {
     this.modalRef = document.getElementById('myModal');
-    this.modal.modal$.subscribe((data) => {
+    this.modalAccessor.modal$.subscribe((data) => {
       console.log('modal component', data);
       this.modalComponent = data.component;
       this.inputData = data.data;
       this.open();
     });
-    this.modal.closeModal$.subscribe(() => {
+    this.modalAccessor.closeModal$.subscribe(() => {
       this.close();
     });
   }
+
+  public open(): void {
+    console.log(this.modalRef);
+    this.modalRef!.style.display = 'block';
+  }
+
+  public close(): void {
+    this.modalRef!.style.display = 'none';
+  }
+
+  public cancel() {
+    this.modalAccessor.handleModalClosing('cancel');
+  }
 }

src/app/journal/journal-inventory/food-details/food-details.component.html

@@ -0,0 +1,22 @@
+<p>food-details works!</p>
+
+<div class="vertical-button-wrapper-3">
+  <ui-button
+    [type]="'edit'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('update')"
+  ></ui-button>
+  <ui-button
+    [type]="'delete'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('delete')"
+  ></ui-button>
+  <ui-button
+    [type]="'dismiss'"
+    [size]="'xlarge'"
+    [color]="'primary'"
+    (click)="close('dismiss')"
+  ></ui-button>
+</div>

src/app/journal/journal-inventory/food-details/food-details.component.spec.ts

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

src/app/journal/journal-inventory/food-details/food-details.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input } from '@angular/core';
+import { Food } from 'src/interfaces/food';
+import { DetailsService } from 'src/services/details/details.service';
+
+@Component({
+  selector: 'app-food-details',
+  templateUrl: './food-details.component.html',
+  styleUrl: './food-details.component.scss',
+})
+export class FoodDetailsComponent {
+  public constructor(public detailsAccessor: DetailsService) {}
+
+  @Input() item: Food = {
+    name: '',
+    weight: 0,
+    quantity: 0,
+    ready: false,
+  };
+
+  public close(result: string): void {
+    this.detailsAccessor.closePanel(result);
+  }
+}

src/app/journal/journal-inventory/journal-inventory.component.html

@@ -54,99 +54,109 @@
   </div>
 
   <div class="food-container">
-    Nahrung
     <div
       cdkDropList
       class="example-list"
       (cdkDropListDropped)="drop($event, food, 'food')"
     >
-      @for (item of food; track item) {
-      <div class="example-box" cdkDrag>{{ item.name }}</div>
+      <div class="heading-row">
+        <div class="heading">Name</div>
+        <div class="heading">Fertig</div>
+        <div class="heading">Gewicht</div>
+        <div class="heading">Anzahl</div>
+      </div>
+      @for (item of food; let index = $index; track item) {
+      <div class="example-box" cdkDrag (click)="openFoodDetails(index)">
+        <div class="item">{{ item.name }}</div>
+        <div class="item">@if(item.ready){Ja} @else {Nein}</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
+      </div>
       }
     </div>
   </div>
-</div>
 
-<!-- WEAPONS -->
-<ng-template #weaponTemplate>
-  <div
-    cdkDropList
-    class="example-list"
-    (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
-  >
-    <div class="heading-row">
-      <div class="heading">Name</div>
-      <div class="heading">Wert</div>
-      <div class="heading">Gewicht</div>
-      <div class="heading">Anzahl</div>
-    </div>
-    @for (item of weaponsAndArmor; let index = $index; track item) {
+  <!-- WEAPONS -->
+  <ng-template #weaponTemplate>
     <div
-      class="example-box"
-      cdkDrag
-      (click)="openDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
+      cdkDropList
+      class="example-list"
+      (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
     >
-      <div class="item">{{ item.name }}</div>
-      <div class="item">{{ item.value }} Gold</div>
-      <div class="item">{{ item.weight }} Kg.</div>
-      <div class="item">{{ item.quantity }}</div>
+      <div class="heading-row">
+        <div class="heading">Name</div>
+        <div class="heading">Wert</div>
+        <div class="heading">Gewicht</div>
+        <div class="heading">Anzahl</div>
+      </div>
+      @for (item of weaponsAndArmor; let index = $index; track item) {
+      <div
+        class="example-box"
+        cdkDrag
+        (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
+      >
+        <div class="item">{{ item.name }}</div>
+        <div class="item">{{ item.value }} Gold</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
+      </div>
+      }
     </div>
-    }
-  </div>
-</ng-template>
+  </ng-template>
 
-<!-- CONSUMABLES -->
-<ng-template #consumablesTemplate>
-  <div
-    cdkDropList
-    class="example-list"
-    (cdkDropListDropped)="drop($event, consumables, 'consumables')"
-  >
-    <div class="heading-row">
-      <div class="heading">Name</div>
-      <div class="heading">Wert</div>
-      <div class="heading">Gewicht</div>
-      <div class="heading">Anzahl</div>
-    </div>
-    @for (item of consumables; let index = $index; track item) {
+  <!-- CONSUMABLES -->
+  <ng-template #consumablesTemplate>
     <div
-      class="example-box"
-      cdkDrag
-      (click)="openDetails(consumables, index, 'consumables')"
+      cdkDropList
+      class="example-list"
+      (cdkDropListDropped)="drop($event, consumables, 'consumables')"
     >
-      <div class="item">{{ item.name }}</div>
-      <div class="item">{{ item.value }} Gold</div>
-      <div class="item">{{ item.weight }} Kg.</div>
-      <div class="item">{{ item.quantity }}</div>
+      <div class="heading-row">
+        <div class="heading">Name</div>
+        <div class="heading">Wert</div>
+        <div class="heading">Gewicht</div>
+        <div class="heading">Anzahl</div>
+      </div>
+      @for (item of consumables; let index = $index; track item) {
+      <div
+        class="example-box"
+        cdkDrag
+        (click)="openItemsDetails(consumables, index, 'consumables')"
+      >
+        <div class="item">{{ item.name }}</div>
+        <div class="item">{{ item.value }} Gold</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
+      </div>
+      }
     </div>
-    }
-  </div>
-</ng-template>
+  </ng-template>
 
-<!-- MISCELLANEOUS -->
-<ng-template #miscTemplate>
-  <div
-    cdkDropList
-    class="example-list"
-    (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
-  >
-    <div class="heading-row">
-      <div class="heading">Name</div>
-      <div class="heading">Wert</div>
-      <div class="heading">Gewicht</div>
-      <div class="heading">Anzahl</div>
-    </div>
-    @for (item of miscellaneous; let index = $index; track item) {
+  <!-- MISCELLANEOUS -->
+  <ng-template #miscTemplate>
     <div
-      class="example-box"
-      cdkDrag
-      (click)="openDetails(miscellaneous, index, 'miscellaneous')"
+      cdkDropList
+      class="example-list"
+      (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
     >
-      <div class="item">{{ item.name }}</div>
-      <div class="item">{{ item.value }} Gold</div>
-      <div class="item">{{ item.weight }} Kg.</div>
-      <div class="item">{{ item.quantity }}</div>
+      <div class="heading-row">
+        <div class="heading">Name</div>
+        <div class="heading">Wert</div>
+        <div class="heading">Gewicht</div>
+        <div class="heading">Anzahl</div>
+      </div>
+      @for (item of miscellaneous; let index = $index; track item) {
+      <div
+        class="example-box"
+        cdkDrag
+        (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
+      >
+        <div class="item">{{ item.name }}</div>
+        <div class="item">{{ item.value }} Gold</div>
+        <div class="item">{{ item.weight }} Kg.</div>
+        <div class="item">{{ item.quantity }}</div>
+      </div>
+      }
     </div>
-    }
-  </div>
-</ng-template>
+  </ng-template>
+</div>

src/app/journal/journal-inventory/journal-inventory.component.scss

@@ -10,6 +10,24 @@
 .item-container{
     grid-area: 1 / 1 / 11 / 7;
     border: 1px solid black;
+
+    .heading-row{
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr;
+      padding: 0 10px;;
+    }
+
+    .heading{
+      font-size: 1.5rem;
+      font-weight: 600;
+      padding-left: 2rem;
+    }
+
+    .item{
+      font-size: 1.25rem;
+      font-weight: 600;
+      padding-left: 2rem;
+    }
 }
 
 .money-container{
@@ -19,34 +37,31 @@
 
 .food-container{
     grid-area: 7 / 8 / 11 / 11;
-     border: 1px solid black;
-}
-
-.heading-row{
-  display: grid;
-  grid-template-columns: 2fr 1fr 1fr 1fr;
-  padding: 0 10px;;
-}
-
-.heading{
-  font-size: 1.5rem;
-  font-weight: 600;
-  padding-left: 2rem;
-}
+    border: 1px solid black;
 
-.item{
-  font-size: 1.25rem;
-  font-weight: 600;
-  padding-left: 2rem;
+    .heading-row{
+      display: grid;
+      grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
+      padding: 0 10px;;
+    }
+
+    .heading{
+      font-size: 1.5rem;
+      font-weight: 500;
+      padding-left: 1rem;
+    }
+
+    .example-box {
+      grid-template-columns: 2fr 1.5fr 1.5fr 1.5fr;
+    }
+
+    .item{
+      font-size: 1.25rem;
+      font-weight: 600;
+      padding-left: 1rem;
+    }
 }
 
-
-
-
-
-
-
-
 .example-list {
   max-width: 100%;
   border: solid 1px #ccc;

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

@@ -12,6 +12,7 @@ import { Food } from 'src/interfaces/food';
 import { SimpleItemDetailsComponent } from './simple-item-details/simple-item-details.component';
 import { ModalService } from 'src/services/modal/modal.service';
 import { SimpleItemModalComponent } from './simple-item-modal/simple-item-modal.component';
+import { FoodDetailsComponent } from './food-details/food-details.component';
 
 @Component({
   selector: 'app-journal-inventory',
@@ -56,7 +57,7 @@ export class JournalInventoryComponent {
     }
   }
 
-  public openDetails(list: any, index: number, listName: string): void {
+  public openItemsDetails(list: any, index: number, listName: string): void {
     this.detailsAccessor.openPanel(SimpleItemDetailsComponent, {
       item: list[index],
     });
@@ -67,7 +68,25 @@ export class JournalInventoryComponent {
           list.splice(index, 1);
           this.updateDatabase(listName);
         } else if (result.state === 'update') {
-          this.openModal(list, index, listName);
+          this.openItemModal(list, index, listName);
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
+
+  public openFoodDetails(index: number): void {
+    this.detailsAccessor.openPanel(FoodDetailsComponent, {
+      item: this.food[index],
+    });
+    const resultSubscription = this.detailsAccessor.result$.subscribe(
+      (result) => {
+        console.log('result kam zurück:', result);
+        if (result.state === 'delete') {
+          this.food.splice(index, 1);
+          this.dataAccessor.food = this.food;
+        } else if (result.state === 'update') {
+          this.openFoodModal(index);
         }
         resultSubscription.unsubscribe();
       }
@@ -90,7 +109,31 @@ export class JournalInventoryComponent {
     this.dataAccessor.money = this.money;
   }
 
-  public openModal(list: SimpleItem[], index: number, listname: string): void {
+  public updateFood(): void {
+    this.dataAccessor.food = this.food;
+  }
+
+  public openFoodModal(index: number): void {
+    this.modalAccessor.openModal(SimpleItemModalComponent, {
+      item: JSON.parse(JSON.stringify(this.food[index])),
+    });
+    const resultSubscription = this.modalAccessor.result$.subscribe(
+      (result) => {
+        console.log('result kam zurück: ', result);
+        if (result.state === 'update') {
+          this.food[index] = result.data;
+          this.updateFood();
+        }
+        resultSubscription.unsubscribe();
+      }
+    );
+  }
+
+  public openItemModal(
+    list: SimpleItem[],
+    index: number,
+    listname: string
+  ): void {
     this.modalAccessor.openModal(SimpleItemModalComponent, {
       item: JSON.parse(JSON.stringify(list[index])),
     });

src/app/journal/journal.module.ts

@@ -75,6 +75,7 @@ import { JournalMapsComponent } from './journal-maps/journal-maps.component';
 import { JournalRulesetComponent } from './journal-ruleset/journal-ruleset.component';
 import { JournalSettingsComponent } from './journal-settings/journal-settings.component';
 import { SimpleItemModalComponent } from './journal-inventory/simple-item-modal/simple-item-modal.component';
+import { FoodDetailsComponent } from './journal-inventory/food-details/food-details.component';
 
 @NgModule({
   declarations: [
@@ -144,6 +145,7 @@ import { SimpleItemModalComponent } from './journal-inventory/simple-item-modal/
     SimpleItemDetailsComponent,
     ModalComponent,
     SimpleItemModalComponent,
+    FoodDetailsComponent,
   ],
   imports: [
     CommonModule,

src/interfaces/food.ts

@@ -2,5 +2,6 @@ export interface Food {
   name: string;
   ready: boolean;
   quantity: number;
+  weight: number;
   description?: string;
 }

src/services/data/data.service.ts

@@ -764,11 +764,13 @@ export class DataService {
       name: 'Brot',
       quantity: 7,
       ready: true,
+      weight: 0.5,
     },
     {
       name: 'Suppe',
       quantity: 4,
       ready: true,
+      weight: 0.5,
     },
   ];
 

src/services/modal/modal.service.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core';
 import { Subject } from 'rxjs';
 import { SimpleItem } from 'src/interfaces/simple-item';
+import { Food } from 'src/interfaces/food';
 
 @Injectable({
   providedIn: 'root',
@@ -21,7 +22,7 @@ export class ModalService {
   }
 
   // Is called from the dynamic component to close the offcanvas
-  public handleModalClosing(result: any, data?: SimpleItem) {
+  public handleModalClosing(result: any, data?: SimpleItem | Food) {
     console.log('closePanel', result);
     // Is listened to in the host component where the panel was opened, to initiate further steps
     this._resultSubject.next({ state: result, data: data });