DNDTools/src/app/journal/weapon-modal/weapon-modal.component.html

<ngx-smart-modal
  #weaponModal
  identifier="weaponModal"
  id="weaponModal"
  (onAnyCloseEventFinished)="removeData()"
  (onOpenFinished)="checkIfUpdate()"
>
  <div>
    <h2 style="text-align: center">Waffe hinzufügen</h2>

    <div class="add-form-group">
      <div class="input-element">
        <label for="weaponName">Name</label>
        <input
          type="text"
          class="add-input"
          id="weaponName"
          [(ngModel)]="newWeaponName"
        />
      </div>
      <div class="form-element-row">
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponProficient" />
          <label for="weaponProficient">Geübt</label>
        </div>
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponIsFinesse" />
          <label for="weaponFinesse">Finesse</label>
        </div>
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponIsVersatile" />
          <label for="Vielseitig">Vielseitig</label>
        </div>
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponIsTwoHanded" />
          <label for="weaponTwoHanded">Zweihändig</label>
        </div>
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponIsRanged" />
          <label for="weaponRanged">Fernkampf</label>
        </div>
        <div class="checkbox-element">
          <select [(ngModel)]="newWeaponWeight">
            <option *ngFor="let weight of weights" [value]="weight">
              {{ weight }}
            </option>
          </select>
          <label>Gewicht</label>
        </div>
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponCanBeThrown" />
          <label for="weaponRanged">Wurfwaffe</label>
        </div>
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="newWeaponIsMagical" />
          <label>Magisch</label>
        </div>
      </div>

      <div class="input-element">
        <label for="weaponAttackBonus">Angriffsbonus</label>
        <select [(ngModel)]="newWeaponAttackBonus">
          <option
            *ngFor="let attackBonus of attackBonuses"
            [value]="attackBonus"
          >
            {{ attackBonus }}
          </option>
        </select>
      </div>

      <div class="input-element" *ngIf="newWeaponIsMagical">
        <label>Magischer Modifikator</label>
        <select [(ngModel)]="newWeaponMagicBonus">
          <option
            *ngFor="let magicBonus of magicBonuses"
            [value]="magicBonus.value"
          >
            {{ magicBonus.display }}
          </option>
        </select>
      </div>

      <div class="input-element" *ngIf="newWeaponIsRanged">
        <label for="weaponRange">Reichweite</label>
        <input
          type="text"
          class="add-input"
          id="weaponRange"
          [(ngModel)]="newWeaponRange"
        />
      </div>

      <div class="input-element" *ngIf="newWeaponCanBeThrown">
        <label for="weaponRange">Wurfreichweite</label>
        <input
          type="text"
          class="add-input"
          id="weaponRange"
          [(ngModel)]="newWeaponThrowRange"
        />
      </div>

      <h3 style="text-align: center">Schaden</h3>

      <div class="damage-container">
        <div
          class="damage-box"
          *ngFor="let damage of newWeaponDamage; let index = index"
        >
          <div class="dice-row">
            <div class="flex-column">
              <label>Anzahl</label>
              <select [(ngModel)]="newWeaponDamage[index].diceNumber">
                <option *ngFor="let number of numbers" [value]="number">
                  {{ number }}
                </option>
              </select>
            </div>

            <div class="flex-column">
              <label>Würfel</label>
              <select [(ngModel)]="newWeaponDamage[index].diceType">
                <option *ngFor="let die of dice" [value]="die">
                  {{ die }}
                </option>
              </select>
            </div>
          </div>

          <div *ngIf="newWeaponIsVersatile && index === 0">
            Zweihändiger Schaden
            <div class="flex-row gap-10">
              <div class="flex-column">
                <label>Würfel</label>
                <select [(ngModel)]="newWeaponVersatileDamage">
                  <option *ngFor="let die of dice" [value]="die">
                    {{ die }}
                  </option>
                </select>
              </div>
            </div>
          </div>

          <label for="damageType">Schadensart</label>
          <select [(ngModel)]="newWeaponDamage[index].damageType">
            <option *ngFor="let type of damageTypes" [value]="type.value">
              {{ type.display }}
            </option>
          </select>

          <icon
            *ngIf="index > 0"
            (click)="removeDamage(index)"
            [size]="'m'"
            [type]="'UI'"
            [icon]="'remove'"
            [class]="'pointer'"
          ></icon>
        </div>
        <icon
          *ngIf="newWeaponDamage.length < 3"
          (click)="addDamage()"
          [size]="'m'"
          [type]="'UI'"
          [icon]="'add'"
          [class]="'pointer'"
        ></icon>
      </div>

      <!-- <button *ngIf="!isUpdate" (click)="createWeapon()">Erstellen</button>
      <button *ngIf="isUpdate" (click)="updateWeapon()">Aktualisieren</button> -->
      <div class="button-wrapper">
        <ui-button
          *ngIf="isUpdate"
          [type]="'apply'"
          [size]="'xlarge'"
          [color]="'primary'"
          (click)="updateWeapon()"
        ></ui-button>
        <ui-button
          *ngIf="!isUpdate"
          [type]="'add'"
          [size]="'xlarge'"
          [color]="'primary'"
          (click)="createWeapon()"
        ></ui-button>

        <ui-button
          [type]="'dismiss'"
          [size]="'xlarge'"
          [color]="'primary'"
          (click)="dismiss()"
        ></ui-button>
      </div>
    </div>
  </div>
</ngx-smart-modal>