This is the codeAbility Sharing Platform! Learn more about the codeAbility Sharing Platform.

Skip to content
Snippets Groups Projects
exercise-details.component.html 10.4 KiB
Newer Older
<div *ngIf="exercise">
    <div class="modal fade" id="myModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">

                <!-- Modal Header -->
                <div class="modal-header">
                    <img class="card-img-top col-md-3" src="{{exercise.imageURL}}" alt="exercise image"
                         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-6 col-md-4" style="margin-bottom: 15px;">
                                <p style="text-align: left;"><strong
                                    jhiTranslate="exercise.details.details"></strong></p>
                                <hr>

                                <!-- modal rating-->
                                <div *ngIf="exercise.rating" style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
                                    <div style="float: left;">
                                        <p class="card-text" jhiTranslate="exercise.details.rating"></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>
                                    <!--<div class="rate">
                                        <input type="radio" id="modal-star5" name="rate" value="5" />
                                        <label for="modal-star5" title="text">5 stars</label>
                                        <input type="radio" id="modal-star4" name="rate" value="4" />
                                        <label for="modal-star4" title="text">4 stars</label>
                                        <input type="radio" id="modal-star3" name="rate" value="3" />
                                        <label for="modal-star3" title="text">3 stars</label>
                                        <input type="radio" id="modal-star2" name="rate" value="2" />
                                        <label for="modal-star2" title="text">2 stars</label>
                                        <input type="radio" id="modal-star1" name="rate" value="1" />
                                        <label for="modal-star1" title="text">1 star</label>
                                    </div>-->
                                </div> <!-- modal rating end-->

                                <!-- 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;">
                                        <input class="form-check-input" type="checkbox" value=""
                                               id="modal-defaultCheck1">
                                        <label class="form-check-label" for="modal-defaultCheck1"></label>
                                    </div>
                                </div> <!-- modal bookmark end-->

                                <button type="button" class="btn btn-outline-secondary"
                                        style="display: block; margin-bottom: 5px;"
                                        jhiTranslate="exercise.details.hitDetails">
                                </button>

                                <button type="button" class="btn btn-outline-secondary"
                                        style="display: block; margin-bottom: 5px;"
                                        jhiTranslate="exercise.details.allExercises">
                                </button>

                                <button type="button" class="btn btn-outline-secondary"
                                        style="display: block;">
                                    Git
                                </button>
                            </div>

                            <div class="col-12 col-md-8">
                                <p style="text-align: left;">
                                    <strong jhiTranslate="exercise.metadata.metadata"></strong></p>
                                <hr>

                                <table class="metadata-table">
                                    <ng-container *ngIf="exercise.programmingLanguages">
                                        <tr *ngIf="exercise.programmingLanguages.length > 0">
                                            <td *ngIf="exercise.programmingLanguages.length === 1"
                                                jhiTranslate="exercise.metadata.programmingLanguageSingular"
                                                class="metadata-table-description">
                                            </td>
                                            <td *ngIf="exercise.programmingLanguages.length > 1"
                                                jhiTranslate="exercise.metadata.programmingLanguagesPlural"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value"
                                                [innerHTML]="arrayToString(exercise.programmingLanguages)">
                                            </td>
                                        </tr>
                                    </ng-container>

                                    <ng-container *ngIf="exercise.creators">
                                        <tr *ngIf="exercise.creators.length > 0">
                                            <td *ngIf="exercise.creators.length === 1"
                                                jhiTranslate="exercise.metadata.creatorSingular"
                                                class="metadata-table-description">
                                            </td>
                                            <td *ngIf="exercise.creators.length > 1"
                                                jhiTranslate="exercise.metadata.creatorsPlural"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value"
                                                [innerHTML]="arrayToString(exercise.creators.map(getPersonName))">
                                            </td>
                                        </tr>
                                    </ng-container>

                                    <ng-container *ngIf="exercise.lastUpdate">
                                        <tr *ngIf="exercise.lastUpdate.length > 0">
                                            <td jhiTranslate="exercise.metadata.lastUpdate"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value">
                                                {{exercise.lastUpdate}}
                                            </td>
                                        </tr>
                                    </ng-container>

                                    <tr *ngIf="exercise.license.length > 0">
                                        <td jhiTranslate="exercise.metadata.license"
                                            class="metadata-table-description">
                                        </td>
                                        <td class="metadata-table-value">
                                            {{exercise.license}}
                                        </td>
                                    </tr>
                                </table>

                            </div>

                            <div class="col-6 col-md-4"></div>
                            <div class="col-12 col-md-8">
                                <p style="text-align: left;"><strong jhiTranslate="exercise.export.export"></strong>
                                </p>
                                <hr>
                                <a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true"
                                   style="float: left; margin-right: 5px; margin-top: 5px;"
                                   jhiTranslate="exercise.export.artemis"></a>
                                <a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true"
                                   style="float: left; margin-right: 5px; margin-top: 5px;"
                                   jhiTranslate="exercise.export.latex"></a>
                                <a href="#" class="btn btn-outline-secondary" role="button" aria-pressed="true"
                                   style="float: left; margin-right: 5px; margin-top: 5px;"
                                   jhiTranslate="exercise.export.download"></a>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- Modal footer -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal"
                            jhiTranslate="exercise.close"></button>