hospital-content.component.html 9.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <div class="hospitalContent-w">
  2. <div class="container">
  3. <div class="row">
  4. <div class="containerContent-w">
  5. <ng-template [ngIf]="authSer.arabicTemplate" [ngIfElse]="englishTemplate">
  6. <div class="row">
  7. <div class="col-6 col-md-3">
  8. <div class="recordsContent-w">
  9. <!-- <ul class="list-unstyled">
  10. <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
  11. {{hospital.name}}
  12. <div *ngIf="i == expandedIndex">
  13. <div class="containetttt" *ngFor="let field of hospital['fields']">
  14. <ul class="list-unstyled nestedMenu">
  15. <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
  16. {{field.title}}
  17. </li>
  18. </ul>
  19. </div>
  20. </div>
  21. </li>
  22. </ul> -->
  23. <!-- <div class="accordion" id="accordionExample">
  24. <div class="panel-group testGroup-w" *ngFor="let hospital of hospitalCenters; let i = index" id="accordion">
  25. <div class="panel panel-default">
  26. <div class="panel-heading accordion-toggle collapsed" [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
  27. <h4 class="panel-title">{{hospital.name}}</h4>
  28. </div>
  29. <div *ngFor="let field of hospital['fields']" [ngClass]="{'show' : i == 0}" id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
  30. <div class="panel-body testBody-w">
  31. <ul class="list-unstyled nestedMenu">
  32. <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' ">
  33. {{field.title}}
  34. </li>
  35. </ul>
  36. </div>
  37. </div>
  38. </div>
  39. </div>
  40. </div> -->
  41. <div id="accordion">
  42. <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
  43. <div class="card-header" [attr.id]="'heading'+(i+1)">
  44. <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
  45. <h4 class="panel-title">{{hospital.name}}</h4>
  46. </button>
  47. </div>
  48. <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
  49. <div class="card-body testBody-w">
  50. <ul class="list-unstyled">
  51. <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:right;margin-right:-23px">
  52. {{field.title}}
  53. </li>
  54. </ul>
  55. </div>
  56. </div>
  57. </div>
  58. </div>
  59. </div>
  60. </div>
  61. <div class="col-6 col-md-9">
  62. <div class="information">
  63. <h2>{{detailsField.title}}</h2>
  64. <p [innerHTML]="detailsField.description"></p>
  65. </div>
  66. </div>
  67. </div>
  68. </ng-template>
  69. <ng-template #englishTemplate>
  70. <div class="container" style="direction:ltr">
  71. <div class="row">
  72. <div class="col-6 col-md-3">
  73. <div class="recordsContent-w">
  74. <!-- <div class="accordion nothome" id="accordionExample">
  75. <div class="panel-group testGroupEn-w" *ngFor="let hospital of hospitalCenters; let i = index" id="accordion">
  76. <div class="panel panel-default">
  77. <div class="panel-headingEn accordion-toggle collapsed" [ngClass]="{ 'collapsed' : i == 0 }" id="{{ 'heading' + (i+1) }}" data-toggle="collapse" [attr.data-target]=" '#collapse' + (i+1) " [attr.aria-controls] = " 'collapse' + (i+1) ">
  78. <h4 class="panel-title">{{hospital.name_en}}</h4>
  79. </div>
  80. <div *ngFor="let field of hospital['fields']" [ngClass]="{'show' : i == 0}" id="{{ 'collapse'+(i+1) }}" class="panel-collapse collapse" [attr.aria-labelledby] = " 'heading' + (i+1) " data-parent="#accordionExample">
  81. <div class="panel-body testBodyEn-w">
  82. <ul class="list-unstyled nestedMenu">
  83. <li (click)="showDescriptionDetails(field)">
  84. {{field.title_en}}
  85. </li>
  86. </ul>
  87. </div>
  88. </div>
  89. </div>
  90. </div>
  91. </div> -->
  92. <div id="accordion">
  93. <div class="card" *ngFor="let hospital of hospitalCenters; let i = index">
  94. <div class="card-header" [attr.id]="'heading'+(i+1)">
  95. <h5 class="mb-0">
  96. <button class="btn btn-link" data-toggle="collapse" [attr.data-target]="'#collapse'+(i+1)" [attr.aria-expanded]="(i+1)==1 ? true :false" [attr.aria-controls]="'collapse'+(i+1)">
  97. <h4 class="panel-title">{{hospital.name_en}}</h4>
  98. </button>
  99. </h5>
  100. </div>
  101. <div *ngFor="let field of hospital['fields']" [attr.id]="'collapse'+(i+1)" class="collapse" [ngClass]="{'show' : (i+1) == 1}" [attr.aria-labelledby]="'heading' + (i+1)" data-parent="#accordion">
  102. <div class="card-body testBody-w">
  103. <ul class="list-unstyled nestedMenu">
  104. <li (click)="showDescriptionDetails(field)" [className]=" authSer.arabicTemplate ? '' : 'achievementsLangHeading-w' " style="text-align:left">
  105. {{field.title_en}}
  106. </li>
  107. </ul>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. <!-- <ul class="list-unstyled">
  113. <li *ngFor="let hospital of hospitalCenters; let i = index" (click)="open(hospital,i)" style="cursor: pointer;">
  114. {{hospital.name_en}}
  115. <div *ngIf="i == expandedIndex">
  116. <div class="containetttt" c>
  117. <ul class="list-unstyled nestedMenu">
  118. <li (click)="showDescriptionDetails(field)">
  119. {{field.title_en}}
  120. </li>
  121. </ul>
  122. </div>
  123. </div>
  124. </li>
  125. </ul> -->
  126. </div>
  127. </div>
  128. <div class="col-6 col-md-9">
  129. <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
  130. <h2>{{detailsField.title_en}}</h2>
  131. <p>{{detailsField.description_en}}</p>
  132. </div>
  133. </div>
  134. <div class="col-6 col-md-9">
  135. <div class="information" [className]=" authSer.arabicTemplate ? '' : 'achievementsLang-w' ">
  136. <h2>{{detailsField.title_en}}</h2>
  137. <p>{{detailsField.description_en}}</p>
  138. </div>
  139. </div>
  140. </div>
  141. </div>
  142. </ng-template>
  143. </div>
  144. </div>
  145. </div>
  146. </div>