exercise-list.page.html 6.68 KB
Newer Older
1 2
<ion-header>
    <ion-toolbar>
3 4
        <ion-buttons slot="start">
            <div class="home-logo">
5
                <a (click)="HelperService.goToHomePage(navCtrl)">
6 7 8 9 10 11 12 13 14 15 16 17
                    <img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
                </a>
            </div>
            <div>
                <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
                <ion-title>{{ 'EXERCISE_LIST' | translate }}
                </ion-title>
            </div>
        </ion-buttons>
        <ion-buttons slot="end">
            <ion-menu-button autoHide="false"></ion-menu-button>
        </ion-buttons>
18 19 20 21 22 23
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-grid>
        <ion-row>
24
            <ion-col>
25
                <label>
26 27
                    <input type="search" (ngModelChange)="filterExercises($event.toString())"
                           class="searchbar" placeholder="{{ 'SEARCH' | translate }}" [(ngModel)]="currentSearchValue"/>
28 29
                </label>
            </ion-col>
30 31
        </ion-row>
        <ion-row>
32 33
            <ion-col>
                <ion-label>{{ 'SORT_BY' | translate }}</ion-label>
34
                <ion-select [(ngModel)]="currentSortingCategory" (ngModelChange)="sortExercises()">
35 36
                    <ion-select-option *ngFor="let key of HelperService.getEnumValues(SortingCategory)" value="{{key}}">
                        {{ key | translate }}
37 38 39 40
                    </ion-select-option>
                </ion-select>
            </ion-col>
        </ion-row>
41 42
        <ion-row>
            <ion-col class="toggle-menu">
43
                <button *ngIf="showVocabularyCorpus; else dropright" (click)="toggleVocCorpus()">
44 45 46
                    <ion-icon name="arrow-dropdown"></ion-icon>
                </button>
                <ng-template #dropright>
47
                    <button (click)="toggleVocCorpus()">
48 49 50 51
                        <ion-icon name="arrow-dropright"></ion-icon>
                    </button>
                </ng-template>
                <div>
52
                    <h4 (click)="toggleVocCorpus()">{{ 'VOCABULARY_CHECK' | translate }}</h4>
53 54 55
                </div>
            </ion-col>
        </ion-row>
56
        <ion-row id="vocCorpus" style="display: none">
57 58
            <ion-col>
                <ion-grid style="max-width: 30em; text-align: left">
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105
                    <ion-row>
                        <ion-col>
                            <label>
                                <h6>{{ 'VOCABULARY_REFERENCE_CORPUS' | translate }}</h6>
                                <select [(ngModel)]="vocService.currentReferenceVocabulary"
                                        name="currentReferenceVocabulary"
                                        (change)="vocService.updateReferenceRange(); hasVocChanged = true">
                                    <option *ngFor="let key of ObjectKeys(vocService.refVocMap)"
                                            [value]=VocabularyCorpus[key]>
                                        {{ VocabularyCorpusTranslation[key] | translate}}
                                        ({{vocService.refVocMap[key].totalCount}}
                                        {{'VOCABULARY_ITEMS' | translate}})
                                    </option>
                                </select>
                            </label>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <label>
                                <h6>{{ 'VOCABULARY_REFERENCE_RANGE_START' | translate }}
                                    <select
                                            *ngIf="!vocService.getCurrentReferenceVocabulary()?.hasFrequencyOrder; else hasFrequencyOrder"
                                            [(ngModel)]="vocService.frequencyUpperBound" name="frequencyUpperBound"
                                            (change)="hasVocChanged = true">
                                        <option
                                                *ngFor="let subcount of vocService.getCurrentReferenceVocabulary()?.possibleSubcounts"
                                                [value]=subcount>
                                            {{subcount}}
                                        </option>
                                    </select>
                                    <br>{{'VOCABULARY_REFERENCE_RANGE_END' | translate}}</h6>
                                <ng-template #hasFrequencyOrder>
                                    <input type="number" [(ngModel)]="vocService.frequencyUpperBound"
                                           (change)="hasVocChanged = true"/>
                                </ng-template>
                            </label>
                        </ion-col>
                    </ion-row>
                    <ion-row>
                        <ion-col>
                            <ion-button (click)="getExerciseList()"
                                        disabled="{{!hasVocChanged}}">{{ 'APPLY' | translate }}
                            </ion-button>
                        </ion-col>
                    </ion-row>
                </ion-grid>
106 107 108
            </ion-col>
        </ion-row>
        <ion-row>
109
        </ion-row>
110
        <ion-row *ngIf="exercises?.length; else loading">
111 112 113 114
            <ion-grid style="padding: 0">
                <ion-row *ngFor="let exercise of exercises" (click)="showExercise(exercise)" class="exercises">
                    <ion-grid style="padding: 0">
                        <ion-row style="text-align: left">
115
                            <ion-col size="4">
116 117
                                {{exercise.exercise_type_translation}}
                            </ion-col>
118
                            <ion-col size="4">
119 120
                                {{ getDateString(exercise.last_access_time) }}
                            </ion-col>
121
                            <ion-col size="2">
122 123
                                {{Math.round(exercise.text_complexity)}}
                            </ion-col>
124
                            <ion-col size="2">
125 126 127 128
                                {{getMatchingDegree(exercise)}}
                            </ion-col>
                        </ion-row>
                        <ion-row>
129
                            {{exercise.work_author}}
130 131
                        </ion-row>
                        <ion-row>
132
                            {{exercise.work_title}}
133 134 135 136
                        </ion-row>
                    </ion-grid>
                </ion-row>
            </ion-grid>
137
        </ion-row>
138
        <ng-template #loading>
139
            <h2 *ngIf="!HelperService.isLoading">{{ 'NO_EXERCISES_FOUND' | translate }}</h2>
140 141
        </ng-template>
    </ion-grid>
142
</ion-content>