show-text.page.html 5.86 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
                    <img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
                </a>
            </div>
        </ion-buttons>
10
        <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
11 12
        <ion-title *ngIf="corpusService.currentCorpus | async as cc">
            {{cc.title}}
13
            {{corpusService.currentUrn?.split(":")[corpusService.currentUrn?.split(":").length - 1]}}
14
        </ion-title>
15
        <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
    </ion-toolbar>
</ion-header>


24 25
<ion-content class="ion-padding">
    <h2 class="ion-padding">
26 27
        {{'SHOW_TEXT_TITLE' | translate}}
    </h2>
28
    <ion-grid *ngIf="corpusService.currentText.length > 0; else loading">
29
        <ion-row *ngIf="HelperService.isVocabularyCheck">
30
            <ion-col style="text-align:left; padding-left:10px;">
31
                <label>
32
                    <input type="checkbox" [(ngModel)]="highlightOOV"/>
33
                    <span class="checkbox">{{ "TEXT_SHOW_OOV" | translate}}</span>
34 35 36 37
                </label>
                <br>
            </ion-col>
        </ion-row>
38
        <ion-row>
39 40 41 42
            <ion-col class="text" size="8">
                <div *ngIf="highlightOOV; else noOOV">
                    <!-- do not add whitespace/newline etc. between the span elements!                   -->
                    <span *ngFor="let node of corpusService.annisResponse.nodes; index as i"><span class="tok"
43
                                                                                                   [class.oov]="node.is_oov">{{node.annis_tok}}</span>{{ getWhiteSpace(i) }}</span>
44 45 46 47
                </div>
                <ng-template #noOOV>
                    <span class="tok">{{corpusService.currentText}}</span>
                </ng-template>
48
            </ion-col>
49 50
            <ion-col class="toggle-menu" style="text-align:left; padding: 0">
                <ion-grid style="padding: 0">
51 52
                    <ion-row>
                        <button *ngIf="showTextComplexity; else dropright"
53
                                (click)="showTextComplexity = !showTextComplexity">
54
                            <ion-icon name="caret-down"></ion-icon>
55 56 57
                        </button>
                        <ng-template #dropright>
                            <button (click)="showTextComplexity = !showTextComplexity">
58
                                <ion-icon name="caret-forward"></ion-icon>
59 60 61
                            </button>
                        </ng-template>
                        <div>
62 63
                            <h2 (click)="showTextComplexity = !showTextComplexity"
                                style="padding: 0 0.2em 0.2em 0; margin: 0">
64
                                {{ 'TEXT_COMPLEXITY' | translate }}</h2>
65
                        </div>
66
                        <button (click)="showTextComplexityDoc = !showTextComplexityDoc" style="padding:0.2em;">
67
                            <ion-icon name="help-circle"></ion-icon>
68
                        </button>
69
                    </ion-row>
70 71 72 73 74 75 76 77 78 79 80 81
                    <ion-row *ngIf="showTextComplexity" style="text-align:left; padding: 0 0 1em 0">
                        <ion-grid>
                            <ion-row *ngFor="let key of ObjectKeys(textComplexityMap)">
                                <label>
                                    {{ textComplexityMap[key] | translate }}:
                                    {{corpusService.annisResponse.text_complexity[key]}}
                                </label>
                            </ion-row>
                        </ion-grid>
                    </ion-row>
                    <ion-row *ngIf="showTextComplexityDoc" style="text-align:left; padding: 0 0 1em 0">
                        {{ 'TEXT_COMPLEXITY_DOCUMENTATION' | translate }}
82 83
                    </ion-row>
                    <ion-row>
84
                        <a (click)="generateDownloadLink(FileType[FileType.docx])" style="padding:0.5em;">
85 86 87 88
                            {{ 'GENERATE_FILE_DOCX' | translate }}
                        </a>
                    </ion-row>
                    <ion-row>
89
                        <a (click)="generateDownloadLink(FileType[FileType.pdf])" style="padding:0.5em;">
90 91 92 93
                            {{ 'GENERATE_FILE_PDF' | translate }}
                        </a>
                    </ion-row>
                </ion-grid>
94 95 96 97 98 99 100 101 102 103 104
            </ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-spinner *ngIf="isDownloading"></ion-spinner>
                <!--  hidden download link, do not delete this!
                This is preferable compared to a button click event, because the browser knows from the beginning that
                it is going to be a download (instead of an ordinary link or click).         -->
                <a style="display: none" id="download" href="" download>Download</a>
            </ion-col>
        </ion-row>
105 106
        <ion-row>
        </ion-row>
107
        <ion-row>
108 109
            <ion-col>
                <ion-button (click)="navCtrl.pop()">{{ 'BACK' | translate }}</ion-button>
110
            </ion-col>
111 112 113 114 115 116 117 118
            <ion-col>
                <ion-button (click)="HelperService.goToVocabularyCheckPage(navCtrl)">
                    {{ 'VOCABULARY_CHECK' | translate }}</ion-button>
            </ion-col>
            <ion-col>
                <ion-button (click)="HelperService.goToExerciseParametersPage(navCtrl).then()">
                    {{ "EXERCISE_SET_PARAMETERS" | translate}}</ion-button>
            </ion-col>
119 120 121 122 123
        </ion-row>
    </ion-grid>
    <ng-template #loading>
        <ion-spinner></ion-spinner>
    </ng-template>
124
</ion-content>