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

<div class="dimensions">
  <div class="title">
    @if(isModification){Zauber bearbeiten}@else{Zauber erstellen}
  </div>

  <div class="content b-0">
    <div class="input-label">Name</div>
    <mat-form-field appearance="outline" class="w-100">
      <input matInput [(ngModel)]="name" />
    </mat-form-field>
    <hr />

    <div class="flex-row t-1">
      <div class="checkbox-column">
        <div class="checkbox-row">
          <input id="verbal" type="checkbox" [(ngModel)]="needsVerbal" />
          <label for="verbal">Verbal</label>
        </div>
        <div class="checkbox-row">
          <input id="somatic" type="checkbox" [(ngModel)]="needsSomatic" />
          <label for="somatic">Geste</label>
        </div>
        <div class="checkbox-row">
          <input id="material" type="checkbox" [(ngModel)]="needsMaterial" />
          <label for="material">Material</label>
        </div>
        <div class="checkbox-row">
          <input
            id="concentration"
            type="checkbox"
            [(ngModel)]="needsConcentration"
          />
          <label for="concentration">Konzentration</label>
        </div>

        <div class="checkbox-row">
          <input
            id="canRitual"
            type="checkbox"
            (change)="unsetRitual($event)"
            [(ngModel)]="canRitual"
          />
          <label for="canRitual">Ritual möglich</label>
        </div>
        <div class="checkbox-row">
          <input
            id="isRitual"
            type="checkbox"
            (change)="setRitual($event)"
            [(ngModel)]="isRitual"
          />
          <label for="isRitual">Ist Ritual</label>
        </div>
      </div>
      <div class="checkbox-column">
        <div class="checkbox-row">
          <input id="doesDamage" type="checkbox" [(ngModel)]="doesDamage" />
          <label for="doesDamage">Schaden</label>
        </div>
        <div class="checkbox-row">
          <input id="doesHeal" type="checkbox" [(ngModel)]="doesHeal" />
          <label for="doesHeal">Heilung</label>
        </div>
        <div class="checkbox-row">
          <input id="isRanged" type="checkbox" [(ngModel)]="isRanged" />
          <label for="isRanged">Hat Reichweite</label>
        </div>
        <div class="checkbox-row">
          <input
            id="hasAreaOfEffect"
            type="checkbox"
            [(ngModel)]="hasAreaOfEffect"
          />
          <label for="hasAreaOfEffect">Hat Flächeneffekt</label>
        </div>

        <div class="checkbox-row">
          <input
            id="needsSavingThrow"
            type="checkbox"
            [(ngModel)]="needsSavingThrow"
          />
          <label for="needsSavingThrow">Erfordert Rettungswurf</label>
        </div>
        <div class="checkbox-row">
          @if(!needsSavingThrow){
          <input
            id="needsAttackRoll"
            type="checkbox"
            [(ngModel)]="needsAttackRoll"
          />
          <label for="needsAttackRoll">Erfordert Angriffswurf</label>
          }@else {
          <label>Attribut</label>
          <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
            <option
              *ngFor="let attribute of savingThrowAttributes"
              [value]="attribute.value"
            >
              {{ attribute.display }}
            </option>
          </select>
          }
        </div>
      </div>

      <div class="checkbox-column">
        <div class="input-row">
          <label>Kosten</label>
          <mat-form-field appearance="outline">
            <mat-select [(ngModel)]="cost">
              @for (cost of costs; track cost) {
              <mat-option [value]="cost.value">{{ cost.display }}</mat-option
              >}
            </mat-select>
          </mat-form-field>
        </div>

        <div class="input-row duration">
          <label>Dauer</label>
          <mat-form-field appearance="outline">
            <input type="number" matInput [(ngModel)]="duration" />
            <span matSuffix class="suffix">Runden</span>
          </mat-form-field>
        </div>

        <div class="input-row">
          <label>Stufe</label>
          <mat-form-field appearance="outline">
            <mat-select [(ngModel)]="level">
              @for (level of [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; track level) {
              <mat-option [value]="level">{{ level }}</mat-option
              >}
            </mat-select>
          </mat-form-field>
        </div>
        <div class="input-row">
          <label>Schule</label>
          <mat-form-field appearance="outline">
            <mat-select [(ngModel)]="school">
              @for (school of schools; track school) {
              <mat-option [value]="school.value">{{
                school.display
              }}</mat-option
              >}
            </mat-select>
          </mat-form-field>
        </div>
      </div>
    </div>

    <hr />

    <!-- TAB-PANEL -->
    <div class="d-flex">
      <div
        ngbNav
        #nav="ngbNav"
        [(activeId)]="active"
        class="flex-column navigation-bar"
        orientation="vertical"
      >
        <!-- DAMAGE -->
        <ng-container ngbNavItem="damage">
          @if(doesDamage){
          <button ngbNavLink>Schaden</button>
          }@else {
          <button class="disabled-button" disabled>Schaden</button>
          }
          <ng-template ngbNavContent>
            <div class="tab-content flex-row t-05">
              @for(damageEntry of damage; let index = $index; track
              damageEntry){

              <div class="damage-box">
                <div class="subheading left t-025">
                  @if(index == 0){Schaden} @else {Weiterer Schaden}
                </div>
                <div class="input-label">Anzahl Würfel</div>
                <mat-form-field appearance="outline">
                  <mat-select [(ngModel)]="damageEntry.diceNumber">
                    @for (number of numbers; track number) {
                    <mat-option [value]="number"> {{ number }} </mat-option>}
                  </mat-select>
                </mat-form-field>

                <div class="input-label t-05">Würfelart</div>
                <mat-form-field appearance="outline">
                  <mat-select [(ngModel)]="damageEntry.diceType">
                    @for (die of dice; track die) {
                    <mat-option [value]="die"> {{ die }} </mat-option>}
                  </mat-select>
                </mat-form-field>

                <div class="input-label t-05">Schadensart</div>
                <mat-form-field appearance="outline">
                  <mat-select [(ngModel)]="damageEntry.damageType">
                    @for (type of damageTypes; track type) {
                    <mat-option [value]="type.value">
                      {{ type.display }}
                    </mat-option>
                    }
                  </mat-select>
                </mat-form-field>
                @if(index !== 0){
                <icon-button
                  [icon]="'delete'"
                  (click)="removeDamage(index)"
                ></icon-button>
                }
              </div>
              @if(damage.length < 2){
              <icon-button
                [icon]="'add'"
                style="margin-top: 7rem; margin-left: 5rem"
                (click)="addDamage()"
              ></icon-button>
              } }
            </div>
          </ng-template>
        </ng-container>
        <!-- HEAL -->
        <ng-container ngbNavItem="heal">
          @if(doesHeal){
          <button ngbNavLink>Heilung</button>} @else {
          <button class="disabled-button" disabled>Heilung</button>
          }
          <ng-template ngbNavContent>
            <div class="tab-content t-05">
              <div class="input-label">Würfelanzahl</div>
              <mat-form-field appearance="outline">
                <mat-select [(ngModel)]="heal.diceNumber">
                  @for (number of numbers; track number) {
                  <mat-option [value]="number">{{ number }}</mat-option
                  >}
                </mat-select>
              </mat-form-field>

              <div class="input-label">Würfelart</div>
              <mat-form-field appearance="outline">
                <mat-select [(ngModel)]="heal.diceType">
                  @for (die of dice; track die) {
                  <mat-option [value]="die">{{ die }}</mat-option
                  >}
                </mat-select>
              </mat-form-field>
            </div>
          </ng-template>
        </ng-container>
        <!-- RANGE -->
        <ng-container ngbNavItem="range">
          @if(isRanged || hasAreaOfEffect){
          <button ngbNavLink>Reichweite</button>
          } @else {
          <button class="disabled-button" disabled>Reichweite</button>
          }
          <ng-template ngbNavContent>
            <div class="range-container">
              <div class="input-label">Reichweite</div>
              <mat-form-field appearance="outline">
                <input type="number" matInput [(ngModel)]="range" />
                <span class="suffix" matTextSuffix>Fuß</span>
              </mat-form-field>
              @if(hasAreaOfEffect) {
              <div class="input-label">Flächenart</div>
              <mat-form-field appearance="outline">
                <mat-select [(ngModel)]="areaOfEffectType">
                  @for (areaType of areaTypes; track areaType) {
                  <mat-option [value]="areaType.value">{{
                    areaType.display
                  }}</mat-option
                  >}
                </mat-select>
              </mat-form-field>
              <div class="input-label">Durchmesser</div>
              <mat-form-field appearance="outline">
                <input type="number" matInput [(ngModel)]="diameter" />
                <span class="suffix" matTextSuffix>Fuß</span>
              </mat-form-field>
              }
            </div>
          </ng-template>
        </ng-container>
        <!-- DESCRIPTION -->
        <ng-container ngbNavItem="description">
          <button ngbNavLink>Beschreibung</button>
          <ng-template ngbNavContent>
            <div class="NgxEditor__Wrapper">
              <ngx-editor-menu [editor]="editor" [toolbar]="toolbar">
              </ngx-editor-menu>
              <ngx-editor
                [editor]="editor"
                [(ngModel)]="description_de"
                placeholder="Beschreibung des Zaubers"
              ></ngx-editor>
            </div>
          </ng-template>
        </ng-container>
      </div>

      <div
        [ngbNavOutlet]="nav"
        style="
          width: 100%;
          min-height: 20rem;
          max-height: 26rem;
          overflow-y: auto;
          overflow-x: hidden;
        "
        class="ms-4"
      ></div>
    </div>

    <hr class="b-0" />
  </div>

  <!-- <div class="horizontal-buttons">
    @if(isModification){
    <ui-button [color]="'green'" style="width: 40%" (click)="update()">
      Anpassen
    </ui-button>
    }@else{
    <ui-button [color]="'green'" style="width: 40%" (click)="add()">
      Erstellen
    </ui-button>
    }
    <ui-button [color]="'red'" style="width: 40%" (click)="cancel()">
      Abbrechen
    </ui-button> -->

  <!-- <div class="range-area-container">
      <div class="range-box">
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="isRanged" />
          <label>Fernkampf</label>
        </div>
        <div class="checkbox-element" *ngIf="isRanged">
          <input type="text" [(ngModel)]="range" />
          <label>Reichweite</label>
        </div>
      </div>

      <div class="area-box">
        <div class="checkbox-element">
          <input type="checkbox" [(ngModel)]="hasAreaOfEffect" />
          <label>Flächeneffekt</label>
        </div>
        <div class="input-element" *ngIf="hasAreaOfEffect">
          <input type="text" class="add-input" [(ngModel)]="diameter" />
          <label>diameter</label>
        </div>
        <div class="checkbox-element" *ngIf="hasAreaOfEffect">
          <select [(ngModel)]="areaOfEffectType">
            <option *ngFor="let areaType of areaTypes" [value]="areaType.value">
              {{ areaType.display }}
            </option>
          </select>
          <label>Flächenart</label>
        </div>
      </div>
    </div>

    <div style="display: flex">
      <div>
        <input type="checkbox" [(ngModel)]="needsSavingThrow" />
        <label>Rettungswurf?</label>
      </div>

      <div>
        <input type="checkbox" [(ngModel)]="needsAttackRoll" />
        <label>Angriff?</label>
      </div>
    </div> -->

  <!-- <ng-container
      *ngIf="needsSavingThrow"
      [ngTemplateOutlet]="attackTabContent"
    ></ng-container>

    <ng-container
      *ngIf="doesDamage"
      [ngTemplateOutlet]="damageTabContent"
    ></ng-container>

    <ng-container
      *ngIf="doesHeal"
      [ngTemplateOutlet]="healTabContent"
    ></ng-container>

    <ng-container [ngTemplateOutlet]="descriptionTabContent"></ng-container> -->

  <!-- Button section -->
  <div class="horizontal-buttons">
    <ui-button
      [color]="'green'"
      style="width: 40%"
      (click)="isModification ? update() : add()"
    >
      @if(isModification){Anwenden}@else{Erstellen}
    </ui-button>
    <ui-button [color]="'red'" style="width: 40%" (click)="cancel()"
      >Abbrechen
    </ui-button>
  </div>
</div>
<!-- </div> -->

<!-- templates -->

<!-- <ng-template #attackTabContent>
  <div>
    <select [(ngModel)]="savingThrowAttribute" *ngIf="needsSavingThrow">
      <option
        *ngFor="let attribute of savingThrowAttributes"
        [value]="attribute.value"
      >
        {{ attribute.display }}
      </option>
    </select>
    <label *ngIf="needsSavingThrow">Attribut</label>
  </div>
</ng-template> -->

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

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

      <label for="damageType">Schadensart</label>
      <select [(ngModel)]="damage.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="damage.length < 3"
      (click)="addDamage()"
      [size]="'m'"
      [type]="'UI'"
      [icon]="'add'"
      [class]="'pointer'"
    ></icon>
  </div>
</ng-template> -->

<!-- <ng-template #healTabContent>
  <div class="heal-container">
    <div class="dice-row">
      <div class="flex-column">
        <label>Anzahl</label>
        <select [(ngModel)]="heal.diceNumber">
          <option *ngFor="let number of numbers" [value]="number">
            {{ number }}
          </option>
        </select>
      </div>

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

<!-- <ng-template #descriptionTabContent>
  <textarea style="height: 10rem" [(ngModel)]="description_de"></textarea>
</ng-template> -->