show-text.page.html 4.5 KB
Newer Older
1 2 3 4
<ion-header>
    <ion-toolbar>
        <div class="toolbar-left">
            <ion-back-button icon="arrow-round-back" defaultHref="home"></ion-back-button>
5 6
            <ion-title>{{corpusService.currentCorpus?.title}}
                {{corpusService.currentUrn?.split(":")[corpusService.currentUrn?.split(":").length - 1]}}
7 8 9 10 11 12 13 14 15 16 17 18 19
            </ion-title>
        </div>
        <div class="toolbar-right">
            <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
            <button (click)="HelperService.goToHomePage(navCtrl)">
                <ion-icon name="home"></ion-icon>
            </button>
        </div>
    </ion-toolbar>
</ion-header>


<ion-content padding>
20
    <ion-grid *ngIf="corpusService.currentText.length > 0; else loading">
21 22
        <ion-row>
            <ion-col>
23
                <ion-button
24
                        (click)="HelperService.goToExerciseParametersPage(navCtrl).then()">{{ "EXERCISE_SET_PARAMETERS" | translate}}</ion-button>
25 26
            </ion-col>
            <ion-col>
27 28
                <ion-button
                        (click)="HelperService.goToVocabularyCheckPage(navCtrl)">{{ 'VOCABULARY_CHECK' | translate }}</ion-button>
29 30 31 32
            </ion-col>
        </ion-row>
        <ion-row *ngIf="HelperService.isVocabularyCheck">
            <ion-col>
33
                <label>
34
                    <input type="checkbox" [(ngModel)]="highlightOOV"/>
35
                    <span class="checkbox">{{ "TEXT_SHOW_OOV" | translate}}</span>
36 37 38 39
                </label>
                <br>
            </ion-col>
        </ion-row>
40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63
        <ion-row>
            <ion-col><br></ion-col>
        </ion-row>
        <ion-row>
            <ion-col>
                <ion-button (click)="generateDownloadLink(FileType[FileType.pdf])">
                    {{ 'GENERATE_FILE_PDF' | translate }}
                </ion-button>
            </ion-col>
            <ion-col>
                <ion-button (click)="generateDownloadLink(FileType[FileType.docx])">
                    {{ 'GENERATE_FILE_DOCX' | translate }}
                </ion-button>
            </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>
64 65 66 67 68 69 70 71 72 73
        <ion-row>
            <ion-col class="toggle-menu">
                <button *ngIf="showTextComplexity; else dropright" (click)="showTextComplexity = !showTextComplexity">
                    <ion-icon name="arrow-dropdown"></ion-icon>
                </button>
                <ng-template #dropright>
                    <button (click)="showTextComplexity = !showTextComplexity">
                        <ion-icon name="arrow-dropright"></ion-icon>
                    </button>
                </ng-template>
74 75 76
                <div>
                    <h2 (click)="showTextComplexity = !showTextComplexity">{{ 'TEXT_COMPLEXITY' | translate }}</h2>
                </div>
77 78 79 80 81 82 83 84 85 86 87 88
            </ion-col>
        </ion-row>
        <div *ngIf="showTextComplexity">
            <ion-row>
                <ion-col *ngFor="let key of ObjectKeys(textComplexityMap)">
                    <label>
                        <span>{{ textComplexityMap[key] | translate }}</span>
                        <span>{{corpusService.annisResponse.text_complexity[key]}}</span>
                    </label>
                </ion-col>
            </ion-row>
        </div>
89 90 91
        <ion-row>
            <ion-col class="text">
                <div *ngIf="highlightOOV; else noOOV">
Konstantin Schulz's avatar
Konstantin Schulz committed
92
                    <!-- do not add whitespace/newline etc. between the span elements!                   -->
93
                    <span *ngFor="let node of corpusService.annisResponse.nodes; index as i"><span class="tok"
94
                                                                                                   [class.oov]="node.is_oov">{{node.annis_tok}}</span>{{ getWhiteSpace(i) }}</span>
95 96
                </div>
                <ng-template #noOOV>
97
                    <span class="tok">{{corpusService.currentText}}</span>
98 99 100 101 102 103 104
                </ng-template>
            </ion-col>
        </ion-row>
    </ion-grid>
    <ng-template #loading>
        <ion-spinner></ion-spinner>
    </ng-template>
105
</ion-content>