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

<div class="inventory-container">
  <!-- ITEMS -->
  <div class="item-container">
    <div class="tab-row">
      <button
        class="tab-button"
        (click)="active = 1"
        [class]="active === 1 ? 'active' : ''"
      >
        Waffen und Rüstungen
      </button>
      <button
        class="tab-button"
        (click)="active = 2"
        [class]="active === 2 ? 'active' : ''"
      >
        Sonstiges
      </button>
    </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>

    @switch(active) { @case(1){
    <ng-container [ngTemplateOutlet]="weaponTemplate"></ng-container>
    } @case(2){
    <ng-container [ngTemplateOutlet]="miscTemplate"></ng-container>
    }}

    <div class="footer">
      <button (click)="addItem('items')">Eintrag hinzufügen</button>
    </div>
  </div>
  <div class="right-column">
    <!-- FOOD -->

    <div class="food-container">
      <div class="tab-row">
        <button
          class="tab-button"
          (click)="foodActive = 1"
          [class]="foodActive === 1 ? 'active' : ''"
        >
          Nahrung
        </button>
        <button
          class="tab-button"
          (click)="foodActive = 2"
          [class]="foodActive === 2 ? 'active' : ''"
        >
          Verbrauchsgegenstände
        </button>
      </div>
      <div class="heading-row">
        <div class="heading">Name</div>
        <div class="heading">
          {{ foodActive === 1 ? "Verzehrfertig" : "Wert" }}
        </div>
        <div class="heading">Gewicht</div>
        <div class="heading">Anzahl</div>
      </div>
      @switch(foodActive) { @case(1){
      <ng-container [ngTemplateOutlet]="foodTemplate"></ng-container>
      } @case(2){
      <ng-container [ngTemplateOutlet]="consumablesTemplate"></ng-container>
      } }

      <div class="footer">
        <button (click)="addItem('consumables')">Eintrag hinzufügen</button>
      </div>
    </div>

    <!-- MONEY -->
    <div class="money-container" (change)="updateMoney()">
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/platinum.svg" class="money-icon" />
          <input
            class="money-input"
            type="number"
            [(ngModel)]="money.platinum"
          />
        </div>
      </div>
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/gold.svg" class="money-icon" />
          <input class="money-input" type="number" [(ngModel)]="money.gold" />
        </div>
      </div>
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/silver.svg" class="money-icon" />
          <input class="money-input" type="number" [(ngModel)]="money.silver" />
        </div>
      </div>
      <div class="money-box">
        <div class="money-input-box">
          <img src="assets/icons/UIIcons/copper.svg" class="money-icon" />
          <input class="money-input" type="number" [(ngModel)]="money.copper" />
        </div>
      </div>
    </div>

    <!-- WEIGHT -->
    <div class="weight-container">
      <div style="font-size: 1.5rem; font-weight: bold">Gesamtlast:</div>
      <div class="weight-box">{{ totalWeight }} / {{ maximumWeight }} lb.</div>
    </div>
  </div>

  <!-- TEMPLATES -->

  <!-- WEAPONS -->
  <ng-template #weaponTemplate>
    <div
      cdkDropList
      class="item-list table-content"
      (cdkDropListDropped)="drop($event, weaponsAndArmor, 'weaponsAndArmor')"
    >
      @for (item of weaponsAndArmor; let index = $index; track item) {
      <div
        class="item"
        cdkDrag
        (click)="openItemsDetails(weaponsAndArmor, index, 'weaponsAndArmor')"
      >
        <div class="item-property">{{ item.name }}</div>
        <div class="item-property">{{ item.value }} Gold</div>
        <div class="item-property">{{ item.weight }} lb.</div>
        <div class="item-property">{{ item.quantity }}</div>
      </div>
      } @empty {
      <div class="empty-list">Kein Eintrag</div>
      }
    </div>
  </ng-template>

  <!-- MISCELLANEOUS -->
  <ng-template #miscTemplate>
    <div
      cdkDropList
      class="item-list table-content"
      (cdkDropListDropped)="drop($event, miscellaneous, 'miscellaneous')"
    >
      @for (item of miscellaneous; let index = $index; track item) {
      <div
        class="item"
        cdkDrag
        (click)="openItemsDetails(miscellaneous, index, 'miscellaneous')"
      >
        <div class="item-property">{{ item.name }}</div>
        <div class="item-property">{{ item.value }} Gold</div>
        <div class="item-property">{{ item.weight }} lb.</div>
        <div class="item-property">{{ item.quantity }}</div>
      </div>
      } @empty {
      <div class="empty-list">Kein Eintrag</div>
      }
    </div>
  </ng-template>

  <!-- CONSUMABLES -->
  <ng-template #consumablesTemplate>
    <div
      cdkDropList
      class="item-list table-content"
      (cdkDropListDropped)="drop($event, consumables, 'consumables')"
    >
      @for (item of consumables; let index = $index; track item) {
      <div
        class="item"
        cdkDrag
        (click)="openItemsDetails(consumables, index, 'consumables')"
      >
        <div class="item-property">{{ item.name }}</div>
        <div class="item-property">{{ item.value }} Gold</div>
        <div class="item-property">{{ item.weight }} lb.</div>
        <div class="item-property">{{ item.quantity }}</div>
      </div>
      } @empty {
      <div class="empty-list">Kein Eintrag</div>
      }
    </div>
  </ng-template>

  <!-- FOOD -->
  <ng-template #foodTemplate>
    <div
      cdkDropList
      class="item-list table-content"
      (cdkDropListDropped)="drop($event, food, 'food')"
    >
      @for (item of food; let index = $index; track item) {
      <div class="item" cdkDrag (click)="openFoodDetails(index)">
        <div class="item-property">{{ item.name }}</div>
        <div class="item-property">@if(item.isReady){Ja} @else {Nein}</div>
        <div class="item-property">{{ item.weight }} lb.</div>
        <div class="item-property">{{ item.quantity }}</div>
      </div>
      } @empty {
      <div class="empty-list">Kein Eintrag</div>
      }
    </div>
  </ng-template>
</div>