conditions-details.component.html 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!-- DESCRIPTION -->
  2. <div class="title">Zustände</div>
  3. <div class="content">
  4. Zustände ändern die Fähigkeiten einer Kreatur auf verschiedene Arten und
  5. können die Folgen von Zaubern, Klassenmerkmalen, Monsterangriffen oder anderen
  6. Fähigkeiten sein. Der Zustand hält solange an, bis er aufgehoben wird, oder
  7. wie seine Wirkungsdauer ist.
  8. </div>
  9. <div class="condition-handling">
  10. <!-- CURRENTLY ACTIVE CONDITIONS -->
  11. <div>
  12. <div class="heading left t-0 b-075">Momentane Zustäne</div>
  13. <mat-accordion>
  14. @for (condition of conditions; let index = $index; track condition ) {
  15. <mat-expansion-panel>
  16. <mat-expansion-panel-header>
  17. <mat-panel-title>{{ condition }}</mat-panel-title>
  18. </mat-expansion-panel-header>
  19. <ul>
  20. @for(description of conditionDescriptions[condition]; track
  21. description){
  22. <li>{{ description }}</li>
  23. }
  24. </ul>
  25. <icon-button
  26. [icon]="'delete'"
  27. style="margin: auto"
  28. (click)="removeCondition(index)"
  29. ></icon-button>
  30. </mat-expansion-panel>
  31. } @empty {
  32. <div class="empty-list">keine Zustände</div>
  33. }
  34. </mat-accordion>
  35. </div>
  36. <!-- ADD CONDITIONS -->
  37. <div class="heading left">Zustand hinzufügen</div>
  38. <div>
  39. <mat-form-field appearance="outline" class="t-075">
  40. <mat-label>Zustand</mat-label>
  41. <mat-select [(ngModel)]="currentCondition">
  42. @for (condition of notUsedConditions(); track condition) {
  43. <mat-option [value]="condition">{{ condition }}</mat-option
  44. >}
  45. </mat-select>
  46. </mat-form-field>
  47. @if(currentCondition !== '') {
  48. <icon-button
  49. style="display: inline; margin-left: 0.25rem"
  50. [icon]="'add'"
  51. (click)="addCondition()"
  52. ></icon-button>
  53. <div>
  54. <ul>
  55. @for(description of conditionDescriptions[currentCondition]; track
  56. description){
  57. <li>{{ description }}</li>
  58. }
  59. </ul>
  60. </div>
  61. }
  62. </div>
  63. </div>
  64. <!-- NAVIGATION BUTTONS -->
  65. <div class="vertical-buttons bottom">
  66. <ui-button [color]="'green'" [width]="'w20'" (click)="close('update')">
  67. Anpassen
  68. </ui-button>
  69. <ui-button [color]="'red'" [width]="'w20'" (click)="close('cancel')">
  70. Löschen
  71. </ui-button>
  72. </div>