journal-character.component.html 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. <div class="header">
  2. <div class="header-data">
  3. <input type="number" [(ngModel)]="data.level" (change)="updateData()" />
  4. <div class="horizontal-ruler"></div>
  5. Stufe
  6. </div>
  7. <div class="name">{{ name }}</div>
  8. <div class="header-data">
  9. <input
  10. type="number"
  11. [(ngModel)]="data.experience"
  12. (change)="updateData()"
  13. />
  14. <div class="horizontal-ruler"></div>
  15. Erfahrungspunkte
  16. </div>
  17. </div>
  18. <div class="character-body">
  19. <div class="d-flex">
  20. <div
  21. ngbNav
  22. #nav="ngbNav"
  23. [(activeId)]="activeTab"
  24. class="flex-column navigation-bar"
  25. orientation="vertical"
  26. >
  27. <ng-container ngbNavItem="general">
  28. <button ngbNavLink>Allgemeines</button>
  29. <ng-template ngbNavContent>
  30. <general></general>
  31. </ng-template>
  32. </ng-container>
  33. <ng-container ngbNavItem="species">
  34. <button ngbNavLink>Volk</button>
  35. <ng-template ngbNavContent>
  36. <species></species>
  37. </ng-template>
  38. </ng-container>
  39. <ng-container ngbNavItem="class">
  40. <button ngbNavLink>Klasse</button>
  41. <ng-template ngbNavContent>
  42. <class></class>
  43. </ng-template>
  44. </ng-container>
  45. <ng-container ngbNavItem="subclass">
  46. @if(data.level >= 3 || data.class === "Cleric"){
  47. <button ngbNavLink>Unterklasse</button>
  48. <ng-template ngbNavContent>
  49. <subclass></subclass>
  50. </ng-template>
  51. }@else{
  52. <button class="disabled-button" disabled>
  53. <img
  54. style="display: inline"
  55. src="assets/icons/UIIcons/lock.svg"
  56. alt="locked"
  57. />
  58. Unterklasse
  59. </button>
  60. }
  61. </ng-container>
  62. <ng-container ngbNavItem="combined">
  63. <button ngbNavLink>Tabellen- ansicht</button>
  64. <ng-template ngbNavContent>
  65. <!-- <class></class> -->
  66. combined works!
  67. </ng-template>
  68. </ng-container>
  69. <ng-container ngbNavItem="background">
  70. <button ngbNavLink>Hintergrund</button>
  71. <ng-template ngbNavContent>
  72. <!-- <class></class> -->
  73. background works!
  74. </ng-template>
  75. </ng-container>
  76. <ng-container ngbNavItem="stroy">
  77. <button ngbNavLink>Geschichte</button>
  78. <ng-template ngbNavContent>
  79. <!-- <class></class> -->
  80. story works!
  81. </ng-template>
  82. </ng-container>
  83. </div>
  84. <div [ngbNavOutlet]="nav" class="outlet"></div>
  85. </div>
  86. </div>