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

Skip to content
Snippets Groups Projects
markDownViewer.component.html 16 KiB
Newer Older
Michael Breu's avatar
Michael Breu committed
<div *ngIf="exercise">
    <div class="modal fade" id="mdModal">
        <div class="modal-dialog modal-lg modal-dialog-centered">
            <div class="modal-content">
                <!-- Modal Header -->
                <div class="modal-header">README
                </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> <!-- modal rating end-->

                                <div *ngIf="exercise.rating"
                                    style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
                                    <div style="float: left;">
                                        <div><fa-icon icon="eye"></fa-icon></div>
                                        <!-- <div class="onhoverIconDisplay"><p class="card-text" jhiTranslate="exercise.details.views"></p></div> -->

                                    </div>
                                    <div class="star-container">
                                        <span>
                                            {{exercise.views}}
                                        </span>
                                    </div>
                                </div> <!-- modal views end-->

                                <div *ngIf="exercise.rating"
                                    style="float: left; width: 100%; margin-bottom: 5px; padding-top: 15px;">
                                    <div style="float: left;">
                                        <fa-icon icon="download"></fa-icon>
                                    </div>
                                    <div class="star-container">
                                        <span>
                                            {{exercise.downloads}}
                                        </span>
                                    </div>
                                </div> <!-- modal views end-->


                            </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.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>
                                        </tr>
                                    </ng-container>

                                    <ng-container *ngIf="exercise.contributor">
                                        <tr *ngIf="exercise.contributor.length > 0">
                                            <td *ngIf="exercise.contributor.length === 1"
                                                jhiTranslate="exercise.metadata.contributorSingular"
                                                class="metadata-table-description">
                                            </td>
                                            <td *ngIf="exercise.contributor.length > 1"
                                                jhiTranslate="exercise.metadata.contributorsPlural"
                                                class="metadata-table-description">
                                            </td>
                                        </tr>
                                    </ng-container>

                                    <ng-container *ngIf="exercise.publisher">
                                        <tr *ngIf="exercise.publisher.length > 0">
                                            <td *ngIf="exercise.publisher.length === 1"
                                                jhiTranslate="exercise.metadata.publisherSingular"
                                                class="metadata-table-description">
                                            </td>
                                            <td *ngIf="exercise.publisher.length > 1"
                                                jhiTranslate="exercise.metadata.publisherPlural"
                                                class="metadata-table-description">
                                            </td>
                                        </tr>
                                    </ng-container>

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

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

                                    <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.requires">
                                        <tr *ngIf="exercise.requires.length > 0">
                                            <td jhiTranslate="exercise.metadata.requires"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value"
                                                [innerHTML]="arrayToString(exercise.requires)">
                                            </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>

                                    <tr *ngIf="exercise.difficulty">
                                        <td jhiTranslate="exercise.metadata.difficulty"
                                            class="metadata-table-description">
                                        </td>
                                        <td class="metadata-table-value">
                                            {{'exercise.metadata.' + exercise.difficulty | translate }}
                                        </td>
                                    </tr>

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

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

                                    <tr *ngIf="exercise.type">
                                        <td jhiTranslate="exercise.metadata.type" class="metadata-table-description">
                                        </td>
                                        <td class="metadata-table-value">
                                            {{'exercise.metadata.' + exercise.type | translate }}
                                        </td>
                                    </tr>

                                    <tr *ngIf="exercise.structure">
                                        <td jhiTranslate="exercise.metadata.structure" class="metadata-table-description">
                                        </td>
                                        <td class="metadata-table-value">
                                            {{'exercise.metadata.' + exercise.structure | translate }}
                                        </td>
                                    </tr>

                                    <tr *ngIf="exercise.status">
                                        <td jhiTranslate="exercise.metadata.status" class="metadata-table-description">
                                        </td>
                                        <td class="metadata-table-value">
                                            {{'exercise.metadata.' + exercise.status | translate }}
                                        </td>
                                    </tr>

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

                                    <ng-container *ngIf="exercise.lastUpdate">
                                        <tr *ngIf="exercise.lastUpdate">
                                            <td jhiTranslate="exercise.metadata.lastUpdate"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value">
                                                {{exercise.lastUpdate.toLocaleString()}}
                                            </td>
                                        </tr>
                                    </ng-container>
                                    <ng-container *ngIf="exercise.version">
                                        <tr>
                                            <td jhiTranslate="exercise.metadata.version"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value">
                                                {{exercise.version}}
                                            </td>
                                        </tr>
                                    </ng-container>
                                    <!-- <ng-container *ngIf="exercise.version">
                                        <tr>
                                            <td jhiTranslate="exercise.metadata.metadataVersion"
                                                class="metadata-table-description">
                                            </td>
                                            <td class="metadata-table-value">
                                                {{exercise.metadataVersion}}
                                            </td>
                                        </tr>
                                    </ng-container> -->



                                </table>

                            </div>

                            <div class="col-6 col-md-4"></div>
                        </div>
                    </div>
                </div>

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

            </div>
        </div>
    </div>
</div>