exercise-details.component.html

<div *ngIf="exercise">
  <div class="modal fade" id="myModal">
    <div class="modal-dialog modal-lg modal-dialog-centered">
      <div class="modal-content">
        <ng-template #helpComingSoon> {{ 'exercise.comingSoon' | translate }}</ng-template>

        <!-- Modal Header -->
        <div class="modal-header">
          <img
            class="card-img-top col-3"
            src="{{ exercise.imageURL }}"
            alt="exercise image"
            (error)="correctImageURL($event)"
            style="height: auto; float: left"
          />
          <h4 class="modal-title">{{ exercise.title }}</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>

        <!-- Modal body -->
        <div class="modal-body">
          <div class="container-fluid">
            <div *ngIf="exercise.description" class="row">
              <p style="padding-bottom: 15px; text-align: justify">{{ exercise.description }}</p>
            </div>
            <div class="row">
              <div class="col-sm-12 col-md-12 col-lg-6" style="margin-bottom: 15px">
                <p style="text-align: left"><strong jhiTranslate="exercise.details.details"></strong></p>
                <hr />

                <!-- modal rating-->
                <div *ngIf="exercise.rating" class="positionRating">
                  <div [ngbTooltip]="helpForRating" style="float: left">
                    <p class="card-text" jhiTranslate="exercise.details.accuracy"></p>
                  </div>
                  <div class="star-container">
                    <span
                      class="star"
                      *ngFor="let starNumber of [1, 2, 3, 4, 5]"
                      [ngClass]="{ 'star-marked': exercise.rating >= starNumber, 'star-unmarked': exercise.rating < starNumber }"
                    >
                    </span>
                  </div>
                  <ng-template #helpForRating> {{ 'exercise.details.rating' | translate }} </ng-template>
                </div>
                <!-- modal rating end-->

                <div *ngIf="!exercise.userHasLiked" class="positionRating">
                  <div style="float: left">
                    <div>
                      <button
                        [ngbTooltip]="helpForLike"
                        *ngIf="isAuthenticated()"
                        type="button"
                        class="btn positionLike"
                        (click)="likeAction()"
                        [disabled]="!isAuthenticated()"
                      >
                        <fa-icon [icon]="['far', 'heart']"></fa-icon>
                      </button>
                      <span [ngbTooltip]="helpForLikeNotLoggedIn">
                        <button *ngIf="!isAuthenticated()" type="button" class="btn positionLike" (click)="likeAction()" [disabled]="true">
                          <fa-icon [icon]="['far', 'heart']"></fa-icon>
                        </button>
                      </span>
                    </div>
                  </div>
                  <div class="star-container">
                    <span>
                      {{ exercise.numberOfLikes }}
                    </span>
                  </div>

                  <ng-template #helpForLike> {{ 'exercise.details.like' | translate }}</ng-template>
                  <ng-template #helpForLikeNotLoggedIn> {{ 'exercise.details.likeLogin' | translate }} </ng-template>
                </div>
                <!-- modal views end-->

                <div *ngIf="exercise.userHasLiked" class="positionRating">
                  <div style="float: left">
                    <div>
                      <button
                        [ngbTooltip]="helpForUnLike"
                        *ngIf="exercise.userHasLiked"
                        type="button"
                        class="btn positionLike"
                        (click)="unlikeAction()"
                        [disabled]="!isAuthenticated()"
                      >
                        <fa-icon class="rediconcolor" icon="heart"></fa-icon>
                      </button>
                    </div>
                  </div>
                  <div class="star-container">
                    <span>
                      {{ exercise.numberOfLikes }}
                    </span>
                  </div>
                  <ng-template #helpForUnLike> {{ 'exercise.details.unlike' | translate }} </ng-template>
                </div>

                <div *ngIf="exercise.views" class="positionRating">
                  <div style="float: left">
                    <div [ngbTooltip]="helpForViews">
                      <fa-icon icon="eye"></fa-icon>
                    </div>
                  </div>
                  <div class="star-container">
                    <span>
                      {{ exercise.views }}
                    </span>
                  </div>
                  <ng-template #helpForViews> {{ 'exercise.details.views' | translate }}</ng-template>
                </div>
                <!-- modal views end-->

                <div *ngIf="exercise.downloads >= 0" class="positionRating">
                  <div [ngbTooltip]="helpForDownloads" style="float: left">
                    <fa-icon icon="download"></fa-icon>
                  </div>
                  <div class="star-container">
                    <span>
                      {{ exercise.downloads }}
                    </span>
                  </div>
                  <ng-template #helpForDownloads> {{ 'exercise.details.downloads' | translate }}</ng-template>
                </div>
                <!-- modal views end-->

                <div *ngIf="exercise.numberOfWatchlistEntries >= 0" class="positionRating">
                  <div [ngbTooltip]="helpForWatchlists" style="float: left">
                    <fa-icon icon="star"></fa-icon>
                  </div>
                  <div class="star-container">
                    <span>
                      {{ exercise.numberOfWatchlistEntries }}
                    </span>
                  </div>
                  <ng-template #helpForWatchlists> {{ 'exercise.details.watchlists' | translate }}</ng-template>
                </div>

                <!-- modal bookmark-->
                <div style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px">
                  <div style="float: left">
                    <p class="card-text" jhiTranslate="exercise.details.bookmark"></p>
                  </div>
                  <div class="form-check" style="float: right; padding-right: 10px" placement="right">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      [checked]="isOnCurrentWatchlist(exercise)"
                      (change)="handleForCurrentWatchlist(exercise)"
                      value=""
                      id="modal-defaultCheck1"
                    />
                    <label class="form-check-label" for="modal-defaultCheck1"></label>
                  </div>
                </div>
                <!-- modal bookmark end-->

                <div *ngIf="exercise.originalResult.file.parentId" style="float: left; width: 100%; padding-top: 15px; margin-bottom: 25px">
                  <ng-template #helpToParent data-container="body"> {{ 'exercise.help.toParent' | translate }} </ng-template>
                  <fa-icon
                    style="padding: 5px 0px 0px 5px; float: left"
                    [ngbTooltip]="helpToParent"
                    container="body"
                    [icon]="treeIcon"
                    (click)="toParent(exercise.originalResult.file.parentId)"
                  ></fa-icon>
                </div>

                <button
                  *ngIf="hasChildren()"
                  type="button"
                  class="btn btn-outline-secondary"
                  (click)="searchChildren(exercise.originalResult.exerciseId)"
                  data-dismiss="modal"
                  style="display: block; margin-bottom: 5px"
                  jhiTranslate="exercise.details.allExercises"
                ></button>
                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  style="display: block"
                  (click)="openLink(exercise.gitlabURL)"
                  jhiTranslate="exercise.details.git"
                ></button>

                <button
                  type="button"
                  class="btn btn-outline-secondary"
                  style="margin-top: 20px"
                  data-toggle="modal"
                  data-target="#mdModal"
                  (click)="selectREADME()"
                >
                  README
                </button>
              </div>

              <jhi-exercise-metadata class="col-sm-12 col-md-12 col-lg-6" [exercise]="exercise"> </jhi-exercise-metadata>
            </div>
            <div class="row">
              <div class="col-12">
                <p style="text-align: left; margin-top: 20px"><strong jhiTranslate="exercise.export.export"></strong></p>
                <hr />
              </div>
              <div class="col-6">
                <span>
                  <a
                    class="btn btn-outline-secondary"
                    role="button"
                    aria-pressed="true"
                    style="float: left; margin-right: 5px; margin-top: 5px"
                    (click)="download()"
                    jhiTranslate="exercise.export.download"
                  ></a>
                  <label style="padding-top: 10px" for="withChildren">
                    {{ 'exercise.details.withChildren' | translate }}
                    <input type="checkbox" [hidden]="false" [(ngModel)]="downloadWithChildren" id="withChildren" />
                  </label>
                </span>
              </div>
              <a
                *ngFor="let action of exercise.originalResult.supportedActions"
                class="btn btn-outline-secondary positionAction col-6"
                role="button"
                aria-pressed="true"
                (click)="startAction(action, exercise)"
                >{{ action.commandName }}</a
              >
              <div class="col-6" placement="bottom">
                <span [ngbTooltip]="helpComingSoon">
                  <button
                    *ngIf="hasChildren()"
                    type="button"
                    class="btn btn-outline-secondary positionAction"
                    jhiTranslate="exercise.export.latex"
                    disabled
                  ></button>
                </span>
              </div>
            </div>
          </div>
        </div>

        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="btn btn-outline-secondary" data-dismiss="modal" jhiTranslate="exercise.close"></button>
        </div>
      </div>
    </div>
  </div>
  <jhi-markdown-viewer [exercise]="exercise"></jhi-markdown-viewer>
</div>