exercise-list.page.html 6.84 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
                    <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">
16
            <ion-menu-button autoHide="false">
17
                <ion-icon name="menu"></ion-icon>
18
            </ion-menu-button>
19
        </ion-buttons>
20 21 22 23 24 25
    </ion-toolbar>
</ion-header>

<ion-content>
    <ion-grid>
        <ion-row>
26
            <ion-col>
27
                <label>
28
                    <input type="search" (ngModelChange)="filterExercises($event.toString())" name="currentSearchValue"
29
                           class="searchbar" placeholder="{{ 'SEARCH' | translate }}" [(ngModel)]="currentSearchValue"/>
30 31
                </label>
            </ion-col>
32 33
        </ion-row>
        <ion-row>
34 35
            <ion-col>
                <ion-label>{{ 'SORT_BY' | translate }}</ion-label>
36 37
                <ion-select [(ngModel)]="currentSortingCategory" (ngModelChange)="sortExercises()"
                            name="currentSortingCategory">
38 39
                    <ion-select-option *ngFor="let key of HelperService.getEnumValues(SortingCategory)" value="{{key}}">
                        {{ key | translate }}
40 41 42 43
                    </ion-select-option>
                </ion-select>
            </ion-col>
        </ion-row>
44 45
        <ion-row>
            <ion-col class="toggle-menu">
46
                <button *ngIf="showVocabularyCorpus; else dropright" (click)="toggleVocCorpus()">
47
                    <ion-icon name="caret-down"></ion-icon>
48 49
                </button>
                <ng-template #dropright>
50
                    <button (click)="toggleVocCorpus()">
51
                        <ion-icon name="caret-forward"></ion-icon>
52 53 54
                    </button>
                </ng-template>
                <div>
55
                    <h4 (click)="toggleVocCorpus()">{{ 'VOCABULARY_CHECK' | translate }}</h4>
56 57 58
                </div>
            </ion-col>
        </ion-row>
59
        <ion-row id="vocCorpus" style="display: none">
60 61
            <ion-col>
                <ion-grid style="max-width: 30em; text-align: left">
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
                    <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"
96
                                           name="frequencyUpperBound" (change)="hasVocChanged = true"/>
97 98 99 100 101 102 103 104 105 106 107 108
                                </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>
109 110 111
            </ion-col>
        </ion-row>
        <ion-row>
112
        </ion-row>
113
        <ion-row *ngIf="exercises?.length; else loading">
114 115 116 117
            <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">
118
                            <ion-col size="4">
119 120
                                {{exercise.exercise_type_translation}}
                            </ion-col>
121
                            <ion-col size="4">
122 123
                                {{ getDateString(exercise.last_access_time) }}
                            </ion-col>
124
                            <ion-col size="2">
125 126
                                {{Math.round(exercise.text_complexity)}}
                            </ion-col>
127
                            <ion-col size="2">
128 129 130 131
                                {{getMatchingDegree(exercise)}}
                            </ion-col>
                        </ion-row>
                        <ion-row>
132
                            {{exercise.work_author}}
133 134
                        </ion-row>
                        <ion-row>
135
                            {{exercise.work_title}}
136 137 138 139
                        </ion-row>
                    </ion-grid>
                </ion-row>
            </ion-grid>
140
        </ion-row>
141
        <ng-template #loading>
142
            <h2 *ngIf="!HelperService.isLoading">{{ 'NO_EXERCISES_FOUND' | translate }}</h2>
143 144
        </ng-template>
    </ion-grid>
145
</ion-content>